はてなブックマーク

CSS の属性の中には，長さをパーセンテージで与えることができるものがある。この方法は便利ではあるが，何を 100% とするのか，継承はどう行われるのか，という点に気を配らないと思いどおりのデザインにならない。 パーセント指定は，値に記号「%」をつけて書く。相対的な指定方法であるので，基準になる長さは属性によって異なっている。 パーセント指定された属性値の継承は，そのパーセンテージでなく，パーセンテージを乗じた実際の長さで行われる。たとえば line-height 属性でフォントサイズ 12pt のパラグラフに 200% を指定した場合，24pt になる。このとき，途中でフォントサイズを 14pt に変えても，行送りは 200% の 28pt にならず，24pt のままである。 属性値に負の値が許される場合には，パーセント指定も負の値としてよい。

“Liberaion”シリーズのセリフ書体ファミリ。正体・ボールド体・イタリック体・ボールドイタリック体の 4 フェイスから構成される。 Times New Roman と文字幅が一致する。したがって Times New Roman 同様，細身である。ファミリ名は，“Liberation Serif”。 アドビシステムズ社のロバート・スリムバックにより 1990 年デザインされた“Minion”。ルネサンス末期の書体をモチーフにしている。 通常の OpenType 版 Minion は，Regular，Medium，Semibold，Bold の 4 ウェイトについて，正体とイタリック体がある。それぞれについて，Condensed と Normal の幅がある。これに，Normal の幅のウェイト Black が加わる（これにはイタリック体は用意されていない）。計 17 フェイス構成になる

一般の欧文書体は，幅の広いもの（M，W など）と狭いもの（i，j など）がある。等幅書体は，これらの幅がそろえられている。一般フォントファミリとして，“monospace”で総称される。 英文タイプライタ書体から発展した，等幅欧文書体。ファミリ名は“Courier”。Mac OS の標準フォントのひとつである。スラブセリフ書体でもある。 URW++ 社の 35 書体に含まれている Courier 互換フォントは，“Nimbus Mono L”。

明朝系和文の特徴は，縦画が太く，横画が細いこと，それから，主に横画の終端に三角形の装飾（うろこ）がある点である。CSS では，明朝体は一般フォントファミリ“serif”でくくられる。 Windows 標準の明朝体のひとつ。リョービイマジクス社の“本明朝-L”をもとに制作された（簡略化されている）。縦画と横画の幅があまり違わない“細い”明朝体である（ウェイトが低い）。ファミリ名は“ＭＳ 明朝”（“Ｍ”と“Ｓ”が 2 バイト文字（全角）であることに注意），または，“MS Mincho”。（全角）かなは漢字と同じ幅を持ち，（半角）英数字は全角文字の半分の幅を持つ。この意味で，一般フォントファミリ“monospace”に属するフォントであるとも言える。 このフォントは，プリンタ出力時に，設定によってはプリンタ側のフォント（たとえば，“リュウミン L-KL”や“平成明朝”）に置き換えられることがある

“行間”は line-height と font-size との差と見てよい。この“行間”は上下均等に割り振られる。たとえば，font-size が 10pt，line-height が 12pt の場合，“行間”は 2pt，その割り振りは上下に等しく 1pt ずつである。 長さで指定する場合の単位は pt，em，ex などである。倍率で指定する場合は“行送り”を“font-size”の何倍にするかを直接数値で指定し，この場合単位はつけない。 <P>この段落には line-height 属性は指定されていません。</P> <P STYLE="font-size: 12pt; line-height: 18pt;">この段落の行送りは 18pt で，上下に 3pt ずつ，計 6pt の行間ができています。</P> <P STYLE="line-height: 1.8;">この段落は，行送りを

本節では，フォントの入手についてご案内する。複数のフォントを入手できるものを選定した。有償のものについては，コストパフォーマンスが優れているものを選んだ。なお，Amazon.co.jp の当該商品のページを紹介しているものもあるので，必要に応じて利用されたい。 ビットストリーム社が 2003 年に発表した“Vera”シリーズは， Bitstream Vera Sans（Roman，Oblique，Bold，Bold Oblique） Bitstream Vera Sans Mono（Roman，Oblique，Bold，Bold Oblique） Bitstream Vera Serif（Roman，Bold） の 10 フォントからなっている。 Bitstrem Vera シリーズは，GNOME のサイトから入手できる。“The fonts are now available here”

モリサワ社よりリリースされている。もとは見出し用ゴシック体として制作されたが，ウェイト展開によって，現在ではオーソドックスなゴシック体ファミリとなった。L，R，M，DB，B，H，U の 7 ウェイト構成である。見本は“ゴシック MB101 R”。 字面は中ゴシック BBBより大きめ。 モダンなデザイン，高い可読性を持ち，印刷などでは本文から見出しまでと，ひじょうに人気が高い，モリサワ社製のフォントファミリ。一日生活していて，この“新ゴ”に出会わない日のほうが少ないだろう。WWW ページ上で本文・見出しのフォントとして使用されることはまれだが，画像化されたテキストなどに見ることができる。 細いものから，EL（ExtraLight），L（Light），R（Regular），M（Medium），DB（DemiBold），B（Bold），H（Heavy），U（Ultra） の 8 つのウェイトがあ

Section 1 : HTML 基礎の基礎 Section 2 : とりあえず書いてみよう Section 3 : 空白と改行 Section 4 : 見出しをつけよう Section 5 : ちょっと“きれいに”書く Section 6 : ほかの文書にジャンプ！ Section 7 : 箇条書き Section 8 : 画像を貼り込む Section 9 : まとめ Appendix A : HTML の“お約束” Appendix B : Windows で HTML を書く Appendix C : Macintosh で HTML を書く 図版について WWW に星の数ほどもあるページには，魅力的で，ためになるものがたくさんある。そんなページを，あなたも世界に向けて発信しよう！ そのためには，WWW ページがどうやって書かれているか知らなきゃならない。やっぱり高価なソフトが要る

ゴシック系の一般的な特徴は，字画の太さが均一であること。その中で，字画の特徴によっていくつかに分類される（本稿では，それらは扱わない）。CSS では，ゴシック体は一般フォントファミリ“sans-serif”でくくられる。 Windows Vista のシステムフォントとして満を持して登場した“メイリオ”。“（明瞭）めいりょう”をその名称の由来とする。和文部分は河野英一氏ら，欧文部分はマッシュー・カーター氏がデザインを担当した。 字面は大きく，やや横が広い。モダンなゴシック体の骨格を持つ。ボールド体（太字）との 2 ウェイト構成になっており，“無理やりな太字指定”ではなく，本物の太字を使用できる。また，イタリック指定は欧文にのみ有効で，和文はイタリック（斜体）にはならない。 Windows 標準のゴシック体のひとつ。オーソドックスなスタイルである。リョービイマジクス社の“ゴシック-B”をもと

Section 1 : XHTML と XML，HTML Section 2 : XML の書法 Section 3 : XHTML の書き方 Section 4 : HTML 4 との記法の違い(1) Section 5 : HTML 4 との記法の違い(2) Section 6 : 互換性のための記法(1) Section 7 : 互換性のための記法(2) Section 8 : XHTML の HTML ブラウザに対する問題 図版について 2000 年 1 月に，XHTML 1.0 が W3C より勧告された。で，この XHTML とはどういうものなのだろうか？ XHTML は，HTML を XML の枠組みの中で実現したものである。HTML は SGML の枠組みの中で作られていたが，それを XML という，ちょっと違った枠組みの中に再構築したものである。とくに，ここで取り上げる

1.11 フォントの種類の指定 1.6 では，フォントサイズの指定を扱った。ここでは，フォントそのものを指定する方法と，その基本的な考え方を解説する。 フォントファミリ，フォントフェイス フォントファミリとは，フォントのひとまとまりである。一般に，同じフォントファミリに属するフォントは，同様のデザインになっている。代表的なフォントファミリに，Helvetica，Arial，Times New Roman，Century などがある。 たとえば，Times New Roman フォントファミリを例にとると，そこには，正体，イタリック体，ボールド体，ボールドイタリック体などが含まれる。こういった個々のフォントはフォントフェイスという。フォントファミリは，似たデザインのフォントフェイスの集まりとも言える。 フォントファミリは，font-family プロパティで指定する。 font-family

本節では，メタ情報に関して，少し細かい点にも踏み込んで説明していく。また，メタ情報の与え方の枠組みとして，Dublin Core を紹介する。 head 要素には，profile 属性がある。これには URI を与え，メタ情報を与える枠組み，メタ情報に何を与えてどのように解釈するべきかを指定する。このプロファイルが，スキームと大きく関わることがある。 次項で，ひとつのプロファイルの例として Dublin Core とその XHTML における利用を簡単に述べる。 Dublin Core（ダブリンコア）は，標準化されたメタ情報の与え方のひとつである。 Dublin Core の書き方に基づくメタ情報を XHTML に書き込む場合，head 要素の profile 属性を次のように指定することになる。 <head profile="http://dublincore.org/documents

このような形をしたものは at 命令という。CSS1 では，at 命令はこの @import だけである（CSS2 では @font-face などが加わる）。この命令は <STYLE> 内または CSS ファイルの冒頭に書かれなくてはならない。 ところで，HTML ファイルから CSS ファイルを呼び出すには <LINK> を使うという方法があった。この命令もはたらきとしては同じであるが，<LINK> で呼び出された CSS ファイルがさらに別の CSS ファイルを呼び出しているという状況のときには，この命令を書く必要がある。

2.1 継承 CSS を効率的に利用するにあたって，継承という考え方はひじょうに重要な役割を持っている。 要素の関係 文書言語において，ある要素 A に含まれる要素 B は，A の下位要素という。たとえば，次の例において，EM および DFN の 2 つの要素は，いずれも P の下位要素である。 <P>　一般に，波動方程式は，<EM>時間に関して正弦波的な挙動を仮定</EM>することにより，<DFN>ヘルムホルツの方程式</DFN>に帰着する。</P> また，上の例 P ならびに EM および DFN の関係のように，他の要素を経ずに，直接ある要素の下位要素となっている要素を，特に子要素という。 <OL> <LI>惑星は，太陽を 1つの焦点とする楕円軌道を描く。 <LI>太陽と惑星とを結ぶ線分が単位時間に掃引する面責は惑星ごと一定である（<DFN>面積速度一定</DFN>） <LI>惑星の

2.3 クラスセレクタ，ID セレクタ HTML に CSS を適用させるときに，ひじょうに大きな役割を果たすのがクラスセレクタである。また，もっとも特殊性の高い絞り込みとして，ID セレクタを紹介する。 クラスセレクタ HTML のほとんどの要素は，CLASS 属性を持っている。この属性は，文書中の要素に名前を付けて分類する役割を担う。 この CLASS 属性の値を利用して，スタイルの適用を絞り込むことができる。これをクラスセレクタという。これによって，同じ要素の種類であっても，役割の異なる要素群に，それぞれ異なったスタイルを適用できるようになる。クラスセレクタは，文脈に応じて同じ要素の種類でも違ったデザインを施す場合に有効といえる。 クラスセレクタは，適用させる要素名に，ピリオド「.」を続け，クラス名を書くという書式である。 要素名.クラス名 これは，子要素セレクタとは異なり，途中に空

4.8 自動生成(1) CSS には，文書言語のソース中にないテキスト・画像などを挿入する機構がある。これを用いることにより，たとえば，“注意：”などの文字列を注意事項のパラグラフの前に自動的に生成させたり，見出しに“第 4 章”のような連番を自動的につけたりできる。ここでは，その基本を解説する。 :before および :after 擬似要素 :before 擬似要素および :after 擬似要素は，その名のとおり，要素の内容の前（:before 擬似要素）または後（:after 擬似要素）にテキストなどを挿入するための擬似要素である。これは，ご覧いただいてわかるように，植字擬似要素と同じく，先頭にコロン「:」がついている。 :before :after これを用いて，例えば，CLASS 属性に“note”を含むような P 要素について，先頭に“Note. ”という文字列を自動的に挿入さ

Microsoft Office 2003 に付属する。イタリアの筆記体をモデルにしている。大文字は“スワッシュ字形”と呼ばれるものである（同様のデザインである Zapf Chancery などと比較すると特徴がよくわかるであろう）。

Section 1：モジュール化された XHTML(1) Section 2：モジュール化された XHTML(2) Section 3：内容モデル Section 4：基本的な属性(1) Section 5：基本的な属性(2) Section 6：構造モジュール(1) Section 7：構造モジュール(2) Section 8：テキストモジュール(1) Section 9：テキストモジュール(2) Section 10：テキストモジュール(3) Section 11：テキストモジュール(4) Section 12：ハイパーテキストモジュール(1) Section 13：ハイパーテキストモジュール(2) Section 14：リストモジュール Section 15：画像モジュール Section 16：プレゼンテーションモジュール(1) Section 17：プレゼンテーションモジュール(

今までは，<H1>（見出し），<EM>（強調）といった文書中である役割をもつ要素にスタイルを指定した。ここでは“スタイルを適用する範囲”を示し，ほかの役割を持たない HTML の要素を導入する。 <DIV> と <SPAN> は文書中での役割をもたない，ただ“範囲を指定する”だけの要素である。したがって，いずれも“ここから～ここまで”の形で使われる。 ここで“文書中での役割をもたない”というのは，たとえば <UL> はくくった範囲に“箇条書きである”という“役割”を与えるが，<DIV> と <SPAN> は決まった役割を与えない。 <DIV> と <SPAN> は，スタイルシートの範囲指定のほかに，ある範囲が“何語で書かれているか”を示すのにも用いられる。

WWW パブリッシングの世界に登場した Cascading Style Sheets（カスケーディングスタイルシート：CSS）とはなんだろう？ 手近な書籍を広げてみよう。いま目にしているページを構成する視覚的な，もっと平たくいうと，デザインの要素はどんなものがあるだろうか。 まずは，文字の大きさ，それから，フォントまたはその書体。カラーだったら，文字の色もあるかもしれない。そのほかにも，行間，文章や図版の配置，囲み記事がある場合などは枠，ひょっとしたらその中が網掛けしてある場合もあるだろう。 ほかにも探せばたくさんある。CSS が話題にするのはこういった“デザインのファクタ”なのである。HTML で書かれた文書を CSS を使ってデザインするのである。 要するに，この CSS を使うことにより，今までより多彩な視覚表現を実現することができるのである。これにより，ワープロや DTP にも劣ら

サンセリフとは，“うろこがない”という意味である。起筆や終筆部分に独特の装飾がないものをいう。CSS では，こういった特徴のフォントファミリを一般フォントファミリ“sans-serif”で総称する。 サンセリフ体は，一般に字画の太さが均一で，装飾によって込み入っていることが少ないので，解像度の低い画面上で重用される。 たいへんに有名で広く使用されているサンセリフ欧文書体。ファミリ名は，“Helvetica”。Mac OS に標準的にインストールされている。基本的な書体の 1 つである。ここにあげたものは標準的なもので，ウェイト・幅に多くのバリエーションがある。1957 年アルフレッド・ホフマン（Alfred Hoffmann）とマックス・ミーディンガー（Max Miedinger）によってデザインされた。当時のこの書体名は“Neue Haas Grotesk”。“Helvetica”は，ラ

4.6 ボックスの形態(1) CSS では，要素が視覚的に出力されるとき，“ボックス”と呼ばれる矩形領域を用いて整形される。ここでは，ボックスの生成およびその形態をコントロールする方法と，さまざまなボックスについての基本事項を解説する。 ボックスの生成と形態：display プロパティ display プロパティは，ボックスの生成とその形態（種類）を指定するものである。簡単には，その要素が出力されるか，出力されるときに，ブロックボックスを描くか，インラインボックスを描くか（または，コンテキストに応じてどちらかになるようなボックス形態にするか）を指定する。 display: キーワード; このプロパティは， すべての要素に適用される。 初期値は，キーワード inline である。 プロパティの値は，継承されない。 CSS1 では，このプロパティの初期値はキーワード block である。 多く