ページ作成のテクニックをまとめた「20 pro tips」が公開されていますPHPプロ！ニュース

若干PHPとは異なった話題になりますが、CSSやページの作成テクニックをまとめたページ「20 pro tips」が.netにて公開されています。

掲載されている20個のTipsの概要は以下の通りです。詳しくは、「20 pro tips」ページをお読みください。

１．プランニング

実際にページの構築を行う前に、サイトやページのデザインを概覧することで、作成スピードが速くなります。この時点でおかしな間違いを発見し、修正することができるので、後戻りに要する時間を短縮できるからです。

２．手作業で行う

多くのWeb作成ツールが用意されていますが、コードを手作業で作成することを推奨します。これは、HTMLを取得するには自分の手を動かすのがもっとも良い方法だからです。しかし、GoLiveやDreamweaverのようなツールはコードエディタが充実しているため、十分に使う価値があるでしょう。

３．スタイルシート：インポート vs リンク

スタイルシートは@importを使ってもlinkタグを使っても実現できます。一番良いのは、Netscape 4向けにシンプルなスタイルシートをlinkタグで用意し、@importを使ってより複雑なスタイルシートを読み込む方法です。

<link rel=”stylesheet” href=”simple.css” _fcksavedurl="”simple.css”" _fcksavedurl="”simple.css”" _fcksavedurl="”simple.css”" _fcksavedurl="”simple.css”" type=”text/css” media=”screen”>
<style type=”text/css” media=”screen”> @import url(simple.css); </style>

４．グラデーションの背景

CSSを使うと背景画像を柔軟に定義できますが、背景画像は本文の背景だけでなく、すべてのDIV要素やブロック要素、インライン要素にも適用できます。

グラデーション背景を効率よく作成するには、1ピクセル幅のグラデーション画像を用意しておき、リピートさせる方法です。

body { background-color: white; background-image: url(background.png); background-repeat: repeat-x; }

５．コメントを記入する

後々見返して、スパゲッティコードになる事がよくあります。そのため、HTMLの中にコメントを埋め込んでおきましょう。コメントで増えるファイル容量はわずかですが、それによる時間の節約は大きなものです。またコメントを書くことで、コードを論理的に整理できることもメリットです。

６．簡単なPHPを使ってサイトを構築する

別にPHPの専門家になる必要はありません。しかし、サーバーでPHPが使えるのであれば、他のファイルやライブラリのインクルードを簡単で素早く行うことができます。たとえばメニューの要素などを別のファイルにしておくことで、サイト全体を更新する必要なくデザインの変更を行えます。

インクルードもとのファイルは.phpの拡張子で終わっておく必要があります。そして、以下のコードでファイルの挿入ができます。

<?php include(“filename.html”); ?>

７．em単位でフォントサイズを定義する

デザイナーはピクセル単位で定義しがちですが、Webの世界ではInternet Explorerで文字のリサイズが行えないため推奨されません。そのため、em単位で指定することが望まれます。

1emはだいたい16ピクセル相当なので、Bodyタグのフォントサイズを以下の通り62.5%にセットします。

body { font-size: 62.5% }

すると、1emがだいたい10ピクセル相当になるため、12ピクセル相当の文字サイズを表現したい場合は1.2em、9ピクセル相当の場合は0.9emと指定できます。

８．IEボックスモデルのハック

Internet Explorerのバグにより、ボックスのPadding値が正しく解釈されないことで、レイアウトが崩れる場合があります。この場合は、Box Modelハックとして知られており、IEの別のバグを効果的に使って解決をするものです。たとえば、以下のDIV要素を作成した場合、

div {_ width: 100px;_ padding: 5px;_ border: 5px solid #fff;_ }

多くのブラウザでは120ピクセル幅のボックスが、IEの場合だけは100ピクセル幅のボックスが作成されます。これを解決するには、以下のようにDIVタグの中にDIVタグを入れ子にすることで解決できます。

div {_ width: 100px;_ } 
div .hack {_ padding: 5px;_ border: 5px solid #fff;_ }

この場合、以下のような記述をします。

<div>
<div class=”hack”> 
ここに内容を記述
</div> 
</div>

９．スペースの節約

HTMLでフォームを構築をしたくないのは、ブラウザが自動的に余白と入れてしまうからでしょう。解決するには、以下のスタイル定義を書き込みます。

<form style=”margin-top: 0; margin-bottom: 0;”>

１０．テストの繰り返し

Internet Explorerが多くの割合を占めていますが、FirefoxやOperaなどのブラウザーも増加しています。

すべてのブラウザのすべてのバージョンで美しく見えるサイトを作ることは事実上不可能です。しかし、Mozillaベースのブラウザ、WebKitベースのブラウザ（Safariなど）、KHTMLベースのブラウザ（Konquerorなど）、Opera、そしてInternet Explorerの4以上で見えることが一般的な指標です。

１１．画像形式の基礎

昔はGIFとJPEGが使われていましたが、今ではPNGも使われています。

しかし、Internet ExplorerはPNGの透明色を原則としてサポートしていません。しかし、８ビットのPNG画像はGIF画像よりもサイズが小さくなるため、アニメーションが不要であればPNGを使うとよいでしょう。また、24ビットのPNG画像よりもJPEGの方が小さいファイルサイズになります。

１２．titleとalt属性

すべての画像は、以下のようにalt属性とtitle属性を追記することで、スクリーンリーダーが正しく読み上げてくれます。

<img src=”logo.gif” alt=”logo” title=”logo/” />

１３．疑似クラスの正しい形式

テキストのロールオーバーエフェクトなどには、疑似クラスを正しい順番で記述する必要があります。以下が正しい順番です。

a:link { color: blue; }
a:visited { color: purple; } 
a:hover { color: purple; } 
a:active { color: red; }

１４．セマンティックなマークアップ

セマンティック（意味のある）マークアップをすることで、Webサイトを外見と内容に区分できます。理想的には、スタイルシートを外した場合でも、Webサイトが正しく機能することが重要です。

配置やスタイル定義、一定のインタラクティブ性などは、スタイルシートやCSS-Pなどで追加できます。

１５．Favicon

Faviconを使うと、ブラウザのお気に入りリストなどにアイコンが表示されます。これを作成するのは簡単で、.icoの拡張子のファイルをサイトのルートフォルダに保存するだけです。

１６．CSSで大文字化する

文字を一括して大文字にしたい場合、CSSを使うと便利です。以下のように記述すると、h1タグのテキストをすべて大文字にします。

h1 { text-transform: uppercase; }

１７．画像の周りをテキストで囲む

素早く、そして手っ取り早く画像の周りをテキストで囲むには、imageのalignプロパティを使って左右に移動させることです。この場合、以下のような記述になります。

<img src=”image.jpg” align=”left”>

１８．ユニバーサルな文字セット

UnicodeをベースにしたUTF-8文字セットを使うと、世界の文字を表現できます。この場合、ページの先頭には以下のように記述します。

<meta http-equiv=”content-type” content=”text/ html;charset=utf-8” />

１９．印刷スタイル

Webページを印刷する場合、印刷用ページを作るのではなく、サイトの印刷時のみ有効なCSSを定義できます。これには、以下のような記述を行います。

<link rel=”stylesheet” type”text/css” href=”print.css” media=”print”>

あるいは

<style type=”text/css” media=”print”> @import url(print.css); </style>

２０．他人から学ぶ

他のサイトのHTMLも、ソースコードを見ると簡単に読むことができます。そうして、皆がどのように作品を作っているか研究してみましょう。