CSSにできること―背景編

CSSにできること第三弾。今回は背景色、背景画像編です。
前作：CSSにできること―文章編

背景色や背景画像の指定は、HTMLでもできた部分が多いですが、より細かく指定をすることが可能になっています。

１．背景色をつける。

HTMLにおいては、bgcolorという属性で背景色をつけることができます。
この属性は、bodyとtableにしか対応していないので、HTMLでは、bodyとtable,tr,td系のタグにしか色をつけられないことになります。（だからテーブルレイアウトが主流になったんですね。と納得。）

CSSでは、background-colorで背景色をつけることが可能です。bodyやtable系のタグ以外にも背景画像をつけることが可能です。

２．背景画像をつける。

HTMLでは背景画像はbackgroundという属性でつけることができますが、この属性はbody専用のものなので、背景はページ全体にしかつけられない仕様になっています。
CSSではbackground-imageというプロパティでどこでも背景画像をつけることが可能です。

背景画像をつけた例。

３．背景画像の繰返し

背景が画像の場合、画像の表示方法を指定するbackground-repeatというプロパティがあります。値をrepeatにすると、画像が全体にしきつめられます。
また、横方向、縦方向のみに画像を繰り返すこともできます。x-repeatだとx軸方向（横）、y-repeatだとy方向（縦）のみの繰返しになります。no-repeatだと繰返しなしになります。
ここでは、background-repeat: none;を指定しています。

４．背景画像の位置固定

画像の表示位置を指定するには、background-positionを使います。

また、background-attachmentというプロパティでは、画面をスクロールしても画像が動かないように指定することも可能です。

以上、画像でできることの紹介でした。
テーブル・リスト編へ続きます。

CSSにできること―文章編

CSSにできること第二弾。今回は文章レイアウト編です。
前作：CSSにできること―文字（フォント）編

文章レイアウトに関することは、フォント系に比べてCSSにしかできない事が多いと思います。

１．文字同士の間隔を変更

word-spacingというプロパティでは、word、つまり単語同士の間隔を調整できる。英文では単語同士を（半角）スペースで区切るため、この半角スペースの幅を調整する機能と言ってもいいと思う。日本語では単語同士をスペースで区切ることがないので、効果はない。が、日本語でも、単語同士をスペースで区切ればword-spacingが機能する。

また、文字間を調整するletter-spacingというものもある。これは、英単語1文字、漢字1文字など、文字間を調整できる。

さらにフォント編でも述べたline-heightプロパティでは、行間の調整をすることができます。

２．文章のインデント（字下げ）

書籍では、段落の一番最初に1文字分マスが空き、そのあとに文章が続いていきます。この文章のように字下げを行うには、text-indentというプロパティを使用します。text-indentで指定した分だけ字下げされて文章が表示されます。

３．文章の配置

HTMLでは、align属性あたりで指定をしていた、文章の右寄せ、左寄せ、中央寄せの指定は、CSSではtext-alignで指定できる。値もHTMLとほぼ同じで、left、right、centerが指定できます。

 

４．文章の装飾

text-decorationというプロパティでは、テキストに関する装飾を指定できる。HTMLではuタグで指定していたアンダーライン、sタグで指定していた取り消し線などが指定できるようになっています。
ちなみに、この取り消し線を装飾ではなく、文章構造的な意味として「訂正前のもの」といったことを示したい場合は、CSSではなく、HTMLのdelタグを使ってください。

デフォルトスタイルシートでは、aタグに下線が表示されていますが、test-decorationの値にnoneを指定すると、下線を消すこともできます。

文章編は以上です。
次回は背景編です。

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でもないんだと。

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