横浜のホームページ制作会社アイエムシー

JavaScriptとCSS（5）

JavaScriptとCSSの組み合わせでアニメーション効果をつける方法について、少し具体的なことを書きます。

例えば、ブロック要素が左から右へ移動する動きを表現する場合。
まず、動かしたいブロック要素（divタグなど）に、IDを付けておきます。<div id="hoge">～～</div>というように書きます。
JavaScriptで、IDにスタイルを指定します。ここで、 position:absolute; とし、開始時点の位置を決めます。
組み込みの関数でタイマーをセットして、一定時間後（例えば、100分の1秒後）に、スタイルを書き換えて1ドット分右にずらした位置を指定するようにします。

これで、ブロック要素が100分の1秒ごとに1ピクセルずつ右に移動するので、見た目にはスーっと左から右へ動くように見えます。

JavaScriptとCSS（4）

JavaScriptとCSS（スタイルシート）の組み合わせで、アニメーションを作ることができます。
原理は、JavaScriptを使ってスタイルを少しずつ変更し、パラパラマンガのようにどんどん切り替えていくことで、なめらかに動いているように見せるというものです。

この方法で、画面内を移動するオブジェクトを表示したり、サブメニューがゆっくり垂れ下がってくる効果を作ったり、また、色がゆっくり変わっていく効果などを見せたりすることができます。

JavaScriptの話（9）

JavaScriptでスタイルを書き換えられる、という話をしましたが、書き換えられるのはスタイル（CSS)だけではありません。
JavaScriptを使って、WEBページの中のテキストなど、内容そのものを書き換えることもできます。

方法は、CSSの場合と同じように、IDで変更する箇所を指定して、その場所をJavaScriptの関数で書き換えます。

これは、Document Object Model（DOM）と呼ばれる考え方に基づいた技術で、さまざまな場面で応用されています。

JavaScriptとCSS（3）

JavaScriptを使って、メニューの一部を切り替えたり、アニメーションを表示するには、IDを使います。

まず、HTMLの中の一部分に、任意の名前のIDを設定します。そして、そのIDに対して、JavaScriptを使ってスタイルを適用します。スタイルの適用に、直接CSSを使うのではなく、JavaScriptを使うことで、スクリプトの側からスタイルの書き換えを行うことができるようになります。

IDは、HTML内の場所を示す目印という役割があるので、1つのHTMLの中で同じIDを２箇所以上に使ってはいけません。

JavaScriptとCSS（2）

JavaScriptを使ってCSS（スタイルシート）を切り替える方法は、大きく分けて2つあります。
1つは、複数のCSSファイルを用意して、ファイルごとCSSを切り替える方法です。これは前回書いたものです。
もう１つは、WEBページの中で、部分的にスタイルを書き換える方法です。

前者はページ全体のデザインを切り替える場合などに、後者は、メニューなどサイトの一部を見せたり隠したり、動きのあるページを演出するのに適しています。

JavaScriptとCSS

WEBページに動きをつける方法として、JavaScriptとCSSを組み合わせる方法があります。
例えば、JavaScriptを使って、CSSファイルを切り替えるやり方です。

この方法を使うと、ひとつのサイトでも、スタイルシートを切り替えて、まったく違うサイトのように見栄えを変えることができます。
ユーザーの側で好きな見た目を選べるようにしたり、日付や時間帯によって表示を切り替えたり、といったことができます。

JavaScriptの話（8）

現在、JavaScriptには、プログラムをまとめた「ライブラリ」と呼ばれるものが多くあり、それを使うことで、さまざまな効果を簡単に得ることができます。
例えば、アニメーション用のプログラムをまとめたライブラリを持っていれば、メインのプログラムをそこから流用して、簡単なコードを書くだけでいろいろなアニメーションを見せることができます。

JavaScriptのライブラリには、有名なものでは「prototype」や、「common.js」などがあります。

JavaScriptの話（7）

JavaScriptを使った小さなプログラムで、ブラウザのブックマーク（お気に入り）に登録して使えるものを、Bookmarkletと呼びます。
Bookmarkletにはさまざまな種類があり、ホームページの表示を変えたり、機能を付け加えたりすることができます。例えば、ページの拡大・縮小や、FLASHアニメーションのコントロールなどです。他にも、使うことでWEBページを動的にすることができる機能がたくさん開発されています。

JavaScriptの話（6）

動的なページを作るのに有用なJavaScriptですが、場合によっては、セキュリティ上の問題を起こすことがあります。
意図的にブラウザに対して攻撃を加える「ブラウザクラッシャー」というサイトに利用されたり、最近では、動的なサイトに組み込まれたスクリプトを利用した「クロスサイトスクリプティング」という脆弱性の原因になったりもしています。

危険そうなサイトには近づかないように気をつけることも大切です。

JavaScriptの話（5）

現在、JavaScriptでもっとも注目されているのが、Ajax（Asynchronous JavaScript + XML）と呼ばれる技術です。ページを移動せずに、情報をやりとりしたり、画面を変化させたりすることができ、様々なブログツールや、CMS（コンテンツマネジメントシステム）の管理画面などで使われています。
また、Googleマップなどの画面でも使われているので、名前は知らなくても、実は使ったことのある方は多いと思います。

ちなみに、Ajaxの読み方は「アジャックス」または「エイジャックス」ですが、「エイジャックス」のほうが、英語圏での読み方に近いようです。

JavaScriptの話（4）

JavaScriptを使う利点としては、以下のようなものを挙げられます。

・FLASHサイトに比べて、SEO的に有利
・プラグインが不要で、ほとんどのブラウザで動作する（JavaScriptをオフにしている場合は動きません）
・ブラウザに情報を記憶させることができる（Cookieと呼ばれる技術）

逆に、不利な点は、以下のようなものです。

・セキュリティ上の問題（動作の自由度が高いので、危険なスクリプトも組める）
・古いコードの書き方では、動作しない場合がある（最新の仕様に関する知識が必要）

特に、仕様の正しい知識は、なかなか理解するのが難しいので、制作の際には注意が必要です。

JavaScriptの話（3）

もともとはNetscapeが独自に開発したJavaScriptは、現在では、ウェブ制作に欠かせない技術となっています。
画像の上にマウスポインタを置くと画像が変わる「ロールオーバー」と呼ばれる技法をはじめ、JavaScriptを使った、動きのあるホームページの作り方は「DHTML（ダイナミックHTML）」と呼ばれ、爆発的に普及しました。

その後、FLASHを使ったサイトの流行に押されることもありましたが、現在はJavaScriptを使ったアニメーションのスクリプトやライブラリが数多く出ていることもあり、FLASHに劣らない表現が可能になり、多くのサイトで使われています。

JavaScriptの話（2）

JavaScriptは、Netscape社で開発されたスクリプト言語で、Netscape Navigator（NN）2.0で最初に実装されました。もともとはWEB標準の言語ではなく、Netscapeのローカルな規格として生まれたものです。
当時はまだブラウザといえばNNという状況だったこともあり、AmazonやGoogleなど、大手のサイトがJavaScriptを導入するようになった結果、事実上の標準として、ウェブに浸透していったのです。

現在では、さまざまなサイトをはじめ、ほとんどのブログツールや、CMS（コンテンツマネジメントシステム）で採用されており、WEB標準にも採用されています。

JavaScriptの話（1）

JavaScriptの開発は1995年と、WEBの技術の中でも古いほうですが、現在でも先端のページに組み込まれている、現役の技術です。
特徴として、ブラウザ側で動作するので、ウェブサーバーの負担が少なく、動的なページを作ることができます。

ただし、動的なページにはつきものなのですが、セキュリティ上の問題を起こすこともあり、注意するとともに、常にアップデートしていく必要があります。

ちなみに、プログラム言語の「Java」とは、名前が似ているだけで関係はありません。

HTML5について

現在、HTMLの最新バージョンは、HTML4.01かXHTML1.1ですが、2008年1月にHTML5のドラフト（草案）が発表されています。
その中では、新しいタグが追加され、ブログやマルチメディアに対応するものとなっているようです。

ホームページ制作をしている者としては、新しいバージョンが出れば対応をする必要がありますが、仕様の策定に関わる人物からの発表では、正式リリースは2022年頃とのこと。
当分はHTML4、またはXHTML1で、より洗練されたページを作ることを考えた方がよさそうです。

ブラウザの話：WEB標準テストについて（2）

前回触れた「Acid2」というテストは、主にHTMLとCSSについて、表示をテストするものでした。
WEB標準についてのテストは、他に「Acid3」というものがあり、こちらは、JavaScriptなどの、動的なコンテンツに関する表示をチェックするものです。

現在、Acid3に合格しているレンダリングエンジンは「Presto」と、「WebKit」の2つだけです。ブラウザでいうと、Opera、Safari、Chromeなどが当てはまりますが、現在、実際にリリースされたバージョンのものでは、完全に合格しているものはありません。

ブラウザの話：WEB標準テストについて

ブラウザがWEB標準の規格を満たしているかどうかをチェックする、Acidと呼ばれるテストがあります。
その中で、HTMLやCSSの対応状況を調べるテストはAcid2と呼ばれ、多くのブラウザは、最新版ではこのテストをクリアしています。

現在、Acid2をクリアしている主要なブラウザと、そのバージョンは以下の通りです。

Safari（Mac版2.02）
Konqueror3.5.2（Unix用のブラウザ）
Opera9.0
iCab3.0.3
Firefox3
Internet Explorer8

上記の通り、IEやFirefoxでは、最新版はAcid2に合格していますが、Acid2を通らない古いバージョンも多く使われています。
実際のホームページ制作では、そういったブラウザのことも考えて、HTMLやCSSを書くことが必要です。

ブラウザの話：ブラウザの種類について（2）

数多く存在するウェブブラウザは、一見バラバラのようですが、いくつかのグループに分けることができます。
ブラウザには「レンダリングエンジン」というプログラムが入っていて、このプログラムが、HTMLやCSSを解釈して、実際の画面表示を決めています。違うソフトでも、同じレンダリングエンジンを使っていれば、ホームページの表示は同じ結果になります。

現在、主要なレンダリングエンジンは、IEで使われている「Trident」、NetscapeからFirefoxに受け継がれた「Gecko」、Safariや、Google Chromeで使われている「WebKit」などがあります。
実は、Mac用として作られたSafariと、Googleが開発したChromeは、同じグループになります。ウェブの表示も、原則として同じように見えるはずです。

また、最近では、Firefoxのレンダリングエンジンを切り替えるプラグインや、最初から上記3つのレンダリングエンジンを組み込んだLunascapeというブラウザも出てきています。

ブラウザの話：ブラウザの種類について（1）

ホームページを見るブラウザには、現在たくさんの種類があります。
一般的に使われているIE（Internet Explorer）やFirefoxの他にも、Macでの標準ブラウザであるSafariや、Opera、最近Googleが開発したChrome、他にもCaminoなど、ホームページを視覚的に表示するブラウザだけでも、数多くの種類が存在します。
（視覚的な装飾をしない、テキストブラウザや、文章を読み上げるタイプのブラウザも存在します）

このように、多くのブラウザが乱立している状況ですが、ぜんぜん違うものが数多くあるわけではなく、実は、多くのブラウザは、いくつかのグループにまとめることができます。
ブラウザのグループ分けについては、次回。

CSSの話：CSSの定石（その5）

CSS（スタイルシート）を使ったデザインは、HTMLに比べて歴史が浅く、現在も発展途上です。
新しい技術が生まれて、可能性が広がっている分、古い型のブラウザでは見ることができないページも増えてきています。

今回は、CSSを使ってページを作る際に、どのブラウザまで対応するかを書いておきます。

・Internet Explorer (IE) 6以降：
利用者のシェアと、CSSへの対応状況を考えて、IEは基準にせざるを得ません。7以降のCSS対応は、いわゆるモダンブラウザ（最新のCSSに対応したブラウザ）とみなせるようです。

・Firefox
IEには及ばないものの、シェアを伸ばしつつあり、また、CSS対応も進んでいます。
割合に優等生的な表示をしてくれるので、構文チェックには向いていますが、Firefoxで正しく表示されたものが、IEでレイアウト崩れを起こすというのはよくある話です・・・

・Safari
Mac OS X 標準のブラウザです。多少の差はありますが、おおむねFirefoxと同等のCSS対応です。
Firefoxで確認したページなら、9割がた問題なく表示されるでしょう。

・Opera
基本的にはモダンブラウザとして扱えますが、CSS対応にややクセがあります。シェアの問題を考えると、場合によっては切らざるを得ないことも・・・

・Netscape Navigator
最新版であれば、基本的なプログラムはFirefoxと変わらないので、Firefoxで動作確認をすればよい、というスタンスです。NN4以前は、まともにCSSを解釈できないので、CSSレイアウトをする場合は切り捨てることになります。

CSSメインでデザインを行う場合、IE5以前（特にIE3以前はCSSを解釈できません）、また、Netscape4以前のブラウザは、デザイン的には切り捨てざるを得ません。
ただし、それはあくまで「デザイン的に」であって、正しいHTML構文を使うことで、デザインは崩れても、内容（コンテンツ）は伝わるように制作する事ができます。

CSSの話：CSSの定石（その4）

CSSでレイアウトをする際の「お約束」のようなものです。

ブロック要素にfloatを指定する場合、必ず一緒にwidthプロパティで横幅を指定するようにします。
これは、CSSの文法規則ですので、守るようにしましょう。

また、position:absolute;で位置を指定した場合も、なるべくwidthを指定した方がいいでしょう。逆に、margin、padding、borderといったプロパティは、ブラウザごとに表示が違い、レイアウト崩れの原因になるため、指定しない方がいいでしょう。

CSSの話：CSSの定石（その3）

ブロック要素を中央寄せにする場合、marginプロパティを使って左右の余白を「auto」にする方法がありますが、インターネットエクスプローラー（IE）では、ブロックが正しく中央寄せにならない場合があります。
IEでも正しくブロックを中央に配置するには、配置したいブロックの「親」に当たるブロックに「text-align:center」を指定します。ただし、これを指定すると、文章なども全部中央寄せになってしまうので、配置したブロック要素の方で、改めてtext-alignプロパティを指定する必要があります。

CSSの話：CSSの定石（その2）

CSSでデザインをする上での「約束事」をいくつか紹介していきます。
これらは、W3C等の規格で決められていることではなく、多くのデザイナーやコーダーが実際の運用の中で見出した、「現場の知恵」のようなものです。

今回ご紹介するのは、「widthプロパティを指定する場合、左右のborder-width、及びpaddingは指定しない」というものです。
border（枠線）とpadding（ブロック要素の中の余白）を指定した場合、それをwidth（ブロックの幅）に含めるかどうかは、現状ブラウザによって違います。
width:100px; border-width:5px; padding:10px とした場合、実際に表示されるブロック要素の幅が、100px なのか 110px （左右の枠線の幅を別に取る）なのか 120px （左右の余白の幅を別に取る）なのか、130px （枠線と余白の幅を取る）なのか、はっきりしないのです。
しっかり計算してレイアウトしたつもりが、レイアウト崩れになってしまう原因となります。

これを防ぐには、ブロック要素を入れ子にして、それぞれ個別にborderやpaddingを指定するようにするとよいでしょう。

CSSの話：CSSの定石（その1）

スタイルシートでのWEBデザインを実際に行う際には、覚えておくと便利な「暗黙の約束事」があります。その約束事を「定石」と呼ぶことにして、いくつかをご紹介します。

まず、ネットスケープ・ナビゲーター（NN）4、インターネットエクスプローラー（IE）4以前のブラウザには、CSSを読み込ませない方がいいでしょう。
これらのブラウザは、CSSという技術が出始めた頃のもので、実際のCSSへの対応が不完全であり、多くのバグ・不具合があります。ですので、中途半端に読み込まれるよりは、最初からCSSを読まないように設定しておいた方が良いです。

具体的には以下のような方法を使います。
外部CSSを読み込むlinkタグに「media="screen,tv"」 などと書き込むことで、NN4をはじくことができます。
「@import」規則を利用して外部CSSを読み込む形にすることで、IE3、4をはじくことができます。

CSSの話：さまざまな環境で表示を揃える（その2）

今回は、floatを使う場合のちょっとしたコツについてです。
段組のレイアウトをする際など、floatを使うと便利なのですが、ブラウザによって正しく対応していないものがあります。
バグとして代表的なものが、インターネットエクスプローラー（IE）5、または6で、指定よりも余白を大きく取ってしまうというものです。正しく設定したはずのレイアウトが、IE5、IE6で崩れて見える原因になっています。

回避策として、float:leftを指定した要素には、同時にmargin-left:0を指定するようにします。float:rightを指定した場合には同様にmargin-right:0を指定します。
もうひとつの回避策として、IE6では、floatを指定したブロック要素には、display:inlineを指定すると、なぜか余白の大きさが小さくなります。

CSSの話：さまざまな環境で表示を揃える（その1）

CSSでのWEBデザインは急速に普及してきていますが、それでもまだブラウザごとに対応の仕方がまちまちであったり、表示にずれがあったりします。

対応していない要素についてはどうしようもない部分も多いのですが、各ブラウザの表示のずれは、CSSの書き方である程度抑えることができます。
たとえば、余白や線の太さ、色等の既定値は、最初に明示的に宣言してしまえば、ブラウザごとの違いを考える必要が無くなります。
具体的には、以下のように書きます。

* {margin:0; padding:0; font-size:100%; font-weight:normal; font-style:normal; text-decoration:none; color:#000000; background:transparent;}

これで、どのブラウザでも、基本の余白、文字、背景の設定が統一されますので、あとは個別の要素ごとにスタイル指定をしていけば、ブラウザごとの差はかなり吸収されます。

CSSの話：条件付コメント（まとめ）

HTMLのコメントを使った条件分岐の方法は、前回までで一通りご紹介できたかと思います。
プログラミングで使われる「if文」と呼ばれる方法に近いものなので、プログラムをご存じの方には使いやすいかも知れません。この方法で、IEのさまざまなバージョンと、それ以外のブラウザを振り分けることが可能です。

IE以外のブラウザについては、CSSハックを使って振り分けを行いますが、W3C準拠の書式を守りつつ、全部の振り分けを行うのは非常に難しいです。
実際には、全てのブラウザを振り分けて違いを吸収しようと考えるより、多くのブラウザで「概ね問題無く見られる」スタイルを目指す方が現実的でしょう。

CSSの話：条件付コメント（その7）

引き続き、コメントを使ってインターネットエクスプローラー（IE）で条件分岐を行う方法についてです。
前回は、「ある数字より上のバージョン」に、HTML文を適用させましたが、以下のように変更すれば、「ある数字以上（その数字を含む）のバージョンに適用させる」ことができます。

以下のようにHTMLファイルに書き込みます。IE5以上（IE5を含む）のバージョンで、ie5.cssというCSSファイルを読み込みます。
<!--[if gte IE 5.0]>
<link rel="stylesheet" href="ie5.css" type="text/css" />
<![endif]-->

前回の「gt」をを「gte」に変更するだけです。「lt」と「lte」の関係と同じですね。

CSSの話：条件付コメント（その6）

引き続き、インターネットエクスプローラー（IE）で条件分岐を行う方法です。
今回は、「ある数字より上のバージョン」に、HTML文を適用させる方法です。以下のようにHTML文書内に書き込みます。

以下のようにHTMLファイルに書き込みます。IE5より上のバージョンで、gtie5.cssというCSSファイルを読み込みます（IE5およびそれより古いバージョンでは読み込みません）。
<!--[if gt IE 5.0]>
<link rel="stylesheet" href="gtie5.css" type="text/css" />
<![endif]-->

今回は、「gt」を使いました。「gt」は「greater than」の略で「～より大きい」という意味です。

CSSの話：条件付コメント（その5）

インターネットエクスプローラー（IE）の独自拡張である、コメントによる条件分岐についてです。
前回は「ある数字より下のバージョン（数字は含まない）」でしたが、今回は「ある数字以下のバージョン（その数字を含む）」という条件の書き方です。

以下のようにHTMLファイルに書き込みます。
<!--[if lte IE 6.0]>
<link rel="stylesheet" href="ie6.css" type="text/css" />
<![endif]-->
これで、「バージョン6以下」のIEに、ie6.cssというCSSファイルが適用されます。前回と違うのは、「lt」が、「lte」になっているところだけです。

CSSの話：条件付コメント（その4）

インターネットエクスプローラー（IE）の独自仕様で、コメントを使って条件分岐を行う方法です。
今回は、バージョンが、ある数字より小さい場合にのみ適用する書式で、「ｌｔ」を使います。「ｌｔ」は「less than」の略で、「～～より小さい」という意味です。

例えば、以下のようにHTMLファイルに書き込みます。
<!--[if lt IE 6.0]>
<link rel="stylesheet" href="ltie6.css" type="text/css" />
<![endif]-->
するとIEの、6より低いバージョンのものだけに、ltie6.cssというCSSファイルの内容が適用されます。ここで、IE6は含まないことに注意してください。

CSSの話：条件付コメント（その3）

インターネットエクスプローラー（IE）限定の、コメントで条件分岐をする方法です。
今回は、IEのバージョンによって振り分けを行う方法です。新しいバージョンと古いバージョンでは、表示が違うことがよくあるので、こういった振り分けを使ってズレを回避します。
書き方は、前回の、IEだけにスタイル適用の場合とあまり変わりません。バージョンの数字を書き入れます。

<!--[if IE 7.0]>
<link rel="stylesheet" href="ie7.css" type="text/css" />
<![endif]-->

上記のように書くと、IE7にのみ、スタイルシートを読み込ませることができます。
このとき、数字は7.0や5.5のように、二桁以上で書かないと、正しく認識されないことがあるようです。

CSSの話：条件付コメント（その2）

HTMLに書き込むことで、インターネットエクスプローラー（IE）のバージョンごとに違う表示をさせることができるのが、条件付コメントです。
今回からは、実際の使い方を書いていきます。

例えば、IEにのみスタイルを適用したい場合には、例えば以下のようにできます。
まず、IE専用のie.cssというCSSファイルを作成します。そして、HTMLファイルのheadタグ内に下のように書きます

<!--[if IE]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

こうすると、<!--[if IE]>から<![endif]-->までは、IE以外のブラウザでは読み込まないため、IEのみに特別なスタイルを適用することができます。

CSSの話：条件付コメント（その1）

インターネットエクスプローラーでは、HTML文の中に、条件付コメントというものを書き込むことで、適用させるスタイルを選ぶことができます。
振り分け用のCSSファイルを複数作成しておき、IEのバージョンごとに、条件付コメントで振り分けるのが一般的な使い方です。
条件付コメントの基本的な書き方は以下の通りです。プログラム言語などで使う「IF文」の形式によく似ています。

1.条件に合致した場合、中のHTMLを適用する
<!--[if 条件]>HTML<![endif]-->

2.条件に合致しない場合、中のHTMLを適用する
<!--[if !条件]><![IGNORE[--><![IGNORE[]]>HTML<!--<![endif]-->

これを利用して、CSSファイルへのリンクを書き込みます。

条件付コメントは、一般のHTML文では、コメントとして扱われ、IE以外のブラウザでは読み込まれません。

CSSの話：HTMLのコメントで条件分岐

インターネットエクスプローラーでは、HTML文書にコメントを書き込むことで、特定のバージョンにだけスタイルを指定することができます。
一例としては、以下のように書きます。

<!--[if lt IE6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->

これで、バージョン6以下のインターネットエクスプローラー限定のCSSファイルを読み込ませることができます。
上記は、CSSファイルではなくHTMLファイルに書き込むHTMLの書式であることに注意して下さい。

CSSの話：IE7を除くモダンブラウザに適用

今回は、インターネットエクスプローラー7以外のモダンブラウザ（CSSなど、W3Cの規格に対応しているブラウザ）にのみスタイルを適用させる方法です。スタイル指定する要素の前に「html>/**/body 」を追加します。
具体的には以下のような書き方になります。

html>/**/body .class{color:#ff0000;}（IE7以外のモダンブラウザで文字色を赤に）

この書き方は、W3Cで定められた書式に合っていないので、注意してください。

CSSの話：Hollyハック（MacIE5のみ適用／除外）

Macintosh版インターネットエクスプローラ5のみにスタイルを適用、もしくは除外する書式です。以下のように書きます。

MacIE5のみ適用する場合：
/*　ここからMacIE5に適用 \*//*/
p { color:#FF0000; }
/* これ以降他のブラウザにも適用 */

MacIE5のみ除外する場合：
/* これ以降MacIE5には適用されない \*/
p { color:#FF0000; }
/* これ以降MacIE5にも適用 */

この書き方は、バックスラッシュ（＼）を使うので、バックスラッシュハックとも呼ばれます。
文字コードがShift JIS等の場合、バックスラッシュの代わりに、半角の「￥」記号を使ってください。

W3Cの規格に反しない書き方です。

CSSの話：Safariのみに適用

Appleのブラウザ、Safariにのみスタイルを適用することができるCSSの書き方です。
スタイル指定をする要素の前に「html[xmlns*=""] body:last-child 」と書き加えます。
具体的には、以下のようになります。

html[xmlns*=""] body:last-child .class{margin:10px;}

この書き方は、W3Cの規格に合っていないので、W3C準拠のCSSでは使えません。

CSSの話：IE6を除外するハック

スタイルを指定する時に、インターネットエクスプローラー6には適用させないようにする書き方です。
プロパティの後、値を指定する前に、半角スペースと「/**/」を挿入します。すると、このプロパティはIE6では適用されなくなります。

例えば、以下のように書きます。
.class{
color : /**/ #ff0000;
}
こうすると、IE6以外では、文字の色が赤くなります。IE6では適用されません。

この書き方は、W3C標準に反しない書式です。

CSSの話：IE7とモダンブラウザのみ適応

インターネットエクスプローラー7と、モダンブラウザ（W3Cの基準に対応した、最近のブラウザ）にのみスタイルを対応させる書き方です。適用させたい要素の前に「html>body　」を付け加えます。
これは、書式としてもW3Cの基準に合っているので、W3C準拠の頁でも使えます。

CSSの話：IE7ハック

今回は、インターネットエクスプローラーのバージョン7にのみスタイルを指定する方法です。
要素の前に「*:first-child+html」という文字列を書き加えます。すると、そこで指定されたスタイルは、IE7だけに適用され、他のブラウザでは適用されません。
この書き方は、W3Cの書式に違反していないので、このハックを利用しても、W3Cの基準では正しい書式のCSSとみなされます。

CSSの話：アンダースコアハック

前回の「スターハック」と同様に、インターネットエクスプローラー6以下にのみスタイルを適用する書き方です。「スターハック」の名前は「*」の記号を使うところから来ていますが、「アンダースコアハック」は「_」の記号（アンダースコア）を使います。
プロパティの前に「_」記号を付けてスタイルを記述すると、IEのバージョン6以下にのみそのスタイルを適用させることができます。
ただし、この書式はW3Cの基準に沿わない書き方なので、正しいCSSの書式で書く場合にはスターハックの方をおすすめします。

CSSの話：スターハック

CSSハックの中で、もっとも有名なのが、この「スターハック」と呼ばれる方法かも知れません。インターネットエクスプローラー4〜6と、それ以外のブラウザを区別してスタイル指定する時に使います。
スタイルを指定したい要素名の前に「* html 」を付け加えて記述すると、IE4〜6にのみ、そのスタイルが適用されます。他のブラウザではそのスタイルを読み込みません。

この書き方は、W3Cの基準に合っているので、WEB標準に気を配る場合も有効です。

CSSハックについて

CSSへの対応や実際の表示は、ブラウザによってかなり違います。
なので、同じ画面表示を実現させるためには、ブラウザごとに少しずつ違うスタイル指定をしなければならない場合があります。その際に、ブラウザごとの対応の違いを逆手に取って、特定のブラウザだけにスタイルを適用させたり、特定のブラウザを除外したりする便利な書き方があります。
そういった、ある意味「裏技」的な方法をCSSハックと呼んでいます。

これから数回、特によく使われるCSSハックをピックアップしていきます。

CSSの話：outline-width

outline-widthは、アウトラインの太さを指定します。これも、borderでの指定と変わりません。数値で指定するか、thick（太い）、thin（細い）、medium（普通）から選びます。borderとは違い、上下左右を個別に指定することはできません。

borderが常に四角い枠を作るのに対して、outlineは形状に沿った縁取りをすると定義されています。outlineを設定した箇所が丸ければ、丸い縁取りになるということです。
しかし、現状では、実際にブラウザで表示すると、だいたい四角い縁取りになってしまう様子です。

CSSの話：outline-style

outline-styleプロパティでは、アウトラインの形を指定します。指定できる値は、border-styleと完全に同じで、solid（１本の線）、double（２重線）、groove（窪んだ線）、ridge（隆起した線）、inset（線の中が凹んだように表示される）、outset（線の中が出っ張ったように表示される）、dashed（破線）、dotted（点線）、none（線無し）の中から選びます。初期値はnoneです。

CSSの話：outline-color

outline-colorプロパティは、outline（縁取り）の色を指定します。色は、他のプロパティで色を指定するときと同様に、#RRGGBBの6桁の16進数や、色の名前で指定するほか、invertという値をとることができます。invertを指定すると、縁取りの色は背景の色を反転させた色になります。

CSSの話：outline

outlineプロパティは、要素の外枠について、表示の仕方を設定します。outlineの線は、borderで設定した線のさらに外側の表示になります。
borderと違い、outlineには、上下左右の区別はありません。

設定できるのは、太さ、線の種類、線の色です。設定の仕方はborderと同じです。

outlineプロパティは、Internet Explorerでは対応していません。

CSSの話：quotes

指定した範囲に、引用符をつけるプロパティです。引用符は、開始と終了のペアで指定します。また、引用符のペアを複数指定することで、入れ子になった場合の引用符の表示を指定できます。

例えば、qタグにquotes:"「" "」" "『" "』"; とプロパティを設定した場合、
<q>HTMLリファレンスによれば<q>qタグは引用を表す</q>とのことです</q>と彼は言った。
というHTML構文が

「HTMLリファレンスによれば、『qタグは引用を表す』とのことです」と彼は言った。
と表示されます。

contentプロパティで埋め込まれるオブジェクトと同様、quotesプロパティで埋め込まれる引用符も、実際にHTMLに書き込まれてはいないので、コピーや貼り付けの際には無視されます。

CSSの話：content

beforeやafterといった疑似要素と組み合わせて、定型の文字列やオブジェクトを埋め込むプロパティです。対応しているブラウザならば、文字列だけでなく、連番や引用符を付けることもできます。URL指定で画像を貼り付けることもできます。

contentプロパティで埋め込んだ文字や記号は、HTMLの中に書き込まれたものではないので、表示されたホームページの文章をコピーした場合に、埋め込んだ文字列部分が抜けてしまうことがあります。
また、検索エンジンに読まれることも無いので、特に文章を埋め込む場合など、SEOの際には気を付ける必要があります。

CSSの話：after疑似要素

after疑似要素は、before疑似要素と同じく、contentプロパティを指定することで、オブジェクトを埋め込むのに使われます。

berofe疑似要素が、指定した部分の「前」にオブジェクトを表示するのに対し、after疑似要素は、指定部分の「後」に定型の文字列やオブジェクトを埋め込むことができます。

CSSの話：before擬似要素

今回は、擬似要素の話です。擬似要素とは、実際のHTMLには書き込まれていないものの、CSSで要素として扱えるものです。

before擬似要素は、contentプロパティと併せて使い、指定した要素（タグやクラスなど）の前に、CSSを使って定型の文字列やオブジェクトを埋め込むことができます。

CSSの話：!important

CSSのスタイル指定では、スタイルを適用する優先順位が決まっています。
例えば、同じ要素やクラスに、矛盾するスタイルが指定されていた場合（文字色の指定が黒と赤の2種類ある場合など）に、どちらを適用するかで混乱が起こらないようにするためです。

優先順位は、外部CSSファイル＜ヘッダ内スタイルタグ＜タグのstyle属性、の順に優先度が高くなっていきます。また、同じ外部CSSファイル内などの場合は、下に書かれているスタイルが優先となります。

!importantを記述すると、規定の優先順位にかかわらず、そのスタイルを最優先に適用することができます。
基本的には、外部CSSファイルでの指定を、HTMLファイルに何が書かれていても確実に適用したい場合などに使います。

この書式は、ブラウザによって対応していないものもありますが、それを逆手にとってクロスブラウザのCSSを書くために利用する手法などもあります。

CSSの話：@page

印刷時のページに関わるスタイルを指定します。擬似クラスで、細かい指定を行うことができます。
:first（最初のページ）:right（右側のページ）、:left（左側のページ）を分けて、スタイルを指定することができます。
とじしろのために余白を設定するなど、ページの印刷と関係するプロパティを指定しておくと便利でしょう。

CSSの話：@media

出力形式によって、違うスタイルを適用することができます。例えば、画面に映し出す場合と、印刷する場合で、全く違うスタイルでの出力を行うことができます。

主に使われるのは、「screen（パソコン等のディスプレイ）」と「print（印刷）」、そして「all（すべてのメディアに適用）」です。
他にも、「handheld（携帯用の小さな画面）」や、「projection（映写機）」、「aural（読み上げ）」等、さまざまな出力形式がありますが、ブラウザの対応はまちまちなようです。

CSSの話：@import

URLを指定して、他の外部スタイルシートを読み込むことができます。
ブラウザによって対応状況はまちまちですが、それを逆手にとって、ブラウザごとに違うCSSファイルを読み込ませるために使ったりもします。
具体的には、@importを使って、FirefoxとInternet Explorerで、違うCSSファイルを読み込ませることがなどできます。

CSSの話：@charset

これから数回は、CSSの基本的なルールに立ち返った話をします。
実は、知らなくてもスタイル指定はできるのですが、CSSのバグが出た場合の対処や、クロスブラウザ（どのブラウザでも同じように表示させるようにすること）のためには、意外と基礎の部分が重要になってきます。
（私自身もここで詰まったり、泣かされたことがありました）

@charsetは、外部スタイルシートファイルを使うときに、文字コードを設定するものです。必ずファイルの先頭に記述します。
基本的には、スタイル指定には半角英数字しか使わないのですが、日本語のコメント等を書き入れるとき、文字コードを設定しておかないと、不具合が生じることがあります。
また、HTMLファイルとCSSファイルの文字コードは、合わせておいたほうがいいでしょう。

CSSの話：filter:X-ray();

Internet Explorerの独自プロパティ、filterの話も今回でひとまず終了です。
X-rayは、X線写真のような効果を与える、ということですが、実際に行っている処理は、指定箇所を白黒（グレースケール）にして、色を反転させているようです。X線というのは、あくまでイメージです。
この効果には、設定できる値はありません。

filterプロパティは、さまざまな効果を持っていますが、あくまでInternet Explorer独自のプロパティですので、他のブラウザでは効果が表示されないことに注意して下さい。

CSSの話：filter:Wave();

Internet Explorer独自のfilterプロパティの中で、指定した範囲を波のように歪ませる効果です。波の数や位相、強さなどを設定することができます。
波の数はfreq=n、強さはstrength=n（nは数値）、位相はphase=d（0〜360の範囲で、開始位置の位相を指定）と入力して設定します。また、add=1とすると、元のイメージを上書き表示します（上書き表示しない場合はadd=0と指定します）。lightStrength=n（nは数値）で、イメージに当てる光の強さを指定することもできます。

CSSの話：filter:Shadow();

filterプロパティの一種で、指定した範囲に影を付ける効果があります。DropShadowと似ていますが、少し形が違います。DropShadowの影は本体から離れて表示されますが、Shadowの影は、本体とくっついて表示されます。影で奥行きの形が出るような感じになります。

影の色と角度を指定することができます。色は、#RRGGBBの表記、もしくは色名で。角度は、真上を0とした360度の数値で表されます。

CSSの話：filter:Mask();

IEの独自機能・filterの一種で、指定範囲内の透明部分を、好きな色で塗りつぶし、不透明な部分は透明にする効果があります。結果として、透明と不透明が逆転することになります。
値は、colorに、塗りつぶしの色を指定します。color=#RRGGBBという方式、もしくは色の名前で指定できます。

CSSの話：filter:light();

filterプロパティ（インターネットエクスプローラーの独自拡張CSS）の一種で、適用した箇所に、光を当てたような効果を表現することができます。

実際に、効果を得るには、プロパティの指定とは別に、javascriptでaddAmbient(R, G, B, stlength) や addPoint(x, y, z, R, G, B, stlength) といった指定をする必要があります。
この指定をすることで、光の当たるポイントや、強さ、回りの明るさなどを設定することができます。
addAmbientやaddPointの値を変えることで、グラデーションのようなやわらかい光から、スポットライトのような光の当たり方まで、さまざまな効果を得ることができます。

CSSの話：filter:Invert()

filterプロパティの中で、色を変化させるもののひとつです。色調を反転させます。写真の「ネガ」の状態のような色にします。
この効果には、指定する値はありません。

CSSの話：filter:Gray()

filterプロパティの中で、指定した範囲を、グレースケール（白黒写真のような状態）で表示することができるものです。この効果に対して、指定する値はありません。

filterプロパティでは、色を変える効果がいくつかあります。インターネットエクスプローラー限定ですが、画像処理ソフトを使わなくても、CSSの効果のみで、さまざまな表示の変化が可能です。

CSSの話：filter:glow()

適用した範囲に、後光のように色を付ける効果です。PhotoshopやFireworksなどの画像処理ソフトで、「グロー」という効果を付けるフィルタがありますが、同様の効果をCSSで付けられます。
色と強さを設定します。色は、他の場合と同じように６桁の16進数（#RRGGBB）で表し、強さは数字で表します。

インターネットエクスプローラー以外のブラウザは対応していませんので、注意して下さい。

CSSの話：filter:flipV();

IEの独自プロパティ、filterの効果です。flipV()のVはVertical（垂直の）の略です。指定した対象の上下を反転させます。
flipH()と組み合わせて使えば、1つの画像を4つ分使いまわすこともできます。
（Internet Explorer以外では効果が見えないので、注意してください）

CSSの話：filter:flipH();

Microsoft Internet Explorer独自のCSSプロパティ、filterでは、さまざまな効果を設定できます。
flipHは、指定した対象を左右反転させる効果があります。HはHorizontal（水平に）の略です。
画像処理ソフトを使わなくても画像を反転させられるほか、文字の反転もできます。左右対称のデザインを作るのに便利です。

ただし、Internet Explorer以外のブラウザで見た場合は、反転していない状態で見えてしまうので気をつけましょう。

CSSの話：filter:dropshadow();

IEの独自プロパティであるfilterの、影を付ける機能です。影の色、影を落とす位置を指定できます。
色は、color=#RRGGBB（６桁の16進数）で指定します。影の位置は、offX=x, offY=y（x、yはそれぞれ数字）で指定すると、右にxピクセル、下にyピクセルの位置に影を落とすことができます。

また、画像を一部透明化している場合、positive=falseと指定すると、透明になっている部分にも影を付けます。positive=trueとすると、透明な部分の影は付きません。

CSSの話：filter:chroma()

filterプロパティの中で、画像に指定して、特定の色を透明にすることができます。
これを使うと、透過GIF画像を使わなくても、画像の一部を透明にすることができます（Internet Explorer以外では透明にはなりません）。

かっこの中で、color=#RRGGBBとして、6桁の16進数で色を指定します。

CSSの話：filter:blur()

Internet Explorerの独自スタイルの中で、ぼかし効果をかけるものです。かっこの中に、ぼかしの強さ、方向などを指定する値を入れます。
ぼかしの強さはstrength=n（nは数値）、方向はdirection=n（nは数値で角度指定）します。
また、ぼかした文字や画像の上に、元の画像を乗せて表示する場合、add=trueと書き込みます。元の画像を乗せない場合はadd=falseと書きます。

実例としては、filter:blur(strength=5, direction=180, add=false);というように書きます。

CSSの話：filter:alfa()その2

filterプロパティを使ってグラデーションをかける場合は、filter:alfa(style=1, startX=x1, startY=y1, finishX=x2, finishY=y2, opacity=n, finishOpacity=n)のように指定します。
styleはグラデーションの形（1～3）を指定し、startXとstartYはグラデーションの開始地点、finishXとfinishYは終了地点を、それぞれ座標で指定します。グラデーションの透明度は、opacityからfinishOpacityへと変化します。

CSSの話：filter:alfa()その1

Internet Explororの独自スタイルのひとつで、文字や画像に透明度を指定できます。また、グラデーションをかけることもできます。

透明度を指定する場合、filter:alfa(opacity=x);と指定します。xには0～100の数値が入ります。0だと完全に透明、100だと完全に不透明（規定値）となります。

CSSの話：filter

filterはInternet Explorer独自のプロパティで、画像や文字にさまざまな特殊効果を与えることができます。具体的には、ぼかし効果や、影の付加（ドロップシャドウ）、色の変化などです。

画像を用意しなくても、CSSだけで画像のような効果が得られる便利なプロパティですが、あくまで
Internet Explorerの独自規格であり、IE以外のブラウザでは対応していないので、注意が必要です。

CSSの話：empty-cells

表の中で、中身が空のセルをどう表示するか指定するプロパティです。show（表示する）、もしくはhide（表示しない）を選んで指定します。多くのブラウザではhideが既定値となっています。
empty-cells:show;と指定することで、何も中身の無いセルにも、枠線が表示されます。

CSSの話：border-spacing

表の枠線について、border-collapse:separate;を指定した時のみ意味を持つプロパティです。隣接したセルの枠線をどの程度離して表示するか、数値で指定します。
数値をひとつだけ（border-spacing:5px;のように）指定すると、上下左右に５ピクセルの幅を空けて枠線を表示します。数値をふたつ指定した場合（border-spacing:5px 3px;）、上下に5ピクセル、左右に3ピクセル幅を取って表示します。

CSSの話：border-collapse

表の中のセル（コマ）の枠線に関して、隣り合ったセルの枠線をどのように表示するか指定します。
collapseとseparateの2つの値を指定でき、collapseでは、隣り合った枠線を重ねて表示（セルとセルがくっついている表示）、separateでは、隣り合った枠線を分けて2本として表示します（セルとセルが離れている表示）。

仕様では、初期値はcollapseですが、一般的に、ブラウザの初期設定はseparateになっているものが多いようです。

CSSの話：table-layout

表の横幅について指定するプロパティです。指定する値は、auto、fixedの2つです。
autoは既定値で、表の中身によって、セル（表の中の1コマ）の横幅を変えて表示します。
fixedを指定すると、セルの横幅を固定として表示します。セルの横幅を指定していない場合、内容の長さにかかわらず、表の横幅を均等に分割して各セルに割り振ります。

fixedを指定すると表示が早くなりますが、中の要素がセルからはみ出してしまう場合など、大きくレイアウトが崩れる原因にもなります。

CSSの話：caption-side

表のキャプションの位置を指定するプロパティです。top（上）、bottom（下）、right（右）、left（左）のいずれかで指定します。

当然、captionタグで表にキャプションを付けていない場合は、何の効果も表れません。
また、ブラウザが古い場合は、right、leftは対応していない場合があります。

CSSの話：表に関わるスタイル

表（table）に関するタグは、HTMLの中でも表示と大きく関わる部分なので、リストと並んで、スタイルの指定もやや特殊なところがあります。
キャプションの位置決め、枠線の処理、中身が空のセルの表示に関してなど、以降の数回は、表のための特別なCSSプロパティについてお話をしたいと思います。

CSSの話：page

ホームページの印刷設定に、あらかじめ名前をつけておき、その名前で設定を参照するプロパティです。

まず、@page insatsu{size:landscape; marks:crop;} という風に、ある名前（ここでは「insatsu」です）に、印刷用のスタイルを定義します。
そして、body{page:insatsu;}　のように、pageプロパティを使って定義した印刷用スタイルを呼び出すことができます。

同じ印刷設定を使いまわすときに便利です。

CSSの話：orphansとwidows

ページを印刷するときに、1ページに印刷するテキストを最低何行にするかを設定するプロパティです。
orphansは、ページ最下段の段落に入るテキストの最低行数を、widowsは、ページ最上段の段落に入るテキストの最低行数を、数値で指定します。規定値はともに2です。

例えば、20行分の余白があるところへ、テキスト21行分のページを印刷する場合、widowsが2（最上段の段落に最低2行印刷する）なら、1枚目に20行、2枚目に1行という分け方をしないで、1枚目に19行、2枚目に2行と分けます。
長いテキストを印刷するときに、このプロパティで分け方を調節すれば、最後の紙にほんの数文字だけ印刷される、というような事態を避けることができます。

CSSの話：marks

ページを印刷する際に、トンボ（トリムマーク）と呼ばれる線を表示するプロパティです。トンボとは、紙の裁断や、位置調整の際に基準となる線のことです。

値は、crops（裁断トンボを表示）、cross（調整トンボを表示）、none（トンボを表示しない）から選びます。
ただし、トンボの表示位置は、ブラウザに依存する仕様なので、どの環境でも完全に同じ印刷結果にはならないようです。

CSSの話：size

印刷時のページサイズを指定できるプロパティです。縦横の数値を指定できる他、auto（プリンタの設定に従う）、portrait（紙を縦に使う）、landscape（紙を横に使う）という指定ができます。

あまり厳密にサイズを指定してしまうと、印刷する側の環境に合わないことがありますので、特別な理由が無ければ、既定値のautoにしておくのが無難でしょう。

CSSの話：page-break-inside

このプロパティも、印刷時の改ページを制御するものです。page-break-beforeとpage-break-afterは、改ページを挿入する場所の指定に使われますが、このpage-break-insideは、要素の途中での改ページを禁止するのが主目的です。
page-break-inside:avoid;を指定することで、その要素の途中に改ページが入らないようになります。autoを指定すると、用紙サイズに合わせて、要素の途中でも改ページされます。

たとえば、1ページにまとめて印刷させたい表などに、このプロパティを指定することで、表が２ページにまたがって、途中で切れてしまうような事態を防ぐことができます。

CSSの話：page-break

ホームページを印刷する時の、改ページを指定するプロパティです。page-break-before（要素の前に改ページを入れる）と、page-break-after（要素の後に改ページを入れる）の2つがあります。
プロパティの値には、always（常に改ページを入れる）、avoid（改ページしない）、left（次のページが左側のページになるように改ページ）、right（次のページが右側のページになるように改ページ）があります。

長い文章を主なコンテンツにしているホームページを印刷する時には、このような改ページを設定するプロパティが有効です。

CSSの話：印刷用プロパティ

ホームページを印刷して見る場合、印刷用のスタイルを、画面表示用とは別に指定することができます。
視覚的な表示なので、基本的なプロパティは画面表示に使うものと共通ですが、印刷専用のプロパティも存在します。例えば、改ページ指定、ページサイズ指定などです。

また、文字の大きさをpx単位で指定していると、印刷の際に、画面と比べて文字サイズが非常に小さくなってしまう、ということがあります。
こういった、画面と印刷結果の見栄えの違いを避けるためには、画面表示用と印刷用でCSSファイルを分けて、文字サイズ等の部分を調整するのがいいでしょう。

CSSの話：speak-header

テーブルのセルを読み上げるときに、関連するヘッダを読み上げる際の設定をするプロパティです。
値はonceとalwaysの2つで、onceの場合は最初に1度だけ、alwaysを設定すると、セルの読み上げの度に、関連するヘッダ情報を読み上げます。

CSSの話：speak-numeral

読み上げの際に、数字の読み方をどうするか指定するプロパティです。
値は、digitとcontinuousを選びます。例えば、「123」という数字の列について、speak-numeral:digit;を指定した場合、読み上げの発音は、数字をひとつずつ区切って「イチ・ニ・サン」となります。speak-numeral:continuousを指定した場合は、一つの数として読むので、「ヒャクニジュウサン」という風になります。

CSSの話：speak-punctuation

区切り文字を発音するかどうかを指定するプロパティです。code、もしくはnoneを指定します。
例えば、「a;b」という文字列があった場合、speak-punctuation:code;を指定してあると、「エー、セミコロン、ビー」と読み上げます。speak-punctuation:none;の場合は「エー、ビー」となります。

プログラムのコードなど、記号を読み上げさせたい時に使います。

CSSの話：声の抑揚に関するプロパティ

文章読み上げに際する、抑揚を調整するプロパティをまとめて挙げます。全て、0〜100の数値で指定します。
pitch-rangeは、読み上げ時の声の高さがどの程度上下するかを指定します。
stressでは、アクセントをどの程度強く付けて発音するかを指定します。
richnessは、声の豊かさを指定します。大きい数値ではよく通る声、小さな数値では平板な声になるようです。

それぞれ、抑揚に関するものですが、言語によって表し方が大きく異なるものなので、細かい仕様は定められていません。
大きくすれば大仰な話し方、小さくすると平板で機械的な話し方になる、という感じです。

CSSの話：voice-family

文字の種類を指定するfont-familyプロパティがあるように、読み上げの声の種類を指定するvoice-familyというプロパティがあります。
既定値として、male（男の声）、female（女の声）、child（子供の声）の３種類がありますが、ソフトが対応していれば、他にも様々な種類の声を指定することができます。ソフトの対応次第で種類が増えるところも、font-familyとよく似ています。

CSSの話：pitch

ホームページを読み上げる時の、声の高さを設定するプロパティです。指定する値は、180Hzや1kHzのように周波数を数値で指定する方法、また、x-low（低い）、low（やや低め）、medium（普通）、high（やや高め）、x-high（高い）という指定する方法があります。

理論的には、細かく指定することで、歌のように音程を付けた読み上げが可能です。
必要な設定が細かすぎて実用的ではありませんが。

CSSの話：speech-rate

読み上げの速さを指定するプロパティです。早口にしたり、ゆっくりにしたりできます。
指定方法は、1分間に何語話すか、という単位で、数値を入力する方法と、遅い順にx-slow、slow、medium、fast、x-fastで指定する方法、faster（現在より1段階早く）、slower（現在より1段階遅く）で指定する方法があります。

CSSの話：elevation

読み上げソフトで、声の聞こえる方向を指定するプロパティです。azimuthでは水平方向の角度を指定するのに対し、elevationでは縦方向の角度を指定します。
入れられる値は、-90～90のdeg（角度）指定、below（真下から）、level（水平から）、above（真上から）、higher（+10°）、lower（-10°）です。

CSSの話：azimuth

読み上げブラウザで、音声が聞こえる方向を指定するプロパティです。-360deg～360degの数値で角度を指定するほか、left-side（左側）、right-side（右側）、behind（背後）等の指定ができます。
会話文等で、話者を聞き分けやすくするのに便利ですが、細かい指定は特にスピーカーの性能に依存する部分が大きいかも知れません。

CSSの話：play-during

音声読み上げブラウザでホームページを読み上げる際に、BGMを設定することができます。BGMとして流す音声ファイルは、URLで指定します。BGMの繰り返し設定もできます。
また、親要素のBGMを流したままで、そこに更に音を重ねることができます。親要素で繰り返しのBGMを流し、その中の1部で効果音的に音を入れることが可能です。もちろん、BGMを消すこともできます。

CSSの話：cue

音声読み上げブラウザに適用するプロパティで、音声ファイルを指定することで、要素の前後に効果音を鳴らすことができます。使い方によって、ラジオのジングルのような効果をあげることができます。
指定方法は、background-imageプロパティ等と同じく、url(指定するファイルのURL)と書きます。
cue、cue-before、cue-afterという3種類があり、cue-beforeでは、要素の前に鳴らす音を指定、cue-afterでは、後に鳴らす音を指定します。cueでは、前後に鳴らす音声ファイルをそれぞれ指定します。

CSSの話：pause

読み上げる際、指定した場所の前後に、「間」を指定します。pause、pause-before、pause-afterがあり、pauseでは指定した部分の前後の間を、pause-beforeは前に入れる間、pause-afterでは後の間を指定します。
指定できる時間の単位は、s（1秒）、ms（ミリ秒）、%（平均的な 1単語に要する時間）です。

CSSの話：speak

アルファベットの読み上げに関する指定をするプロパティです。none（読まない）、normal（既定値：通常）、spell-out（テキストのスペルを 1文字ずつ）で指定します。
例えば、WHOという文字列が、「誰」という疑問詞で「フー」と読むのか、「世界保健機構」の略で「ダブリューエイチオー」なのか、読み上げる時にはっきり分かるようにすることができます。

CSSの話：volume

音声読み上げブラウザの音量を調節するプロパティです。値は、0～100までの数値（基本は50）、パーセント指定、またはsilent（無音）、x-soft（レベル 0）、soft（レベル 25）、medium（既定値：レベル 50）、loud（レベル 75）、x-loud（レベル 100）で指定します。

むやみにx-loudやx-softを多用すると、聞き取りづらいページになってしまうので、気をつけましょう。

CSSの話：音声へのスタイル適用

今まで、スタイルシートの視覚的効果を主に説明してきましたが、スタイルシートを使うことで、聴覚に関する部分でも細かい指定ができます。
例えば、読み上げソフトを使ってホームページを読んでいる場合に、読み上げの声の大きさ、速さ、また、区切りの場所等をCSSによって指定できます。

ホームページ制作の際には、視覚的なデザインだけを中心に考えてしまいますが、ユニバーサルデザインの観点からすると、こういったスタイル指定も知っておくべきでしょう。

CSSの話：first-line擬似要素

first-lineは、指定した要素の中の最初の1行にのみスタイルを適用するものです。
この擬似要素の面白いところは、改行の位置によってスタイルの適用範囲が変わってくるところです。
あくまでも「最初の1行」にスタイルを適用するので、ウインドウの幅が狭くて1文の途中で改行されてしまった場合など、ひとつながりの文でも改行の前と後でスタイルが変わることがあります。

HTMLの意味とは無関係に、見出しのような表示をさせたい場合には便利かも知れません。
実際にはなかなか上手い使い方ができないのですが、アイディアとしては面白いと思います。

CSSの話：first-letter擬似要素

first-letter擬似要素を使うと、ある要素の中の、最初の1文字だけにスタイルを適用することができます。例えば、pタグで囲まれた段落の中の、最初の1文字だけを大きく表示するということが可能です。

上手く使うと、クラスやID、spanタグ等を使わなくても、スタイルを効果的に見せることができます。
このfirst-letterは、多くのブラウザで（最新バージョンならば）対応しています。

CSSの話：first-child擬似クラス

:first-childは、ある要素の中で、最初に出てくる「子」の要素にだけ適用されるスタイルです。
例えば、div p:first-childにスタイル指定をすると、divタグの中の、最初のpタグにスタイルを適用し、2つ目以降のpタグにはスタイルを適用しない、ということができます。

リストなどで、同じタグが繰り返し出てくる場合に便利なのですが、残念ながらブラウザの実装は追いついていないのが現状です。

CSSの話：aタグの擬似クラス

aタグには、いくつかの擬似クラスがあり、状態に合わせたスタイル指定ができます。
現在定義されている擬似クラスは、:link（リンクしてある状態）、:visited（リンク先に行ったことがある状態）、:active（クリック中）、:hover（上にマウスカーソルが乗っている状態）です。
これらを指定することで、aタグに関して、細かい設定が可能です。特に、:hoverを指定すると、リンクの部分にマウスが乗ったときに色を変えるというようなことができるので、CSSだけでページに動きを付けて見せることができます。

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では「タグ」を使ってさまざまな表現をしますが、タグを書くためには「<」と「>」の記号が必要です。では、「<」と「>」をタグ以外のところで使いたい場合はどうしたらいいでしょう。
そのためには、実体参照という技法を使います。

文章の中で直接「<」や「>」を入力はできないので、代わりに、その文字を表す文字の列を入力するのです。
実際には、「&gt;」、「&lt;」と打ち込むと、「<」、「>」が表示されます。

他にも、さまざまな記号を「&」で始まる文字列で表現できます。

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に限らず、コンピュータ関連の用語は横文字が多いです。もともと英語圏で発達したという理由もありますが、逆にいうと、英語は機械の世界と相性が良かった、ということもいえるかも知れません。
英語は文字の種類が少なく、文法的にも（文学的な表現については知りませんが）比較的単純だといわれています。プログラムなどを書くのに向いているんですね。
だから、英語を勉強すればプログラムが書ける!?･･･かどうかは知りませんが。

WEBでの色指定

画面の色は赤・緑・青の3色を混ぜ合わせることで表示します。それぞれの色を256段階で指定して、組み合わせます。「赤200、緑150、青0」というように。
一般には、256段階を表すのに16進数を使います。学校の数学の授業が、こういうところで役に立ったりするんですね。

WEB制作とコンテンツ

ホームページで一番大切なものが、「コンテンツ」です。
きれいなデザインで中身が無いページより、多少不恰好なデザインでも、充実した内容のページにお客様は集まるものです。
もちろん、きれいなデザインで充実したコンテンツのページを作れるよう、日々努力しています。

ディレクトリとは？

「ディレクトリ」というととたんに専門用語のように聞こえますが、「フォルダ」のことといえば分かりやすいでしょうか。
パソコンの中のファイルをフォルダに分けて整理するように、ホームページも内容ごとにディレクトリで分けると、管理しやすく、またSEO的にも良いとされています。

ホームページ作成ソフト

最近のホームページ作成ソフトは非常に高機能で、ものによってはスタイル指定やスクリプトなども自動で書き込んでくれます。
ただ、実際にソースコードを見ると無駄が多かったり・・・。
特にSEOを考える時などは、知識のある人間の手による修正が必要です。

人の目と検索エンジンの目

検索エンジン（Yahoo!やGoogleなど）は、定期的にホームページの内容をチェックしていますが、検索エンジンはHTMLを直接読むので、人間がブラウザで見るのとはかなり違います。
ですから、SEOには、検索エンジンが読みやすいHTMLを書くことが重要です。
ただし、ホームページの目的は人間に見てもらうこと。機械が読みやすいHTMLと、表示されて美しいレイアウトを両立するのが大切です。

文の改行

メールの文章は、読みやすくするように途中で適宜改行を入れるのがマナーとされていますが、ホームページやブログの文章はどうでしょうか。
これについては、様々な意見がありますが、私の場合は原則として、文の区切り以外の場所では改行しません。
理由は、WEBの場合はメールと違い、文字の大きさやウインドウの幅がそれぞれの環境で大きく違ってくるため、また、レイアウトを変更した場合に、不自然な改行が入るのを防ぐためです。
文章自体の改行は自然に、レイアウトやスタイル指定でより読みやすく見せられるのが理想です。

デザインとコーディング

HTML（ホームページを作るための言語）では、レイアウトを組むときにいろいろな制限があるので、ラフ画像の時点で素晴らしいデザインが出来ても、実際にコーディング（HTMLとして組み上げる作業）を行うと、結果に多少の差が生じます。
コーディングはデザイナーの意思をできる限り忠実に。また、デザインはコーディングで良さが失われてしまわないように。お互いの理解と協力が、良いWEBサイトを作ります。

ページのタイトル

WEBページのタイトルは、ウインドウの上の部分に表示されています。
画面の中ではないので、本や雑誌ほどは目立ちませんが、WEBサイトでもタイトルは大切です。
特に、検索エンジンはしっかりタイトルを読んでいるので、SEOの際には、適切なページタイトルを付けることが重要です。

ファイル管理について

複数人でひとつのホームページを制作するとき、ファイル管理は非常に大切です。
どれが最新版なのか、ベースになるファイルはどれで、上書きしてよいものはどれなのか。しっかり把握するために、世代管理という考えを常に意識しています。

HTMLの知識

今はホームページ作成ソフトの性能も高くなってきていて、正確なHTMLを知らなくてもホームページを作ることができます。
しかし、やはり細かい調整には直接HTMLを書き換えるのが一番です。
ソフトの性能だけでなく、自分の知識も常にアップデートしていきたいものです。

視覚的でないCSS

CSSといえば、レイアウトや見た目を決めるものと思いがちですが、それだけではありません。
たとえば、ページを印刷するときのページ分け、また、目の見えない人のために、ページ内の文章を読み上げるときの速さなどの設定のような、ユニバーサルデザインの部分でもCSSは活用できるのです。
見た目だけでない、本当に使えるデザインをCSSで目指していきたいと思います。

テーブルの流行り廃り

かつては、大きな画像を複雑にtableタグで組み合わせるレイアウトが重宝されていました。
tableタグはデザイナーにとっては便利な魔法のタグとでもいうべきものでした。
しかし、最近ではHTMLの論理構造が重視されるようになり、レイアウトはCSSで行うように推奨されています。実際、CSSの登場で、表現の幅は大幅に広がりました。
現在、CSSはLevel 2まで定められていますが、この先のレベルでは、どんな表現を見せてくれるのでしょうか。

HTMLの大文字と小文字

以前はHTMLのタグは大文字で書くのが一般的でしたが、最近普及してきたXHTMLでは、大文字で書くと怒られてしまいます。
大文字で書いても表示が崩れるわけではありませんが、正しい文法に従ったHTMLはSEOにも効果があります。
大文字と小文字のちょっとした使い分けですが、意識してソースを見てみるのも面白いでしょう。

CSSでの文字コード

しっかり組んだはずのスタイルシートでなぜかレイアウトが正しく表示されない・・・そんなときは、文字コードをチェックしてみて下さい。
CSSファイルに文字コードが関係あるの？と思われるかも知れませんが、文字コードをHTMLと合わせることで、正しいレイアウト表示になる場合があります。

« 横浜 ホームページ制作　山本 |