WebDesigner StartGUide Chapter 8 ~HTML/CSSのスキルを上げる~

前回のおさらい 前回までで、WordPressで実際にサイトを立ち上げることに成功しました。 すでにログインもできる状態になっているはずです。 また、操作方法も比較的分かるようになりました。 今回は、そこから一歩進んでHTMLとCSSをいじれるようになっていこうと思います。

HTMLを修得する まずは、HTMLを修得してもらいます。 Webサイトの見た目を作っているのは、ほとんどがCSSですが、CSSで上手くレイアウトを整えたり、色付けをしたりしていくためには、このHTMLが上手く掛けていることが必須になります。 そのHTMLの学習方法については ある程度流れは決まっているので、次のスライドを確認して下さい！

HTMLを修得する 完成形から勉強する タグの使い方 デベロッパーツールを使う どんなタグが使われている？ idの命名方法 classの命名方法 タグの使い方 ブロック要素とインライン要素(divとspan) ブロック要素の例 インライン要素の例 よく使うタグ

HTMLを修得する 実際に書いてみる ラフスケッチを描く 階層構造・包含関係を考える 要素を割り当てる テキストエディタに移す

【HTML】完成形から勉強する -デベロッパーツールを使う- まずは、Web上に転がっているサイトを見ることでHTMLの勉強をしていきましょう。既に出来上がっている作品は、あなたにとって一番の勉強材料になるかと思います。 そこで、実際の確認の仕方なのですが、まずは「デベロッパーツール」と言われる、開発者向けのツールを準備します。開発者向けのツールとは言え、準備するのは全然難しくないので、どんどん進んでいきましょう！

【HTML】完成形から勉強する -デベロッパーツールを使う- まずは、↓のリンクから、GoogleChromeをインストールしてください。 https://www.google.co.jp/chrome/browser/desktop/ インストールが終わったら、開いておいてくださいね。

【HTML】完成形から勉強する -デベロッパーツールを使う- それでは実際に「デベロッパーツール」を開きます。 GoogleChromeの右上にある”三つ点”の部分から 「その他のツール」→「デベロッパーツール」を押して下さい

【HTML】完成形から勉強する -デベロッパーツールを使う- これを押すと、ページ上に何かが現れます。 この赤枠の部分にあるbodyなどの記述がHTMLにあたります。 それでは、このデベロッパーツールを先程作ったサイトで使ってみましょう。

【HTML】完成形から勉強する -デベロッパーツールを使う-

【HTML】完成形から勉強する -デベロッパーツールを使う-

【HTML】完成形から勉強する -どんなタグが使われている？- 実際に見てみると、「div」「a」「header」「h1」「p」などが使われていたりしますね。意味は一旦置いといて、こういう風に使われているというのが分かるだけで十分です。

【HTML】完成形から勉強する -idの命名方法- これは、完成系なので基本的に綺麗に作られているのですが、問題はあなたがこれをゼロから作っていけるかどうかなわけです。 まずは、「何のタグを使っているか」も参考にしてほしいですが、さらにidやclassにも注目して下さい。 前にも説明してありますが、同じタグ(例えば同じdiv)で、２つを区別するためにidやclassを使用していきますが、この命名方法がなかなか自由度が喬すぎて難しいのです。

【HTML】完成形から勉強する -idの命名方法- 例えば、今回のサンプルではid=“masthead”などがありますね。 これの細かな意味はわかりませんが... ただ、「ヘッダー部分に入れようとしてるんだな」というのは分かります。

【HTML】完成形から勉強する -classの命名方法- classの方はわかりやすくて、site-brandingと書いてあったり、site-branding-textと書いてあったりするわけです。これを読んだら「サイトのブランディングのテキスト部分なんだな」と分かるわけです。このように、人が見てわかりやすく(もちろん自分が分かるように)名前をつける必要があります。

【HTML】完成形から勉強する -classの命名方法- こういった命名方法には「キャメルケース」と「スネークケース」があります。それと別にハイフンを使う方法も... 例えば、先程のsite-branding-textなどはハイフンなわけですが、それぞれの例を出すとすると キャメルケース：siteBrandingText スネークケース：site_branding_text のようになります。

【HTML】完成形から勉強する -classの命名方法- 一応、CSSはハイフン、JavaScriptはキャメルケース、Rubyはスネークケースを使うことが多いようですが、HTMLについては割とテンプレートのようなものは無いみたいです。 ただ、いろんな参考サイトを見ていると、ハイフンを使用しているのが一般的に思います。なので、もし極端な拘りがない限りはハイフンでやっておくことがいいのかなと思います。

【HTML】タグの使い方 -ブロック要素とインライン要素- ここからは、実際にタグについて勉強をしていこうと思います。 まず必要な知識は「ブロック要素」と「インライン要素」についてです。 この2つをちゃんと理解していないと、「なんで、思った通りいかないの！」というのが非常に頻繁に起こります。 タグの中にはタイプが2つあって、ブロックとして横並びにならないのが基本のものと、横並びになるのが基本のものがあります。前者をブロック要素、後者をインライン要素と呼びます。

【HTML】タグの使い方 -ブロック要素とインライン要素- これは、実際に横に並べて見ようとすると分かるのですが、下の画像のようにブロック要素は縦に積まれ、インライン要素は横に並ぶようになります。 引用：http://ho-mupe-zi.hippy.jp/sippai/youso.html

【HTML】タグの使い方 -ブロック要素とインライン要素- こういう性質の違いがあるので、このブロック要素とインライン要素の違いを知らないでHTMLを書いていくと、全然自分のイメージ通りにいかないということになります。 ブロック要素も横並びにする方法はあるのですが、CSSと組み合わせて行う必要があるので、そちらで説明していきますね！ ここでは、ブロック要素のタグとインライン要素のタグ、それぞれの代表例をお伝えしていこうと思います。

【HTML】タグの使い方 -ブロック要素とインライン要素- 以下、代表的な例です。これ以外にもありますが、頻繁に気にするのはこのあたりのタグでしょう。 ブロック要素： <section> <div> <ul> <ol> <p> <form> <table> <li> インライン要素： <a> <b> <br> <font> <img> <input> <label> <select> <span> <textarea>

【HTML】タグの使い方 -よく使うタグ- タグの紹介では、最後に一般的にこのあたりはよく使うよねというタグを紹介しておこうと思います。どういう時に使うのかも覚えておくと、なおいいですね。 div：特別な意味のないブロック要素を作ります。区分けする時に非常に使える。 span：特別な意味のないインライン要素を作ります。 section：記事のセクションを区切るのに使えます。 h1~6：見出しを作ります。 ul,ol：リスト(箇条書き)形式を作ります。ulは順序なし、olは順序付きです。 li：リストの項目を作ります。 a：リンクを貼る時に使います。 img：画像を貼る時に使います。

【HTML】タグの使い方 -よく使うタグ- div：特別な意味のないブロック要素を作ります。区分けする時に非常に使える。 例) <div class=“article”> <div class=“wrap”> ~~~~~~~~~~~~~~~~ </div>

【HTML】タグの使い方 -よく使うタグ- span：特別な意味のないインライン要素を作ります。 例) 一部だけ<span style=“color:red”>赤文字</span>にする。

【HTML】タグの使い方 -よく使うタグ- section：記事のセクションを区切るのに使えます。 例) <section> ~~~~~~~~~~ </section>

【HTML】タグの使い方 -よく使うタグ- h1~6：見出しを作ります。 例) <h1>これが一番大きな見出し</h1> <h2>これが二番目の見出し</h2> <h2>二番目以降は何個使っても変ではないです。</h2>

【HTML】タグの使い方 -よく使うタグ- ul,ol：リスト(箇条書き)形式を作ります。ulは順序なし、olは順序付きです。 li：リストの項目を作ります。 例) <ul> <li>１個め</li> <li>２個め</li> <li>３個め</li> </ul>

【HTML】タグの使い方 -よく使うタグ- ul,ol：リスト(箇条書き)形式を作ります。ulは順序なし、olは順序付きです。 li：リストの項目を作ります。 例) <ol> <li>１個め</li> <li>２個め</li> <li>３個め</li> </ol> ※olの場合は箇条書きに番号が付きます。

【HTML】タグの使い方 -よく使うタグ- a：リンクを貼る時に使います。 例) <a href=“sample.html”>ここに文字を記入</a>

【HTML】タグの使い方 -よく使うタグ- img：画像を貼る時に使います。 例) <img src=“~~.jpg”> ※これは閉じる必要がありません。

【HTML】実際に書いてみる -ラフスケッチを書く-

【HTML】実際に書いてみる -ラフスケッチを書く- ここから先は、実際に作りながら進んでいきます。 まずは、ラフスケッチを書きましょう。モックアップと呼ばれる、サンプル模型よりは形になってないくらいで構わないので、簡単にスケッチをしてみてください。

【HTML】実際に書いてみる -ラフスケッチを書く- 僕は、構想段階で色とかレイアウトとか 全てをイメージで作ってしまうので 細かく書き込んでいきますが 簡単なレイアウトを整えるくらいで大丈夫です。

【HTML】実際に書いてみる -ラフスケッチを書く- 全然イメージが湧かない場合は、「muuuuu.org」などのサイトまとめのサイトを参考にして、いろいろと探すといいかと思います。 直感的に「これを使ってみよう」というサンプルサイトが見つかったら一番良いですね。

【HTML】実際に書いてみる -階層構造・包含関係を考える-

【HTML】実際に書いてみる -要素を割り当てる- ある程度、入れ子の構造を意識したら、実際にどのタグを使うかを割り当てて行きます。 <section>にするか、<div>にするか、<h1>にするか...などなど どのタグを入れるかを考えていきます。

【HTML】実際に書いてみる -要素を割り当てる- この段階では、書ける限りメモを取ります。 僕はclassの命名などもここでやってしまいますが それは慣れてからの方がいいと思います。 要素をある程度割り当てていきましょう。

【HTML】実際に書いてみる -テキストエディタに移す- ここから後は、テキストエディタに移す作業です。 ある程度、枠は決まっているはずなので とにかく文字に起こしていきましょう。 先程考えた、階層構造・包含関係を意識して 作成をしてみてください。 (ここは、正直入力していくだけなので 割愛します...知識面が重要な部分です)

【HTML】実際に書いてみる -テキストエディタに移す- 実際、HTMLでする作業はこれだけ。 その後の作業のほとんどはCSSを用いてやっていく必要があります。 なので、CSSの扱いにすすんでいきましょう。

CSSを修得する ここから先はCSSの修得です。 CSSはデザイン面をかなりカバーしてくれるので、Webサイトの制作には必須と言えます。むしろ、同じHTMLのコードでもCSSの書き方だけで人よりも何倍も見栄えの良いサイトにすることができます。 実践あるのみな部分が強い言語ですが、実際にやっていきましょう。

CSSを修得する 完成形から勉強する 実際にどんなプロパティが使われている？ ケーススタディ レイアウトを見る 色の使い方を見る メニューバーでは何が使われている？ メインコンテンツでは何が使われている？ 見出しでは何が使われている？ ケーススタディ floatを使って、メニューバーを作る。 背景に画像を設定する 見出しを作る

【CSS】完成形から勉強する -レイアウトを見る- まずは、上手くできているサイトを見本にして、どういうレイアウトがあるのかを見ましょう。 先程も出てきた「muuuuu.org」などで検索するのがおすすめです。 あなたがこれからWebサイトなどを作るとしたら、そのクオリティは今まで見てきたWebサイトに依存すると考えたほうが良いです。とにかく数をみて、自分が作る前提で考えていくことが大事です。

【CSS】完成形から勉強する -レイアウトを見る- メニューはどのあたりにあるか。メインのコンテンツはどう置いてるか。リンクを飛ばす時はどの辺りに配置しているか。 などなど、細かく見ていってください。あなたのイメージ案がより固まっていきます。次第にこういうデザインに多く触れることで、「しっくり来る」デザインを思いつくまでの回数が減っていきます。

【CSS】完成形から勉強する -色の使い方を見る- 次は、いろの使い方についても見て下さい。正直なところ、サイトを作る上でこの「色」は大変な難関です。というのも、実際にWebサイトに埋め込んでみないと感覚が分からないからです。 実際にできているWebサイトを見て、慣れていきましょう。それぞれのサイトには「コンセプト」がありますから、色の使い方も工夫されています。

【CSS】完成形から勉強する -色の使い方を見る- ただカラフルなサイトは「ガチャガチャ」しているだけですし、だからといってモノトーン(白黒)もどうかと思います。 どういう組み合わせならキレイに見えるかというのを、ここで勉強していきましょう。

【CSS】実際にどんなプロパティが使われている？ -メニューバーでは何が使われている？- どれでもいいので、先程参考にしたサイトを選びましょう。 ここ以降は、その参考サイトを「デベロッパーツール」を使って、確認していきます。 以降の説明は参考サイトとして「バズ部」さんのを使わせていただきます。 http://bazubu.com/ ※わかりやすいからです。

【CSS】実際にどんなプロパティが使われている？ -メニューバーでは何が使われている？-

【CSS】実際にどんなプロパティが使われている？ -メニューバーでは何が使われている？- デベロッパーツールで、確認したい所をピンポイントで確認するには、この機能を使いましょう。下の画像の赤枠部分にある矢印マークを押して下さい。

【CSS】実際にどんなプロパティが使われている？ -メニューバーでは何が使われている？- これで、メニューバーの所にカーソルを当ててみましょう。

【CSS】実際にどんなプロパティが使われている？ -メニューバーでは何が使われている？- CSSが表示されましたね。 #gnav li a { display: block; padding: 29px 20px; position: relative; overflow: hidden; -webkit-transition: all ease-in-out .3s; transition: all ease-in-out .3s; } こんな感じで書いてあります。

【CSS】実際にどんなプロパティが使われている？ -メニューバーでは何が使われている？- 同じようにメニューバーのulとliそれぞれからもCSSが確認できます。

【CSS】実際にどんなプロパティが使われている？ -メニューバーでは何が使われている？- paddingやmarginだけでなく、font-sizeなんかも使われてますね。 あとはfloatも使われてます(これが重要なのですが...) 他にはtransitionなんかもありますね。(アニメーションをつけるのに使います。)

【CSS】実際にどんなプロパティが使われている？ -メインコンテンツでは何が使われている？- 同じようにメインコンテンツも見ていきます。 width:100%とmax-width:1200pxなんてのが使われてますね。その下の要素には width:33.33%なんてのがあります。

【CSS】実際にどんなプロパティが使われている？ -見出しでは何が使われている？- 見出しは意外と勉強になります。特に色合いがかなり上手く使われているのがこの見出しの特徴ですね。バズ部さんのサイトだと、他の「WordPress」と書かれているページに飛ぶと、下のような見出しがあるはずです。この、背景色と文字色の組み合わせは大事です。

【CSS】実際にどんなプロパティが使われている？ -見出しでは何が使われている？- あとは、このサイトではWordPressのマークを入れるために上部のpaddingを多めにとっていますね。WordPressのマーク自体は、background:urlを使って入れているのがわかります。(すみません、少しレベルが上がりすぎますね) もう一度言いますが、見出しは意外と勉強になります。さらに、自分がサイトを創っている最中にも見出しは気になる部分です。 よく見ておきましょう。

【CSS】実際にどんなプロパティが使われている？ -見出しでは何が使われている？- h2になると、こういう見出しにしていますね。

【CSS】ケーススタディ - floatを使って、メニューバーを作る- さて、ここからはケーススタディです。 別の表現をすれば「こうしたいときは、こう書くよね」っていうテンプレのようなものです。 あなたもWebサイトを創っているうちに、いくつかは勝手にテンプレ化されていくとは思いますが、このテンプレが多くなればなるほど、作成のスピードは上がっていきます。 まずは、よくあるテンプレだけ覚えてしまいましょう。 意外と「黒須さんはいつも何を使ってますか？」と言われると 思いつかないものです。聞かれた方が答えやすいですね。

【CSS】ケーススタディ - floatを使って、メニューバーを作る- まずは、floatです。これはメニューバー及び、メインコンテンツの部分でよく使いますね。 例えば、メニューバーを作る際に、ulとliを使うと思いますが、これを普通に使おうとすると「縦並び」になります。 そこで、floatを使うことを考えるのですが、実際に見ながらやっていきましょう。

【CSS】ケーススタディ - floatを使って、メニューバーを作る- 例えば、こういうコードがあったとします。 <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> 縦並びになっていますね。 まずは、floatしたい要素(今回はli)にfloat:leftをつけます。

【CSS】ケーススタディ - floatを使って、メニューバーを作る- 例えば、こういうコードがあったとします。 <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> 縦並びになっていますね。 まずは、floatしたい要素(今回はli)にfloat:leftをつけます。

【CSS】ケーススタディ - floatを使って、メニューバーを作る- こんな感じになりました。むしろもっとひどくなってますね。。。 [CSS] li{ float:left; } まずは、●←これがいらないので、list-style:none;で消してしまいましょう。

【CSS】ケーススタディ - floatを使って、メニューバーを作る- 横並びにはなって大分マシになりましたね。でも、くっつきすぎです。 [CSS] li{ float:left; list-style:none; } paddingで横方向に5pxずつ空間を作りましょう。 上下方向はどうでもいいですが、2pxでもしておきますか。

【CSS】ケーススタディ - floatを使って、メニューバーを作る- これくらいの感じならそこそこいいですね。実際のメニューバーはliの下にaタグがあることが多いので、そちらで文字色を変えたりします。 [CSS] li{ float:left; list-style:none; padding:2px 5px; }

【CSS】ケーススタディ -背景に画像を設定する- 次は、背景画像の設定です。とは言え、背景に設定するだけだったら超簡単です。 背景に設定したいdivがあったとしたら [CSS] div{ background:url(ここに画像のURL); } これで終了です。

【CSS】ケーススタディ -背景に画像を設定する- いくつか、実際の使われ方を見ましょう。 backgroundで画像を指定する場合は、位置の指定(centerとかtopとか書いてあるやつ)、繰り返しするかしないか、background-sizeなどを組み合わせて使うことが多いです。 まとめて、プロパティを説明しておきますね。

【CSS】ケーススタディ -背景に画像を設定する- background …… 背景に関する指定をまとめて行う background-attachment …… 背景画像の固定・移動を指定する background-color …… 背景色を指定する background-image …… 背景画像を指定する background-position …… 背景画像の表示開始位置を指定する background-position-x …… 背景画像の横位置を指定する（IE独自の仕様） background-position-y …… 背景画像の縦位置を指定する（IE独自の仕様） background-repeat …… 背景画像のリピートの仕方を指定する それでは、実際の使い方です。

【CSS】ケーススタディ -背景に画像を設定する- このようにbackgroundのプロパティ内に全ての要素を設定することもできます。 これは、中央で上から30pxで繰り返しなしの設定をしています。

【CSS】ケーススタディ -背景に画像を設定する- このようにbackgroundのプロパティ内に全ての要素を設定することもできます。 左端、上揃え、繰り返しなしですね。

【CSS】ケーススタディ -見出しを作る- 最後に、見出しを創ってみましょう。 とは言っても、シンプルなのができれば充分なので、今回はこのようなものを創ってみましょう。

【CSS】ケーススタディ -見出しを作る- まずは、HTMLを書きましょう。 <h1>これが見出しです</h1> とりあえず、このまま表示をしてみます。

【CSS】ケーススタディ -見出しを作る- とりあえず、中央揃えにしたいですね。text-alignを使います。 [CSS] h1{ text-align:center; }

【CSS】ケーススタディ -見出しを作る- 背景を黒にして、文字を白にしてみましょう。 [CSS] h1{ text-align:center; background:#000; color:#fff; }

【CSS】ケーススタディ -見出しを作る- 上下詰まっている感じがするので、paddingを入れましょう。 [CSS] h1{ padding:10px 20px; text-align:center; background:#000; color:#fff; }

【CSS】ケーススタディ -見出しを作る- これで比較的見た目は良くなったんじゃないでしょうか？ オプションで、背景色を変えたり、フォントを変えたりするといいかもしれませんね。シンプルですが、使いやすい見出しはつくれるはずです。

最後に これで、HTMLとCSSの勉強方法の基盤は終了です。 あとは、実際に創っていく最中に躓くポイントを調べていけば充分かと思います。 調べる方法を言っておくと 「HTML (空白) やりたいこと」 で検索を書けます。 例えば 「CSS メニューを横並び」 「CSS 背景画像設定」 みたいに検索をかけると、見つかりやすいです。

最後に ここまでの内容である程度の知識は付いているはずです。 動きのないWebサイトなら十分作れるようになっています。 これから先は、さらに進んだ内容として、javascriptを勉強していきます。 これを勉強することで、スクロールがスムーズになったり、ヘッダー画像が時間で変わる機能を加えられたりなど、ちょっと変わった機能をつけれるようになります。 それでは、進んでいきましょう。

追伸 何か、質問があったり、躓いたポイントがあれば、LINE@で連絡を下さい。 ↓のQRコードで追加ができます。 あなたからの連絡をお待ちしております。