そのスタイルどうやって書いてるの？ブラウザの開発者ツールを使おう
Webデザインなどをしようと思った時に、
「あのページはどんなCSSを書いて表現してるんだろう」
とか思うこともあるのではないでしょうか。
実はWebページがどんなHTML、CSS、JavaScriptで作られているかはブラウザに備わっている開発者ツールを使って見ることができます。
今回は開発者ツールを使って他者のWebページの作りを確認する方法を紹介します。
Googleのトップページを見てみよう
まずはGoogleのトップページを開いて開発者ツールを開いてください。
開発者ツールは例えばGoogle Chromeの場合、
WindowsであればF12キー、
MacであればCommand+Option+iキーで開くことができます。
(Chrome以外にもほとんどのブラウザで同じ方法で開けると思います。)
開発者ツールを開いたらElementsタブを開いてください。
このページを構成するHTMLを見ることができます。そして右側のStylesタブにはCSSが確認できます。
例えば「Google 検索」ボタンのスタイルはどうなってるのか見てみましょう。
HTMLから探すのは大変ですが、詳細を確認したいポイントをブラウザ上で選ぶことができます。
開発者ツールの左上にある四角と矢印のボタンをクリックしてから「Google 検索」ボタンにカーソルを合わせてください。すると以下のようにパーツが選択状態になるのでそこでクリックします。
すると、開発者ツールのHTMLに移って対象のコードを特定してくれます。
対象のHTMLが特定できました。
どうやらinput type=”submit”の要素であることがわかります。
右側のStylesタブでこのボタンに当たっているCSSを確認できます。
gbqfbaというクラスが当たってるのと、下にいくとbody、input、buttonタグに設定されているスタイルが効いているのがわかります。
また、下のほうに表示されているスタイルに取り消し線が引かれているのがわかります。
これは上書きされているので効いていないことを意味しています。
優先度は上に表示されているスタイルのほうが高いので、gbqfbaクラスで上書きされているということになります。
コピペで真似してみよう
ではGoogleトップページのボタンの部分をコピーしてみましょう。
HTML要素のコピーは要素にカーソルを合わせて右クリック→Copy→Copy element
CSSのコピーはセレクタにカーソルを合わせて右クリック→Copy rule
HTML
<html>
<head>
<style>
.lJ9FBc input[type="submit"], .gbqfba {
background-color: #f8f9fa;
border: 1px solid #f8f9fa;
border-radius: 4px;
color: #3c4043;
font-family: arial,sans-serif;
font-size: 14px;
margin: 11px 4px;
padding: 0 16px;
line-height: 27px;
height: 36px;
min-width: 54px;
text-align: center;
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<div class="FPdoLc lJ9FBc">
<center>
<input class="gNO89b" value="Google 検索" aria-label="Google 検索" name="btnK" type="submit" data-ved="0ahUKEwjPprGbzqDxAhWNyIsBHfMBCjEQ4dUDCA0" kl_vkbd_parsed="true">
<input id="gbqfbb" value="I'm Feeling Lucky" aria-label="I'm Feeling Lucky" name="btnI" type="submit" data-ved="0ahUKEwjPprGbzqDxAhWNyIsBHfMBCjEQnRsIDg" kl_vkbd_parsed="true">
<div class="gbqfba gbqfba-hvr" role="button" style="display: none; font-family: arial, sans-serif; overflow: hidden; text-align: center; z-index: 50;">
<div style="left: 0px; position: absolute; right: 0px; white-space: nowrap;">
<div><span>お腹がすいた</span></div>
<div><span>冒険したい</span></div>
<div><span>遊びたい気分</span></div>
<div><span>星になった気分</span></div>
<div><span>Doodle を探そう</span></div>
<div><span>トレンディーな気分</span></div>
<div><span>芸術家気分</span></div>
<div><span>笑いたい気分</span></div>
</div>
</div>
</center>
</div>
</body>
</html>
コピーしてみました。
どうでしょう。なんとなくそれっぽいボタンができましたよね。
こんな感じで自分のプロジェクトに取り込んで、それをベースにいい感じに微調整すれば手っ取り早く思い描いていたパーツをスタイリングすることができるかもしれません。
Webページは改ざんできる
開発者ツールを触って察しがついた方もいるかもしれませんが、
実は開発者ツールではコードを見るだけでなく編集をすることもできます。
要はHTML要素を削除したり追加したり、CSSを書き換えたりしてめちゃくちゃなこともできてしまうわけです。
こんな感じでGoogle画像をやたら増やしてみたり、部分的に色を変えたり文字を変えたりできちゃうわけです。
ただ、勘違いしないでいただきたいのですが、これは自分のパソコン上だけで起こっていることなので「ひえぇ‥Google様のページを壊してしまった…」なんて思わないでください（笑
画面をリロードすればまた元に戻るのでご心配なく。
ちょっと話が逸れますが、「私の資産はこれだけあります」とか言ってWebページのスクリーンショットを証拠としてうさんくさい投資商品を販売してたりしたとしても、Webページはちょっと知識があればこのように誰でも簡単に改ざんできてしまうので、何の証拠にもならないということですね。
CSSも部分的に無効化したり書き換えたりできるので、参考としているWebページ上で「ああ、ここのスタイルが効いてこうなってるんだな」というようなことが確認できるので、デザインをする上での参考としてください。
まとめ
ブラウザの開発者ツールを使って他者が作ったWebページの作りを確認する方法を紹介しました。
いいなあと思うWebページが見つかったらそのソースコードをチェックしてみるのも面白いし、勉強になると思います。
今回はHTMLとCSSだけ見ましたが、JavaScriptのソースコードも見ることができます。
ただしこちらは難読化がされてるケースもあり、見てもよくわからないかもしれません。
どちらかというと自分のプロジェクトに対してデバッグをするために使うことになると思います。
もっと知りたい方は「JavaScriptがうまく動かない？開発者ツールでデバッグしてみよう」も読んでみてください。
したっけ！
- WebページのHTML、CSSはブラウザの開発者ツールで確認できる
- 見るだけでなく編集もできる(自分のパソコンの中だけで変わるのでご心配なく)
本格的にプログラミングを学びたいですか？ITのエンジニアになりたいですか？
IT業界は万年人手不足であり、ニーズがあります。
パソコンとインターネットがあれば場所を問わず仕事ができるので、リモートワークが普及しつつある現代にマッチした職種と言えると思いますし、
物理的に必要なものはパソコンぐらいなので初期投資にかかる費用も少なく、人並みに仕事ができればフリーランスになって会社依存を脱却することもできます。
身につけた技術は一生モノです。
もし本腰を入れて勉強したいという方はスクールに入るのも一つの手です。
いくつか紹介しますので、興味があればサイトを覗いてみてください。
TechAcademy
最短4週間で未経験からプロを育てるオンライン完結のスクールです。 どこかに通う必要なく、自宅でもプログラミングやアプリ開発を学ぶことができます。
TechAcademyのサイトへ
Want to learn programming in earnest? Want to be an IT engineer?
The IT industry is understaffed for many years and has needs.
If you have a computer and the Internet, you can work anywhere,
so I think it can be said that it is a job type that matches the present age when remote work is becoming widespread.
The initial investment cost is low, and if you can work like a normal person, you can become freelance and get rid of your dependence on the company.
The skills that you have acquired is something that will last a lifetime.
If you want to study in earnest, you can go to school.
I will introduce some of them, so if you are interested, please take a look at the site.
DMM WEBCAMP
This is a programming school for those who are serious about changing jobs. guarantee a job change, so it is recommended for those who are inexperienced and are looking for a job change in the IT industry!
move to DMM WEBCAMP
TechAcademy
It is an online school that trains professionals from inexperienced in a minimum of 4 weeks. You can learn programming and app development at home without having to go anywhere.
move to TechAcademy