ＣＳＳで操るＨＴＭＬ
標準言語、ＨＴＭＬ５
タグは何種類あるか
ＨＴＭＬ５のタグは、現在のところ１２０種類ほどあります。その中でもよく使うタグは、多くても５０種類です。ＨＴＭＬ５という言語の単語の数は、高々５０語なのです。ＨＴＭＬの文法も単純です。コンテンツを、開始タグ<hoge>と終了タグ</hoge>で囲えばよいのです。タグの中には、タグを書けるので、入れ子にもできます。
<body>
<div id="example">hello</div>
</body>
終了タグがないタグもあります。ファイルを埋め込むタグです。
<img src="example.png" alt="画像例">
src="example.png"の src や、alt="画像例"の alt を属性といいます。タグには、属性があらかじめ書けるようになっており、タグの性質を決めることができます。id="hoge"と書くと、そのタグの id は hoge という名前である、という意味になります。タグに属性を書いておくと、ＣＳＳやＪａｖａＳｃｒｉｐｔを使うとき便利です。
ＨＴＭＬ５の文法は、タグで囲い、タグに属性を書く。それがすべてです。
<タグ名 属性="属性の値">コンテンツ</タグ名>
これが必須のタグである
実用的には、どのウェブページにも次のタグが必要です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページのタイトル</title>
</head>
<body>
</body>
</html>
<!DOCTYPE html>は、この文書がＨＴＭＬ５で書いてあるという意味です。
<html>タグは、必ず書きます。lang="ja"は日本語のウェブページであるという意味です。
<head>タグは、直接ブラウザには表示されません。文書情報をまとめて書きます。
<meta charset="UTF-8">は、文字コードがUTF-8であることを表します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">と書くと、スマホやタブレット用にもデザインできるようになります。
<title>タグには、ブラウザのタブに出す文言を書きます。
<body>タグに、ウェブページの本文を書いていきます。
なるべく使わないタグ
かつてのＨＴＭＬでは、どうしても<div>タグを多用しましたが、ＨＴＭＬ５では<div>をできるだけ使わずに、<main>、<section>、<article>、<figure>の順に細かくマークアップします。また、<br>タグで改行や余白を出すこともできるだけ行わず、改行は<p>タグで、余白はＣＳＳのmarginでとるようにします。ＨＴＭＬ５のタグは今でもＷ３Ｃによって見直され、追加されるもの、意味が変わるもの、廃止されるものもあります。かつてはよく使われた、<center>、<font>、<frame>、<marquee>は、今は動きません。
ＨＴＭＬを組むときに考えていること
タグは、文書構造を表します。ヘッダー、フッター、サイドバーなど、ウェブページのそれぞれの部品が持つ役割を割り当てます。その作業をマークアップといいます。タグがなければ、ただの文書です。タグは、文書内のすべての文について、割り当てます。そうすることで、それぞれのタグを、ＣＳＳやＪａｖａＳｃｒｉｐｔで操作することができます。また、適切にマークアップされたウェブページは、検索エンジンにかかりやすくなります。
マークアップの最中は、ブロックを組み立てる感じがします。幅を持たせることができ、幅をなくすことも、幅を伸び縮みさせることも、あとからＣＳＳでできます。とにかく、考えていることを実現する方法は必ずあります。マークアップは楽しい作業です。
タグにデザインを当てる
いろいろなセレクタ
ＣＳＳは、ＨＴＭＬのタグにデザインを結びつける言語です。ＨＴＭＬのタグのほか、タグの属性にも結びつけることができます。デザインを当てるタグやタグの属性を、セレクタで決めます。それから、作りたいデザインをプロパティを並べて作っていきます。文法は簡単で、下のとおりです。
セレクタ{プロパティ名: プロパティの値;}
たとえば、h1タグの文字を赤色にしたいとき、h1{color: red;}と書くと、すべてのh1の文字色が赤くなります。
実習：サンプルページ
参考：色の印象
プロパティでデザイン
ＣＳＳでは、プロパティの数は４００を超えています。レイアウトを作るためのものや、背景、形状、視覚効果、アニメーションを作るためのプロパティもあります。プロパティにはそれぞれ、いくつかの値があります。また、ＣＳＳには「熟語」があり、プロパティの定番の組み合わせがいくつも知られています。
利用できるＣＳＳプロパティは今でも続々と増えており、ブラウザメーカーは懸命に開発中です。
名刺に学ぶレイアウトの秘訣
レイアウトを作ろうとすると、欄内をとにかく詰め込んで余白をとらないように考えがちですが、次の４つの基本を守ると、見違えるような出来になります。
- 近接 - 近づける、離す
はじめは、このような名刺だとします。
ほどがやパソボラ
Ｃ班
保土谷 太郎
Hodogaya Taro
080-1234-4321
taro@pasoc.jp
記載する情報を洗い出せていますが、名刺には見えません。
そこで、まず「近接」の法則を使います。関連する情報を近づけ、グループにします。そして、他の情報やグループから離します。
ほどがやパソボラ
Ｃ班
保土谷 太郎
Hodogaya Taro
080-1234-4321
taro@pasoc.jp
情報同士のまとまりが一目で分かるようになりました。
- 整列 - そろえる、並ばせる
今度はグループを並べます。「整列」です。透明な補助線が見えるように配置するのがコツです。
ほどがやパソボラ
Ｃ班
保土谷 太郎
Hodogaya Taro
080-1234-4321
taro@pasoc.jp
カッコよくなりました。透明な補助線を使って、すべての要素を緊密に配置できればより良いです。
- 反復 - 一部を繰り返す
次に、いくつかの要素に同じルールを適用します。「反復」です。今回はローマ字と、電話番号、メールアドレスのフォントサイズを同じくらい小さめにします。
ほどがやパソボラ
Ｃ班
保土谷 太郎
Hodogaya Taro
080-1234-4321
taro@pasoc.jp
リズムが生まれ、面白い印象に変わりました。
- 対比 - 差異をつける
最後に「対比」です。コントラストを付けます。いちばん上の情報といちばん下の情報を他より太字にしました。
ほどがやパソボラ
Ｃ班
保土谷 太郎
Hodogaya Taro
080-1234-4321
taro@pasoc.jp
こうすると、視線が太字の２か所を往復しませんか。つまり名刺を見ている時間が長くなるのです。
これら４つのコツは、ＰｏｗｅｒＰｏｉｎｔでは簡単な操作でできます。これらのコツはウェブデザインにも使えます。レイアウトの練習に試してみてはいかがでしょう。
クラスとＩＤ
ＨＴＭＬの属性には、ＣＳＳでデザインを当てやすくするために使われる、classとidという属性があります。ウェブページはブロックのように部品を組み合わせて作りますが、その際にクラスとＩＤが大活躍します。クラスとＩＤは、部品に付ける名前です。クラスとＩＤにはやや違いがあります。１つのＩＤは１ファイルに１回のみ登場できます。クラスはいくつ登場しても構いません。その代わり、ＩＤはクラスよりも優先して実行されます。また、ＩＤはクラスより速く読み込まれます。
ＣＳＳでセレクタを書くときは、先頭に、クラスには「.」を、ＩＤには「#」を付けます。id="hoge"であるＨＴＭＬ要素のセレクタは#hogeですし、class="hoge"であるＨＴＭＬ要素のセレクタは.hogeなのです。
ＣＳＳとＨＴＭＬをつなぐためにクラスとＩＤを使う
命名論
クラスとＩＤは万能だが…
クラス名やＩＤ名の付け方にはいくつかの流儀があります。
- ＣＳＳのプロパティから借りる
ＣＳＳで.mB10{margin-bottom: 10px;}とし、ＨＴＭＬタグにclass="mB10"と書くことで、mB10クラスの付いたすべてのタグにmargin-bottom: 10px;が効きます。ＣＳＳで繰り返し同じプロパティを書かないようにできます。
- 役割をさらに与える
ＨＴＭＬタグにid="contents"や、class="icon"などと書く方法です。ＨＴＭＬタグにない役割を名前にします。同じタグに異なる役割を与えたいときに役立ちます。
- ＢＥＭ、ＳＭＡＣＳＳ、ＯＯＣＳＳ
この３つはＣＳＳでの命名ルールの考え方です。部品それぞれに与えるクラス名にルールを持たせることで、予測しやすい、保守しやすい、再利用しやすい、拡張しやすいソースコードを目指します。
アクセシビリティを考える
ウェブは、老若男女、あらゆる人が見ます。手が不自由な人、色覚が異なる人、文字が読めない人も見ます。また、ＰＣで見る人も、タブレットやスマホで見る人もいますし、巨大なスクリーンに投影することもあります。ユーザーそれぞれの使い方に対応するウェブページは、手が行き届いているとの評判を頂けます。官公庁や医療機関のサイトは、ユニバーサルデザインで設計されているところが多いので、参考になると思います。
実習：サンプルページ
読みやすい名前
ファイル名を決めるとき、分かりやすい名前を考えるのと同じように、ＩＤ名やクラス名を付けるときにも、分かりやすい名前を付けます。プログラマでも誰でも、２～３週間経つとソースコードを忘れるものです。忘れてもすぐに思い出せる、すぐに分かるような名前を付けます。特に、一人で開発するときは自分だけに分かる名前で良いですが、複数のメンバーで開発するときは、他のメンバーにも分かるような名前を付けます。ソースコードのメンテナンスは楽に越したことなしです。
２～３週間経つと、誰でも、ソースコードを忘れる
おまけ：情報整理概論