みなさんこんにちは!おさかなです!
今回は「【SUUMO】サイトで「デベロッパーツール」を使うと【スーモ】に出会えちゃう?!」について、書いていこうと思います!
それでは、レッツゴー!!!!!
想定読者
・デベロッパーツールの使い方を知りたい方
・ネタサイトで休憩したい方
・スーモくんに会いたい方!
・デベロッパーツールの使い方を知りたい方
・ネタサイトで休憩したい方
・スーモくんに会いたい方!
デベロッパーツールに隠されたスーモ?!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
デベロッパーツールを使うとスーモくんに出会えるらしい!笑
![ナビまる](https://osakanav.com/wp-content/uploads/2019/09/navmaru-2.jpg)
ナビまる
何それ!初耳!
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
(ナビまる先生、ネタサイトには疎いんだな…。)
![](https://osakanav.com/wp-content/uploads/2021/08/bglive-top-160x90.jpg)
【無料】テレビ通話の「背景画像」が見つかる!【Background live】とは?
みなさんこんにちは!おさかなです!今回は「Background live」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・ビデオ通話の背景画像が欲しい方・部屋っぽい背景画像を探している方・...
デベロッパーツールとは?
「デベロッパーツール」とは、Google Chromeに標準搭載されている開発者用の検証ツール(デバッグツール)で、Webサイトのパフォーマンスを向上させるための多くの機能が搭載されています。
WiLL Cloudより引用
↓デベロッパーツールの使い方を学びたい方はこちら
![](https://dotinstall.com/package_img/basic_chrome_dev_v2/screen_1.png)
Chrome Developer Tools入門 (全10回) - プログラミングならドットインストール
Google Chromeに内蔵されているデバッグ用ツールについて学んでいきます。
今回はこれを使って、ちょっと面白い仕掛けのあるサイトを見ていきたいと思います!(おー!)
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/cd534cce11b6c4ce016bb9541126fd08.png)
【SUUMO】不動産売買・住宅購入・賃貸情報ならリクルートの不動産ポータルサイト
【SUUMO(スーモ)】不動産・住宅に関する総合情報サイトです。全国の賃貸情報からマンション・一戸建て・土地などの不動産売買・物件購入情報はもちろん、注文住宅、リフォーム、設備情報に至るまでの豊富な住宅情報で、あなたの幸せな住まい探しをサポートします。
![](https://osakanav.com/wp-content/uploads/2021/08/coding-cat-top-160x90.jpg)
【バーチャル空間】で可愛いネコが「一緒に作業」をしてくれる!?【Coding Cat】とは?【作業用BGM】
みなさんこんにちは!おさかなです!今回は「Coding Cat」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・作業用BGMを探している方・ネコと一緒に作業をしたい方・とにかく癒されたい方...
実際につかってみよう!
それでは早速SUUMOのサイトにアクセスします!
![](https://osakanav.com/wp-content/uploads/2021/10/suumo.png)
「PC版を表示する」という風に出てきますが、ボタンは押さずに「スマホ版」のままでOKです!
![](https://osakanav.com/wp-content/uploads/2021/10/suumo-not.png)
ここでキーボードの「F12」キーを入力しましょう!(えいやあっ!)
![](https://osakanav.com/wp-content/uploads/2021/04/f12.jpg)
すると…?
このように「デベロッパーツール」が起動します。
![](https://osakanav.com/wp-content/uploads/2021/10/Screenshot-from-2021-10-19-18-22-15.png)
次にデベロッパーツールのタブを「Console」に切り替えましょう!(ポチッと!)
![](https://osakanav.com/wp-content/uploads/2021/10/suumo-dev-tool.png)
すると…?
何やらドット絵のスーモくんが現れました!(わああ!)
![](https://osakanav.com/wp-content/uploads/2021/10/Screenshot-from-2021-10-18-19-17-50.png)
(何これかわいい!!!)
![](https://osakanav.com/wp-content/uploads/2021/10/suumo-icon.png)
コードはこんな感じになっているみたいです!
(時々こういう仕掛けのあるサイトありますよね〜!開発者の遊び心を感じます✨)
![](https://osakanav.com/wp-content/uploads/2021/10/suumo-code.gif)
他のキャラクターも隠れていたら、もっと面白そうですね!(うんうん!)
↓スーモのキャラクター一覧
![](https://osakanav.com/wp-content/uploads/cocoon-resources/blog-card-cache/9db076df9be738186cb883cf33e5557c.png)
スーモの部屋 キャラクター|SUUMO(スーモ)
スーモをはじめとしたキャラクターの紹介をしています。
最後にコードコピーして、スーモくん増やしました!(何してんねん…笑)
![](https://osakanav.com/wp-content/uploads/2021/10/suumo-many.gif)
![おさかな](https://osakanav.com/wp-content/uploads/2019/08/osakana.jpg)
おさかな
たまにはネタサイトで息抜きしよう〜!
これで全ての操作は完了です。(やった~!)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました!
![](https://osakanav.com/wp-content/uploads/2021/05/beginners-sql-top-160x90.jpg)
【Beginners' SQLi】ステージ1の「攻略方法」をわかりやすく解説!
みなさんこんにちは!おさかなです!今回は「Beginners' SQLi」について、書いていこうと思います!それでは、レッツゴー!!!!!想定読者・SQLの学習をしたい方・CTFの問題を解きたい方・SQLを活用した...