テキストの行頭に表示するマーク用の基本的な画像を作ってみましょう。
①Ｐｉｘｉａを起動します。
②ファイル→新規作成→ピクセルサイズで４０×４０を指定します。
③色を指定します。カラーパネルで色を決めます→
④画像全体を塗りつぶします。[■の塗りつぶし]をクリックします。
⑤中央に別の色を塗るため、[領域]＿[長方形]を選択して、画像の上をドラッグして選択範囲を作ります。
⑥選択範囲を塗る色を指定します。ここではページの背景色と同じ色を指定します。
Ⅳの３で説明したように背景色「#f0f8ff」はＲ＝９４ Ｂ＝９７ Ｇ＝１００になりますからその色を指定して、
「塗りつぶし」をクリックすると選択範囲が指定色で塗りつぶされます。
⑦「領域」→「選択解除」をクリックして選択を解除します。
⑧画像を縮小します。「画像」→「大きさを変えて複製」
ページにスタイル良く収まる大きさを考えて、縮小後のサイズを２０×２０ピクセルにします。
小さい画像を取り扱う場合は、大きめのサイズで作成し、最後に小さくすると作業が楽になります。
⑨画像を保存します。ここではＪＰＥＧフォーマットで「mark.jpg」のファイル名にします。
コンテンツページを開き見出しの一覧に作成した画像を行頭に付けます
<img>ではsrcで「mark.jpg」を指定し、画像サイズをwidthとheightで指定します。
<img src="mark.jpg" height="20" height="20">と書きます
マーク画像と文字の間に余白をいれて、ゆったりとしたレイアウトにしていきます。
コンテンツの画像と区別するために、マーク画像にクラス名を付けます。
このときdivの中にclassを設定することで、文字とのレイアウトも設定出来ます。
ここではクラス名を「mark」にし、「class="mark"」を<div>の中に追加します。
styleの中には余白を5pxとして「div.img mark{margin:5px}」を追加します
このままでは画像と文字の位置がずれていますから
img.mark{～}の中に「;vertical-align:middle」を追加します。
行頭マークに見出しの一覧文字が負けますので太くするため<b>～</b>で文字を囲みます
|
<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} a{text-decoration:none} a:link{color:#287c72} a:visited{color:#98d1e9} a:hover{color:#d6d620} a:active{color:#d6202e} img.photo{float:left;margin-right:20px;margin-bottom:20px} div.mark img{margin:5px;vertical-align:middle} --></style> </head> <body> <div align="center"> <h1>春の色</h1> <div class="mark"> <img src="mark.jpg" height="20" height="20" > <a href="#c1"><b>空色</a>・・・そらいろ<br> <img src="mark.jpg" height="20" height="20" > <a href="#c2">水色鼠</a>・・・みずいろねず<br> <img src="mark.jpg" height="20" height="20"> <a href="#c3">浅縹</a>・・・あさはなだ</b><br> </div> <h2><a name="c1">空色</a>・・・そらいろ</h2> <p class="text01"> <img src=5-1.jpg width="330" height="255" alt="そらいろ" class="photo"> 青空は季節によってかなり濃さが違ってくる<br> 天空と低空でも違って見える<br> 「空色」と言う色見本に近いのは待ちこがれたいた春の明るい空の<br> 地平線近くの色だろうか<br> 「天色」を「てんしょく」と読めば空模様のことだが<br> 「あまいろ」とか「そらいろ」と読むことで明るい青空の色になる</p> <h2><a name="c2">水色鼠</a>・・・みずいろねず</h2> <p class="text01"> <img src=5-2.jpg width="330" height="255" alt="みずいろねず" class="photo"> 雪解け水には独特の白い濁りがある<br> この色が「水色鼠」だろうか。<br> 「四十八茶、百鼠」と言われた江戸時代の色名には「水色鼠」がある。<br> 青みを帯びた灰色が「藍鼠」なので<br> 青みを薄めた灰白色を「水色鼠」としてみた。<br> 「港鼠」や「深川鼠」という色も鼠色がかった淡い藍である</p> <h2><a name="c3">浅縹</a>・・・あさはなだ</h2> <p class="text01"> <img src=5-3.jpg width="330" height="255" alt="あさはなだ" class="photo"> 風のない湖の水面は<br> 鏡面となって周囲の森を映しこんでいる<br> ブナの若葉に染められた水の色は<br> 「浅緑」であろうか。<br> 残雪の山の色を色見本で探してみたら<br> 「浅縹」と言う色に近かった</p> <hr> <div><a href="index.htm">Sky&Water by sora</a></div> </div> </body> </html> |
vertical-alignを使うと、画像とテキストの縦方向を揃え方を設定することが出来ます。
vertical-alignで指定できる値
| top | 上に揃える | 【参考】 |
| middle | 中央に揃える | 【参考】 |
| baseline | ベースラインに揃える（指定無しと同じ） | 【参考】 |
| bottom | 下に揃える（InternetExplorerでは対応していません） | 【参考】 |