ページの一番下にＷｅｂサイトの名前を入れるため、書く場所を用意します
Ｗｅｂサイトの名前は見出しでも文章でも無いため、<div></div>を追加します
<div>～</div>の中にＷｅｂサイトの名前を書きます。
「Sky&Water by sora」とします。
Ｗｅｂサイトの名前の上の区切り線を入れて、文章と区別出来るようにします。
文章の終わりに「<hr>」と書き加えます。
width:80%;は線の長さでです
height:10px;は線の幅です
border-style:dotted;は線のスタイルです
border-color:#32006aは線のボーダーカラーです
border-width:2pxはボーダーの線の幅です
標準より太い線にするために、「hr{}」を追加します。
その中に「height:4px」と書けば４ピクセル太さを指定出来ます。
色を指定するには、background-colorで設定出来ます。色の値は「#33cc66」とします
「hr{}」の中に;background-color:#32006aを追加します
|
<html> <head> <title>色の景色</title> <style type="text/css"><!-- body{color:#333333;background-color:#f0f8ff} h1{font-size:24px;color:#456b66} h2{font-size:16px;color:#45466b; ;border-style:solid;border-width:3px;border-color:#377c5f ;padding:4px ;border-left-width:10px ;background-color:#dbe9dd ;width:600px} p{width:600px;line-height:140%} p.text01{text-align:left} hr{width:80%;height:10px; border-style:dotted;border-color:#32006a border-width:2px} --></style> </head> <body> <div align="center"> <h1>春の色</h1> <div> 空色・・・そらいろ<br> 水色鼠・・・みずいろねず<br> 浅縹・・・あさはなだ<br> </div> <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> <hr> <div>Sky&Water by sora</div> </div> </body> </html> |
区切り線にもデザイン設定によりさアレンジがまざまな可能です。
区切り線に設定出来るデサイン
| width | 区切り線の横幅 |
| height | 区切り線の縦幅（太さ） |
| background-color | 区切り線の背景色 |
| color | 区切り線の色 |
| border-style | 区切り線の枠の種類 |
| border-width | 区切り線の枠の太さ |
| border-color | 区切り線の枠の色 |