HTML&CSS 初級者から中級者への4ステップ
はじめに
この記事では、
「HTMLとCSSの基本的なところは理解して、コーディングできる」
方で、
「ここから、さらにWebデザイナーやコーダー、フロントエンドエンジニアとして、HTMLコーディングのスキルを高めていきたい」
「WebディレクターやSEO担当などの職種を目指すうえでコーディングの重要どころは押さえておきたい」
方をイメージしながら書きました。
上記のような方が、「フロントエンドまわり」「Webページのコーディング」において
押さえておきたいくべきなのかを簡単にまとめてあります。
※対象バージョンはHTML5と、CSS3です
本記事のラインナップ
1.セマンティックに書く
たとえdivタグだけでコーディングをしても、
CSSの書き方次第で見え方をいかようにもコントロールすることができてしまいます。
しかし、それではいかんのです。
以下のポイントを意識して「セマンティックな」コーディングをしましょう。
html5で、指定できるタグの種類がさらに増えたので
この考え方は今後ますます重要になっていくと思います。
※セマンティックって何?
ページに記載されている各種情報が、
「ここはヘッダエリアです」「ここは箇条書きです」などとしっかり示されていること、というのが私の解釈です。
- 見出しは<h1>~<h6>:h1はページ内で1個、h2以降は何個使ってもOK
- 繰り返し要素や、要素を並列に並べるなら<ul>と<li> 例)グローバルナビ、
- 単語と説明のペアは<dl>(<dt>と<dd>のペア)
- 意味ごとのまとまりで<section>、単独で意味が成り立つものは<article>、単なる装飾の場合は<div>
- 不要なdivタグは極力書かない:box-sizing を活用して、divの入れ子を減らす
2.プログラム化しやすいコードにする
繰り返し要素などで特にありがちなのがこれ。
最初の要素、最後の要素だけ特定のクラス名を入れるようなデザイン指定をすることが多いが、これだとプログラムが特定の要素のみ、別のデザインにする必要が出てきてしまう。
そういった対応をしなくて済むようなコードにしよう。
サンプル1:コンテンツボックス
1-A:プログラム化しにくい例
【HTML1-A】
<div class="box">…</div>
<div class="box">…</div>
<div class="box">…</div>
<div class="box box_last">…</div>
【CSS1-A】
.box { border-bottom:1px solid #cccccc; }
.box_last { border-bottom:none; }
【HTML1-A】を出力するプログラムのイメージ
for ( i=0; i<4; i++ ) {
if ( i !=4 ) {
print "<div class=\"box\">…</div>";
} else { // i=4(最後の要素)の場合
print "<div class=\"box box_last\">…</div>";
}
1-B:プログラム化しやすい例
【HTML1-B】
<div class="box">…</div>
<div class="box">…</div>
<div class="box">…</div>
<div class="box">…</div>
【CSS1-B】
.box { border-bottom:1px solid #cccccc; }
.box:last-child { border-bottom:none; }
【HTML1-B】を出力するプログラムのイメージ
for ( i=0; i<4; i++ ) {
print "<div class=\"box\">…</div>";
}
プログラムが非常にシンプルになったのがおわかりいただけるだろうか。
サンプル2:floatで複数個のコンテンツボックスを横並びする場合
以下のようなコンテンツをコーディングする場合。
[1個目の要素] [20pxのマージン] [2個目の要素]
[3個目の要素] [20pxのマージン] [4個目の要素]
2-A:プログラム化しにくい例
【HTML2-A】
<ul class="contents_area">
<li class="box_left"></li>
<li class="box_right"></li>
<li class="box_left"></li>
<li class="box_right"></li>
</ul>
【CSS2-A】
.contents_area {width:620px;}
.box_left { width:300px; float:left; margin-right:20px; }
.box_right { width:300px; float:left; margin-right:0; }
【HTML2-A】を出力するプログラムのイメージ
print "<ul class=\"contents_area\">";
for ( i=0; i<4; i++ ) {
if ( i % 2 == 0 ) { // 偶数個目のボックス
print "<li class=\"box_right\"></li>";
} else { //奇数個目のボックス
print "<li class=\"box_left\"></li>";
}
2-B:プログラム化しやすい例
【HTML2-B】 ※もしかしたらulの親ボックスとしてdivを追加した方がいいかも。
<ul class="contents_area">
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
<li class="box"></li>
</ul>
【CSS2-B】
.contents_area {width:620px; margin-right:20px;}
.box { width:300px; float:left; margin-right:20px; }
ここで使用しているやり方は「ネガティブマージン」と呼ばれています。
【HTML2-B】を出力するプログラムのイメージ
print "<ul class=\"contents_area\">";
for ( i=0; i<4; i++ ) {
print "<li class=\"box"></li>";
}
3.共通要素はまとめる & バリエーション・子要素の表記統一(MindBEMding)
Webページでは基本的に同じレイアウトを繰り返す事が多い。
変えるとしても「色だけ変える」とか「見出し画像だけ変える」とか
一部だけ事なることが多い。
そこで、共通のレイアウト指定と、個別のレイアウト指定を分割して書くと
よりレイアウトの統一がしやすくなるし、
CSSのデータサイズが減るのでパフォーマンスUPにもつながります
(と言ってもテキストデータなので微々たるものでしょうが…)
CSSの表記法にはSMACCS や MindBEMdingなどがありますが、
ここではMindBEMding の一部を紹介します。
参考サイトは以下を見ていただくとして、
[CSS]BEMの方法論とMindBEMdingという記法 - Qiita
「__」と「--」どっちを使えばいいか?という覚え方。
私は以下のように覚えています。
「__」 は、子要素→「下」のイメージということで「アンダーバー」を使う
「--」は、バリエーション→いろんな種類が並列で存在するということで「ハイフン」を使う
実際、私もMindBEMdingを使うことで、
ページのレイアウトを頭の中で構造化&整理してコーディングすることができる
というメリットを感じます。
積極的に活用することをオススメします。
4.スマホ対応
Webページをスマホ対応させる方法は、主に以下の3種類があります。
- サーバ側でUserAgentを判断して、出力するHTMLコードを変える
- クライアント側でUserAgentを判断して、読み込むCSSファイルを変える(Javascriptで記述)
- レスポンシブWebデザインにする(Media Queries:メディアクエリ を使用)
※これ以外にも「PC版ページとSP版ページを異なるURLで運営する」などの方法があります
各々メリット・デメリットがありますが、以下理由から私は2番が一番使いやすいと考えています。
・PC版、スマホ版ページで独立したデザインを適用できる
(完全に切り分けてワイヤーフレームやデザインを考えられるため、難易度が低い)
・コーディングで実装できる
(1番はサーバ側の実装が必要で、コーディングの範疇を超えてしまう)
スマホ対応ページで必ず入れておきたい要素を以下に記載します。
【PCとスマホで別々のCSSやJavaScriptを指定するための記述】
<head>内に記述
<script type="text/javascript">
<!--
if (navigator.userAgent.indexOf('iPhone') > 0 || navigator.userAgent.indexOf('iPad') > 0 || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { // Smartphone
document.write('<link rel="stylesheet" type="text/css" href="******.css" media="screen,print" />');
document.write('<scr' + 'ipt type="text/javascript" src="******"></scr' + 'ipt>');
}else{ // PC
document.write('<link rel="stylesheet" type="text/css" href="******.css" media="screen,print" />');
document.write('<scr' + 'ipt type="text/javascript" src="******"></scr' + 'ipt>');
}
-->
</script>
【viewportの設定】
これも<head>内に記述。基本的には以下記述がベターです。
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
その他、スマホでコーディングするときに意識したいこと
・機種により横幅が異なる
・スマホを横に倒したとき(ランドスケープ)のレイアウトも考慮が必要
これらの特徴から、
以下の点を意識してコーディングすると良いでしょう。
- 要素の横幅はなるべく「%」で指定
- ページ全体を「横幅640px」でデザインするのが基本
- 「横幅640px」でデザインしたものが「横幅320px」で表示される(半分の大きさ)
- 画像は、表示させたい大きさの2倍以上で作成し、半分以下の比率で表示させる
- 線の太さは2px以上にする(1pxだと画像縮小表示のときに消えてしまうことがある)
- スマホを横に倒したときのデザインも作成しておく(あるいは、コーディング担当にスマホを横に倒したときに各要素がどのように変わるかをきちんと共有する)