Movable Type 編

はじめてのC S S でblogデザイン
自分流

他人と似たようなページはもうイヤじゃない？
「blogを始めたけれど、みんなのblogとよく似たデザインだからそろそろ
デザインを変更したい！」そう思ってblogのデザインを変えようとしてみたけれど、何がなんだかわからなくてあきらめた経験はないだろうか。そういう人に向けて、自分らしいblogデザインにするために今すぐ試せるスタイルシートのテクニッ
クを紹介する。

text & photo: Kaminogoya

Blog of the Yeah! 2003でベストデザイン部門の2位 に 選 ば れ た 2xUP BONSAIを 管 理 す る
blogger。現在はサイト名を2xUPとして盆栽離れを期待したが「盆栽」の定着のすごさに驚いている。

2xUP

この記事では、blogツールの代表格でhttp://2xup.boo.jp/

MTでスタイルシートを変更する手順

ある Movable Type（MT）
を対象として、
blogのデザイン変更に便利なスタイルシートの技を紹介する。
「スタイルシート」は
正しくはCSS（Cascading Style Sheets）と言い、HTMLページをどのように表示す

1Movable Typeにログインして、スタイルシートを変更したいblogの管理画面を表示したら、左側にある
サイドメニューからをクリックする。日本語化
パッチを使っていない場合はだ。
2［テンプレートのリスト］画面が表示される。MTではページテンプレートもスタイルシートテンプレートもす
べて「Template」として管理されている。ここで、［イン
デックス・テンプレート］グループにある［Stylesheet］
テンプレートをクリックする。

るのかをデザインする仕組みだ。同じHTMLのblogでもCSSを変えればまった
く違うデザインになる。とは言え、スタイ
ルシートはしっかりと解説すると本が数冊書けるぐらい複雑なので、ここでは簡単だ
けど役 にたつものに 絞って 紹 介 する。
CSSの編集に失敗してもblogのデータが壊れることはないので安心して試してほし3 この画面が MT のスタイルシート変更画面だ。
［ 出力ファイル
名］にあるように、この内容はサ
イト上では styles-site.css というファイルとして出力される。

い。
まずは、MTでスタイルシートを変更するための手順を解説しよう。CSSの書き方をまったく知らない人は、右ページの下側を読んでからテクニックに移ってほしい。

［テンプレートの中身］
がスタイルシートの内容だ。以降で解説する内容は、すべてこのテキストボックスの中を編集して反映させることになる。

CSSテクニックの解説はMovable Typeの標準のテンプ
レートとスタイルを前提とする。すでにテンプレートやスタ
イルに修正を加えている場合は、解説と多少異なる場合があるので注意してほしい。

106 +++ iNTERNET magazine 2004.03 +++スタイルシートを編集したら、［保存］
ボ
タンをクリックして保存する。保存が完
了してから
［再構築］
をクリックすれば変更がサイトに反映される。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

c

s

s

CSS Technique01

引用部分に囲み罫などの装飾を付けるにはborderで罫線の線種や色を指定

所
要
時
間

難
易
度

4分

他のblogやニュースサイトなどから文章を引用してエントリーを書く場合、引用のブロックを装飾で囲むと見やすくなる。
CSSのポイントは、ブロックの左側だけに囲み罫線を出すborder-leftで付けたオ
レンジ色の線だ。backgroundは背景の①エントリーを書くときに、引用の部分をこのように書く。

色指定、それ以外はレイアウトの微調整だ。左側以外の罫線も、border-leftと同<blockquote><span class="quotetitle">
引用サイトのタイトルをここに</span><br />引用文をここに書く</blockquote>border-bottom（下）要素で指定できる。
border要素を使えば4辺まとめて指定できる 。 罫 線 の デ ザイン は「 solid 5px#FF3300」のように3つの値を指定できる。

.blogbody blockquote{background-color: #CCCCCC; /* 引用ボックスの背景色 */border-left: solid 5px #FF3300; /* ボックスの左辺に太さ5pxの実線 */margin-left: 1.5em; /* ボックスの左側の余白 */margin-right: 1.5em; /* ボックスの右側の余白 */padding: 0.9em; /* ボックスの内側の余白 */width: auto; /* 引用ボックスの幅 */}.quotetitle{
font-weight: bold; /* タイトル文の太さ */border-bottom: solid 1px #000000; /* タイトルの下に1pxの実線 */}様にborder-right（右）、border-top（上）、例では「solid」で線種を実線に、「5px」で線の太さを5ピクセルに、「#FF3300」で線の色をオレンジ色に指定している。線種に指定できる値には、solid（実線）、dotted（点線）、dashed（破線）、double（二重線）、
groove（くぼみ線）、ridge（盛り上がり線）、
inset（囲まれた中身がくぼんで見える）、
outset（囲まれた中身が盛り上がって見える）があるが、ブラウザーや線の太さによって意図しない見え方になる場合がある②この内容をスタイ
ルシートの最後に追加する。

ので注意が必要だ。

CSSマスターへの第一歩1

CSS書式の基本文法を押さえよう・HTMLのタグ名
タグ名から
「<」
「>」
を除いたものを指定する。
例）<h1>に対するセレクター【基本書式】
セレクター{ プロパティー: 値; }クラス 名 や I D 名 が 重 複して い なけ れ ば 、「.blogbody」「#top」のようにタグ名を省略できる。
また、「,」（半角カンマ）で区切れば複数のセレクターを指定できる。

h1 { 〜 : 〜; }例）
h1{color: red;border:dotted 3px red;}『セレクター』の『プロパティー』に『値』を指定することを指示するのがCSSの基本文法だ。1つのセレクターに対してプロパティーと値のセットをいく
つでも設定できるが、必ず全体を「{ }」で囲む。
プロパティーと値の間は必ず「:」（半角コロン）で区切り、値の最後に必ず「;」（半角セミコロン）を付ける。1 つのプロパティーに値が複数ある場合は半角スペースで区切って最後にだけ「;」を付ける。
『セレクター』
は、そのCSS設定がHTMLのどの部分に適用されるかを示すもので、次の3種類を組
み合わせて指定できる。

例）
blogbodyクラスとh1タグに対するセレクター
・クラス名
HTMLタグに「class=」で付けたクラス名の先頭に「.」（半角ピリオド）を付けて指定する。
例）<div class="blog">に対するセレクター
div.blog { 〜 : 〜; }・ID名HTMLタグに「id=」で付けたID名の先頭に「#」（半角シャープ）を付けて指定する。
例）<div id="top">に対するセレクター.blogbody, h1 { 〜 : 〜; }特定のクラスやIDの中で使われている他のセレクターだけを指定する場合は、親セレクターに半角
空白を続けて子セレクターを指定する。
例）blogbodyクラス内にあるbタグに対するセレクター（この設定はblogbodyクラス内以外にあるb
タグには影響しない）.blogbody b { 〜 : 〜; }div#top { 〜 : 〜; }インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.03 +++107

CSSマスターへの第一歩2

ページの構造を知ろう

Movable Type
スタイルシート（CSS）
テンプレート：どんなページを出力するかを制御するデータ。
Movable Typeの管理画面から編集する。 stylesheet

出力ファイル：テンプレートを元にMovable
Typeが自動生
成してサイトに実 際に置かれるファイル。

styles-site.css
スタイルシート：XHTML
ページに付けられたブロッ
ク名やXHTMLタグに対して、どのようなデザインで表示
するかの情報が入っている。

トップページ

個別
エントリーページ

Main Index

Individual Archive Date-Based Archive

Movable Typeの標準
では、サイト全体で1つのスタイルシートを使う
ため、styles-site.cssで設定したスタイルはサイトのすべてのページに影響する。

月別
アーカイブページ

入力した各記事のエントリー

index.html

000001.html、 2003̲12.html、
000002.htmlなど 2004̲01.htmlなど
XHTMLページ：ページのコンテンツがXHTMLで入っている。コンテンツの並び順などの情報はあるが、どのように表示するかの情報はない。代わりに、「ここは本文」や「ここは見出し」を意味するブロック名が付けられている。

blogサイト
図1 テンプレートとスタイルシートと各ページの関係

通常MTで入力する記事のエントリーは、記事の「中身」だけだ。実際のblogページに出力されるページは、入力されたエントリーにページのテンプレートを適用してMTが出力する（図1）。
出力されるページには、「このページのスタイルシートにはこのファイルを使う」という情報が次のようなタグで含まれる。
<link rel="stylesheet"href="styles-site.css"
type="text/css" />ブラウザーはこの情報を見て、指定されたCSSのファイルをページのスタイルシートとして使うのだ。
MT の標準ではすべてのページで同じ stylessite.cssというCSSファイルが使われる。
また、出力された各ページに含まれるXHTMLには、ページのそれぞれの部分について「メインのblog部分」「サイドバーの部分」というようにブロック分けされて名前が付けられている。さらにブロック内でも日付の見出し、エントリーのタイトル、エン
トリーの本文、投稿者名など、それぞれの部分に名前が付けられている。
これらの「 名 前 」は Main Indexや Individual
ArchiveなどのMTテンプレートで定義されているもので、ページの出力時に自動的に付けられる。この
名前やその中で使われているXHTML のタグがCSSの「セレクター」となる。つまり、blogのCSSを編集するには、テンプレートでページの構造がどのように定義されているのかを知っておく必要があるのだ。

トップページの構造：Main Index
blog のトップページに対応するテンプレートはMain Indexだ。Main Indexが出力するページの構造は図2のようになっている。
デザインを変更したい場合は、図2を参考に、変更したい部分の「名前」を見つけて、スタイルシート
内でそのセレクター名のスタイルを設定している部分を変更すればいいわけだ。つまり、エントリーのタイトルを変更したい場合はCSSの中で「h3.title」の記述を探してそこを変更するのだ（実際にはCSSに書かれているセレクターは「.title」なので注意）。
「h2.date」は日付の見出しで、ページに表示される日数分が繰り返して現れる。また、「h3.title（エントリーのタイトル）」「.blogbody（エントリーの本文）」「.extended（エントリーの追記）」「.posted（投稿者名、投稿時間、コメント、
トラックバック）」も表示されるエントリーの数だけ繰り返して出てくる。

図2 トップページの構造

108 +++ iNTERNET magazine 2004.03 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

c

s

s

アーカイブページの構造
アーカイブのページ（テンプレートは「アーカイブに関連したテンプレート」のグループのもの）
は、メ
インインデックスとは表示が若干異なる。
ここでは、エントリーごとに作られるIndividual
Entry Archive（いわゆるPermalinkページ）
を例にして 見 てみる。Category Archiveと Date-BasedArchiveは、下のコメントを抜いた形とほぼ同じで、「.blogbody」内の要素がアーカイブに含まれるエントリーの数だけ繰り返して出てくる。

『画面真っ白現象』の謎を解く
MT 標準のテンプレートを利用していると、個別の記事ページやコメント入力のウィンドウでページの内容が真っ白になってしまう現象が起きることがある。どれだけスタイルシートを変えても直らないので困る人も多いようだ。

IE 6 の CSS 解釈のバグが原因でこの現象が起きるようだ。具体的には、背景色が指定されている要素内に、ブロックの配置を制御するfloatプロパテ
ィーを指定した要素があると、文字が隠れて見えなくなってしまうというものだ。
MT標準のIndividual Entry Archive（個別の記事
ページ）とComment Listing Template（コメントウ
ィンドウ）にはテンプレート内で直接スタイルを指定している部分があり、そこに問題がある。原因がわ
かれば解決するのは簡単だ。上記の 2 つのテンプ
レートでスタイルを指定している部分を削除すればいいのだ。具体的にどこを修正するかは誌面の都合上すべて紹介できないが、詳しく解説しているサイトがあるのでそちらを参照してほしい。

図3 アーカイブページの構造

CSSマスターへの第一歩3

CSS書式の基本文法を押さえよう
MTのテンプレートでも「.blog」のようなクラスのセレクターと「#banner」のようなIDのセレクターが使われているのがわかるだろう。IDもクラスもCSS
を書くときには同じように使えるが、本来の意味はまったく違う。
わかりやすく言うと、クラスは『要素の分類』を、
IDは『要素の固有名』を表す。つまり、クラスのほうがより一般的な名前を示すもので、IDはさらに限定的な個別の名前を示すのだ。たとえて言うならば、IDとしては「インターネットマガジン」や「DOS/VPower Report」などを使い、クラスとしては「雑誌」を使うのだ。
また、クラスとIDではページ内で使える回数が違う。クラスは1つのページの中で何度も使えるが、IDは1文書内に複数あってはいけないのだ。図2の「.sidetitle」と「.side」のように、クラスは「分類」
をインターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

CSSバグリスト
http://members.at.infoseek.co.jp/cssbug/detail/winie/b032.html
TRIGGERS
http://blog.sfc.keio.ac.jp/blog/archives/000021.
html

表すものなので「サイドブロックの見出し」や「サイドブロックの中身」が何度も登場しても問題はない
が、「#links」や「#content」のような「ページのサイドバー」や「ページのコンテンツ」
はページ内に何度も登場するのはおかしいのだ。IDがページ内に複数ある場合もブラウザーでは一応表示されるが、本来は正しくはないのだ。

+++ iNTERNET magazine 2004.03 +++109

CSS Technique02

ページを3段組みにするには
float、width、margin-left、margin-rightの組み合わせ

難
易
度

所
要
時
間

30 分

CSSを使って段組みにするにはいくつか方法がある。今回はfloatを使って段組みにする方法を紹介する。ウィンドウ幅に合わせて中央ボックスの幅が変化する。
左サイドバーの幅はカレンダーがすべて入るように210ピクセル、右サイドバーの幅は180ピクセルだ。
ポイントとなるのは float プロパティーだ。floatを指定したブロックは浮遊ボック
スとなり、値に leftと指定すると左端に、right と指定すると右端に配置される。
floatを指定した要素には幅（width）
を指定する必要があることにも注意してほしい。
floatを指定されたブロックの後に続く要素がその浮遊ボックスを避けるように回り込んで配置されるため、3段組みにするにはスタイルシートだけでなくMain Indexなどのテンプレートも変更する必要があ①既存のスタイルシートを修正#content {margin-left: 225px; /* 左空き */margin-right: 195px; /* 右空き */border: 1px solid #000000;
padding: 5px; /* 枠線と中身の間のスペース */}#links {float: left; /* 左に浮遊 */width: 210px; /* 幅を指定 */margin-right: 5px; /* 右空き */margin: 0px;
border: 1px solid #000000;
padding: 5px;}

②この内容をスタイルシートの最後に追加る。手順③のように、テンプレート内で出現する順番を「左ブロック」→「右ブロッ#linksright {float: right; /* 右に浮遊 */width: 180px; /* 幅を指定 */margin-left: 5px; /* 左空き */margin: 0px;
border: 1px solid #000000;
padding: 5px;}

ク」→「中央ブロック」→「フッター」のよ#footer {clear: both; /* 回り込み解除 */margin-top: 5px; /* 上空き */border: 1px solid #000000;
padding: 5px;}

ら作業しよう。次に、移動した linksとうに変える。
標準ではcontentの次にlinksがあるので、<div id="links">から対応する</div>
までを<div id="content">の前に移動する。<div>と</div> の対応に注意しながcontentの間に新しく<div id="linksright">〜</div>を追加して、右ブロックの内容をそこに入れる。そして<div id="content">に 対 応 する < / d i v > の 後 に < d i v
id="footer">〜</div>を追加して、フッターの内容をそこに入れる。

③Mai Indexテンプレートにdivを追加して順番を修正#links<div id="links">左サイドのdivをcontentより前に場所変更</div><div id="linksright">左サイドのdivの次に右サイドを追加</div><div id="content">中央はそのまま</div><div id="footer">フッターのdivを追加</div>#content

floa:leftで配置

両サイドのmarginを指定して配置#footerclear:bothで回り込み解除#linksrightfloat:rightで配置

body

110 +++ iNTERNET magazine 2004.03 +++インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

c

s

s

CSSマスターへの第一歩4

役立つプロパティーを知ろう
blogのデザインでは、文字やブロックのデザインが大切だ。知っておくと便利なCSSのプロパティーを紹介しよう。

例）/* リンクの基本設定 */A {text-decoration: none;background: none;}

ボックス関連●margin
要素を囲むボックスの周囲の空白を指定する。
●padding
要素を囲むボックスと内側にあるコンテンツの間の空白を指定する。

フォント関連●font-family（114ページで詳しく紹介）●font-size（113ページで詳しく紹介）●font-weight
値：normal（普通）、bold（太字）フォントの太さを指定する。
●font-style
値：normal（普通）、italic（イタリック体）、oblique（斜体）
フォントのスタイルを指定する。
●color
値：「#FF0000」などのRGB数値や「red」「blue」などの定義名で指定
フォントの色を指定する。
font-weightやfont-styleにnormal以外の値を指定すると、日本語フォントでは正しく表示されないことがあるので注意が必要だ。

/* 未訪問リンクの設定 */A:link {color: #FF0000;}

marginとpaddingは、値を4つ指定すれば1行で4方向の空きをまとめて指定できる（前から順に上、右、下、左の空き）。

/* リンクにマウスが乗った場合 */A:link:hover {color: #FF3300;
text-decoration: underline;}

例）margin: 0px 5px 0px 5px;/* リンクをクリックした場合 */A:link:active {color: #999999;
text-decoration: none;}

また、「margin-top」「padding-left」のようにtop、-bottom、-left、-rightと記述することでそれぞれ上下左右の空白を別々に指定できる。

/* 訪問済みリンクの設定 */A:visited {color: #66CC00;}
A:visited:hover {例）margin-right: 10px;
padding-bottom: 20px;

color: #FF3300;
text-decoration: underline;}
A:visited:active {●width
要素の幅を指定する。
●height
要素の高さを指定する。

color: #999999;}

テキスト関連●line-height（113ページで詳しく紹介）●text-indent
値：1em（1文字分）、15px（15ピクセル）など
段落の頭の字下げ指定。
●text-align値：left（左）、center（センタ−揃え）、right（右）、justify（両端揃え）
文字揃えを指定。divやh1〜h6などのブロック
要素には適用されるが、spanなどの範囲要素には適用されない。justifyは和文では適用されない。
●text-decoration
値：underline（下線）、overline（上線）、linethrough（取り消し線）
テキストに下線などの装飾を加える。
●text-transform
値：capitalize（先頭のみ大文字）、uppercase（すべて大文字）、lowercase（すべて小文字）
要素内の英字の大文字／小文字を変換。

リンク関連
文字のリンクには前述のフォントやテキスト関連の宣言を設定でき、リンクを表す A セレクターに「:link」「:visited」
を付けると、未訪問のリンクと訪問済みのリンクを分けて設定できる。また、「:hover」「:active」
を付けるとマウスアクションでリンク部分の表示を変えられる。
次の例は、リンクの下線はマウスが上に来たときだけ表示して、マウスの状態とリンク訪問済みかどうかによってリンクの色を変更する。

応用例としては、サイト外のページへのリンクは「<a class="out" href="...">」のように書いておいて、「A.out」セレクターの色を設定するCSSを追加すれば、外部へのリンクの色をサイト内のリンクと分けて表示できる。もちろん、「.side A:link」のよ
うにセレクターごとにリンクのスタイルを指定することも可能だ。

widthやheightはボックスのpaddingやborderを含んだ幅や高さではないことに注意してほしい（図を参照）。しかし、古いブラウザーにはpaddingや
borderを含んだ幅と解釈するものもある。また
heightに関しては、中の要素が指定した高さに収まらない場合、ウィンドウズのIE 6以外でははみだ
したり、次の要素に重なって表示されたりすることがある。

ボックスの構造と対応するプロパティー

marginエリア
borderpaddingエリア
要素本体エリアheightwidth

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.03 +++111

CSS Technique03

スクロールしても動かない背景画像を付けるには 難易background-imageをbackground-attachment: fixedで使う

所
要
時
間

度

3分

ページ全体に背景画像を付ける場合
は、bodyセレクターにbackground-image
プロパティーを指定する。値には画像フ
ァイルの場所をurl（"〜"）のように指定で画面をスクロールしても背景画像がウィンドウの右上に固定されたまま表示される。

きる。例ではサイトの/（ルートディレクトリ
ー）にあるbody̲back.pngというファイルを指定している。
background-attachmentを使うと、画面をスクロールしても背景画像が動かないようにできる。ここでは、backgroundposition:right topと background-repeat:
no-repeatでページの右上に画像を1つだ

body{background-image:url("http://www.example.com/body_back.png");
background-position: right top;
background-repeat: no-repeat;background-attachment: fixed;}

け表示するように指定している。
ただし、#content、.blog、.blogbodyな
どの、body よりも手前にあるブロックのbackgroundプロパティーで背景色を指定
背景に使う画像のURLは自分のサイトの適切なものに変更しよう。

している場合は、その行を削除して背景色をなくしておかないとその部分だけ背景色で画像が隠れてしまうので注意しよう。

CSSマスターへの第一歩5

背景を美しくデザインしよう
ページやブロックの背景に色を付けたり画像を配置したりすると、blogのイメージを大きく変えられる。ただし、指定した色や画像が背景に付くのは、指定要素のpaddingエリアと、要素本体エリアだ。

background-color：背景色
ブロックに背景色を付ける。たとえば次のようにするとサイドバーの背景色を黒にできる。
.sidetitle{background-color:#000000;}

background-repeatを使うと背景に指定した画像を繰り返して並べることができる。値には次のものが指定できる。background-repeatを指定しない場合は自動的に全体に繰り返される。
・no-repeat（繰り返さない）
・repeat（全体に繰り返す）
・repeat-y（縦方向にだけ繰り返す）
・repeat-x（横方向にだけ繰り返す）

background-position：画像の位置

background-image：背景画像
次のように指定すると、bodyブロックに背景画像を表示できる。背景に使う画像ファイルは「http://」
から始まるURL、画像ファイルの絶対パス、CSS
ファイルからの相対パスなどを指定できる。
body{background-image:url("archives/site/body_back.png");}background-repeat：画像の繰り返し

標準では、画像の表示や繰り返しの原点が左上に設定される。background-positionを使うことで、画像を表示する位置や、繰り返しを開始する原点を指定できる。
たとえば、画像を繰り返さずにウィンドウの右下に表示する場合は次のように指定する。
body{
background-image:

要素の背景画像に色の濃い画像を使い、文字の色を淡い色にしている場合、背景色に濃い色を指定しておこう。そうしないと、背景画像が表示されなかった場合にフォントが読みづらくなってしまう。

112 +++ iNTERNET magazine 2004.03 +++url("archives/body_back.png");
background-repeat:
no-repeat;background-position:right bottom;}

上下の位置をtop、center、bottomから1つ、左右の位置をleft、center、rightから1つ選んで「topleft」のように組み合わせて指定する（下図）。指定
しないとcenterが使われるので、rightだけ指定すると「center right」と同じ扱いになる。パーセンテージやピクセルの数値でも指定できる。

top left

top center

top right

center left

center center

center rightbottom left bottom center bottom right

パーセンテージやピクセルなどで指定する場合
は「background-position: 左からの位置 上からの位置」の順で、半角スペースで区切って次のように指定する。パーセンテージとピクセル、キーワードとパーセンテージなどを組み合わせて指定することもできる。
background-position: 20% 40%;
background-position: 100px 200px;

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

c

s

s

CSS Technique04

サイドバーの文字や行間を調整するには
font-sizeとline-heightの指定
標準のスタイル

所
要
時
間

難
易
度

12 分

MT 標準のサイドバーのスタイルでは、「Archives」などの見出し部分は文字間が空いているため、「アーカイブ」「検索」のように日本語を使うと間延びして見える。
字間の空きをなくして、代わりに文字を太字にして見出しらしくしてみよう。
また、サイドバーの中身の既存のスタイルを修正

アーカイブ一覧も行間が詰まって見えるので、少しだけ行.sidetitle{
font-size:1em;
font-weight:bold;
letter-spacing:0em;…これ以外は標準のまま…
}.side{
font-size:0.8em;
line-height:1.6em;…これ以外は標準のまま…
}

間を空けてみよう。そして、サイドバー全体の文字サイズが小さいため、少しだけ大きくしてみよう。

修正したスタイル

CSSマスターへの第一歩6

文字や行間の正しいサイズ指定をしよう
文字サイズを指定するにはfont-sizeプロパティ
ーに、行間の空きを指定するにはline-heightプロ
パティーに、文字間の空きを指定するには letterspacingプロパティーに、それぞれ「大きさ」を指定する。
サイズの指定には、サイズを固定の絶対サイズ
指定と、親要素に対する相対比率を使う相対サイ
ズ指定がある。

【絶対サイズ指定】●サイズ名（xx-small、x-small、small、
medium、large、x-large、xx-large）●ポイント数、ピクセル数、mm などの単位（9pt、1cm、18mm、12pxなど）※1

れているブラウザーによってはユーザーが文字の表
示サイズを変えられない。MTの標準では「large」
や「small」
といったキーワードで絶対指定されているが、特別にデザインにこだわる部分以外は、基本的にフォントサイズは「em」「%」「larger」などの相対指定にして、本文は標準の文字サイズを使うように指定することをおすすめする。
さまざまな状態でフォントサイズを指定して、親要素のフォントサイズ指定がどのように影響するのかを見てみよう（右図）。
行間の指定で注意してほしいのは、<p>〜</p>で指定される段落と段落の間はline-heightだけではなく、その段落と前後の段落のmarginの影響を受けることだ（下図）。

【相対サイズ指定】●サイズ名（larger、smaller）●パーセント（95%、120%など）●em／exサイズ（2em、4exなど）

上の段落のmargin-bottom「em」
は大文字の「M」の高さを基準とした1文字の大きさで、1emが通常の文字サイズとなる。
「ex」
は小文字の「x」の高さを基準にした単位で、2exが通常の文字サイズとほぼ等しくなる。
高解像度の画面で見ていたり視力が弱かったりするユーザーは、ブラウザーの設定を変えて大きな文字で表示することがあるが、絶対サイズで指定さ真ん中の段落のmargin-top

段落のline-height

真ん中の段落のmargin-bottom
下の段落のmargin-top※1 ピクセル数による指定は、表示される大きさが解像度によって変わるために相対値指定だとも言われるが、ピクセル数で絶対値を指定するため、ここでは絶対サイズ指定とした。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.03 +++113

CSS Technique

05

エントリーのタイトルに違うフォントを使うには 難易
font-familyでフォントを設定する

度

所
要
時
間

17 分

記事タイトルのセレクターは「.title」だ。
CSS では、表示する書体（フォント）はfont-familyプロパティーで指定する。例
では日本語に「ヒラギノ角ゴ Std W8」を、英語に「Impact」を指定した。
font-familyに指定する書体名は全角／
半角、大文字／小文字、空白の有無まで正しく書く必要がある。名前に半角スペ

既存のスタイルを修正

ースを含むものは、例の"MS UI Gothic".title {font-family:"HiraKakuStd-W8",
Impact, "MS UI Gothic", sans-serif;
font-size: 2em;
font-weight: bold;color: #666;}のように名前を引用符で囲む。複数の書体を「,」（半角カンマ）で区切って指定する
力強い書体のタイトルにしてみた。サイトを訪れる人がそのフォントを使っているとは限らないので、ある程度一般的なフォントを選ぶ必要がある。

と、前に書かれた書体から優先して使われる。指定されたフォントがウェブサイトを訪れるユーザーのシステムにない場合には、書かれている書体が順番に使われる。
書体名を並べた最後には、書体の種類を指定する一般名の『キーワード』を必ず指定する。どの書体もなかった場合にも使用できるキーワード（書体名の一般指定）

大きく印象が変わることを避けられる。

sans-serif（ゴシック）、serif（明朝）、cursive（筆記）、fantasy（装飾）、monospace（等幅）

書体名で指定する場合は、図に示した
書体名を使うと、意図したとおりに表示されることが多いだろう。英数字は半角で、和文書体名＋サンプル出力（ウィンドウズ）

和文書体名＋サンプル出力（Mac OS X）

スペースやハイフンは半角で、和文は全角で記述するのが基本だ。ただし、
「ＭＳ

・

・

・

・

朝」の「ＭＳ」と「Ｐ」だけは全角で記述する

・（「MS UI Gothic」の「MS」は半角だ）。

・・・

Ｐゴシック／明朝」や「ＭＳゴシック／明ヒラギノの書体名は日本語でもアルファベ・ットでもどちらでも指定できるが、アルファ・

ベットで指定しておくほうが問題が少ない・ようだ。
欧文フォントはIEならば使えるはずだが、GeorgiaとTrebuchet MSは古い環境で

和文書体名＋サンプル出力（Mac）

欧文書体名によるサンプル出力

・

・
・
・
・
・
・
・
・
・

・
・
・
・

114 +++ iNTERNET magazine 2004.03 +++は表示されないことがある。
Mac版IEでは、<div class="blogbody"lang="en">のように『lang="en"』を加えな
いと欧文フォントで表示されない。

blog の文字コードが『UTF-8』の場合、日本語フォントを先に記述しないとOperaで文字化け（意図しないフォントで表示される）が発生することがある。

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D

c

s

s

CSS Technique06

スタイルシートの頻繁な修正を楽にするには 難易Movable Typeの設定変更TIP

所
要
時
間

度

1分

CSSを頻繁に修正するようになると、MTでいちいち
［保存］
してから
［再構築］
を
クリックするのは面倒だ。図のように、ス
タイルシートの編集画面で、［このテンプレートにリンクするファイル］にCSSのファ
イル名を書いておくと、［保存］するだけで修正が反映される。スタイルシートでMT
タグを使っていないならばぜひおすすめし参考リンク：

たいテクニックだ。

http://artifact-jp.com/mt/archives/200304/styleseet_rebuild.html

2xUP新作の3段組みスタイルシート公開！
この記事を執筆したKaminogoya氏によるMT用の新作テンプレート＆スタイルシートがインターネットマガジンのウェブサイトから入手できる。他人と違ったblogにしたい人は是非ダウンロードして試してみてほしい。
http://internet.impress.co.jp/im/200403mt/

HINAGATA 3column この記事で紹介した3段組みにする方法や、あれこれを使ってデザインしたテンプレートだ。これを元にオリジナリティー溢れるデザインをしてみよう！

HINAGATA 2column

サイドバーを右側に配置した2段組みのテンプレートだ。

CSS お役立ちリンク集◎The Web Kanzaki：ごく簡単なHTMLの説明
http://www.kanzaki.com/docs/htminfo.html「簡単で正確なHTMLの説明」にあるスタイルシートの解説がわかりやすい。
◎HotWired Japan : Webmonkey : Reference : スタイルシートガイド――スタイルシートをもっと学ぼう！
http://www.hotwired.co.jp/webmonkey/reference/stylesheet_guide/◎webgraphics――海外のサイトだが、CSSで参考になるディスカッションが数多く交わされている。
http://web-graphics.com/◎216 Web Safe Color Chart――ウェブで問題なく使える色一覧。ここからお気に入りの色を見つけよう。
http://www.web-source.net/216_color_chart.htm
HINAGATA Photo
MT の機能をうまく使って『更新しやすさ』と『管理のしやすさ』に気を使った
Photo Blog用のテンプレートだ。

◎ColorMatch Remix――背景などの色を指定するときに便利！ 好きな色と合う組み合わせを調べて適切なカラーバランスでカッコ良くデザインしよう！
http://color.twysted.net/◎2xUP CSS：文字化け対策済みMovableType Default Styles――MTの標準スタイルシート7種類に関して、Mac OS XやOS 9のIEで起こるコメント入力欄での文字化け対策をしたもの。
http://2xup.boo.jp/css/defaultstyles/

インターネットマガジン／株式会社インプレスR&D©1994-2007 Impress R&D+++ iNTERNET magazine 2004.03 +++115

［インターネットマガジン バックナンバーアーカイブ］ ご利用上の注意
この PDF ファイルは、株式会社インプレス R&D（株式会社インプレスから分割）が 1994 年～2006 年まで発行した月刊誌『インターネットマガジン』の誌面を PDF 化し、「インターネットマガジン バックナンバー
アーカイブ」として以下のウェブサイト「All-in-One INTERNET magazine 2.0」で公開しているものです。

http://i.impressRD.jp/bn
このファイルをご利用いただくにあたり、下記の注意事項を必ずお読みください。
z 記載されている内容（技術解説、URL、団体・企業名、商品名、価格、プレゼント募集、アンケートなど）は発行当時のものです。
z 収録されている内容は著作権法上の保護を受けています。著作権はそれぞれの記事の著作者（執筆者、写真の撮影者、イラストの作成者、編集部など）が保持しています。
z 著作者から許諾が得られなかった著作物は収録されていない場合があります。
z このファイルやその内容を改変したり、商用を目的として再利用することはできません。あくまで個人や企業の非商用利用での閲覧、複製、送信に限られます。
z 収録されている内容を何らかの媒体に引用としてご利用する際は、出典として媒体名および月号、該当ページ
番号、発行元（株式会社インプレス R&D）、コピーライトなどの情報をご明記ください。
z オリジナルの雑誌の発行時点では、株式会社インプレス R&D（当時は株式会社インプレス）と著作権者は内容が正確なものであるように最大限に努めましたが、すべての情報が完全に正確であることは保証できません。このファイルの内容に起因する直接的および間接的な損害に対して、一切の責任を負いません。お客様個人の責任においてご利用ください。

このファイルに関するお問い合わせ先
All-in-One INTERNET magazine 編集部
im-info@impress.co.jp
Copyright © 1994-2007 Impress R&D, an Impress Group company. All rights reserved.