HTML・CSS:他のホームページのHTML・CSSを見る方法

他のホームページのHTML・CSSを見るって?

タイトルを見て、ん?とお思いの方もいらっしゃるでしょう。今公開されているホームページは、HTMLやCSSを覗き見ることが可能です。とは言ってもここで紹介するのはパクるためではなく、飽くまでも参考までに勉強する…といった意図です。このレイアウトはどうやって実現しているのだろうか?と思ったらこの方法で見てみてください。

ショートカットコマンド

ショートカットコマンドと言うとちょっと大げさかもしれませんが、ウェブの更新をF5キーで行う(ウインドウの場合)ように、この機能もF12を押すことによって使用することが出来ます
それでもならないよ~って方はブラウザによってやり方が異なるので以下の説明を見てみてください。

ブラウザがEdgeの場合

ブラウザがEdgeなら、この手順でいきましょう。

Edgeの場合のコードの見方
Edgeの場合のコードの見方
  1. 画面右上の「…」をクリック
  2. その他のツールを選択
  3. 開発者ツールを開く
  4. 要素を選択(HTML)、スタイルを選択(CSS)

ブラウザがsafariの場合

ブラウザがsafariの場合はこのような手順となります。(画像はwindowsのPCでやっているため割愛)

  1. 開発メニューを開く
  2. Webインスペクタを表示をクリック
  3. Webインスペクタの上部にある「要素」タブをクリック

ブラウザがchromeの場合

ブラウザがchromeの場合はこのような手順でどうぞ。

ブラウザがchromeの場合のHTML・CSSの見方
  1. 右上の3つ「・」が並んでいるものをクリック
  2. その他のツールをクリック
  3. デベロッパーツールをクリック

ブラウザがfirefoxの場合

ブラウザがfirefoxの場合はこのような手順です。

ブラウザがfirefoxの場合のHTML・CSSのコードの見方
ブラウザがfirefoxの場合のHTML・CSSのコードの見方
  1. 右上のメニューボタンを押す
  2. その他のツールを開く
  3. ウェブ開発ツールをクリック
タイトルとURLをコピーしました