Google Chrome デベロッパーツール「要素の検証」を利用した HTML と CSS の学び方(素人向き)

素人による学び方

HTMLやCSSを学ぶ方法はいろいろあるとおもいますが、基本的なサイト作成の教科書を読んだあと、わたしは中級レベルの本をじっくり読むようなことはしていません。わたしがやったのは以下の方法です。

  • 興味を持ったサイトのデザインを研究する
  • やりたいことが出てきたら、その都度、ネットで調べる

ようするに素人の独学ですね。身近に教えてくれる人もいませんし、仕事で使うことも全くないのでこれでいいや、と考えました。

たまに、ジュンク堂書店でパラパラと立ち読みをすることもありましたが、それもせいぜい10分くらいのこと。基本的には「じっさいいに運営されているすぐれたサイトから学ぶ」という姿勢です。

基本的な知識や技術はまず1冊読んでおく

とはいえ、こういったやり方の前には、まず『作りながら学ぶHTML/CSSデザインの教科書』などで、最低限の知識や技術を学んでいます。

もちろん、ネット上にはすぐれたサイトや動画を公開しているところが多数あって、書籍なしでも同程度の知識や技術を身につけることは可能です。そちらの方がやりやすい人もいると思うので、たとえば3分間の動画で教えてくれる「ドットインストール」などを利用するとよいでしょう。

1冊の本を使うメリットは「体系的な知識が順序立てて得られる」という点にあります。体系的な学習をすると、順序立ててものごとを理解できます。初心者にはそのほうがわかりやすいとおもいます。また、教科書を使うと、一人の著者または一つのグループによる思想のもとで教えてくれるので、記述にブレがありません。

ネットの情報だと、どうしてもバラバラな知識を集めがちです。最新のテクニックを知っていながら、ほとんどのテキストで最初に教わる手順を知らない、ということにもなりかねません。

さらに、どんな業界のどんな職種のテクニックでもそうですが、最新の話題や応用レベルになってくると、人によってやり方がさまざまです。初心者の段階だと、たとえばoverflow:hidden; とClearfix の使い分けで、Aというサイトで書いているやり方と、Bというサイトで書いているやり方の、どこが違っていてどこが同じなのかを理解することは難しいでしょう。

とはいえ、教科書を使うデメリットは、どうしても最新情報をフォローできない、という点にあります。HTML5の最終勧告が出るまえに発売された本では、たとえばhgroup の使い方を紹介している本がいくつもありましたが、このタグはけっきょく現在使われていません。こういう点は、ネットで最新情報を確認しておかなければわからないですね。

したがって、「ネットの最新情報」+「発売後2~3年以内の信頼できる1冊の教科書」という組み合わせを、わたしはおすすめします。

 

以下の本も作りながら理解できるいい本ですね。

 

Google Chrome 「要素を検証」(F12)のすすめ

さて、基本をマスターしたら、次は実践的に学んでいくのが楽しく、深く理解できます。

教科書のレベルを上げていきながら知識を蓄えていくこともいいのですが、わたしはどうも飽きっぽいので、理解したことはどんどん使って遊んでみたくなります。そういう人は、中級レベルの教科書に移るのではなく、じっさいに運営されているサイトを調べていくことで学んでいく方法がおすすめです。

具体的な方法は以下の通り。

まずは気になるサイトを見つける

ブラウザはGoogle Chrome を使います。今回はGoogle Chromeに備わっているデベロッパーツールを使います。

まずはいろんなキーワードでブログ検索してみたり、思いつくかぎりの有名な大手サイトをに行ってみるなど、国内外を問わずいろんなサイトに訪問しましょう。

「要素の検証」で見る

そして、「あ、このデザインいい!」「これどうやっているんやろ?」「この余白の間隔は何xpかなぁ・・・」とか思ったら、すぐにマウスの右クリック→「要素の検証」でしらべてみます(「F12」ボタンなら一発で出ます)。

要素を検証

これでサイトを見てみると、使われているのがmargin:auto; であるとかpadding-left:40px; であるとか、すぐに確認できちゃいます。あとはそれをマネして、自分でも作ってみるだけです。

Googleのトップページで「要素を検証」を開いたところ

「要素の検証」で遊ぶ

しかし、Google Chrome の便利な点は、これだけではありません!

この「要素の検証」は、プロパティを追加したり、または数値を変更して、Webページの表示を自由に変えることができるのです。数字や文字のところをダブルクリックしてみてください。すぐに文字入力ができるようになります。ここの数値や文字を自分好みに変更できます。

たとえば、このようにGoogleのロゴを拡大表示させてみることも可能。

Googleのトッププページの「要素を検証」

これは現在表示されているページの見え方だけを変えるのであって、サイトに直接影響を与えたりはしません。自分のサイトのカスタマイズ時にも威力を発揮するので、この方法はおすすめです。

(他にもいろんな機能が備わっているので、興味のある方は調べてみるといいでしょう)

 すぐれたサイトにはすぐれた技術が詰まっている

これを使って、いろんなサイトをいじって遊ぶといろんなことがわかってきます。

楽しみながらすぐれたテクニックやアイデアを学べる

たとえば大きな丸を描く方法(border-radius)とか、ちょっとした動きを入れる方法(transition)とか、固定メニューバーの設置方法(position:fixed;)とか。他にも、カテゴリーによって色を変える工夫とか、レスポンシブWebデザインの仕組みなどなど、わたしは全部そうやって学んできました。

これだとお金もかからず、自分の知りたいと思ったことをすぐに知れて、いろいろ試して遊べるので、勉強になります。どんなときにどんな不具合が出てくるのかも理解できるようになるので、使い方の幅が広がります。

時間はかかりますが、楽しみながらCSSの使い方を学ぶことができる方法です。プロの方であれば、しっかりとした参考書の内容を頭に叩き込んでおく必要があるのかも知れませんが、わたしは素人レベルで十分なので、このやり方で学んでいます。

辞典があってもいいかも

まあ、それでも、どうしてもわからないところが必ずでてくるので、そういうときにはCSSの辞典などが一冊あるといいかもしれませんね。

 

もちろん、辞典も年々古くなてきますので、最新情報はネットの情報が必要ですが・・・。

HTML5に関しても、<section>と<aside>の使い分けや、<div>によるデザインの工夫が知れるのでためになります。

たとえばサイドバーのウィジェット欄タイトルにしても、サイトによって違うんですよね。Webクリエイターボックスさんはh1タグを使い、Webデザインレシピさんではh2を使い、大手サイトの多くではh3だったり、と運営者の事情によっていろいろです。

こういうのを調べていると何時間でも飽きないです。

HTMLとCSSでサイトを2~3つ作ってみる

さいごは、③それをマネてサンプルサイトを作ってみる、ことをおすすめします

自分で作るサンプルサイトは「オリジナリティを発揮した独特のデザインやテクニックを使用したサイト」ではなく、できれば「おもしろい」「すごい」と感動したサイトをそのままマネてみるといいでしょう。

サイトの一部分でも全く同じようにマネるのは意外と難しく、そしてとても勉強になります。

たとえばアイキャッチ画像のwidth とheight の比率であったり、その外側のmarginの指定。サムネイル画像とタイトルや抜粋に使われているpadding での調整方法。画像に文字を重ねたり、その画像を画面の中央に固定させたり…。

背景色と文字の色あいも調べてみるとプロのアイデアに驚かされます。見出し文字の大きさ、余白、背景色、border、擬似要素をつかったデザイン、などなど。

サイトに動きをつけるとき、CSS3とJavaScriptとどちらを使っているのか。レスポンシブWebデザインでのパーセンテージ指定はどれくらいなのか。

こういうのを何度もマネすることで、どんどんテクニックの引き出しが増えていきます。

 

もし、「基本的な教科書を読んだけど、次に中級レベルの教科書を読むのはめんどくさいなぁ・・・」という方は、Google Chromeの「要素の検証」を使って、じっさいに運営しているいろんなサイトのテクニックやアイデアをどんどん吸収していってみてはいかがでしょうか? 遊び感覚でやっているうちに、すごく勉強になるので、おすすめです。

関連記事

【マルチデバイス対応】 WordPress で作ったサイトをメディアクエリー(Media Query)とユーザーエージェント(UA)による判別でモバイル端末に最適化する方法

マルチデバイスに対応したサイトにする マルチデバイスに合わせた対応をする方法はいろいろありますが、今回は「レスポンシブWebデザイン」で使われる主要な技術のひとつである「メディアクエリー(Media Query)」と、「ユーザーエージェント…

新しく自作 WordPress テーマに変更しました

なんとか、完成にまでこぎつけました。 昼にテーマのファイルをアップロードして、変更してみたら、いろいろ表示に不具合が発生して、そのときに訪問された方にはご迷惑をお掛けしました。 ページによって新テーマと旧テーマの表示が違っていて「なんでやろ…

WordPress のテーマを自作してみる

レスポンシブWebデザインを勉強して自作のWordPressテーマを作っています。 1月に『作りながら学ぶHTML/CSSデザインの教科書』を読んで、なんとなくHTML5とCSS3の初歩を理解しました。次に『WordPress レッスンブッ…

自作 WordPress テーマのためのメモ

前回のところから、もうすこしおもしろいデザインにしたいと思って、いろんなサイトデザインを調べて見ることにしました。 とくに参考になったのが、 Themegraphy – WordPressテーマギャラリー Media Queri…

CSS で h タグをちょっとだけカスタマイズしてみました

見出しは超重要! 多くのブロガーさんや大手サイトでは「記事の書き方」を解説してくれています。それを読むと、見出しを効果的に使うことが、読みやすい記事を書く上での必須項目であるとわかります。 見出しの種類 見出しというのはHTMLで書くときの…