Web制作 入門

【Mac】SafariのサイトでHTMLソースを表示する方法

Web制作を始めて数日すると、あのサイトのあの機能を取り入れたい!

なんて思ったりするものです。

そんなかたのために、WebブラウザではサイトのHTMLソースを確認できる機能が備わっています。

WebサイトのHTMLのソースはどのサイトであっても、例外なく確認できるのです。

それってどうやったら確認できるの?という人のために、今回は、Apple系の製品に初期設定されているブラウザであるSafariでこのHTMLソースを確認する方法をご紹介していきます!

Safariの設定

まずは、Webサイトのソースを表示するための設定をしていきましょう。

Safariを開いて一番上にあるSafariをクリックしてみてください。

すると下の画面が出てくるかと思います。

ここで環境設定を選択してください。

すると、Safariの環境設定の画面が出てきます。

上に一般やパスワードなど選択する場所があるかと思うので、詳細を選択してください。

すると以下の画面が出てくるかと思います。

ここでメニューバーに"開発"メニューを表示にチェックを入れてください。

これで、サイトのHTMLソースを表示する準備が完成しました。

サイトのソースを表示する

では実際にソースコードを表示していきましょう。

まずは、ソースコードを確認したいサイト開いてください。

次にサイト上のどこでもいいので右クリックしてください。

すると以下の画面が出てくるかと思います。

ここで要素の詳細を表示を選択してください。

すると以下画面が表示されると思います。

今回は例として、別記事のUdemyを使って最短でWeb制作を身につけるの記事を使って実際にソースコードを見ていきます。

こんな感じで、HTMLソースが表示されて、どういう構造でWebサイトが書かれているのか確認することができます。

さらにこの画面では、CSSの値も確認できます。

上の画面の右上の矢印で指定された部分をクリックしてください。

すると以下画面が出てきます。

左側でHTMLソースを確認しながら、右側でCSSの設定を見ることができます。

また、要素を選択すると、その要素がどの領域に記述されているかが、視覚的に確認できます。

具体的にいうと、marginやpaddingなどの領域がどの部分に対応しているかが見れます。

marginやpaddingなどの使い方は、綺麗なレイアウトを作るためには学ぶ必要のある項目です。

視覚的に見ることで、感覚的にレイアウトを想像できるようになるかと思います。

この他にも色々な機能が備わっているので、使いながら試してみて、学んでいってください。

まとめ

いかがだったでしょうか?

Web制作を学ぶにあたって、繰り返し行うであろうソースの表示の仕方を理解できたかと思います。

Web制作は試行錯誤を繰り返すことで上達します。

ソースをいろんなサイトで何度も確認して、多くの知見を蓄えていきましょう。

もし、まだ初心者で体系的にWeb制作を学びたいという方は、UdemyでWeb制作を体系的に学ぶの記事で説明を行なっていますので、そちらも参考にしてみてください。


-Web制作, 入門
-, , , ,

© 2020 はやぶさエンジニア Powered by AFFINGER5