HTMLテクニック

　HTMLやCSSを応用してページを作成する場合、基本的なポイントを知っていればより簡単に、より良いページの作成が出来ます。ここではそれらのポイントの中でいくつかを紹介します。

　

　また、ここに書かれた基本テクニックの他に色々な方法があると思います。自分で工夫したり、また、様々なサイトで紹介されている方法を調べて使うのも良いでしょう。

---

ページの構造化・ブロック要素とコントロール

　大抵の場合一つのwebページは情報を含め、いくつかのブロックで構成されます。 例えばよくあるパターンは、このページのような「ヘッダ」「メインメニュー」「左側メニュー」「コンテンツエリア（メインの情報を表示する中央の広い部分）」「フッター」と言った構造です。これらを構成するのによく使われる構造タグはdivタグです。

<div>

divタグはブロックタグと言われ、横幅、高さ、上下左右マージン、上下左右の余白、背景、枠線、左右のフロート（右寄せ左寄せ）と言うプロパティーをもち、入れ子の出来るコンテナです。divタグはページのレイアウトで最も重要なタグです。

スタイル:
.exp{
	height:100px;
	width:100px;
	float:left;
	clear:right;
}

HTML:
<div class="exp">Webデザインの基礎</div>

クリアフィックス・clearfix

　ブロック要素をフロートでコントロールすると、ブラウザの計算上その要素からは高さが無くなると言う特徴があります。そのため次の要素はその高さから並んで表示されるのです。クリア(clear:left or right or both)を使いフロートの修了を宣言できますが、左右の要素の高さの違い等から、下の要素が上に重なってしまい表示が崩れてしまうことが良くあります。またその崩れ方はブラウザによって様々で、適当なそのばしのぎの修正を追加していると、そのうちに修正不能のカオスが出来上がります。

　

　それを防ぐテクニックがクリアフィックスです。 基本的な使い方は、フロートを掛けた複数のブロック要素をコンテナを、一つのブロック要素に入れ、外のブロック要素にクリアフィックスを掛けます。そうする事によって一番外のブロック要素には中のブロックに応じた高さが与えられるので、下のブロック要素が上がってくる事は無くなります。

　

　XHTML+CSSで画面を構成するコーディングテクニックの中でとても重要なものです。必ず覚えて利用しましょう。

スタイル:
fl,fr{
	height:100px;
	width:100px;
	background-color: #999;
}
.fl{float:left}/*左よせブロック*/
.fr{float:right}/*右よせブロック*/

.clearfix {width:100%;}/*クリアフィックスの例*/
.clearfix:after {
  content: " "; 
  display: block; 
  clear: both;
}

HTML:
<div class="cleafix">
	<div class="fl">左ブロック</div>
	<div class="fr">右ブロック</div>
</div>

---

構造化されたページの例

※図 ヘッダー ＋ フロートによる３段レイアウト ＋ フッター

• ブロック要素落ちを防ぐテクニック

tips overflow:hidden フォントの微妙なサイズの違いや、ブラウザによるボーダーやパディングの解釈の違いや、あるいは数値等の設定の間違いにより、ブロックのサイズが意図した設定より大きく計算されてしまう場合があります。そういう場合、大抵の場合ページのレイアウトが予想しない形に崩れてしまう事が良くがあります。しかしブロックのoverflow要素をhiddenにしてしまえばはみ出した部分は大きさとして計算されないため、ブロックの崩れを防止できます。大きくはみ出してしまう場合、表示されない部分が出来てしまい問題があるので、状況に応じた修正すると良いでしょう。

---

タイトルを画像にする方法背景画像を使う

　タイトルのように文字を大きくきれいに表示させたいときに、文字のかわりに画像を使う方法があります。しかし、画像を使ってしまうとhtmlの中でタイトルの文字列という重要な情報が無い事になってしまいます。画像のAlt(代替え文字列)にタイトルを入れる事は妥協策としてありますが、やはり望ましいのは文字がそのまま入っている事です。そこで、文字列はhtmlに入っているのに画面には表示させず、画面には画像が見えているようにします。具体的な方法はいくらかありますが、背景に画像を使うことで画像を表示させ、文字は非表示にすることで出来ます。

スタイル:
h1#header{
	height:219px;
	background-color: #999;
	background:url(../img/header_title.png) center;
	text-indent:-3000px;
}

HTML:
<h1 id="header">Webデザインの基礎|情報科学基礎 副専攻：情報メディアコース</h1>

　タイトルを入れるコンテナのブロックに指定し(display:block)画像の大きさを指定します。背景にデザインされたタイトルの画像を指定します。タイトル文字列はそのブロック内に配置します。方法は幾つかありますがtext-indentで表示できないほど大きな値を設定して見えなくしてしまうのが望ましいです。この方法だと余計なコンテナタグも必要無いためです。周りのコンテナの状態や、違うメディアでの表現や、様々の理由でtext-indentを使えない場合はdisplay:hiddenを使って表示を隠す場合もありますが、ブラウザの自動読み上げを使う場合、読み上げられない可能性があるので、推奨されません。

---

リストタグのヘッダを画像にするliタグに背景画像を設定する

　リストのヘッダは数字やイロハ、または・や●などありますが、画像が使えれば自由なリストが使え表現が自由になります。結論から言うとこれも背景を使います。リスト用の画像をスタイルで指定する事が出来るのですが、位置を指定できないためリストのタイプごとに余白を調整した画像を作り直す必要があるので不便です。そこで、ピクセル単位で画像の位置を調整できる背景を使うのが良い方法です。
　また透明gifやアルファマスク付きのpng画像を使うと背景色と関係なく使用できるので汎用性が高くなります。

スタイル：
#html_block li{
	list-style:none;
	background:url(../img/arrow.png) no-repeat 1px 2px ;
	padding-left:20px;
}

HTML：
<ul id="html_block">
<li><a href="tag_css/#t01">01.文書・構造</a></li>
<li><a href="tag_css/#t02">02.見出し・段落</a></li>
</ul>

---

リストによるナビメニュー

　グローバルナビのようなボタンの集まりをリストタグで作ります。
　一連のリンクが一つの固まりである事を示す事が出来るため、htmlの意味的にも構造的にも良い方法で、サーチエンジンにも良い影響があるとされています。表現するメニューにより実現法は様々ですが、基本的にはリストタグはブロック要素なので横に並べるにはインラインか、ディスプレイインライン要素に指定し直すか、floatをかけて横に並べます。画像を使う場合背景にして、文字列表示を見えないようにindentやコンテナをつけてdisplay:hiddenをかけます。場合によりますがリンク要素(<a>タグ)はdisplay:Blockにしてサイズを大きめに指定しクリックしやすくします。

スタイル：
#menu li a{
	background:url(../img/snow_small.png) no-repeat 0 6px;
	display:block;
	padding:14px 22px 0 37px;
	color:#fff;
	height:46px;
}
#menu li {
	float: left;
	margin: 0;
	height:46px;
	font-weight: bold;
	list-style:none;
}

HTML：
<ul id="menu">
　　　　<li><a href="/">トップページ</a></li>
　　　　<li><a href="/schedule">スケジュール</a></li>
</ul>

---

Aタグのボタン化

　HTMLで文字列にリンクをつける場合Aタグを使いますが、その場合、文字列はリンクを表す色と、リンクを表すアンダーラインで修飾されて表示されます。メニューやウィジェットの機能ボタンなど文中以外のリンクは文字列をそのままボタンとして使えると便利な場合があります。そういう場合、Aタグそのものにボタン的なスタイルをつければ、コードも短く単純ですみます。

スタイル：
a.btn{
	display:block;
	border-radius: 2px;
	width:40px;
	height:25px;
	color:#fff;	
	background:#ccc;
	margin-left:5px;
	margin-top:5px;
	padding-top:4px;
	padding-left:10px;
}

HTML：
<a href="index.html" class="btn">02</a>

---

ロールオーバー(hover)による変化

　リンクにマウスカーソルをあわせたときにリンクの形状や色が変わると、そのリンクオブジェクトが操作可能である事がユーザに伝わりやすくなります。

　

　色々な方法がありますが、一般的な方法の一つに疑似セレクタを使ったものがあります。関連する疑似セレクタには以下のようなものがあります。

　

　hover（マウスオーバー・ホバー）active（マウスダウン時）visited（訪問済み）

　

　基本のスタイルをaタグに定義し、設定する状態を疑似セレクタで指定し、差分のスタイルを定義します。

スタイル：
a.btn{　/* 基本のスタイル */
	display:block;
	border-radius: 2px;
	width:40px;
	height:25px;
	color:#fff;	
	background:#ccc;
	margin-left:5px;
	margin-top:5px;
	padding-top:4px;
	padding-left:10px;
}
a.btn:hover{　/* ロールオーバーで明るくなる */
	color:#f00;
	background:#fff;
}
a.btn:active{　/* クリックすると暗くなる */
	color:#bbb;
	background:#aaa;
}

HTML：
<a href="index.html" class="btn">02</a>