§01-11…body内部・ボックスの拡張範囲と＜min-height＞
(01) body内部・ボックス内のコンテンツが多ければ高さは自動拡張されます。ただし少なければウィンドウ下部が余白になってしまいます。コンテンツが少ない場合も、親ボックス(body)にある程度の高さを確保させることができます。その場合は<min-height>プロパティで最低限の高さを指定するのです。今回は「400px」を与えましょう。 bo...
§01-10…背景画像の表示位置
(01) フォルダー内に「sakura01.jpg」をコピーしておきましょう。 (sakura01.jpg 343×232) (02) 背景色を白にし、かつ「sakura01.jpg」を背景画像に採用します。繰り返しはしません。CSSのbodyセレクタ内を以下のように更新してください。更新後はWebページをブラウジングしてください。 body{ ...
§01-09…背景画像の繰り返し
(01) 小さめの画像を背景に用いると、縦横にその画像が繰り返されます。縦だけ、あるいは横だけで繰り返したい場合は「background-repeat」プロパティを用います。縦だけで繰り返すには値を「repeat-y」にします。以下のようにCSSのbodyセレクタ内を更新してください。更新後はブラウジングします。 body{ background-col...
§01-08…背景画像 {background-image}
(01) フォルダー内に「grd01.gif」をコピーしておきましょう。 (grd01.gif 80×80) (02) この画像をWebページ全域(body)の背景にします。画像を背景にするには、CSSの「background-image」プロパティを用います。値には対象画像ファイルの場所を「url(grd01.gif)」のような形式で指定します。C...
§01-07…画像のボーダーを変更する
(01) 画像をリンクボタンにすると自動的にボーダーが設定されます。これを赤い細点線に変更しましょう。CSSに以下のようなソースを追加してください。更新後はWebページ(index.htm)をブラウジングしましょう。 a img{ border:medium dotted #FF0000; } (index.htm) (02) もちろん...
§01-06…画像をリンクボタンにする
(01) 「index.htm」の画像をクリックしたら「large.htm」に切り替わるようにリンクを設定します。「index.htm」の<img />に「large.htm」へのリンクを設定してください。 <body> <h1>近所の猫</h1> <p><a href="large.h...
§01-05…画像ボタン作成の準備
(01) 同じフォルダー内に以下のようなWebページ「large.htm」を作成しましょう。完成後はブラウジングします。今度は画像を元と同じサイズにしています。 <?xml version="1.0" encoding="Shift_JIS"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
§01-04…回り込みの解除＜clear＞
(01) 「この公園には…」の段落からは回り込みが解除されるように設定します。この段落を前の段落と区別するためにclass属性を設定します。この段落のclass属性を「kaijo」としてください。 <body> <h1>近所の猫</h1> <p><img src="neko01.jpg" width...
§01-03…回り込み＜float＞
(01) この写真・画像は、現在1文字分の巨大な文字として認識されています。そのため画像の右には1行分しか文章が回り込みされません。残りの文章も回り込ませるには、CSSで画像に「float」プロパティを指定します。画像を本文の左側に回り込ませるには値を「left」にします。CSSを以下のように更新してからブラウジングしましょう。 body{ backgr...
§01-02…画像の挿入＜img /＞
(01) フォルダー内にJPEG画像「neko01.jpg」をコピーして入れておきましょう。 (neko01.jpg 192×250) (02) このJPEG画像ファイルを「近所の公園で…」の前に挿入します。画像挿入個所は<img>タグで指定します。<img>タグはテキストや要素を囲むタグではありませんので、 <i...