CSSにできること―文字（フォント）編

大学の講師に、
「CSSって、何ができるの。HTMLによるデザインの限界と、CSSデザインの限界を知りたい。」
と言われたため、書き出してみることにしました。

今回は、文字に関することをピックアップました。
ちなみに、フォントに関する全てのプロパティを紹介しているわけではなく、
私の独断で利用できそうなもののみを抜粋しています。

１．文字色の変更

これはHTMLのfontタグでもできる。CSSではcolorというプロパティで行う。指定方法もほぼ同様、色名や16進数で色を指定することができる。

２．フォントファミリー（書体）の変更

HTMLではfontタグface属性だったが、CSSではfont-familyで指定できる。CSSでは、書体名を名指しで指定するだけでなく、サンセリフ（ゴシック）、セリフ（明朝）といった大まかな指定も可能。

３．フォントサイズの変更

fontタグではサイズの変更に限界があったが、CSSではfont-sizeプロパティでサイズを自由に変更可能。ピクセル指定、パーセント指定はもちろん、larger（より大きく） 、smaller（より小さく）などの相対的な指定も可能。

４．フォントスタイルの変更

HTMLではiタグで指定していた、イタリック体（斜体）にするという指定が、CSSではfont-styleで指定できるようになった。デフォルトスタイルシートではem（強調）タグを使うとイタリック体になるので、これを直すのに使用するのが一般的。（日本語だとイタリック体は見にくいので）
bタグで指定していた文字の太さは、font-weightで変えることができる。値をboldにすると太字になる。デフォルトスタイルシートではstrong（強い強調）や見出しタグが太字で表示されるので、この場合normalと指定すると通常の太さになる。

５．その他

font-variantというプロパティで、英文の小文字を大文字の綴りにし、サイズを小さくすることができる（英語のみ）。日本語で説明すると非常に分かりにくいので、下記に例を。

This sentence is normal.

This sentence is small-caps.

なぜわざわざこの機能を使うのかというと、HTMLに英単語を全部大文字で記述すると、単語として認識してくれず、音声ブラウザではアルファベットの羅列として読み上げられてしまうからです。

６．追記

文章を組んだときの行間を指定できるline-heightというプロパティも追加でここに記述しておく。文章組みの説明のときに紹介する予定だったが、どうもfont類と一緒に定義されているようだったので。

line-heightは、行間を調整できるプロパティ。HTMLに行間調節の機能はありません。ちなみに、このブログは行間をたぶん150％あたりで指定をしていますが、この段落では行間を200%に指定しているので、きっと上の文章よりも行の間隔が大きくあいているように見えるはずです。

以上。書いてたら意外と長くなってしまい、論文発表に支障をきたしそうだったので、今日はここまで。
次回は文章編。

HTMLとCSSの概念

私の大学は、来年から必修の授業で本格的にWeb制作の基礎を教えることになって。
Web制作で食っていく身としては、本当に嬉しく、うらやましい限りです。

今後につながるようにWeb制作に関するレクチャーを行うには、テーブルレイアウトなんかじゃなく、HTML＋CSSのWeb標準的情報は必須になってきます。

この、HTML＋CSSでWebサイトを構築するのはけっこう難しくて、
「どうしてHTMLとCSSを分けるの？」とか、
「どうしてstrongタグなの？font-weight: bold; で太字っぽくできるじゃん。」とか、
基本的な概念から説明する必要があります。

ということで、基本的な概念をまとめてみる。

---

まず、HTMLというものは、文章の構造を明確にするために作られたものです。
特に、人間ではなくコンピュータに対して、文章構造を示すためのものです。

h1は、headline1（見出し1、つまり大見出し）の略。
pは、paragraph（段落）の略。
strongは強調。
などなど、これらのタグを使って、コンピュータに文章構造を分かってもらうためのものです。

どうしてコンピュータに文章構造をわかってもらう必要があるのか？というと、GoogleやYahooなどの検索エンジンは、見出しや、強調している部分などをキーワードとして読みとり、検索結果として表示してくれます。

おおざっぱに言うと、検索エンジンにヒットしやすくなるってことです。

文章構造がしっかり組み立てられていると、検索エンジンはWebサイトがどのような内容が書いてあるコンテンツなのか、判断することができます。

ただ、きちんと見出しがあって、段落があって、というWebサイトは、確かにHTML文書としては正しいものになりますが、味気がないのも確かです。
タグを入れただけでは、文字のサイズも見にくいし、行間も狭いし、色味もありません。
文書としての役割は確かに果たしていますが、現在ほとんどのWebサイトは、もっとカラフルですよね。

少し前までは、このそっけない文書を装飾するために、装飾用のHTMLタグががんがん使われていました。
HTMLは文章構造を明確にするためものだ、という根本的な存在理由が忘れられ、HTML文書が広告的効果の期待できるメディアとして使われていました。そのため、文章構造とは関係のない、装飾するためだけのタグが追加されていったのです。

そして、これはHTMLの本来の使い方ではない。ということで、CSSが生まれました。

CSSは、HTMLを装飾するための言語です。
ブラウザのデフォルトでは、strong（強調）タグをつけると太字になります。
この部分を、強調してることを示すために、赤字にしたいな。となったとき、CSSで指定をすれば、HTMLに触らずに、つまり文章構造を壊さずに色を変えることができます。

たとえば、人間は赤色を、「なんとなく強調されてる感じ」と理解しますが、コンピュータにとって赤色は「赤色」です。それ以外の意味はありません。
strongタグをつけた場合は、コンピュータにとっては「強調されてる」とわかりますが、人間にとっては「なんか太字になってるから強調されてそうだけどインパクトがない。」感じになります。

そこで、CSSを使ってstrongタグを赤色にする、といった指定を入れると、コンピュータにも人間にも強調されてるということがわかるということです。

個人的には、HTMLはコンピュータのための（文章構造を示す）言語で、
CSSは人間のための（装飾的表現をする）言語だと思ってます。

---

うーん。
説明あってるんだろうか。

とにかくまとめると、HTMLは文章構造を記述するための言語なんですと。
広告でもないし、DTPでもないんだと。

この点を理解してもらうのはけっこう難しい気がする。
ダメ出し待ってます。

サイトの横幅議論

Webサイトにおけるwidthについて、非常に興味深い記事があったのでご紹介。

「サイトの横幅」再論：950px時代のウェブデザイン
絵文録ことのは 様より。

リンク先の最上部に、2006年ごろに書かれたエントリサイトの横幅を640ピクセルにする理由のリンクもあるので、是非こちらもあわせてご覧下さい。
非常に説得力のある記事で、読んでいて面白かったです。

私がWeb制作を始めたのは5年ほど前ですが、当時はまだ800×600解像度の割合が少なくなく、本格的に作品制作を始める2年前まではずっと、横幅800pxでサイトを作っていました。

解像度が1024×768が主流になった今でも、正直横幅900px超のサイトを作るのに抵抗があります。
ただ、その要因として、私の使用しているPCの解像度が1024×768のため、900px超だと窮屈に見えるから。という個人的な視点が入っている点は否めませんが…。

ちなみに本ブログは最小幅600px、最大幅1200pxで回覧できるようになってます。
（max-widthプロパティで指定をしているので、IE6には全く効果がないみたいですが。）
両端のカラムが220pxなので、本体幅は160px～760px。
さらに、左右にpaddingが20pxずつあるので、実際の文字表示領域は120px～720pxということに。

なぜこのようなサイズにしているかというと、
このサイトに訪れる方の解像度が1024×768以上であることが多いからです。
だいたいは、ターゲットユーザに合わせて幅を指定することが多いです。

…この、「サイトに訪れる方の解像度が1024×768以上であることが多い」というのは、アクセス解析などで分かるわけですが、その人が実際にブラウザを画面いっぱいに表示しているかどうかは、正直なところ分からないのだ、と言うことに気付かされました。
解像度はモニタの解像度を示しているだけで、ブラウザの表示域を示しているわけではないのです。
そして、最大化していない場合とか、お気に入りバーとか、GoogleToolbarとか、上下左右に様々なツールを表示すれば、それだけコンテンツを表示する画面が減るわけです。

…そんな単純なことに、今さら気付きました。
（ちなみに、じゃあアクセス解析使えねーじゃん。と言っているわけではありません。）

最近はミニノートも増えてきているし、
もしかしたらサイトの表示サイズが再変化することもあるかもしれませんね。

話を戻すと。
個人的には、サイトの横幅どうのっていうものは、どれも私論でしかないと思うのです。
別に、リキッドレイアウトがいいんだったら、リキッドレイアウトにすればいい。
固定レイアウトがしたいならpxで固定すればいい。
「つぶあんとこしあんどっちがいい？」のと同じで、正しい答えなんて無いんだから。

だからと言って、じゃあレイアウトについてなんて考えなくてもいいや。って問題ではなくて。

誰のためにサイトを作っているのか考えたら、おのずと結論は出るはずです。
自分が正しいと証明するためだけにレイアウトを選んでいるのなら、それは何を選んだって間違っているということ。

どんな人がこのサイトを見るのか。どんな人にサイトを見てほしいのか。
大事なのはやっぱりそこなんですよね。

columnで雑誌のようなテキストレイアウト

CSS3のプロパティcolumnに関するメモです。
CSS3なんでまだまだ先の話だと思っていましたが、FirefoxやSafariでcolumnプロパティに関しては先行実装されているようなので。

まずはじめに、CSS3について。
CSS3とは、現在用いられているCSSの最新バージョンです。
まだ勧告段階にもなっていないので、普通のWeb制作で使用できるレベルではないです。

次、columnプロパティの概要。
columnはCSS3で実装予定のプロパティで、新聞のような段組をひとつのボックスで作ることができるプロパティです。

現在のWebでは、ボックスをフロートもしくは、絶対配置してレイアウトをします。
２つのボックスに分けて文章を表示したければ、たとえ文章がつながっていたとしても、二つのブロックに区切り、配置する必要がありました。
columnは、ボックスに記述すると自動的に段組をつくってくれるスグレモノ。
文字サイズの変更にも対応できるし、可変レイアウトを実現できます。

columnは2009年1月10日現在、Firefox、Netscape（Gecko系）とSafari、GoogleChrome（webkit系）でのみ、先行的に実装されています。IE6、7（8未確認）やOperaでは実装されていません。
そのため、以下の説明ではプロパティに-moz-や-webkit-という接頭語をつけていますが、これはそれぞれGecko系ブラウザ、webkit系ブラウザのみに適用される、という意味です。

現時点で発表されているcolumnプロパティは以下。

• column-count（カラム数の指定）
• column-width（カラム幅の指定）
• columns（カラム幅・カラム数を同時に指定するショートハンド）
• column-gap（カラム間の余白を指定）
• column-rule-color（カラム区切り線の色を指定）
• column-rule-style（カラム区切り線のスタイル（破線、点線など）を指定）
• column-rule-width（カラム区切り線の太さを指定）
• column-rule（カラム区切り線に関する指定のショートハンド）
• column-break-before（この要素の前で、カラムを区切るかどうかの指定）
• column-break-after（この要素の後で、カラムを区切るかどうかの指定）
• column-span（カラムをまたいで文字を入れることができます。）
• column-fill（カラムコンテンツの調整？）

以下、詳細を説明していますが、全ては
本家サイト（W3CのCSS3 module: Multi-column layout )を見て意訳したものですので、表現するところが違う場合があります。
あくまでもW3Cのテキストが公式版であり、この文章は私が意訳したものに過ぎません。
以上、ご了承お願い致します。

キレイなコード

@aroma
というサイトのHTMLコードを見る機会がありまして。
すごくキレイで驚いたのでメモ。

Web制作というのは、BtoBで行われるので、
作ったサイトは自社の作品でもありますが、それ以前にクライアント会社のものなので、
通常、サイトに制作会社の名前が載ることはまずありません。

これでどうやってクライアントを増やすんだろう？と思うことも多々あります。
また、嫌な言い方をすれば、Web制作会社がピンからキリまであるのも、
こういったことが理由なのかもしれません。

と、話がずれましたが。

とりあえず、コードがValidかどうかとか、JavaScriptがHTMLに直書きされてるとか、中身が空のdivタグがあるんだけど。とかは別として。

コードが非常に見やすい。
無駄なdivやidがあまりなくて、すっきりしてる。

これは、私にとってのキレイなコードが、「無駄なdivやidがあまりない」ものだからなわけですが。

これまでの記事を読めばお分かりかと思いますが、私はHTMLにdivやidをつけるのが好きではありません。
理由は、なんかソースが汚くなるから。というオタク的なものです。

それは、共同作業でコーディングをした経験がないから言えることであって、
HTMLをいじるのが自分ひとりであるという前提があるからであって。

実際の仕事は、きっと自分ひとりでコーディングができるわけではなく。
更新作業を自分以外のひとがやるということがほとんどでしょう。

その場合、divというタグでブロックをまとめておくことで、
コピペをするだけでコンテンツを増やすことができ、更新作業もだいぶ楽になります。

コーディングの方法に正しい、間違っているということはなくて。
サイトの規模と、サイトを作る側の規模、そして運営方法。
これらの要素を考えて、コードをどう書くか決めるべきなのだと感じました。