WebDesigner StartGUide

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の勉強をしていきましょう。既に出来上がっている作品は、あなたにとって一番の勉強材料になるかと思います。そこで、実際の確認の仕方なのですが、まずは「デベロッパーツール」と言われる、開発者向けのツールを準備します。開発者向けのツールとは言え、準備するのは全然難しくないので、どんどん進んでいきましょう！

まずは、↓のリンクから、GoogleChromeをインストールしてください。インストールが終わったら、開いておいてくださいね。

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

これを押すと、ページ上に何かが現れます。この赤枠の部分にあるbodyなどの記述が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と書いてあったりするわけです。これを読んだら「サイトのブランディングのテキスト部分なんだな」と分かるわけです。このように、人が見てわかりやすく(もちろん自分が分かるように)名前をつける必要があります。

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

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

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

これは、実際に横に並べて見ようとすると分かるのですが、下の画像のようにブロック要素は縦に積まれ、インライン要素は横に並ぶようになります。引用：

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

以下、代表的な例です。これ以外にもありますが、頻繁に気にするのはこのあたりのタグでしょう。ブロック要素： <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：画像を貼る時に使います。

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

span：特別な意味のないインライン要素を作ります。例) 一部だけ<span style=“color:red”>赤文字</span>にする。

section：記事のセクションを区切るのに使えます。例) <section> ~~~~~~~~~~ </section>

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

ul,ol：リスト(箇条書き)形式を作ります。ulは順序なし、olは順序付きです。 li：リストの項目を作ります。例) <ul> <li>１個め</li> <li>２個め</li> <li>３個め</li> </ul>

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

a：リンクを貼る時に使います。例) <a href=“sample.html”>ここに文字を記入</a>

img：画像を貼る時に使います。例) <img src=“~~.jpg”> ※これは閉じる必要がありません。

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

デベロッパーツールで、確認したい所をピンポイントで確認するには、この機能を使いましょう。下の画像の赤枠部分にある矢印マークを押して下さい。

これで、メニューバーの所にカーソルを当ててみましょう。

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; } こんな感じで書いてあります。

同じようにメニューバーのulとliそれぞれからもCSSが確認できます。

paddingやmarginだけでなく、font-sizeなんかも使われてますね。あとはfloatも使われてます(これが重要なのですが...) 他にはtransitionなんかもありますね。(アニメーションをつけるのに使います。)

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

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

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

h2になると、こういう見出しにしていますね。

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

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

例えば、こういうコードがあったとします。 <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> 縦並びになっていますね。まずは、floatしたい要素(今回はli)にfloat:leftをつけます。

こんな感じになりました。むしろもっとひどくなってますね。。。 [CSS] li{ float:left; } まずは、●←これがいらないので、list-style:none;で消してしまいましょう。

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

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

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

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

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

このようにbackgroundのプロパティ内に全ての要素を設定することもできます。これは、中央で上から30pxで繰り返しなしの設定をしています。

このようにbackgroundのプロパティ内に全ての要素を設定することもできます。左端、上揃え、繰り返しなしですね。

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

まずは、HTMLを書きましょう。 <h1>これが見出しです</h1> とりあえず、このまま表示をしてみます。

とりあえず、中央揃えにしたいですね。text-alignを使います。 [CSS] h1{ text-align:center; }

背景を黒にして、文字を白にしてみましょう。 [CSS] h1{ text-align:center; background:#000; color:#fff; }

上下詰まっている感じがするので、paddingを入れましょう。 [CSS] h1{ padding:10px 20px; text-align:center; background:#000; color:#fff; }

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

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

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

追伸 ↓のQRコードで追加ができます。あなたからの連絡をお待ちしております。

WebDesigner StartGUide

Similar presentations

Presentation on theme: "WebDesigner StartGUide"— Presentation transcript:

Similar presentations

About project

フィードバック

ログインする

Auth with social network:

WebDesigner StartGUide

Similar presentations

Presentation on theme: "WebDesigner StartGUide"— Presentation transcript:

Similar presentations

About project

フィードバック