CSSの話：疑似クラス
ある条件を満たした要素だけにスタイルを設定したいときのために、CSSには「疑似クラス」と呼ばれるものが定義されています。
例えば、リンクタグにマウスカーソルが乗ったときのスタイルを定義する:hover疑似クラスや、最初の要素にのみ適用される:first-child疑似クラスなどがあります。
CSSの話：cursor
その場所にカーソル（マウスの矢印）を乗せたときの、カーソルの形を指定します。
値として、以下のものを選ぶことができます。auto（既定値：自動）、crosshair（十字印）、default（通常のもの）、pointer（ポインタ）、move（移動用）、e-resize（右リサイズ）、ne-resize（右上リサイズ）、nw-resize（左上リサイズ）、n-resize（上リサイズ）、se-resize（右下リサイズ）、sw-resize（左下リサイズ）、s-resize（下リサイズ）、w-resize（左リサイズ）、text（テキスト選択）、wait（待ち）、help（ヘルプ）。
ただし、無意味にカーソルの形を変えるのは、操作性が悪くなるので、このプロパティはあまりおすすめしません。
CSSの話：background
背景に関するさまざまな指定をまとめて行うことができるプロパティです。指定したい値を並べて書きます。順序は自由で、特に指定の無い項目は省略することもできます。
background:#ffffff url(xxx.gif) right top repeat-y fixed;と書くと、背景色は白、xxx.gifという画像を読み込んで右上から縦に並べ、画面をスクロールしても背景は固定、ということになります。
CSSの話：background-attachment
たとえば、ページが縦に長くなっている場合など、スクロールした時に背景画像が一緒に動くようにするか、スクロールと無関係に常に一定の場所に背景画像を固定するかを決めます。
background-attachmentの値をscroll（既定値）にした場合、画面のスクロールと一緒に背景も動きます。fixedに指定すると、画面をスクロールしても背景画像は動きません。
ページの中に、ワンポイントの画像を常に表示しておきたい時などに使います。
CSSの話：background-repeat
背景画像の繰り返し設定をするプロパティです。何も設定しない場合、背景は指定した範囲全体に、タイルのように敷き詰められます。
指定できる値は、repeat（初期値：縦横に繰り返し）、repeat-x（横方向のみ繰り返し）、repeat-y（縦方向のみ繰り返し）、no-repeat（繰り返さない）です。
このプロパティを使うことで、帯のような背景や、ワンポイントで画像を入れるなどの効果を入れることができます。
CSSの話：background-position
CSSでは、背景画像の開始位置を指定することができます。background-positionプロパティでは、left（左）、top（上）、right（右）、bottom（下）、center（中央）で位置を指定するほか、数値やパーセントで細かい指定をすることも可能です。
数値は、マイナスの値を指定して、画面から見切れるような形で背景を指定することもできます。
CSSの話：background-image
background-imageでは、背景の画像を指定します。ブロック要素だけでなく、インライン要素にも背景画像を付けることができます。
また、他のプロパティと組み合わせることで、リストマーカーのようにワンポイントで画像を入れたり、マウスカーソルを乗せると画像が切り替わるボタンを作ったりすることもできます。
CSSの話：background-color
background-colorプロパティでは、背景色を指定します。RGB（赤・緑・青。光の3原色）それぞれ256段階の数値指定、もしくは、色の名前で指定します。何も指定しない場合は透明になります。
ブロック要素にもインライン要素にも指定でき、ブロック要素の場合はブロック全体の背景、インライン要素の場合は、テキスト等のバックに、マーカーでなぞったように背景色が付きます。
CSSの話：text-shadowの補足
現在、text-shadowプロパティを実装しているブラウザは、FirefoxとOperaの最新版、そしてSafariです。Internet Explorerでは対応していません。
CSSに限りませんが、「標準」として定められているものと、実際に使われているものは、得てして食い違いがちです。
文の装飾は、使っているフォントにも影響されるので、特に環境によって差が出やすいところです。
「きれいな文字は画像で表示」という不文律は、当分破られそうにありません。
CSSの話：text-shadow
text-shadowは、文字に影を付けるプロパティです。影の色、縦横それぞれの距離と、ぼかしの大きさを数値で指定します。
現在は、まだあまり使ってはいませんが、今後「メイリオ」のような、アウトラインフォントが普及するようになれば、文字とCSSだけで、画像のような表示が可能になるでしょう。
影だけでなく、さまざまな効果を表現するプロパティが実装されるようになる日も遠くないかも知れません。
CSSの話：text-transform
英文の大文字と小文字の表示を指定するプロパティです。
capitalize（各単語の最初の文字を大文字にする）、uppercase（すべて大文字にする）、lowercase（すべて小文字にする）、none（既定値：何もしない）の値を指定します。
英文をメインに書く場合にはなかなか便利ですが、日本語のホームページ制作では、めったに使う機会のないプロパティです。
CSSの話：letter-spacing
letter-spacingプロパティは、文字の間の空白を指定します。数値を指定することで、指定した分だけ字間を空けて表示されます。
強調や、見出しの部分等で使うことがあります。
似た効果のプロパティで、word-spacing（単語の間のスペースを指定する）がありますが、日本語のページ制作では、こちらはあまり使いません。letter-spacingのみで十分でしょう。
CSSの話：text-indent
文章の最初の行の字下げを設定するのがtext-indentプロパティです。値には数値を指定します。
pタグ等に設定して、段落ごとに字下げを入れるようにする使い方や、 1行で終わるブロック要素の場合、padding-leftの代わりとして使う方法があります。
CSSの話：list-style
リストに関する表示をまとめて指定するのがlist-styleプロパティです。リストマーカーに使う画像、画像を表示できない場合のマーカーの種類、文章の字下げをまとめて指定できます。
ただし、現行のCSSでは、list-style-imageで細かい画像の位置調整ができないので、これらのプロパティはあまり使いません。
リストマーカー的に画像を表示する場合は、list-style-type:none;（マーカー無し）を指定して、backgroundと、paddingやtext-indentを組み合わせた方が、細かい調整ができるので、そちらの方法を使っています。
CSSの話：list-style-image
リストのマーカーを、画像に変えたい場合に使うのが、list-style-imageプロパティです。画像のURLを指定すると、その画像がリストの頭に表示されるようになります。
指定方法は、list-style-type:url(画像のURL);です。このURLは、絶対パス（http://～で書く書き方）でも、相対パス（相対的な場所で指定する方法）でも構いません。
相対パスでURLを指定する場合は、CSSファイルの場所から見たパス指定になります。他のHTMLファイルとCSSファイルの場所が違う場合には、注意が必要です。
CSSの話：list-style-type
HTMLでリストを作成するときに、リストのマーカー（項目の最初に付く印）を設定するプロパティです。入力できる値は、disc（既定値：黒丸）、circle（白丸）、square（四角）、decimal（1, 2, 3...）、lower-roman（i, ii, iii...）、upper-roman（I, II, III...）、lower-alpha（a, b, c...）、upper-alpha（A, B, C...）、none（印無し）など、数多くあります。ただし、ブラウザの対応状況はまちまちのようです。
基本的に、liタグに設定しますが、disc（既定値：黒丸）、circle（白丸）、square（四角）などの順番が関係ないものはulタグ（順番無しリスト）で、decimal（1, 2, 3...）、lower-roman（i, ii, iii...）、upper-roman（I, II, III...）、lower-alpha（a, b, c...）、upper-alpha（A, B, C...）などはolタグ（順番ありリスト）で使うようにしましょう。
CSSの話：z-index
positionプロパティなどで位置を設定すると、場合によっては要素が重なってしまう場合があります。いくつかの要素が重なって表示されるときに、重なりの順番（どの要素が上にくるか）を決めるのが、z-indexプロパティです。
値は、正の整数を指定します。指定した数字が大きい方が、上（前面）に表示されます。
CSSの話：position（その2）
positionプロパティだけでは、表示する位置を指定できないので、表示位置を設定するためのプロパティがあります。top、left、bottom、rightの4種類のプロパティを組み合わせて、位置を指定します。
それぞれ、数値指定もしくは%指定で、基準点からの距離を指定します。
position:relative; top:10px; left:5px;とすると、本来の表示位置より10px下、5px右にずれた場所に表示されることになります。topの場合は「上から」、leftでは「左から」、指定した数値分移動する、ということです。
position:absolute; right:10%; bottom:30px;の場合は、本来の表示位置と関係無く、画面右端から10%分、下から30px分空けた場所に表示されます。
CSSの話：position（その1）
positionプロパティは、要素の位置決めを指定します。
値は、absoluteとrelative、fixedです。absoluteでは、本来の位置（HTMLコードの中での位置）に関係無く、画面の中の座標を指定して、その場所に表示させます。
relativeの場合は、本来の場所を基準にして、そこから指定した分だけずらして表示させる形になります。
fixedは、画面の中の固定された位置に、要素を表示します。absoluteと似ていますが、fixedの場合は、画面をスクロールさせても、要素の位置は変わりません。
absoluteとrelativeは大多数のブラウザで対応していますが、IE6などは、fixedにはまだ対応していないようです。
CSSの話：visibility
visibilityは、要素の表示／非表示を設定するプロパティです。visibleを指定すると、普通に表示され、hiddenを指定すると、その部分は見えなくなります。
hiddenを指定した場合、要素がある部分に、その大きさ分の空白ができます。そこがdisplayプロパティでnoneを指定する場合との違いです。display:noneでは、空白が残らずに、完全に要素が無いものとして消えた状態になります。
JavaScriptなどと組み合わせて、表示のオン・オフを切り替えるときに使います。
CSSの話：display
displayは、要素の画面表示を決めるプロパティです。値として、block（ブロック要素）、inline（インライン要素）、list-item（リスト要素）、none（表示しない） を指定できます。
displayプロパティを使うことで、divタグやpタグをインライン要素として扱ったり、aタグをブロック要素にしたり、ということができます。また、display:none;を指定することで、表示上は完全に隠してしまうことができます。
CSS2 からは marker、run-in、compact、および、table、inline-table、table-row-group、table-column、table-column-group、table-header-group、table-footer-group、table-row、table-cell、table-caption といった値が使えるようになりましたが、実際のブラウザの対応はまだ追いついていないようです。
CSSの話：clear
floatを指定したブロックの回り込みを解除して、要素を下に配置するのが、clearプロパティです。
指定できる値は、right（float:rightに対する回りこみを解除）、left（float:leftに対する回りこみを解除）、both（両方の回り込みを解除）、none（何もしない）です。
floatを使うときは、ほとんどの場合、clearも一緒に使います。
CSSの話：float
leftまたrightを指定して、ブロック要素を左もしくは右に寄せます。後の内容は、このブロックを回り込むように流し込まれます。
floatを指定したブロックを組み合わせることで、いくつかのブロックを横に並べて表示することができます。ブログなどでよく見られる、横にメニューを並べているレイアウトは、floatを使うことで実現できます。
テーブルレイアウト（tableタグを用いてレイアウトすること）に代わるレイアウト方法としてよく利用されています。
CSSの話：text-align
text-alignは文字の配置を決めるプロパティです。left（左寄せ）、right（右寄せ）、center（中央揃え）、justify（両端揃え）から選べます。標準は左寄せです。
justifyは、ブラウザによって対応にズレがあることもあり、あまり使いません。
HTMLのalign要素で文字の配置を決める場合とほぼ同じです。
今後、HTMLのalign要素は推奨されなくなり、こちらに移行していくのではないかと思います。
CSSの話：overflow
widthやheightで大きさを決めたブロック要素の中身が、設定した高さや幅の中に入りきらないとき、どのように表示するかを決めるのがoverflowプロパティです。
設定できる値は、visible（はみ出して表示する）、hidden（はみ出した部分は隠す）、scroll（スクロールバーを表示する）、auto（自動）です。何も指定しない場合は、既定値としてvisibleを選んだことになります。
この属性を使うことで、HTMLのインラインフレーム（ページの中に窓のように別のページを表示する）に似たレイアウトを実現することができます。
縦方向のみに適用するoverflow-y、横方向のみのoverflow-xというプロパティもあります。
CSSの話：min-heightとmax-height
横幅の設定でmin-widthとmax-widthがあったように、高さの設定ではmin-heightとmax-heightがあります。それぞれ高さの最小値、最大値を設定するものです。
横幅のプロパティと同じく、バージョン6以前のインターネットエクスプローラーでは対応していないので、そのまま使うことはできません。最小値の方は、CSSのみでIE6以下で同等の設定をする技がありますが、最大値は、JavaScript等を使って設定をします。
CSSの話：min-widthとmax-width
min-widthとmax-widthは、ブロックの横幅に関するプロパティです。min-widthは、ブロックの横幅の最小値を、max-widthは最大値を指定します。これらを指定することで、ある程度幅を持たせたレイアウトが可能になります。
しかし、残念ながら、これらのプロパティはインターネットエクスプローラーでは無視されてしまうので、現在はそのままでは使えません。早く対応して欲しいと思っています。
CSSの話：height
heightは、ブロック要素の高さを決めるプロパティです。使える値はwidthと同じく、数値もしくは%です。%の基準が親要素の高さになるのも、widthと同じです。
heightも、widthと同様に、paddingと組み合わせると、入力した数値の通りに表示されないので、ブロック要素の中身がテキスト1行だけの場合は、heightよりも、paddingとline-heightを組み合わせる方が確実に思い通りの表示を得ることができます。
また、ブロック要素の中身が設定した高さに入りきらない場合は、ブラウザによって表示方法が変わってきます。この場合の表示を指定するにはoverflowというプロパティを使います。
CSSの話：width
widthは、ブロック要素の横幅を設定します。使える値は、数値と%です。%指定をする場合、親要素の横幅が100%になります。例えば、横幅500pxのdivタグの中にpタグが入っている状態で、pタグにwidth:50%;と指定すると、pタグの横幅は250pxとなります。
widrthは、marginと組み合わせる時には注意が必要です。marginとwidthの幅が大きすぎると、レイアウト崩れの原因になります。また、一部のブラウザでは、paddingと組み合わせて指定した時に、指定した通りの横幅が表示されないことがあります。
CSSの話：border
枠線の太さ、形式、色をまとめて指定するのがborderプロパティです。
border:1px dashed #ff0000;のように書きます。この場合は太さ1pxの破線で、色は赤（赤の要素がffで最大、他の色は0）になります。
上下左右を個別に指定したい場合、border-top、border-bottom、border-left、border-rightのそれぞれのプロパティを使います。
border-left:thick solid #000000;と指定した場合、左の枠線が「太い、実線、黒」の線になります。
CSSの話：border-color
border-colorは、枠線の色を決定します。値は、色を決めるほかのプロパティ同様、RGB（光の3原色）の256段階指定、もしくは色の名前を入力します。
何も指定していない場合は、文字色と同じ色で表示されることが多いようです（指定が無い場合の表示は、ブラウザによってさまざまです）。
枠線の場合、insetやoutset、groove、ridge等は影やハイライトが付くので、指定した色がそのまま表示されない場合があります。border-styleで上記の形式を選んでいる場合、色もそれに合わせて調整したほうがいいでしょう。
他の属性同様、上下左右それぞれ個別に設定することができます。
CSSの話：border-width
枠線の幅を決めるのが、border-widthプロパティです。数値、もしくはmedium（標準）、thick（太い）、thin（細い）、という指定で枠線の幅を決められます。
枠線の幅も上下左右で別々に設定することができます。border-width-top、border-width-bottomなどのようにそれぞれのプロパティを使う方法と、marginやpaddingの指定と同じように、値を並べて書く方法があります。
指定の順番はmarginやpaddingと同じで、値を1つだけ指定する場合は四方の辺がすべて同じになり、2つの場合は上下と左右、3つなら上、左右、下、4つ入力すると、上、右、下、左の時計回りの順番で設定されます。
CSSの話：border-style
ブロック要素には枠線を表示することができます。CSSでは、border-styleプロパティで、枠線の種類を様々に設定することができます。選べる値は、none、hidden、solid、double、ridge、groove、inset、outset、dashed、dottedです。
noneとhiddenはともに、線が無い状態です。solidは普通の1本の線、doubleは二重線、ridgeは盛り上がったような形の線、grooveはへこんだ形の線、insetはブロック要素全体が周りよりくぼんで見えるように、outsetは隆起して見えるように、線が表示されます。dashedは破線、dottedは点線です。
solid、dashed、dotted以外の形状は、それぞれある程度の太さが必要です。
また、border-style-left（左側）のように、四方の線を別々に指定することもできます。ただし、insetやoutsetは上下左右でひとつの効果なので、1辺だけに指定してもあまり意味がありません。
CSSの話：marginの「つぶし」
marginとpaddingはともに余白を設定するプロパティですが、運用上、最も違いを感じるのがmarginの「つぶし」という現象です。marginのあるブロック要素を並べたとき、お互いのmarginは、足し合わされずに相殺されます。
例えば、下部のmarginが20pxと指定されたブロックの下に、上部marginが10pxのブロックを配置した場合、ブロック同士の隙間は（上ブロックのmargin）20px＋（下ブロックのmargin）10px＝30pxとなりそうですが、実際にはそうならず、大きいほうのmarginに小さいほうのmarginが「取り込まれて」、20pxの隙間になります。これがmarginの「つぶし」と呼ばれます。
padding同士、またはpaddingとmarginでは「つぶし」はありませんので、上手く使い分けてきれいなレイアウトを行いたいものです。
CSSの話：margin、paddingの指定
marginとpaddingは、それぞれ上下左右に好きな値を設定できます。
まず、上下左右すべて同じ値を入れる場合は、数字1つだけで指定できます。例えば、margin:5px; とすると、上下左右の余白を5pxずつ取ります。
次に、上下と左右で分けることができます。margin:5px 10px; という風に、スペースをあけて2つ数値を指定すると、上下の余白5px、左右の余白10pxとして表示されます。
数値を3つ使った場合、上、左右、下の順番になります。margin:5px 10px 3px; の場合は、上5px、下3px、左右それぞれ10px空けます。
数値4つの場合は、上から始まって時計回りの指定になります。上、右、下、左の順です。margin:5px 10px 3px 20px; としたとき、上5px、右10px、下3px、左20pxの余白となります。
marginで例をとりましたが、paddingでも同じです。
CSSの話：padding
paddingも、marginと同様に余白の大きさを決めるプロパティです。違いは、marginが「ブロック要素の外側」に取る空白であるのに対して、paddingは、「ブロック要素の内側」に取る空白になります。ブロック要素に背景や枠線を指定する場合、この違いは重要になってきます。
paddingも、marginと同じように、上下左右それぞれに指定することができます。
CSSの話：margin
marginは、ブロック要素の余白（マージン）を指定するプロパティです。数値もしくは「auto」で指定します。autoを指定した場合、ブラウザが自動で余白を決定します。
marginは、上下左右それぞれに値を定めることも、一括で指定することもできます。
また、上下左右のどれかだけ、余白を特別に決めたい場合、margin-top、margin-bottom、margin-left、margin-rightというそれぞれのプロパティで、独立に指定をすることもできます。
CSSの話：font
CSSでは、フォント（字体）だけでもさまざまな要素を指定できます。これらの要素をまとめて指定するのが、fontプロパティです。
font:bold italic large/150% Palatino, serif; のように書くことで、「太字、斜体、大きいサイズ・行の高さ150%、「Palatino」フォントもしくはserif（ひげ付き書体）で表示」という指定が一括で出来ます。
このように、いくつかの要素をまとめて指定するプロパティは他にもあります（borderなど）。
こういった、まとめて記述する方法を「簡略記法」と呼びます。
CSSの話：line-height
line-heightは、テキストの行間を決める要素です。正確には、数値または%で1行の高さを指定します。
100%、または文字の大きさと同じ数値を指定すると、行間が0になります。かなり詰まった感じの見た目になり、読みにくいので、割合にして、130%～150%を指定すると読みやすいでしょう。
CSSの話：font-style
文字を通常体にするか、斜体にするかを指定するプロパティです。normal、oblique、italicを指定できます。normalは斜体でない通常のフォント、oblique、italicは斜体です。
実際に使う際には、obliqueとitalicは同じと考えてしまって構いません。
（細かい違いはあるようですが、現状では同じ表示になります）
スタイル指定無しだと斜体で表示されるタグ（emなど）に、font-style:normalを指定して、通常体で表示させる、という使い方もできます。
CSSの話：font-family
font-familyは、文字の書体を指定するプロパティです。
フォントの名前を直接指定するか、またはフォントの大まかな種類を指定することができます。
指定できる種類は
serif（「ひげ」付きの文字。明朝体のようなタイプ）
sans-serif（「ひげ」無し文字。ゴシック体のようなタイプ）
cursive（筆記体）
fantasy（装飾体、絵文字など）
monospace（等幅フォント。メールでよく使われる）
です。
複数のフォントを指定した場合、先頭に書いたものが優先されて表示されます。
CSSの話：font-weight
font-weightは、文字の太さを指定します。normal（普通の太さ）、bold（太字）という指定のほかに、100～900の数値で表す方法もあります。ただし、数値指定で細かく設定しても、フォントの側で対応していない場合が多いので、現状ではnormalかboldで指定するのが無難でしょう。
普通の文字を太字にして強調するだけでなく、本来なら太字のタグ（strong）などに設定して、太字の設定を打ち消すこともできます。
CSSの話：color
colorというと、色一般のことのようですが、CSSでは、フォントの色を指定します。
色の指定方法は、光の3原色（赤、緑、青。頭文字を取ってRGBと呼ばれます）をそれぞれ数値で指定する方法と、色の名前で指定する方法があります。
数値で指定する場合は、赤、緑、青それぞれに256段階指定できます。2桁の16進数を3組続けて書くのが一般的です。#000000が黒、#ffffffが白です。
CSSの話：font-size
ここから、プロパティ（実際にスタイルを指定するための、CSSの単語のようなもの）の具体的な説明をします。
font-sizeプロパティは、文字の大きさを指定します。数値で指定する以外にも、xx-small、x-small、small、medium、large、x-large、xx-largeの7段階指定や、smaller（より小さく）、larger（より大きく）という指定ができます。
100%を指定すると、基本の文字の大きさ（何も指定しない状態と同じ）になります。
注意すべきなのは、タグが入れ子になっているとき、大きさの基準を親タグに取るという点です。
例えば、divタグでfont-sizeを80%に指定、pタグも同じくfont-sizeを80%に指定して、divタグの中にpタグを入れ込んだ場合、pタグの文字の大きさは80%の更に80%で、基本の大きさの64%になります。
妙に文字が大きくなったり小さくなったりする場合、こういった「2重に大きさを指定してしまっている」状態が考えられます。
CSSの話：絶対単位
相対単位というのは、いわば「環境によって実際の長さが変わる単位」でした。これに対して、絶対単位は「常に同じ長さの単位」です。
CSSで使われる絶対単位は「pt（ポイント。文字の大きさの単位）」、「in（インチ）」、「cm（センチメートル）」、「mm（ミリメートル）」「pc（パイカ。1パイカ＝12ポイント）」です。どれも、画面や表示するウインドウの大きさ、表示形式などとは無関係に、常に一定の長さになります。
ただし、画面の大きさなどは環境によってさまざまなので、絶対単位でスタイルを指定すると、かえってレイアウトが崩れる原因にもなります。使い分けが肝要です。
CSSの話：相対単位
CSSで大きさや長さの指定をするときの単位には、相対単位と絶対単位があります。
相対単位は、ある基準をもとに、そこから相対的に導かれる大きさを表します。
「%（パーセント）」を筆頭に、「em（mの字の幅を基準にした大きさ）」「ex（xの字の高さを基準にした大きさ）」などがあります。「px（画面のドット1つ分の大きさ）」も、使っている画面によって大きさが異なるので、定義としては相対単位に含まれます。
CSSの話：単位
CSSでは、文字の大きさ、ブロック要素の幅や枠線の太さなど、さまざまな大きさを細かく数値で指定することができます。
このときに、さまざまな種類の単位を使えます。
例えば、「px」「em」「%」「pt」「mm」などです。
単位には、「相対単位」と「絶対単位」があり、うまく使い分けることが、正しいレイアウトを表現する上で重要です。
画面でのレイアウトを考える場合は、「相対単位」を主に使うのが良いでしょう。
CSSの話：継承
CSSというのは、Cascading Style Sheetの頭文字を取ったものです。Cascadingとは、「継承する」という意味で、「『親』のタグに適用されたスタイルをそのまま受け継ぐ」というCSSの性質を表しています。
例えば、<div><p></p></div>というように、タグが入れ子になっている場合、ここでdivタグはpタグの「親」であり、pタグはdivタグの「子」である、という風に言います。そして、divタグに（例えば文字色を赤にするというような）スタイルが適用されている場合、このスタイルは、特に明示して上書きされない限り、pタグ（や、その「子」になるタグ）にも受け継がれます。
この性質は、特に、文字の大きさや、ブロック要素の幅などを決めるときに重要になってきます。
CSSの話：HTMLに直接書き込む
ホームページにスタイルを適用する方法として、HTMLの中に直接CSSのスタイル指定を書き込む方法があります。
HTMLタグにstyle属性を追加して、そこに適用したいスタイルを書き込んでいく、というやり方です。例えば、<div style="width:500px; background-color:#666666; color:#ffffff;">〜〜</div>という風に書きます。
この方法は、手軽に自由度の高いスタイル指定ができますが、HTMLファイルに直接書き込むので、「意味はHTML、表示はCSSで分ける」という基本理念からは外れてしまいます。
また、HTMLの最近のバージョンである、XHTML1以降では、非推奨だと明示されています。
CSSの話：タグにスタイル指定その2
タグにスタイルを指定する方法では、もう少し細かく条件を決めることができます。
例えば、全てのpタグではなく、divタグの中のpタグにのみスタイルを適用する、といったことが可能です。
この方法を使うと、クラスやIDを使わなくても、細かいスタイルの適用をすることができます。メリットとして、HTMLに全く手を加えずにスタイルを変更することができる、ということが挙げられます。
CSSの話：タグのスタイルを指定する
CSSでスタイルを指定するときに、クラスとIDを使う方法以外にも、いろいろな指定の仕方があります。
特定のタグに対して、好きなスタイルを適用することができます。
たとえば、divタグに対して、border-width:1px; border-color:#000000; border-style:solid; という指定をすると、divタグで囲まれたすべての範囲に、太さ1ピクセルで、黒の実線で枠線が表示されます。
同じ要領で、h1タグの文字色を赤にしたり、tableタグに灰色の背景を付けたりすることも可能です。
bodyタグにスタイルを適用すれば、ページ全体にスタイル指定をすることができます。
MovableType 4.2 RC5アップデートでセキュリティ対応
横浜のホームページ制作会社アイエムシーでは、お客様がご自分で簡単にホームページを更新できるよう、MovableTypeというツールをおすすめしています。
先日、このMovableTypeに、クロスサイトスクリプティングと呼ばれる問題が発見されました。
弊社でホームページ管理契約をなさっているお客様は、このような問題が出たときには、アイエムシー側でツールのアップデートを行いますので、どうぞ安心してお任せ下さい。
社長がセキュリティ関連会社の出身でもあり、アイエムシーはホームページ作成だけでなく、運用、管理の面でも強みを発揮します。
CSSの話：ID
IDは、ほとんどクラスと同じ使い方をします。
まず、ID名を決めて、スタイルを指定して、HTMLの中で、タグに<xxx id="ID名">～～</xxx>と書き込んでそのIDのスタイルを呼び出します。
クラスと違うのは、IDは1ファイルの中で1度しか使えないということです。
これは、IDをアンカー（ページの中のある場所にリンクで飛ばしたいときの、目印のようなもの）として使うことがあるからです。
実際には、1ページで複数回同じIDを使ってもスタイルはちゃんと表示されるようですが、HTMLとCSSの仕様としては、1つのページに1回のみ、とされています。
また、ID名は数字で始まってはいけません。必ずアルファベットで始まるようにしましょう。
CSSの話：クラス
スタイル指定の方法の中でも、非常に気軽に使えるのが「クラス」を指定する方法です。
CSSでいう「クラス」とは、ラベルのようなものです。CSSファイルであるクラス（名前は何でもいいです）を宣言し、そのクラスにスタイルを適用します。そして、HTMLの中で、適用したい部分のタグに、「class="クラス名"」と書き込みます。
すると、書き込んだタグで囲まれた部分に、スタイルが適用されます。
たとえば、「large」というクラスを作り、文字を大きくするスタイルを適用します。
そして、HTMLの中で、<div class="large">～～</div>と書けば、このdivタグで囲まれた部分では文字が大きくなるわけです。
CSSの話：スタイル指定の方法
外部CSSファイルや、headの中でスタイルを指定するとき、HTMLの中のどこにそのスタイルを適用するか、というのが問題になってきます。
CSSでは、文字の大きさや色、太さ、背景、枠線、また、位置など、さまざまなものを自在に指定できますが、狙った部分に正しく適用するのは最も重要なことです。
スタイルの範囲を指定する方法もさまざまです。
・あるタグにスタイルを適用する
・「クラス」を宣言して、その「クラス」が付いたものにだけ適用する
・「ID」を宣言して、その「ID」が付いたものにだけ適用する
これらの方法もやはり一長一短です。
それぞれに向き不向きがあるので、上手く使い分けましょう。
HTMLの話：CSSの使い方
今までも何度か触れましたが、HTMLでは「意味」を表現し、見た目の表現はCSS（Cascading Style Sheet）で指定するのが推奨されています。
CSSを使ってHTMLの中でスタイルを適用する方法はいくつかあります。
・HTMLタグの「style属性」を指定して、スタイルを指定したい場所に直接CSS要素を書き込む
・headタグの中にstyleタグを書き込み、そこでスタイルを指定する。
・HTMLファイルとは別にスタイルを指定するためのCSSファイルを作成し、linkタグを使ってHTMLファイルから呼び出す
それぞれに長所と短所がありますが、HTMLとCSSを分離するという観点からは、別にCSSファイルを作る方法が最も適しています。
HTMLの話：実体参照
HTMLでは「タグ」を使ってさまざまな表現をしますが、タグを書くためには「<」と「>」の記号が必要です。では、「<」と「>」をタグ以外のところで使いたい場合はどうしたらいいでしょう。
そのためには、実体参照という技法を使います。
文章の中で直接「<」や「>」を入力はできないので、代わりに、その文字を表す文字の列を入力するのです。
実際には、「>」、「<」と打ち込むと、「<」、「>」が表示されます。
他にも、さまざまな記号を「&」で始まる文字列で表現できます。
HTMLの話：DOCTYPE宣言
一言でHTMLと言っても、インターネット黎明期に開発されたHTML1から、HTML4を経て、最新のXHTML1.1まで、さまざまなバージョンがあり、ひとつのバージョンの中でも、いくつか違うタイプがあるものもあります。
ですので、文書の最初に、このHTML文書が何で書かれているかを明記することが強く推奨されています。この表記方法を、一般にDOCTYPE宣言と呼びます。
これは、最初のhtmlタグが始まる前に書かれる必要があります。書き方は、以下のような形です。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
（これは、HTML4.0 TransitionalというバージョンのDOCTYPE宣言です）
ちなみに、DOCTYPE宣言はタグではありません。
HTMLの話：コメント
HTML文書の中で、ブラウザに読み込ませたくない箇所（ページ作成の際の覚書など）は、<!--と-->で囲むことで、「コメント」として扱われ、ページには表示されなくなります。
「コメント」とされたものは、ブラウザの表示に関係なくなるので、ホームページの中で一時的に削除したい部分をコメントで囲み、HTML文書の中には内容を残したまま、表示上は削除したように見せることもできます。
このような「コメントアウト」という方法は、便利なのでよく使われます。
HTMLの話：object
objectタグは、HTMLの中に、動画やFlashなどのリッチコンテンツを埋め込むタグです。HTML以外のものを埋め込む場合は、このタグを使います。
以前は、埋め込むものの内容によって、enbedタグやappletタグなどを使い分けていましたが、最近はすべてobjectで統一されてきているようです。
Flashなどを扱う場合には必須のタグです。
HTMLの話：link
linkタグはheadタグの中で使われ、スタイルシートやRSS（ブログなどについている、「フィード」と呼ばれるファイルです。更新通知などに使われます）を指定する働きをします。
また、前のページや次のページ、目次やトップページを明示する働きもあります。
CSSを使う場合、必ずといっていいほど使うタグです。また、それ以外にも様々な用途があり、奥深いタグです。
HTMLの話：head
bodyタグの中に書いたものは、ホームページとして表示されます。では、bodyタグの外側には何があるのでしょう。
以前にも少し触れましたが、HTML文書はheadとbodyに分かれます。bodyは実際に表示される部分、そして、その上に、さまざまなページの情報を書き込むheadタグの部分があります。
headタグの中には、ページのタイトル、スタイルシートやスクリプトに関する情報、HTMLのバージョンの宣言、著作権表示など、さまざまな情報を書き込むことができます。
HTMLの話：body
HTMLのタグの中で、絶対にはずせないタグのひとつです。HTML書類の中で、実際の表示はどこからどこまでなのかを指定します。<body>で始まって、</body>で終わるところまでが、ホームページとして画面に表示される部分になります。そのほかは、情報として読み込まれますが、原則として表示はされません。
今まで紹介してきたタグは、ほぼ、このbodyタグの中に書かれます。
HTMLの話：html
いろいろなタグの話をしてきましたが、一番基本的なタグの話がまだでしたので、その話をします。
htmlタグは、すべてのタグの外側に書く、基本のタグです。<html>で始まって、</html>で終わるところまでが、HTML文書として読み込まれ、ホームページとして表示されます。逆に言えば、このタグが無ければ、正しいホームページにはならないということです。
HTMLの話：script
今回は現役でよく使われるタグの話です。
scriptタグは、HTMLファイルの中に、JavaScriptなどのスクリプト（ちょっとした動きなどを見せるのに使う小さなプログラムのようなもの）を書き込むためのタグです。
こういったスクリプトは、たとえば、メニューの画像などにマウスポインタを乗せると画像が変わるといったところでよく使われます。
<script>～</script>ではさんだ中に、直接スクリプトのコードを書き込むやり方と、スクリプトのファイルは別に作っておいて、scriptタグで呼び出すやり方があります。現在では、HTMLとスクリプトはファイルを分けて、呼び出すやり方が主流です。
HTMLの話：map
ひとつの画像にいくつものリンクを埋め込む「クリッカブルマップ」を実現するためのタグです。
mapタグの中で、リンク部分の形状と位置、リンク先を指定します。形は、四角形、円形、多角形などさまざまに指定できます。
HTMLとしては派手な効果がありますが、Flashなどのリッチコンテンツが普及している現在では、あまり使われてはいないようです。
HTMLの話：iframe
iframeとは、「インラインフレーム」の略です。frameタグとも似ていますが、表示方法が少し違います。
frameタグは画面全体を分割して、複数のHTMLファイルを1画面に表示するタグですが、iframeは、画面の中に窓を作って、その中に他のHTMLファイルを表示します。
現在では、frameタグはほとんど使いませんが、iframeタグはごく最近でも利用していました。
ただし、現在では、スタイルシートを使ってほぼ同じ効果が得られるので、iframeタグよりそちらを使った方がいいでしょう。
HTMLの話：center
centerタグは、名前の通り、囲った部分を中央寄せにするタグです。表示を指定するためのタグで、文に意味を与えるタグではありません。
表示効果としては、<div align="center">～</div>と書くのと同じです。
意味を持つタグではないので、現在では、fontタグやbタグのように、このタグの使用は廃れてきています。
HTMLの話：acronym
acronymタグも、abbrタグと同様に略語を表すタグです。
違いは、実ははっきりしていませんが、acronymでは「LAN」、「NATO」など、１単語として発音するもの、abbrでは「XHTML」、「W3C」など、１文字ずつ発音するものに使うようです。
title属性で元の言葉を表示させることができるのも、abbrと一緒です。
いずれにせよ、一般のホームページでは使う機会は少ないタグでしょう。
HTMLの話：abbr
これもあまり使われないタグです。少なくとも視覚的デザインにおいては使い道の無いタグです。囲んだ文字列が略語であることを表し、タグの中にtitle属性として、省略していない元の言葉を書き込むことができます。
たとえば、<abbr title="HyperText Markup Language">HTML</abbr>という風に書きます。
これで、「HTMLという単語はHyperText Markup Languageの略である」という意味を表現するわけです。
デザインよりも、プログラムや学術論文等で重宝されるタグでしょう。
HTMLの話：address
addressタグは、英語で住所を表す通り、そのページに関する連絡先・問い合わせ先を表すタグです。ただし、必ずしも住所でなくても、電話、FAX、Eメールなど、連絡や問い合わせを受け付ける先であれば、addressタグの中に書くことができます。
スタイル指定が無い場合、一般的にイタリック（斜体）で表示されるようです。
ただし、実際には、このタグを使わなくても、人間が読む分には、連絡先の表示は文脈でわかるので、使われる機会の少ないタグのひとつです。
HTMLの話：cite
これも引用に関するタグです。blockquoteやqは、引用した内容を表すタグですが、citeは引用元の人名、書名などを表すタグです。
blockquoteなどと組み合わせて、引用元を明記するために使うのが一般的な使い方ですが、実際にこのタグを使っている人はかなり少ないのではないでしょうか。
スタイルを指定しない場合、citeタグで囲まれた文字はイタリック（斜体）で表示されます。
HTMLの話：form
formは、メールフォームや掲示板、コメント欄など、何か入力項目を作るときに使うタグです。この中にinputタグ、textareaタグなどを入れることで、入力欄を作ることができます。
入力欄からは、CGIやPHPなどに入力された情報を受け渡すことができます。
HTMLだけではformはあまり使い道がありません。CGIやPHPなど、入力された文字を処理するプログラムと連携させることで真価を発揮します。手軽なところではJavaScriptとの連携もあります。
HTMLの話：pre
HTML文書では、改行やタブ、半角スペースを入れても、実際のホームページの表示には反映されません。HTML文書の中でタブやスペースを使って文章の形を整えても、ウェブで見てみるとまったく意味が無い、ということがあります。
preタグは、囲った部分の文章をそのまま表示するタグです。
改行、スペース、タブなどを、すべて書かれたとおりに表示し、行がボックス要素の端に届いても自動改行をしません。
このタグは、一見非常に便利に見えますが、ページの端で自動改行をしないので、場合によって横スクロールしてしまうことがあります。また、preタグの中の文字はすべてそのまま表示されるので、中でタグが使えません。
本来、HTMLのソースやプログラムコードを表示するためのタグですので、プログラマーの方たちの相談や交流などに使われているようです。
普通のホームページ制作にはほとんど使うことはありません。
HTMLの話：blockquote
今回のタグも、よく使う方、まったく使わない方がはっきり分かれるのではないでしょうか。
blockquoteは、block（ブロック）で、quote（引用する）タグです。他のサイトや文献、ブログ等から文章を引用するときに、このタグで囲って、その範囲が引用であることを明示するために使います。
ブロック要素ではなく、インライン要素（1行の中で使う場合）の引用は、qタグを使います。
スタイル指定をしない場合、blockquoteは左右に空間のあるボックスを作ります。
なので、手軽に左右の余白を取りたい場合にblockquoteを使うケースがありますが、これは本来の用法ではないので、余白はスタイルシートで指定するようにしましょう。
HTMLの話：dl、dt、dd
前回に引き続き、リストを作るタグです。dlタグは「定義リスト」と呼ばれるものを作ります。
olやulと違うところは、リストの項目に対して説明（定義）が付いているということです。
実際のHTMLは
<dl>
<dt>リスト項目1</dt>
<dd>リスト項目1の定義</dd>
<dt>リスト項目2</dt>
</dd>リスト項目2の定義</dd>
・
・
</dl>
となります。
表示は
- リスト項目1
- リスト項目1の定義
- リスト項目2
- リスト項目2の定義
のようになります。
このホームページにもある用語集など、単語と説明を並べて掲載するときによく使います。
慣れないうちは使い勝手が悪く感じますが、使ってみるとなかなか便利なタグです。
HTMLの話：ol、ul、li
olとulはそれぞれリストを作るためのタグ、liはリスト項目を作るタグです。使い方としては
<ol>
<li>リスト項目1</li>
<li>リスト項目2</li>
・
・
</ol>
もしくは
<ul>
<li>リスト項目1</li>
<li>リスト項目2</li>
・
・
</ul>
となります。olは番号など、通し番号付きのリスト、ulは順番無しのリストです。olの方で順番を表す記号を何にするか（アラビア数字、ローマ数字、アルファベットなど）は、スタイルシートを使って指定できます。
ブラウザでの表示のみを考えるなら、divやbrを使っても変わりませんし、特にulの方は通し番号が付く訳でもなく、ただ羅列するだけなので、それほど使う必要性の無いタグかも知れません。自分は割とよく使いますが。
このタグは、スタイル指定をしない状態だと、ブラウザによって余白の取り方にかなり差が出るので注意が必要です。
HTMLの話：img
現在、ホームページをデザインする際に画像は欠かせません。imgタグは画像を表示するためのタグです。指定した場所の画像を読み込みます。
ただし、画像を表示しない環境でも意味が通じるようにするために、画像の代わりになる言葉を指定しておくことが必須とされています。タグの中で「alt="代わりになる言葉"」と書き込んで指定します。このalt属性は、検索エンジン対策の上でも重要です。
また、表示する画像の大きさを指定できます。使う画像に合わせて指定しましょう。
HTMLの話：h1～h6
hタグは見出しを表します。h1が最上位の見出しで、ページ自体のタイトルや内容を表すのに使われます。数字が大きくなるごとに下位の項目になり、h6まで存在します。
スタイル指定をしていない状態では、太字で、上位の見出しほど大きな字で表示されます。h3～h4が、だいたい本文の大きさと同じ程度です。
見出しですので、本文中の強調よりさらに強い意味になります。
普段のホームページ制作で使うのはh2～h3までが主です。h5、h6というタグはほとんど使いません。
論文等を発表するページでは必要なのかも知れませんね。
HTMLの話：emとstrong
emタグとstrongタグは、どちらも強調を意味します。emが普通の強調、strongはより強い強調を表します。なぜ2段階の強調タグが用意されているのかはわかりませんが、一般的にはstrongの方がよく使われるようです。
スタイル指定の無い状態では、ほとんどのブラウザではemは斜体で、strongは太字で表示されます。
強調に斜体の文字を使うのは、アルファベットを使う言語の文化なので、日本語にはなじみにくく、emは浸透しなかったのではないかと考えています。
単純に、strongの方が、名前と表示と意味のつながりが直感的にわかりやすいということかも知れません。
strongは乱用せず、ここぞという時に使って決めたいものです。
HTMLの話：br
段落を表すｐタグは、もともと英語圏で生まれたものなので、日本語を書く際には多少使い勝手が悪いところがあります。その代わりにbrタグを多く使う方もいらっしゃるでしょう。
brは改行を表すタグで、他のタグとは少し違い、開始タグと終了タグで要素を囲うことはありません。HTMLでは<br>のみ、XHTMLでは<br />という単独の記述で、文を改行します。
（厳密に言えば、XHTMLの場合は「<br />」という書き方で開始と終了を兼ねています）
HTML文書では、普通に改行しただけではページの表示に反映されないので、改行を入れるところにはbrタグを入れるようにします。
brを使わなくても、ブロック要素のはじまで文字が埋まれば自動的に改行はされる仕様になっているので、区別する意味でbrのことを「強制改行」とも呼びます。
現在、brの繰り返しで縦の空白を表示するのは推奨されていません。
空白を表示したい場合はスタイルシートで余白を作るなどの方法があります。
HTMLの話：p
このタグはよく使う人とほとんど使わない人の差が激しいのではないでしょうか。pは「paragraph」つまり「段落」の意味で、段落の区切りをつける時に使います。一般的には、pタグで囲んだ周りは1行空けて改行されます（前後に改行2つ分入る）。
pタグは一見divタグと似ていますが、pの中にdivタグやtableタグなどを入れることはできません。pタグの入れ子もHTMLの文法上は間違いです。pはあくまで「段落」として使うようにしましょう。
HTMLタグの話：div
このタグは、囲った内容に対して何の意味付けも、何の効果も与えません。ただし、囲った部分の前後に改行が入ります。改行でその周りと区切られて、ブロックを作るように振る舞うので、divは「汎用ブロック要素」と呼ばれます。
divは、現在のホームページ制作において、最も使われているタグのひとつと言ってもいいでしょう。HTMLの段階でdivを使って内容をブロックに分けておき、それらのブロックにスタイルを設定してレイアウトやデザインを決めていくのが、CSSを使ったコーディングの主流となっています。見た目だけならば、divとspanに適切なスタイル指定をすれば、他のタグを使っているWEBページの外見を再現することが可能です。ただし、HTMLとしての意味は完全に変わってしまいますが。
HTMLタグの話：span
spanタグは、単体では何の意味も、どんな効果も持ちません。しかし、このタグは割合によく使われます。
使い道は、spanタグにスタイルを設定し、bやfont等の代わりに使ったり、これらのHTMLタグだけではできないような効果を指定するのです。
spanは、「汎用インライン要素」とも呼ばれます。インライン要素とは、前後に改行が入らず、行の中で使う要素のことです。
これに対して、divを「汎用ブロック要素」と呼びます。
HTMLタグの話：font
fontタグは、名前の通りフォント（文字）に関するタグです。
具体的には、文字の大きさと色を変えることができます。大きさは相対的に7段階で指定、色は、数値または色の名前で指定します。
このタグもbなどと同じように、スタイルシートが普及していなかった頃に、HTMLで見た目を決めるために作られたものです。現在ではスタイルシートの使用が推奨されています。
HTMLタグの話：b、他文字修飾タグ
aの次はb、という訳でもありませんが。
bタグは、囲った部分の文字を太字にするタグです。これは、まだCSSが出来る前に、HTMLでページの見た目を制御するために作られました。現在では、HTMLはページの論理構造を記述し、見た目はCSSで決めるという思想があるので、このタグの使用は推奨されていません。
同様に、文字の見た目を変えるタグには、斜体にするiタグ、打ち消し線を引くstrikeタグ、下線を引くuタグなどがありますが、現在ではこれらの代わりにスタイルシートを使うよう推奨されています。
HTMLタグの話：a
HTMLというのは、「タグ」というものを使ってホームページを表現します。WWWが出来てからHTMLの仕様もバージョンアップを繰り返し、今ではほとんど使われなくなったものもありますが、今回のaタグはある意味HTMLの根幹ともいえるものです。
aタグは、ハイパーリンク（いわゆるリンクです）を作ります。また、ページ内部での移動をするときのアンカー（位置指定）の役割や、JavaScriptなどを動かすスイッチとしての役割も果たします（アンカーやスクリプトのスイッチに関しては、最近のブラウザではaタグ以外でもできるようになりましたが、旧いブラウザとの互換性や、慣例ということで、aタグを使うことが多いです）。
何より、リンクというのはWEBの基本になる仕様なので、aタグはそれだけ重要で、HTML発祥から変わらず、今でも使われています。たった1文字ですが、大切なタグです。
一手間かけるということ
たとえば、ちょっとした下ごしらえで料理の味が変わるように、作業の中のちょっとした一手間というのが仕上がりを大きく左右します。
コーディング作業の前に全体を俯瞰する時間を割くことや、画像調整の際に、多少面倒な手作業があっても、そこを避けて通らないことなど、細かいことの積み重ねが、仕上がりで目に見える差になって表れます。
一瞬の怠け心を追い出して、いい仕事を心掛けます。
コーディングは先を見据えて
ブログツールやCMSは、表示のひな形として「テンプレートファイル」というものを使うものが多くあります。
そして、インストールの時点で「標準テンプレート」というものが存在するのですが、この標準テンプレートは大概かなり込み入った構造をしています。
これは、後から表示をカスタマイズするときに、CSSを書き換えるだけで様々なレイアウトに対応できるためです。一見無駄なタグが入っているように見えても、それはデザインの柔軟性を保つよう考えられた結果なんですね。
ただ、あまりに使わないタグが多いので、自分は結局書き直してしまうんですが、先のことを見越してコーディングする、という考え方自体は、見習うべき点があると思っています。
「無駄」と「自由度」を天秤にかけるために、先を見通す目が必要ですね。
iPhoneに隠し機能
通称「キル・スイッチ」と呼ばれるもので、アップル社が、iPhone内のアプリケーションを、遠隔操作で無効化するというものです。
悪意のあるアプリケーションが、チェックをすり抜けて販売されてしまった場合に備えた、「最後の砦」ということで、必要性は理解できるのですが（ネットワークに常時接続なので、悪意のあるアプリケーションはすぐに無効化しないと危険です）、ネットワーク管理者ではなくアップルが直接制御するところ、また、隠し機能として入れてある辺りは、いかにもアップルらしい、という気がします。
今後、インターネットに常時接続の高機能な携帯端末が普及していくにつれて、セキュリティの問題はもっと表面化してくるでしょう。
今回のニュースと、その後の対応が良い前例として役立っていってほしいと思います。
誰のために？
ウェブでホームページを見て、いいデザイン、悪いデザインということを言ったり、また、ユーザビリティ（使いやすさ）についても、「これは良い」、「これは悪い」と言ったりします。まあこれはウェブに限りませんね。
軽く「良い」「悪い」と言っていますが、その時に、それが「誰から見て」なのか、ということを考えるのが大切です。「誰の立場で」「何を基準にして」「どんな目的で」良かったり悪かったりという判断をしているのかを考えて、実際に自分が制作する時には、その経験を活かしていきたいです。
この場合の「誰」は、もちろんお客様です。
デザイン
ホームページに限らず、様々な物、特に実用性のある物のデザインというものは、使い勝手の良さも含まれています。見た目のきれいさに加えて、使いやすく、分かりやすいことが重要です。
使いやすさ、分かりやすさというものを設計するのは、作る人の人間性といえるかも知れません。
良いデザインを作るため、日々、考えています。
右クリック、ホイールスクロール
自分はプライベートではMacを使っているのですが、マウスだけは明らかにWindows系のものが優れていると思っています。アップルのマウスがデザイン的に美しいと思っていても、右クリックとクリックホイールは必需品です。
とはいえ、電器店等で5ボタンや6ボタンのマウスを見かけると、さすがに「そんなにごちゃごちゃ付けなくても」と思ってしまいます。2ボタン＋スクロールが自分にはちょうどいいようです。
QWERTZ配列？
たとえば日本語にカナ入力があるように、独自のキー配列を持つ言語や国は多くあるようです。
ドイツやフランスでは、QWERTY配列のYとZが入れ替わったQWERTZ配列のキーボードが主流らしいです。一見同じアルファベットに見えても、独自の記号を使う言語ではキー配列も変わるのが必然なのでしょう。
IT業界最大のデファクト・スタンダードと思えたQWERTY配列も、世界的に見ればそう独占状態とも言えないかも知れません。
ちなみに、英文入力にはDvorak配列というものがあります。最初からタッチタイプを想定して作られた配列で、なかなか打ちやすいのですが、残念ながら普及はしていないようです。
キーボードはゆっくり
現在主流になっているキーボードの文字の並びは、QWERTY配列と呼ばれるものです。名前の由来は左上のキーの並び。お手元のキーボードをご覧になると、Q、W、E、R、T、Yと文字が並んでいるのではないでしょうか。
この配列は、英文のタイプライターのキー配列を継承しているのですが、本来タッチタイピングを想定したものではないため、実は早い打鍵に向かないともいわれています。
とはいえ、「ゆっくり打ちます」とは言っていられないのが辛いところですが。
ユニコード
アルファベットと数字（いわゆる「半角英数」というものです）以外の文字は、パソコンの中では1度英数字の暗号に変換して処理されます。
その際に、暗号の解読表（文字コード）が何種類もあると、文字化け等の混乱が起きる原因になり、また、場合によっては、文字の表示以外の部分に影響を及ぼすこともあります。
そこで、世界中のすべての文字に統一の文字コードを作ろう、という運動があります。それがユニコードです。
現状はまだ完全ではありませんが、ユニコードが完成して、普及すれば、どんな国のサイトを見る時でも、文字コードの問題は無くなります。対応するフォントさえあれば、ハングルでもアラビア語でも、ひとつの文字コードで表示できるようになります。これはかなり壮大な話です。
実際にタガログ語のページを見るかというのは置いておいて、世界統一規格というものにはロマンを感じます。
文字コード
パソコンなどのコンピュータが扱うのは、原則としてアルファベットと数字です。それ以外の文字は、1度アルファベットと数字の暗号（文字コード）に変換してやりとりを行います。
暗号でのやりとりなので、送る側と受ける側が同じ解読表を使っていないと、正しく言葉が伝わりません。お互い違う解読表を使ってしまい、解読ができない場合、画面に意味の通らない記号が表示されることになります。これが「文字化け」です。
英語しか使っていない場合は、文字コードを気にしないで済むわけですね。
少しうらやましい話です。
クロスブラウザ
同じページでも、見る側の環境によって見え方が変わるということがあります。ブラウザによってHTMLやCSSの解釈の仕方が違う部分があるので、Internet Explororで狙い通りに表示されるページが、Firefoxでは表示が崩れたり、逆のことが起こったりもします。
W3C準拠の「正しい」構文だけでなく、実際のブラウザでのチェックは欠かせません。
どんなブラウザでも問題無く閲覧できる（クロスブラウザ）ページ制作を心掛けています。
クラス、ID、セレクタ（CSSの話）
CSSでHTML文書にスタイルを指定する場合、大きく分けて、HTMLのタグに「クラス」や「ID」を書き込んで表示を指定するやり方と、「セレクタ」で表示を制御するというやり方があります。
クラスやID、特にクラスを書き込むのは、好きな場所に狙った表示方法を指定できる、いわば小回りの利く方法ですが、HTML文書にクラスやIDの名前を書き込むので、どうしてもソースが煩雑になります。一方、セレクタで指定する方法は、条件を指定して、その条件に合ったタグにスタイルを当てはめます。HTMLの構造をしっかり設計しておく必要がありますが、ソースへのよけいな書き込みが最小限で済み、コードがシンプルになること、それに伴い、メンテナンス性の向上が見込めるというメリットがあります。
CSS Level 3では使えるセレクタが増えて、上手に指定すればクラスやIDを相当減らしても幅広い表現が可能になっているようです。
基本のコードはシンプルに、条件分岐で様々な表現に対応するという考え方は、モジュール指向にも通じるかな、とも考えています。
ということで、各ブラウザ開発の方々には標準規格の実装をお願いしたいところです。
ほとんどのWEB制作者に共通の願いではないでしょうか。
モジュール化
ブログやCMS等を扱うようになって、意識し始めたのが「モジュール」という概念です。
従来のHTMLでのホームページ制作では、原則として1つのファイルが1ページになるのに対して、「モジュールテンプレート」という、いわばページの部品を組み合わせたり、組み替えたりすることでページを生成するやり方です。まとまったファイルが存在しないので、直感的にページ全体のイメージを把握するのが多少難しく、組み合わせの際の条件分岐も、慣れないうちは多少煩雑に感じられて、ついついモジュールを活かさずに1枚のテンプレートにまとめて作成する、ということもありました。
しかし、多量のページをメンテナンスするにはモジュールは便利です。
最初に一手間かけて環境を整えることで、後の作業を効率的にする。サイト制作に限らず、使える考え方ですね。
古いサイトのリフォーム
以前に制作したホームページを更新する場合、またはもともとあるホームページのリニューアルをご依頼される場合など、昔に書かれた（自分が書いた場合も含む）HTMLのコードを目にする機会が多くあります。
デザインに流行があるように、HTMLの書き方も時代につれて変わってきています。特にSEOを重視したリニューアル作業を行う場合、デザインは変えずにHTMLの書き方を変える、ということも少なくありません。
ページの見た目は変わらないので、ぱっと見は地味な仕事ですが、例えて言うならば、江戸時代の建物を当時の形で復元したり、色あせた美術品を制作当時の色合いに再現したりするような、いわば職人の仕事です。
やってみるとなかなか奥深く、面白い作業です。
テキストブラウザ
ウェブブラウザで現在多数を占めているのは、IEのようなグラフィカルなブラウザです。文字や背景の色を表現したり、画像や動画、FLASHなどのリッチコンテンツを表示できるものです。実際、私たちもそのようなブラウザで見る画面を想定して、デザインやコーディングを行っています。
テキストブラウザは、名前の通り、ウェブでテキストを読むためのブラウザです。FLASHや動画はもちろん、画像やスタイルシートのレイアウトも無視して、文章だけを表示します。
その分、HTMLの文書構造にしたがった表示をするので、CSSなどできっちりとレイアウトを組んでいても、元のHTML構文が正しくないとおかしな表示になります。
CSSで綺麗にレイアウトを作りこんで、なおかつテキストブラウザでもきちんと表示されるのが理想です。
デファクト・スタンダード
どんな業界でもあることだと思いますが、ITの世界でも「シェアを取った規格が勝ち」という、「事実上の標準規格」が存在します。ホームページで言えば、ブラウザは多少シェアを落としたとはいえ、Internet Explororが標準となっています。W3Cのような権威とは関係無く、多くのお客様に正しいレイアウトで見てもらいたいと思えば、シェアを重視する、ということです。
しかし、同じくシェアの観点でサーバを見てみると、マイクロソフトのIISではなく、Apacheがデファクト・スタンダードになっているのが面白いところです。
リッチコンテンツ
今でこそADSLや光回線が一般的になっており、インターネットで動画を見るのも当たり前のようになっていますが、少し前には、回線速度も、パソコン自体の処理速度も、動画コンテンツを見るにはとても力不足でした。ホームページは容量を節約するために文章が主体で、画像もできるだけ使わずに作っていたものです。
現在、動画やFLASHなどのさまざまなコンテンツがストレス無く楽しめます。その中で、SEO対策を考えると、文章主体のページが有利になるというのは、なかなか不思議です。
近いうちにCSSで3Dの表示を制御できるようになるという話もありますし、いずれは検索エンジンの機械が、テキストだけでなく、画像やデザインを解析できるようになる日が来るのかも知れません。
同じIT業界でも
インターネットに関連した業種というのは、比較的変化が早い方だといえます。
実際に見ているユーザーの環境がどんどん新しくなっていくので、それに伴って、最新の環境をチェックしているからです。（もちろん、古い環境をすぐに切り捨てるわけではありません）
一方、印刷業界などは、割合変化がゆっくりとしています。
仕事の結果は紙の印刷物として表れるので、あまりソフトの新しさが関係ないというのもあり、また、むやみに新しいものに手を出すより、実績のある安定した環境を大切にしているからです。
同じようにパソコンを使って作業していても、業種によっていろいろな違いがあります。
外来語表記
カタカナ言葉で悩みがちなのが、最後に伸ばす音を付けるかどうかです。「コンピュータ」か「コンピューター」か、というような。一般に、技術畑出身の人は最後の長音を付けない傾向があるようです。
マイクロソフトがカタカナ表記のルールを変更するそうです。
末尾が-er、-or、-arで終わる言葉で、これまでは長音を付けていなかったものに対して、今後は長音表記をするようにするとのこと。「ブラウザ」、「エクスプローラ」は、「ブラウザー」「エクスプローラー」になるそうです。
事実上の業界標準となっている企業だけに、これから追随する企業も増えそうです。標準が決まって、悩む必要がなくなるのは歓迎です。
WEBの成り立ち
WEBやHTMLの仕組みは、ヨーロッパの素粒子物理学研究所で開発されました。当初の目的は、研究のための資料や論文に、離れた場所からアクセスできるようにすることで、学者の研究に使うシステムとして作られたのです。
現在のW3Cは、研究所からは独立した組織になっていますが、HTMLの話が理屈っぽくなりがちな背景には、その成り立ちが関係しているのかも知れません。
HTMLの「思想」
別にそれほど大それた話ではありませんが。
文法や構文というものには、何がしかの思想や文化が表れるものです。HTMLにも、そういったものが存在します。
現在のHTMLの思想は「意味を表す部分はHTMLで、表示についてはスタイルシートで役割を分担する」というものです。これは突き詰めると、「HTMLは表示形式を考えない」ということです。
以前はスタイルシートというものが存在しなかったので、HTMLで表示を指定するタグがありました。今でもその名残は残っていますが、そういったタグを使うのは「HTMLの思想」的には推奨されていません。
もちろん、全てW3Cが正しいというわけではありませんが、無機質に見えるタグの裏で、いろいろと考えている人のことを想像してみるのも楽しいのではないでしょうか。
HTMLとXHTML
ホームページを作成する時に使う言語をHTMLといい、その仕様はW3Cという団体によって勧告（W3Cに決定する権利があるわけではないので、こう呼びます）されます。
最新版のHTMLはXHTML1.1です。「X」とは何だ？と思われる方もいらっしゃるでしょうか。
XHTMLというのは、HTMLとは本来無関係だった、XMLという言語を拡張して、HTMLの形にしたものです。見た目はほぼ同じですが、本質的には従来のHTMLとXHTMLは全く違うものなのです。
もちろん、ウェブを見るのにそんな知識は必要ありません（制作者にも直接は必要ない？）。
しかし、根っこの部分を調べてみるのも、なかなか楽しいものです。
フレームレイアウト
ホームページ制作において、テーブル同様、以前はもてはやされて、現在ではあまり使われなくなっているタグにフレームというものがあります。
フレームの意味は「枠」で、画面を枠で仕切って、いくつものHTMLファイルを1画面に表示させる機能です。統一感のあるページ作りや、共通のメニュー部分の表示などによく使われていました。反面、他のホームページの内容をさも自分のページのように表示することもできてしまうなど、問題も多く、現在ではあまり推奨されなくなっています。SEO上も推奨されません。
W3CやSEOのことを気にしている製作者なら、フレームやテーブルのむやみな多用は避けているでしょう。
制作会社選びの参考になさってください。
アウトラインフォント
パソコンで使われているフォント（字体）には、大きく分けてビットマップフォントとアウトラインフォントがあります。ビットマップフォントは点の集合で字の形を描いているもの、アウトラインフォントは文字の輪郭線のデータを指定して、形を描くものです。
性質上、アウトラインフォントの方が滑らかで綺麗に見えるのですが、表示の処理の難しさ（例えば、小さな文字では線がつぶれてしまう問題）などもあり、まだビットマップフォントが使われている部分も残っています。
しかし、Windows Vistaでは、システムに完全アウトラインフォントの「メイリオ」が採用され、画面のほとんどで滑らかな字体が表示されるようになりました。
ビットマップフォントのカクカクした輪郭線が、懐かしい過去のものになる日も近いでしょうか。
解像度の話
解像度、などというと難しい言葉のようですが、プリンターなどをお持ちの方には身近な話題だと思います。
インターネットなどで見つけた画像を印刷してみたら、目が粗くて線がガタガタ、という経験をお持ちの方は多いのではないでしょうか。画面では綺麗に表示されていても、印刷してみるとガタガタになってしまうのは、表示される画像のきめが粗く、印刷するには細かさが足りないからです。この、表示される画像の「目の細かさ」を表す言葉が「解像度」です。
実際、パソコンの画面というのは、意識している以上にきめが粗いものです。ですから、インターネット上にある画像の大半は、画面では自然に見えていても、印刷には不十分な粗いものなのです。逆にいえば、印刷用の画像をそのままネットにアップしてしまうと、データが大きすぎてなかなか表示できない、ということにもなります。
大は小を兼ねるといいますが、大きすぎるのも考え物。やはり適材適所が大切です。
テーブルレイアウト？
テーブルといっても、食事をするテーブルではありません。WEB制作では、テーブルと言えば「表」のことを指します。縦横に桝目で区切られた将棋盤のようなものです。カレンダーを思い浮かべて頂けると近いイメージでしょうか。
テーブルを使うと、好きなように画面を区切れるので、以前は複雑なレイアウトの際に、非常に重宝されました。
今では、HTMLの意味を無視した使い方は推奨されないので、テーブルレイアウトではなく、CSSでのレイアウトが主流になっています。
<head>の中身その３：その他のタグ
他にも、<head>の中では、CSSやJavascriptを指定したり、直接表示はされないけれど、無くてはならない情報がたくさんあります。
<head>を見てみると、ページを作った人の気遣いが分かる・・・かも知れません。
<head>の中身その２：<meta>
<meta>タグは、目立たないタグですが、SEO上重要です。
製作者や著作権などの表示にも使われます。
文字コードを指定して文字化けを防いでくれたりもするんですよ。縁の下の力持ち的なタグですね。
<head>の中身その１：<title>
<title>タグは、<head>の中では一番見えやすいものです。
ブラウザウインドウの一番上、ページのタイトルを指定します。
タイトルは重要ですよね。せっかく作ったページが「無題」にならないよう、気を遣いたいものです。
HTMLファイルの「頭」と「体」
HTMLファイルは大きく分けて<head>と<body>に分けられます。
ホームページとして画面に表示されるのは<body>の部分です。
じゃあ<head>は必要無い？そんなことはありません。
<head>の中には、大事な情報がたくさん入っています。
ドッグイヤー
犬は人間の7倍の早さで年を取るといわれています。それにちなんで、特にIT業界の変化の早さを表して「ドッグイヤー」と呼ぶそうです。最近では変化の早さはますます加速し、「マウスイヤー」つまりネズミの年という言葉もあります。ちなみにネズミが年を取る早さは人間の18倍だそうです。
そんな変化の激しい業界ですので、「昨日の常識は今日の非常識」ということは十分にあり得ることです。日々勉強していく必要があります。
ところで、英語で「dog days」というと、盛夏の時期を指すそうです。犬のようにへばってしまわないよう、夏バテ対策もしておきましょう。
ウェブメールからグループウェアへ
YahooやHotmailなどのフリーメールを使ったことのある方は多いと思います。
以前は、単にサブのメールアドレスとして使える程度でしたが、最近は、単なるメールのサービスではなく、ブログやメッセンジャー、ファイルの共有など、様々な機能を使う、ある意味グループウェアのアカウントとしての意味合いが強くなっているように感じられます。
グループウェアというと難しいように聞こえますが、現実には、もう使いこなしている方も多いのではないでしょうか。
さまざまなブラウザ
一般的なブラウザの他にも、ホームページを閲覧するソフトはいろいろあります。
文章を読むためのテキストブラウザや、ページを音声で読み上げるソフトなど。
さまざまなブラウザのことを考えることは、いろいろな利用者のことを考えることにもつながります。
ブラウザについて
ブラウザというとInternet Explororを思い浮かべがちですが、他にもいろいろな種類があります。FirefoxやOperaなどが有名でしょうか。他にも、携帯電話のブラウザには独自の表示をするものがあります。
どんな環境で見ても、快適に閲覧できるページを目指して、HTMLを組んでいます。
世界標準
WEBに限らず、コンピュータ関連の用語は横文字が多いです。もともと英語圏で発達したという理由もありますが、逆にいうと、英語は機械の世界と相性が良かった、ということもいえるかも知れません。
英語は文字の種類が少なく、文法的にも（文学的な表現