html&CSSをマスターしよう

Webサイトの基本はhtmlとcssを理解することからです。

15年前はWebサイト黎明期で、なんと「テーブルレイアウト」という、テーブルタグにスライスしたPhotoshopのデザインを割り当てるという、なんとも原始的な方法が主流でした。

cssが出てきてからその画期性に驚き、Webデザイナーでもプログラミングしているような気分に浸れ楽しかったものです。（CSS3はさらに楽しい！）

何はともあれ、htmlとcssはWebサイト制作の基本中の基本です。どこから始めたらいいの？という人は、焦らずに初歩の初歩からじっくり覚えることが最善の近道です。

htmlとは
1. 実際にブラウザに表示される部分
CSSとは
1. なんでスタイルシート（CSS)が必要なの？
余談：働いている人の勉強の仕方
初心者の勉強の仕方

htmlとは

htmlとは「エイチティーエムエル」と読み、「Hyper Text Markup Language」の頭文字を取ったもので、Webページを作成するために開発された言語です。現在わたしたちが目にしているほとんどのWebサイトはhtmlで作られていて、Wordpressはhtmlをベースにして動的に動くように開発されたPHPという別の言語と組み合わせて作られています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>htmlとcssをマスターしよう！</title>
<link rel="stylesheet" href="../style.css" media="screen">
</head>
<body>
<div id="wrapper">
<div id="header></div>
<div id="main">
<p>Webデザインはすごく楽しいし簡単だよ！</p>
</div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>
</body>
</html>

<!DOCTYPE html>は宣言文。必ず入れます。「このWebページはhtmlで作ってますよ」という指令を与えるものです。

<html lang=”ja”>の”lang”はlanguageの略、”ja”はJapaneseの略です。html要素内で使われる言語は日本語ですよ、という意味です。なぜ必要かというと、英語は文章中にスペースがありますが日本語にはありませんよね。これでブラウザに使用言語を明確に認識させることができます。

Webサイトの中には英語ページがあるケースもありますね。その場合は、そのページに限っては<html lang=”en”>と入れて、そのページのhtml要素内の言語は英語ですよ、と指示してあげます。

Webページは、基本的にこんな構成です。

header（ロゴや電話番号が入る一番上の部分）
main（記事などのコンテンツ部分）
sidebar（バナーやお知らせなどサブ的なものや全ページ共通のものを入れる部分）
footer（サイトマップやコピーライト、地図などを入れる部分）

sidebarは右と左両方に置く３カラムにするときには「sidebarR｣｢sidebarL｣などと分けて使います。

実際にブラウザに表示される部分

実際にブラウザに表示される部分は<body></body>内に表示された部分のみです。なので実際にブラウザで表示すると

Webデザインはすごく楽しいし簡単だよ！

という一文のみが表示される、ということになります。

<head></head>部分はWebサイトに指示を与えるためのcssやjavascript、Google Analyticsのタグなどを設置します。

<head></head>内にある<title></title>タグは、Webページ上に表示されるものではなく、GoogleやYahooなどの検索サイトに表示されるタイトルになります。

SEOノウハウで「タイトルにキーワードを入れること！」とよく見かけると思いますが、それは主に<title></title>のことを差しています。

CSSとは

CSSとは「シーエスエス」と読み、「Cascading Style Sheets」の頭文字を取ったもので、Webページのスタイルを指定するための言語です。

CSSは単体で使うことはなく、必ずhtmlと組み合わせて使用します。htmlはWebページの構造や各要素の意味を明確に定義するのに対し、CSSは配置、色、フォントの大きさ、Webサイトのレイアウト（幅や高さなど）を細かく設定することで、様々なデザインを実現することができます。

#header {
width:1280px;
height:250px;
background-color:#ccc;
}
#main {
width:70%;
float:left;
margin-right:2%;
}

ちょっと設定は適当ですが、CSSはこんな感じです。幅や高さを決めたり、背景色を指定したり、背景に画像を設定して右寄せにしたり…など、レイアウトに関わる指示のほとんどのことがCSSで可能になります。

CSSを自由自在に操れるようになると、Photoshopでデザインしたものを1px単位で配置したり、グリッドレイアウトや全画面レイアウトなど、自分が実現したい表現がすべて可能になります。

Webデザインがすごく楽しい！と思えるのはCSSをマスターして実感できると思います。

なんでスタイルシート（CSS)が必要なの？

デザイン要素はすべてCSSで外部ファイル化するのが基本。html上でも、とくにWordpressのビジュアル―モードでフォントを変えたり文字色を変えたりしていると、html内に装飾属性が自動的に入ってしまいます。

ビジュアルモードのアイコンで文字色を赤、フォントを変更した場合

<span style="color: #ff0000; font-family: georgia, palatino, serif;">
こんな感じで入ってしまう
<span>

CSSで外部ファイル化した場合のhtml

htmlはこんなにシンプルになります。

<span class="red">こんな感じで入ってしまう</span>

cssはこんな感じ。

span.red {
color:#ff0000;
font-family:georgia, palatino, serif;
}

HTML4.01やXHTML1.0が推奨している

CSSをhtmlとは別ファイルで作成しなくても、html内に色やフォントの大きさ、ボーダーの太さなどを盛り込んで表示させることも可能です。素人の人が陥りがちです。

HTML4.01やXHTML1.0の仕様では、htmlファイル内にデザイン要素は入れず文書構造のみにすることを推奨しています。現在はまだ非推奨とはいえhtml上での装飾属性を表示していますが、html5以降では廃止される方向です。

SEO上の問題

HTML4.01やXHTML1.0が非推奨としているhtml内でデザイン要素を盛り込んでしまうのがなぜいけないかというと、非推奨だからというのはもちろんですが、SEO上もよくありません。

ロボットは上から順に構造や文章を読んでいきますが、SEOで検索上位に上げるためにはキーワードを意識して記事を書きますよね。１ページ内に30回などがいいと言われていますが、ロボットは全体のワードの出現率で何が重要なキーワードかを判別しています。

なのでhtmlは極力シンプルにロボットが内容を判断しやすい作りにしてあげることが重要なのです。外部ファイルからデザインやレイアウトの指示を遠隔操作してあげることで、内部構造がわかりやすく、ロボットも大喜びして評価が上がる、というわけです。

文書構造はhtml、デザインやレイアウト要素はcss、JavaScript言語はjsファイル、というように構造を明確化することでロボットが「うん、わかりやすいね！OK!」となり評価が上がります。

一括変更ができる

各ページでデザイン装飾をhtml上で行っている場合、たとえば「赤字」部分を全部「青字」に変更したい！と思ったとき、すべて手作業でひとつひとつ変更していかなくてはいけません。Dreamweaverがあれば一括変換も可能ですが、１文字でも違うと変更できないですしエラーの原因にもなるので避けた方がいいです。

CSSでデザインを一元管理していれば、ものの数秒で全ページの該当要素を一括変更できてしまいます。