【お気に入りサイトの作り方が見放題】F12キーでwebサイトの裏側を見よう

webプログラミングの学習をするにあたって、

とりあえず書籍や学習サイトを初めから見てみても

何を言っているのか分からない…

そう感じる方も多いと思います。

基礎をゼロから学ぶよりも先に、

まずは実際に、どう作られているかを知る

こちらの方がはるかに短時間で、

効率的に習得できます。

では、webサイトがどう作られているかを見てみましょう。

ここでは例として今見ているこのページを見てみます。

(※以下、Google chromeでの閲覧を前提としていますが、

大体のブラウザは似たような操作・反応になっています)

１．「F12」キーを押す

キーボードの上の方にある「F12」というキーを押してみてください。

すると下のような画面が右端か下部に出てくると思います。

これがwebサイトの裏側、実態です。

この呪文みたいなモノを書けるようになれば、

webサイトが作れるようになります。

もう少し詳しく見てみましょう。

２．inspectボタンで要素をピックアップ

下の赤丸で囲った、矢印のようなアイコンを一度クリックします。

次に、そのままの状態で、ページ上の

「２．inspectボタンで要素をピックアップ」

の部分をクリックしてみてください。

以下のように一部分が選択された状態

になると思います。

これは、ページ上の今クリックした部分(赤丸で囲った箇所)が、

この書き方(黄線部分)で実現できるという意味になります。

(”<strong>２．inspectボタンで要素をピックアップ</strong>”の箇所です)

３．どういう時に使うか

実際にwebサイトを作る際、

参考にしたいデザインや構成があると思います。

もちろん丸パクリはNGですが、作り方を

見る分には問題ありません。

自分の好きなサイトを細かく見てみて、

実際にどう作られているのかを知り、

参考にしてみてください。

まとめ

・F12キーでwebサイトの裏側が見れる

・Inspectボタンでさらに細かく分析

・気になるサイトの作り方を参考にする