文章のレイアウト

全体の余白の指定

body {padding: ★}
タグに記述する場合
<body style="padding:★">
★=pt(ポイント),px(ピクセル),pc(パイカ1pc=12pt)等
4つの辺を個々に指定する事もできます
padding-top ・・・上辺
padding-bottom・・・下辺,
padding-right・・・右辺
padding-left・・・左辺

全体を枠で囲む

枠の太さの指定
body {border-width: ★}
タグに記述する場合
<body style="border-width:★">
★=pt(ポイント),px(ピクセル),pc(パイカ1pc=12pt)等
余白の指定同様、4つの辺を個々に指定する事もできます
枠の色指定
body {border-color: ★}
タグに記述する場合
<body style="border-color:★">
★=カラーネームまたはカラーコード
余白の指定同様、4つの辺を個々に指定する事もできます

段落の幅を指定する

div {width: ★}
タグに記述する場合
<div style="width: ★">〜</div>
★=pt(ポイント),px(ピクセル),pc(パイカ1pc=12pt)等
ソースサンプル
<html>
<head>
<title>タグであそぼう!</title>
</head>
<body>
<div style="width: 300pt;">
段落の幅を指定します。文章は指定した横幅で自動的に折り返して 表示されます。指定する幅は絶対値の他、相対値(基準書体サイズの%(パーセンテージ))でも 指定できます
</div>
</body>
</html>
上のソースのサンプル
段落の幅を指定します。文章は指定した横幅で自動的に折り返して表示されます 指定する幅は絶対値の他、相対値(基準書体サイズの%(パーセンテージ))でも 指定できます

段落の位置指定

div {position: absolute;left: ★; top: ☆}
タグに記述する場合
<div style="position: absolute; left: ★; top:☆">〜</div>
★☆=pt(ポイント),px(ピクセル),pc(パイカ1pc=12pt)等

表示位置指定方法の違い
キーワード反映される座標
position: staticHTMLレイアウト規則に従って自動的に決められた座標
position: absolutebodyの左上が原点の座標(絶対位置指定)
position: relative直前のブロックタグが原点の座標(相対位置指定)

文字の背景色設定

<span style="background-color:☆">★</span>
☆=カラー名または#カラーコード
★=文字列

縦書き文字を表示しよう

5.5の新スタイルシート機能です
<div style="writing-mode: tb-rl">HTML タグで遊ぶでござる</div>
サンプル
HTML タグで遊ぶでござる

大文字、小文字の自動変換

body { text-transform: ★ }
★=表示方法
capitalize(単語の先頭の一文字だけをそれぞれ大文字にします)
uppercase(全て大文字にします)
lowercase(全て小文字にします)
<p style="text-transform: ★">〜〜</p>
で段落ごとの指定も出来ます

段落行の高さを指定する

<div style="line-height: ★px;">
★=行の高さ
指定は絶対値のpxの他次のような単位を使います
相対値 サイズ
em 基準書体の文字の高さ
% 基準書体のサイズに対するパーセンテージ

ここの段落は行高さを20ピクセルで指定しています
ここの段落は行高さを20ピクセルで指定しています
ここの段落は行高さを20ピクセルで指定しています

ここの段落は行高さを30ピクセルで指定しています
ここの段落は行高さを30ピクセルで指定しています
ここの段落は行高さを30ピクセルで指定しています

段落行の先頭文字を大きく表示

<style type="text/css">
<!--
div:first-letter{font-weight: bold; font-size: 2em}
//-->
</style>
先頭文字が大きく表示されます

特定の段落に適応する場合はclass属性を使って指定して下さい
<html>
<head>
<title>段落先頭文字を大きく表示</title>
<style TYPE="text/css">
<!--
div.first:first-letter{font-weight: bold; font-size: 2em}
-->
</style>
</head>
<body>
<div class="first">先頭文字が大きく表示されます</div>
<div>この段落は適応外です</div>
</body>
</html>

段落の先頭文字を字下げする

div{text-indent: 1em}
タグに記述する場合
<div style="text-indent: 1em;">

段落の先頭文字を字下げします
長文を記述する場合読み易くなります
text-indent: ★;。★=1emで一文字分の字下げが可能です
<html>
<head>
<title>段落先頭文字字下げする</title>
<style TYPE="text/css">
<!--
div.jisage:first-letter{text-indent: 1em}
-->
</style>
</head>
<body>
<div class="jisage">先頭文字字下げされます</div>
<div>この段落は適応外です</div>
</body>
</html>

文字の間隔を設定する

div{letter-spacing: 1em}
タグに記述する場合
<div style="letter-spacing: 1em;">

1emで指定
文字の間隔を設定する
2emで指定
文字の間隔を設定する
8ptで指定
文字の間隔を設定する

letter-spacing: ★;。★=1emで一文字分の間隔です
<html>
<head>
<title>文字の間隔を設定</title>
<style TYPE="text/css">
<!--
div.kankaku:{letter-spacing: 1em}
-->
</style>
</head>
<body>
<div class="kankaku">文字の間隔を設定する</div>
<div>この段落は適応外です</div>
</body>
</html>

段落にスクロールバーを付ける

div{overflow-y: scroll; width: 350px; height: 65px;}
タグに記述する場合
<div style="overflow-y: scroll; width: 350px; height: 65px;">

サンプル
段落単位にスクロールバーを付けます
更新履歴などにも活用できます



overflow-xで横スクロールバーが付きます
また、overflow-autoで自動、overflow-hiddenで隠す、overflow-visibleで可視が
それぞれ指定可能です
<html>
<head>
<title>段落にスクロールバーを付ける</title>
<style TYPE="text/css">
<!--
div.kankaku:{overflow-y: scroll; width: 350px; height: 65px;}
-->
</style>
</head>
<body>
<div class="kankaku">段落にスクロールバーを付ける</div>
<div>この段落は適応外です</div>
</body>
</html>