web-design-lectures

Webデザイン 基本~上級編を学ぶ 第3回(全10回)

HTMLとCSSを知ろう

Htmlとはweb上にサイトを表示させるための言語です。
正式名称は「Hyper Text MarkUp Language」といいますが略してHtmlと一般的にいいます。
W3Cというwebの標準化を普及する団体によって1997年に策定されました。
ちょうど20年前になるんですね。
webデザインをするにあたって、その作ったデザインをアウトプットするために必要となるものなので、webデザインしかしないという方も覚えておくと役立つことも多いと思います。

HTMLの種類

単純にHTMLといっても、その中にもいくつか種類があります。
現在web上で主に使用されているHTMLは「HTML5」になります。
「HTML5」は、2014年に正式に公表されたHTMLですが現在は、「HTML5.1」が最新バージョンとなります。
HTML5.2も第一草案が出されていますが、今は5.1が公表されている最新バージョンになります。
他にはXMLやXHTMLなどがありますが、普段webサイトを作る際はあまり馴染みがないかもしれません。

CSSとは?

CSSはwebページのデザインに大きくかかわる部分なので、デザインに関わっている方は知っているかもしれませんが、デザインを考える時にもCSSで出来ることや出来ないことなど知っておくととても役に立つと思います。
正式名称はカスケーディング・スタイル・シートといいます。

CSSでデザインする

何もせずHTMLを表示した状態だと要素がそれぞれ上から順に表示されます。
見やすくキレイなサイトにするためにはCSSは必須です。
要素を横並びにしたり、画像を思うように配置するなどサイトの静的な装飾を可能にしてくれます。

CSSを入れるには

では、CSSをHTML上に加える方法ですが何種類かあります。
・CSSファイルを外部ファイルとして読み込む
・HTMLのhead内に組み込む
・各要素にstyle指定して組み込む
大規模なサイトなどはたまにHTML内に組み込んであることもありますが、概ね外部ファイルとしてCSSを読み込む手法が主流です。
あまりないと思いますが、少ししかCSSを使わない場合はHTML内に入れてもいいかと思います。

CSSを入れよう

CSSの指定方法としてセレクタ、プロパティ、値という風に指定していきます。
あまりピンと来ないかと思いますがこんな感じです。
p {font-size:14px;}
これはP要素の中のフォントサイズを14pxにするという指定です。
他には、
p {color:#fff;}
これはP要素の中の文字色を白にするという指定です。
上は同じp要素の中の指定でした。
同じ要素の指定であればまとめることができます。
p {
font-size:14px;
color:#fff;
}
これでp要素の中をまとめて指定できます。
ルールは以上です。

CSSの優先順位

CSSには優先順位が存在します。
例えばCSSの中でp要素を複数回指定するとします。
そうすると後者の指定が適用されます。
これが基本です。
他には、;の前に!importantと加えると、例え前者であっても最も重要とみなされるので前後関係なく優先して適用されます。
優先順位は上から順に、
1.!important指定
2.IDセレクタ指定
3.親クラスから子クラスセレクタ指定
4.クラスセレクタ(.wrapper、.containerなど)
5.要素セレクタ(p,spanなど)
となります。

第2回まとめ webデザインにCSSは必須

今回はHTMLを装飾するのに必要なCSSについてでした。
近年はCSSでもアニメーションをつけることもできるようになってきたので、ますますCSSの重要性は高まっています。

次回3回目は10月12日更新予定です。
第6回はコチラ
第5回はコチラ
第4回はコチラ
第2回はコチラ
第1回はコチラ