ページを開いただけでどんなコンテンツがあるかわかると便利です
そこでコンテンツの一覧を書く場所として<div></div>を準備します
その中にコンテンツの見出しをまとめます。
※ＨＴＭＬでは、コンテンツを何かのタグの中に入れておくことになっています
そのため、見出しや段落に当てはまらない部分は<div></div>の中に書くことにします
又後からこの部分にデザインを設定しやすくなります
|
<html> <head> <title>色の景色</title> <style type="text/css"><!-- body{color:#333333} h1{font-size:24px;color:#456b66} h2{font-size:16px;color:#45466b} p{width:600px;line-height:140%} p.text01{text-align:left} --></style> </head> <body> <div align="center"> <h1>春の色</h1> 空色・・・そらいろ<br> 水色鼠・・・みずいろねず<br> 浅縹・・・あさはなだ<br> <h2>空色・・・そらいろ</h2> <p class="text01"> 青空は季節によってかなり濃さが違ってくる<br> 天空と低空でも違って見える<br> 「空色」と言う色見本に近いのは待ちこがれたいた春の明るい空の<br> 地平線近くの色だろうか><br> 「天色」を「てんしょく」と読めば空模様のことだが<br> 「あまいろ」とか「そらいろ」と読むことで明るい青空の色になる</p> <h2>水色鼠・・・みずいろねず</h2> <p class="text01"> 雪解け水には独特の白い濁りがある<br> この色が「水色鼠」だろうか。<br> 「四十八茶、百鼠」と言われた江戸時代の色名には「水色鼠」がある。<br> 青みを帯びた灰色が「藍鼠」なので<br> 青みを薄めた灰白色を「水色鼠」としてみた。<br> 「港鼠」や「深川鼠」という色も鼠色がかった淡い藍である</p> <h2>浅縹・・・あさはなだ</h2> <p class="text01"> 風のない湖の水面は<br> 鏡面となって周囲の森を映しこんでいるlt;br> ブナの若葉に染められた水の色は<br> 「浅緑」であろうか。<br> 残雪の山の色を色見本で探してみたら<br> 「浅縹」と言う色に近かった</p> </div> </body> </html> |
ブラウザ画面で改行するためには<br>を使います。
<h1>～</h1>や<p>～</p>で囲んだ部分の前後には改行され余白が入ります
<div>～</div>テーブルやフォームと言ったコンテンツの前後にも改行が入ります。
【参考】
項目の一覧やリストを表示したい場合、専用のＨＴＭＬタグを使って書くことも出来ます。
まず一覧を書く場所として<ul>～</ul>を用意します
この中に<ul>～</ul>を追加して各項目を書いていきます。
【参考】
※list-style-typeで指定できる値と表示
| nose | 何も表示しない | |
| dice | 黒丸で表示 | |
| circle | 白丸で表示 | |
| square | 四角で表示 | |
| decimal | 数字 | |
| lower-alpha | 小文字のアルファベット | a |
| upper-alpha | 大文字のアルファベット | A |
| lower-roman | 小文字のローマ数字 | i |
| upper-roman | 大文字のローマ数字 | I |
Yここで一応このコンテンツページを＜ファイル→上書き保存＞で閉じてください