第２章の１０で作ったページの続きを編集します
「マイドキュメント」の「webpage」から保存しておいた「contents.htm」をクリックして開きます
body{～}にbackground-colorの設定を追加します
ここではトップページと同じ色の値「#f0f8ff」を指定します
;background-color:#f0f8ffを追加します
文章の見出しを罫線で囲むため、h2{～}にデザイン設定を追加します
「border-style」は「solid」、「border-width」は「3px」、「border-color」は「#377c5f」
h2に;border-style:solid;border-width:3px;border-color:#377c5fを追加します。
罫線と見出しの間が詰まっているので余白を入れます。
paddingの設定を追加して余白は4pxにします。
h2の{～}の中に;padding:4pxを追加します
ここで罫線の左辺だけを太くして、デザインをアレンジします。
border-left-widthの設定を追加し、値を「10px」とします。
h2の{～}の中に;border-left-width:10pxを追加します
見出しの背景に色を付けて良く目立つ様にします。
background-colorで設定を追加し値は「#dbe9dd」にします
h2の{～}の中に;background-color:#dbe9ddを追加します
横にいっぱいに広がった見出し部分の横幅をwidthの設定を600pxにします
h2の{～}の中に;width:600pxを追加します
|
<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} --></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> </div> </body> </html> |
| {border-top-style:～} | 上辺の種類を設定 |
| {border-right-style:～} | 右辺の種類を設定 |
| {border-bottom-style:～} | 下辺の種類を設定 |
| {border-left-style:～} | 左辺の種類を設定 |
| {border-top-width:～} | 上辺の太さを設定 |
| {border-right-width:～} | 右辺の太さを設定 |
| {border-bottom-width:～} | 下辺の太さを設定 |
| {border-left-width:～} | 左辺の太さを設定 |
| {border-top-color:～} | 上辺の色を設定 |
| {border-right-color:～} | 右辺の色を設定 |
| {border-bottom-color:～} | 下辺の色を設定 |
| {border-left-color:～} | 左辺の色を設定 |