最初に作った土台ページを開きます
ファイル→名前を付けて保存→名前は「contents.htm」→「マイドキュメント」の「webpage」に保存
このページには景色から色の名前を集めたコンテンツを作りますので『色の景色』とします
<title>～</title>の中に書きます
<h1>～</h1>を作りその中に書きます
<p>～</p>を追加して、その中に文章を書いていきます
|
<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} p.text01{text-align:left} --></style> </head> <body> <div align="center"> <h1>春の色</h1> <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> 鏡面となって周囲の森を映しこんでいる<br> ブナの若葉に染められた水の色は<br> 「浅緑」であろうか。<br> 残雪の山の色を色見本で探してみたら<br> 「浅縹」と言う色に近かった</p> </div> </body> </html> |
改行も段落も無い段階での表現はこうなります。 【参考】
段落毎に<p>～</p>で囲み改行したい場所には<br>を入れます
<h1>はページの見出しを書くために使い、文章の見出しは<h2>～</h2>の中に書きます
５）と６）が終わった段階の表示画面です。
【参考】
文章の見出しはページの見出しより小さく表示されています。
以下同様に、文章の見出しは<h2>～</h2>、文章は<p>～</p>の中に書き、コンテンツを増やしていきます。
「body{}」を書き加えてcolor:#333333の設定をします
ページ内の全ての色が変わります
「h1{}」と[h2{}」を書き加えfont-sizeを指定します
h1{}の中にfont-size:24px、h2{}の中にfont-size:16pxを書きます
「h1{}」「h2{}」の中にcolorの設定を加えます。
h1{font-size:24px;color:#456b66}、h2{font-size:16px;color:#45466b}の書き方で設定を追加します
７）と８）と９）が終わった段階の表示画面です。
【参考】
コンテンツを<div align="center">～</div>で囲んで配置を中央にしました。
文字の配置を整える為にstyleの中にp{width:600px}とp.text01{text-align:left}を加え、
中央辺りに文字を配置し、文章の行揃えを行いました。
これで新しいページが出来ました