スタイルシートの道具箱～手作りのホームページをスタイルシートで！～

<div style="color:#33CC00">明るい緑色です</div>
<div style="color:#993333">茶色っぽいです</div>
<div style="color:#f39">ピンク系です</div>
<div style="color:#fc3">黄色チックです</div><br>

<div style="color:rgb(0,128,255)">水色です</div>
<div style="color:rgb(64,64,64)">濃いグレーです</div>
<div style="color:rgb(75%,75%,50%)">薄いグレーです</div>
<div style="color:rgb(0%,50%,0%)">緑です</div><br>

<div style="color:darkviolet">暗めのバイオレットです</div>
<div style="color:tomato">tomatoですが何か？</div>
<div style="color:blue">青ですな</div>

spanタグ等を使って文中の強調したい箇所だけ色を変えると、読み易く且つ効果的な文章になります。

spanタグ等を使って文中の<span style="color:orange">強調したい箇所だけ色を変える</span>と、<span style="color:#33cc00">読み易く</span>且つ<span style="color:rgb(0,0,255)">効果的</span>な文章になります。

ちなみに以下の様にして区切り線の色もcolorで変更する事が出来ます。

■文字の装飾

▲ページTOPへ

text-decoration: (キーワード）

文字に対して以下のようなキーワードで装飾を設定出来ます。

overline
underline
line-through
blink
none

上線
下線
取り消し線
点滅
装飾無し

これらのうち複数を同時に指定する事も可能です。
blinkはIE未対応、NNはVer4.7までの対応で、現在はあまり利用価値がありません。

サンプル

これが上線です

<div style="text-decoration:overline;">これが上線です</div>

これが下線です

<div style="text-decoration:underline">これが下線です</div>

これが取り消し線です

<div style="text-decoration:line-through">これが取り消し線です</div>

これが点滅です（IE未対応,NN4.7以降も未対応）

<div style="text-decoration:blink">これが点滅です（IE未対応,NN4.7以降も未対応）</div>

上線と下線を同時に設定しました

<div style="text-decoration:overline underline">上線と下線を同時に設定しました</div>

これはやり過ぎです

<div style="text-decoration:overline underline line-through">これはやり過ぎです</div>

一文字以上あれば　　空白部分も　装飾されます

<div style="text-decoration:underline">一文字以上あれば　　空白部分も　装飾されます</div>

<div style="text-decoration:overline underline line-through">　　　　　　　 </div>
※空白だけでは装飾されません

￤￤￤｜｜｜｜|||||||||∥∥∥／／

none（デフォルト）は装飾をつけません

<div style="text-decoration:none">none（デフォルト）は装飾をつけません</div>

■大文字・小文字の指定

▲ページTOPへ

text-transform: (キーワード）

英文におけるアルファベットを大文字・小文字に変換します。

uppercase
lowercase
capitalize
none

全ての文字を大文字にする
全ての文字を小文字にする
全ての単語一文字目を大文字にする
変更無し

uppercase(lowercase)は元の文字が大文字・小文字に関わらず
強制的に全てを大文字（小文字）に揃えます。
capitalizeは単語の先頭文字が小文字なら大文字になり、
それ以外の文字は変更されません。

サンプル

■uppercaseを指定すると全て大文字に。

iT IS No uSe crYInG OVeR sPilT MiLk.

<div style="text-transform:uppercase;">iT IS No uSe crYInG OVeR sPilT MiLk.</div>

■lowercaseを指定すると全て小文字に。

iT IS No uSe crYInG OVeR sPilT MiLk.

<div style="text-transform:lowercase;">iT IS No uSe crYInG OVeR sPilT MiLk.</div>

■capitalizeを指定すると単語の先頭文字だけ大文字に。

iT IS No uSe crYInG OVeR sPilT MiLk.

<div style="text-transform:capitalize;">iT IS No uSe crYInG OVeR sPilT MiLk.</div>
※単語の先頭文字以外はそのままなので、相変わらず読みにくいです

■全て小文字の文をcapitalize

it is no use crying over spilt milk.

<div style="text-transform:capitalize;">it is no use crying over spilt milk.</div>

■全て大文字の文をcapitalize

IT IS NO USE CRYING OVER SPILT MILK.

<div style="text-transform:capitalize;">IT IS NO USE CRYING OVER SPILT MILK.</div>
※全てが大文字だと何も変わりません

■a:hoverを利用してカーソルが重なったら大文字に

click click!!!

■行の高さ

▲ページTOPへ

line-height: (高さを示す数値、又はnormal）

以下のようなパラメーターで行の高さを指定します。

数値＋単位
数値＋%
数値のみ
normal

長さの単位で示している単位で高さを指定します
文字のサイズに対するパーセンテージで高さを設定
単位なしで数値を書くと、元の高さの倍数による指定となります
ブラウザが自動で高さを計算

行を少し高くして行間に隙間を作ると、文章は読み易くなります。
逆にフォントサイズと同じ高さだと行間が無くなり見にくくなるのでご注意。

サンプル

■normal設定時

いろはにほへとちりぬるをわかよたれそつねならむ
ういのおくやまきょうこえてあさきゆめみしいねもせず
いろはにほへとちりぬるをわかよたれそつねならむ
ういのおくやまきょうこえてあさきゆめみしいねもせず

<div style="line-height:normal;">いろはに・・・</div>
※normalはブラウザにより高さが自動的に設定される

■フォントと同じ高さ

<div style="line-height:13px;">いろはに・・・</div>
※フォントサイズが13pxの場合。フォントサイズと同じ高さにすると行間が無くなります。

■フォントの1.5倍

■フォントの2倍

■フォントよりも低く

<div style="line-height:50%;">いろはに・・・</div>
※フォントよりも低くすると文字は重なり、最上段と最下段の文字は一部切り取られます。

■垂直位置

▲ページTOPへ

vertical-align: (位置を示す数値、又はキーワード）

要素内の文字、又はテーブルのセル要素（thやtd）に対し垂直方法の位置を指定します。
以下のキーワードや数値で設定する事が出来ます。

baseline
super
sub
top
middle
bottom
数値＋単位
数値＋％

ベースラインに合わせる（デフォルト）
上付き文字にする
下付き文字にする
上の揃える
中に揃える
下に揃える（Netscapeのみ）
長さの単位で示している単位で高さを指定します。ベースラインが基準。
文字のサイズに対するパーセンテージで高さを設定。ベースラインが基準。

top,middle,bottom等は画像との組み合わせでよく利用されます。
この場合スタイルは画像側に設定します。
尚bottomはIE6は対応していませんが、デフォルトがbaselineなので
スタイル設定をしなければbottomと同じ見え方になります。

サンプル

■文字列だけの場合

これが初期設定です。

これが<span style="vertical-align:baseline;">初期設定</span>です。

これが上付き文字ですです。

これが<span style="vertical-align:super;">上付き文字</span>です。

これが下付き文字ですです。

これが<span style="vertical-align:sub;">下付き文字</span>です。

ここが通常の高さで、これが-100%そして 100% 200% 300%といった感じになります

ここが通常の高さで、<span style="vertical-align:-100%;">これが-100%</span>そして
<span style="vertical-align:100%;">100%</span>
<span style="vertical-align:200%;">200%</span>
<span style="vertical-align:300%;">300%</span>といった感じになります

単位による指定だとこれが-5pxそして 10px 15px 30px 50px 70pxといった感じになります

単位による指定だと <span style="vertical-align:-5px;">これが-5px</span>そして
<span style="vertical-align:10px;">10px</span>
<span style="vertical-align:15px;">15px</span>
<span style="vertical-align:30px;">30px</span>
<span style="vertical-align:50px;">50px</span>
<span style="vertical-align:70px;">70px</span>といった感じになります

こんな事してあそんだりして

こ
<span style="vertical-align:100%;">ん</span>
<span style="vertical-align:200%;">な</span>
<span style="vertical-align:300%;">事</span>
<span style="vertical-align:400%;">し</span>
<span style="vertical-align:500%;">て</span>
<span style="vertical-align:600%;">あ</span>
<span style="vertical-align:500%;">そ</span>
<span style="vertical-align:400%;">ん</span>
<span style="vertical-align:300%;">だ</span>
<span style="vertical-align:200%;">り</span>
<span style="vertical-align:100%;">し</span>
て

■画像等との組み合わせ

これは設定無しの状態です。文字はbaselineに表示されます。

<img src="...">これは設定無しの状態です。文字はbaselineに表示されます。

これはtopです。画像側にスタイルを設定します。

<img src="..." style="vertical-align:top;">これはtopです。画像側にスタイルを設定します。

これはmiddleです。画像側にスタイルを設定します

<img src="..." style="vertical-align:middle;">これはmiddleです。画像側にスタイルを設定します。

これはbottomですが、IE6は未対応で上に表示されます。

<img src="..." style="vertical-align:bottom;">これはbottomですが、IE6は未対応で上に表示されます。

■行揃え

▲ページTOPへ

text-align: (キーワード）

以下のキーワードで、文字の行揃えをします。

left
right
center
justify

左寄せ
右寄せ
センタリング
均等割付

HTMLタグでもalign属性のあるタグがありますが（div,p,テーブル等）、
スタイルシートならブロックレベルであれば何に対してでも指定出来ます。
なお均等割付はtext-justifyの設定も必要ですので、そちらを参考にして下さい。

サンプル

これが左寄せ。設定しないのと同じです。

<div style="text-align:left;">これが左寄せ。設定しないのと同じです。</div>

これが右寄せです。
改行しても改行してもしまくっても
ずっと右に
寄ったままなのです。

<div style="text-align:right;">
これが右寄せです。<br>
改行しても改行してもしまくっても<br>
ずっと右に<br>
寄ったままなのです。</div>

こうするとセンタリング。
改行しても
やっぱりセンタリングされたままです。

<div style="text-align:center;">
こうするとセンタリング。<br>
改行しても<br>
やっぱりセンタリングされたままです。</div>

■均等分割（IEのみ）

▲ページTOPへ

text-justify: (キーワード）

text-alignでjustifyを指定する事で、この設定を有効に出来ます。
一行の中にある文字を均等に割り付けて、表示上右端揃えを行います。これを均等分割と言います。

設定は以下のようなキーワードで指定します。

auto
newspaper
inter-word
inter-ideograph
inter-cluster
distribute
distribute-all-lines
kashida

ブラウザの設定に従います（デフォルト）
文字間隔と単語間隔の両方を調整します。英文向け。
単語間のみで調整します。
文字間隔と単語間隔の両方で調整。表意文字向け。
単語間隔をあけない文字の調整。アジア言語向け。
文字間隔と単語間隔の両方を調整します。タイ語向け。
distributeの調整に加え、最後の行も調整します。
アラビア文字向け。

サンプル

■autoの動作はブラウザの設定によります All of the people shall be respected as individuals. Their right to life, liberty, and the pursuit of happiness shall, to the extent that it does not interfere with the public welfare, be the supreme consideration in legislation and in other governmental affairs. すべて国民は、個人として尊重される。生命、自由及び幸福追求に対する国民の権利については、公共の福祉に反しない限り、立法その他の国政の上で、最大の尊重を必要とする。 <div style="text-align:justify;text-justify:auto">	■newpaperは英文向け。最後の行も均等分割します。 All of the people shall be respected as individuals. Their right to life, liberty, and the pursuit of happiness shall, to the extent that it does not interfere with the public welfare, be the supreme consideration in legislation and in other governmental affairs. すべて国民は、個人として尊重される。生命、自由及び幸福追求に対する国民の権利については、公共の福祉に反しない限り、立法その他の国政の上で、最大の尊重を必要とする。 <div style="text-align:justify; text-justify: newpaper">
■interwordの場合。 All of the people shall be respected as individuals. Their right to life, liberty, and the pursuit of happiness shall, to the extent that it does not interfere with the public welfare, be the supreme consideration in legislation and in other governmental affairs. すべて国民は、個人として尊重される。生命、自由及び幸福追求に対する国民の権利については、公共の福祉に反しない限り、立法その他の国政の上で、最大の尊重を必要とする。 <div style="text-align:justify;text-justify:interword">	■inter-ideographの場合。 All of the people shall be respected as individuals. Their right to life, liberty, and the pursuit of happiness shall, to the extent that it does not interfere with the public welfare, be the supreme consideration in legislation and in other governmental affairs. すべて国民は、個人として尊重される。生命、自由及び幸福追求に対する国民の権利については、公共の福祉に反しない限り、立法その他の国政の上で、最大の尊重を必要とする。 <div style="text-align:justify;text-justify:inter-ideograph">
■inter-clusterの場合。英語には向きません。 All of the people shall be respected as individuals. Their right to life, liberty, and the pursuit of happiness shall, to the extent that it does not interfere with the public welfare, be the supreme consideration in legislation and in other governmental affairs. すべて国民は、個人として尊重される。生命、自由及び幸福追求に対する国民の権利については、公共の福祉に反しない限り、立法その他の国政の上で、最大の尊重を必要とする。 <div style="text-align:justify;text-justify:inter-cluster">	■distributeの場合。 All of the people shall be respected as individuals. Their right to life, liberty, and the pursuit of happiness shall, to the extent that it does not interfere with the public welfare, be the supreme consideration in legislation and in other governmental affairs. すべて国民は、個人として尊重される。生命、自由及び幸福追求に対する国民の権利については、公共の福祉に反しない限り、立法その他の国政の上で、最大の尊重を必要とする。 <div style="text-align:justify;text-justify:distribute">
■distribute-all-linesの場合。 All of the people shall be respected as individuals. Their right to life, liberty, and the pursuit of happiness shall, to the extent that it does not interfere with the public welfare, be the supreme consideration in legislation and in other governmental affairs. すべて国民は、個人として尊重される。生命、自由及び幸福追求に対する国民の権利については、公共の福祉に反しない限り、立法その他の国政の上で、最大の尊重を必要とする。 <div style="text-align:justify;text-justify:distribute-all-lines">

■文字の間隔

▲ページTOPへ

letter-spacing: (数値又はnormal）

文字と文字の横方向の間隔を調整します。
単語を認識しないので、英文の場合は間隔を広げると見にくくなります。

設定は以下の様にします。

nomal
数値+単位

標準
長さの単位で示している単位で間隔を指定します。

サンプル

letter-spacing:これがnomalです。

<div style="letter-spacing:nomal;">letter-spacing:これがnomalです。</div>

letter-spacing:これは字間が2pxの場合です。

<div style="letter-spacing:2px;">これは字間が2pxの場合です。</div>

letter-spacing:これは字間が10pxの場合です。

<div style="letter-spacing:10px;">これは字間が10pxの場合です。</div>

letter-spacing:これは1emの場合です。

<div style="letter-spacing:1em;">これは1emの場合です。</div>

■単語の間隔

▲ページTOPへ

word-spacing: (数値又はnormal）

英文における単語と単語の間隔を調整します。字間に変化はありません。
日本語には効果がありません。

設定は以下の様にします。

nomal
数値+単位

標準
長さの単位で示している単位で間隔を指定します。

サンプル

■normalの場合

Genius is one per cent inspiration, ninety-nine per cent perspiration.

<div style="word-spacing:nomal;"> Genius is one per cent inspiration, ninety-nine per cent perspiration.</div>

■5pxと設定した場合

Genius is one per cent inspiration, ninety-nine per cent perspiration.

<div style="word-spacing:5px;"> Genius is one per cent inspiration, ninety-nine per cent perspiration.</div>

■1emと設定した場合

Genius is one per cent inspiration, ninety-nine per cent perspiration.

<div style="word-spacing:1em;"> Genius is one per cent inspiration, ninety-nine per cent perspiration.</div>

■日本語には機能しません

天才とは1パーセントのひらめきと99パーセントの努力である。

<div style="word-spacing:1em;"> 天才とは1パーセントのひらめきと99パーセントの努力である。</div>

■インデント

▲ページTOPへ

text-indent: (数値）

divやpといったブロック要素の第一行目に字下げを行います。
字下げ幅は数値で指定します。

サンプル

すべて国民は、個人として尊重される。生命、自由及び幸福追求に対する国民の権利については、公共の福祉に反しない限り、立法その他の国政の上で、最大の尊重を必要とする。

<p style="text-indent:1em;"> すべて国民は、個人として...... </p>

<p style="text-indent:40px;"> すべて国民は、個人として...... </p>

We believe that no nation is responsible to itself alone, but that laws of political morality are universal; and that obedience to such laws is incumbent upon all nations who would sustain their own sovereignty and justify their sovereign relationship with other nations.

<p style="text-indent:20px;"> We believe that no nation is...... </p>

■空白・改行の表示方法

▲ページTOPへ

white-space: (）

通常、連続する空白や改行は一つの半角スペースに置き換えられますが、
この設定によりそのまま表示する事が出来ます。

pre
nowrap
normal

スペースや改行、タブをそのまま表示。(IE6.0以上の標準準拠モードでのみ動作)
画面端で折り返しを行わない。（IE5.5以上）
連続する半角スペース、改行、タブは一つの半角スペースとして表示（初期状態）

サンプル

第７条　天皇は、内閣の助言と承認により、国民のために、左の国事に関する行為を行ふ。

	1．憲法改正、法律、政令及び条約を公布すること。
	2．国会を召集すること。
	3．衆議院を解散すること。
	4．国会議員の総選挙の施行を公示すること。
	5．国務大臣及び法律の定めるその他の官吏の任免並びに全権委任状及び大使及び公使の信任状を認証すること。

IE6.0以上でも標準準拠モードを指定していなければ有効になりません。なおHTMLタグの<pre>を用いればどのブラウザでも同じ表示となる。

<div style="white-space: pre;">
第７条　天皇は、内閣の助言と承認により、国民のために、左の国事に関する行為を行ふ。

1．憲法改正、法律、政令及び条約を公布すること。
2．国会を召集すること。
3．衆議院を解散すること。
4．国会議員の総選挙の施行を公示すること。
5．国務大臣及び法律の定めるその他の官吏の任免並びに全権委任状及び大使及び公使の信任状を認証すること。
</div>

前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。国の交戦権は、これを認めない。

これはwhite-spaceの設定無し（Default）の状態。幅を250pxに指定しているので、文章はそこで折り返しています。

前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。国の交戦権は、これを認めない。

一方ここではwhite-spaceでnowrapを指定しました。widthが設定されていても折り返されません。

<div style="white-space:nowrap;border:1px solid black;padding:5;width:250;"> 前項の目的を達するため、陸海空軍その他の戦力は、これを保持しない。国の交戦権は、これを認めない。 </div>

▲ページTOPへ