■ WSJ21[GHP] - スタイルシート講座で覚えよう
■Section 3-5■良いホームページ作成講座■
▼GHP講座3.5 − CSSスタイルシートを覚える
◎ よいデザインのホームページを作るために最低限必要な知識(言語)
◎ ホームページを作るために覚えなくてはいけないんです。
◎ 頑張って覚えて下さいね＜他人事＞初めは見ながらでいいですからっ♪
◎ 簡単な英語ができるなら、かなり楽に覚えられますよ。
.
◇◆◇このページで、解説するCSS一覧◇◆◇
[text] text-align, vertical-align, text-decoration, text-indent, line-height, letter-spacing
※スタイルシートを使用している都合上、文字のサイズなど実際の表示と多少異なります。★text-align : テキスト配置(水平方向の文字配置)
汎用例：text-align:<value>; [value] left, center, right
実用例：text-align:center;
<div style="text-align:left;">左寄せ : left</div>
<div style="text-align:center;">中央寄せ : center</div>
<div style="text-align:right;">右寄せ : right</div>
<div style="text-align:center;">中央寄せ : center</div>
<div style="text-align:right;">右寄せ : right</div>
↓ このように表示されます ↓
左寄せ : left
中央寄せ : center
右寄せ : right
※ブロックレベル要素に使用します。インライン要素では有効になりません。
★vertical-align : 垂直配置(垂直方向の文字配置)
汎用例：vertical-align:<value>;
実用例：vertical-align:middle;
[value] baseline(通常), text-top(上), middle(中央), text-bottom(下), sub(下付), super(上付)
通常テーブルや画像と併用します。
サンプル画像はＤＬしてお使い下さい。
<table border="1" summary="Smaple of vertical-align"><tr>
<td>Normal<br />Normal<br />Normal</td>
<td style="vertical-align:baseline;">Base Line</td>
<td style="vertical-align:text-top;">Text Top</td>
<td style="vertical-align:middle;">Middle</td>
<td style="vertical-align:text-bottom;">Text Bottom</td>
<td>20<span style="font-size:10px;vertical-align:sub;">5</span></td>
<td>20<span style="font-size:10px;vertical-align:super;">5</span></td>
</tr></table>
<br /><br />
<img width="10" height="24" alt="square1" src="./ghp03_square.png"
style="vertical-align:baseline;" />Base Line
<img width="10" height="24" alt="square2" src="./ghp03_square.png"
style="vertical-align:text-top;" />Text Top
<img width="10" height="24" alt="square3" src="./ghp03_square.png"
style="vertical-align:middle;" />Middle
<img width="10" height="24" alt="square4" src="./ghp03_square.png"
style="vertical-align:text-bottom;" />Text Bottom
<img width="10" height="24" alt="square5" src="./ghp03_square.png"
style="vertical-align:sub;" />Sub
<img width="10" height="24" alt="square6" src="./ghp03_square.png"
style="vertical-align:super;" />Super
<td>Normal<br />Normal<br />Normal</td>
<td style="vertical-align:baseline;">Base Line</td>
<td style="vertical-align:text-top;">Text Top</td>
<td style="vertical-align:middle;">Middle</td>
<td style="vertical-align:text-bottom;">Text Bottom</td>
<td>20<span style="font-size:10px;vertical-align:sub;">5</span></td>
<td>20<span style="font-size:10px;vertical-align:super;">5</span></td>
</tr></table>
<br /><br />
<img width="10" height="24" alt="square1" src="./ghp03_square.png"
style="vertical-align:baseline;" />Base Line
<img width="10" height="24" alt="square2" src="./ghp03_square.png"
style="vertical-align:text-top;" />Text Top
<img width="10" height="24" alt="square3" src="./ghp03_square.png"
style="vertical-align:middle;" />Middle
<img width="10" height="24" alt="square4" src="./ghp03_square.png"
style="vertical-align:text-bottom;" />Text Bottom
<img width="10" height="24" alt="square5" src="./ghp03_square.png"
style="vertical-align:sub;" />Sub
<img width="10" height="24" alt="square6" src="./ghp03_square.png"
style="vertical-align:super;" />Super
↓ このように表示されます ↓
| Normal Normal Normal |
Base Line | Text Top | Middle | Text Bottom | 205 | 205 |
Base Line
Text Top
Middle
Text Bottom
Sub
Super
※テーブルの表示位置を変更する場合に役立ちます。
※文章の中央に画像を入れたい場合には、属性値「middle」が有効です。
※sub, superは同要素タグ(<sub><sup>)と同様の役割をします。
※サンプル画像は「縦横１ピクセル」です。width, height属性で大きさを調節して下さい。
★text-decoration : テキスト修飾(下線、上線、修正線)
汎用例：text-decoration:<value>;
実用例：text-decoration:underline overline;
[value] none(線無し), underline(下線), overline(上線), line-through(修正線)
<span style="text-decoration:none;">線無し</span>
<span style="text-decoration:underline;">下線</span>
<span style="text-decoration:overline;">上線</span>
<span style="text-decoration:line-through;">修正線</span>
<span style="text-decoration:underline overline;">上下線</span>
<span style="text-decoration:underline overline line-through;">全て</span>
<a href="#">通常リンク</a>
<a href="#" style="text-decoration:none;">下線無しリンク</a>
<span style="text-decoration:underline;">下線</span>
<span style="text-decoration:overline;">上線</span>
<span style="text-decoration:line-through;">修正線</span>
<span style="text-decoration:underline overline;">上下線</span>
<span style="text-decoration:underline overline line-through;">全て</span>
<a href="#">通常リンク</a>
<a href="#" style="text-decoration:none;">下線無しリンク</a>
↓ このように表示されます ↓
※リンク文字の下線を消せて、融通の効いたデザインができるので非常に便利です。
★text-indent : テキスト字下げ(インデント)
汎用例：text-indent:<length>; [length] 20px 10pt...
実用例：text-indent:20px;
<p style='text-indent:12px;'>みなさん良いホームページを創ってみたいと思いませんか？
でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。
当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。
もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。</p>
↓ 先頭がインデントされます ↓
みなさん良いホームページを創ってみたいと思いませんか？ でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。 当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。 もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。
※実際は全角スペースでインデントする場合が多いので使い道に困るかな？
★line-height : 行の高かさ(行間)
汎用例：line-height:<length>; [length] 120% 12px 10pt...
実用例：line-height:120%;
<p style='text-indent:12px;line-height:150%;'>みなさん良いホームページを創ってみたいと思いませんか？
でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。
当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。
もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。</p>
↓ 行間を空けると見やすくなります ↓
みなさん良いホームページを創ってみたいと思いませんか？ でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。 当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。 もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。
★letter-spacing : 文字間隔
汎用例：letter-spacing:<length>; [length] 120% 12px 10pt...
実用例：letter-spacing:1px;
<p style='text-indent:12px;line-height:150%;letter-spacing:4px;'>みなさん良いホームページを創ってみたいと思いませんか？
でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。
当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。
もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。</p>
↓ 文字間隔を空けると更に見やすくなります ↓
みなさん良いホームページを創ってみたいと思いませんか？ でも「自分にはそんな技術はない」と諦めているみなさんに朗報です。 当サイトではホームページ作りの入門者、初心者に分かりやすく解説していきます。 もし、分かり難いところがありましたらドンドン質問して下さいね。お待ちしております。