このページの短縮URL(リンク用) 第01章:画像ファイルの挿入 – オンライン無料パソコン講座 | PCセミナー

第01章:画像ファイルの挿入

第01章:画像ファイルの挿入」の学習内容です。

§01-01…画像ファイルの挿入・準備

(01) 「画像の練習」というフォルダーを作成し、その中に以下のようなファイル「index.htm」を作成してください。 <?xml version="1.0" encoding="Shift_JIS"?> ...

§01-09…背景画像の繰り返し

(01) 小さめの画像を背景に用いると、縦横にその画像が繰り返されます。縦だけ、あるいは横だけで繰り返したい場合は「background-repeat」プロパティを用います。縦だけで繰り返すには値を「repeat-y」に...

§01-02…画像の挿入<img />

(01) フォルダー内にJPEG画像「neko01.jpg」をコピーして入れておきましょう。 (neko01.jpg 192×250) (02) このJPEG画像ファイルを「近所の公園で…」の前に挿入します。画像挿入個所...

§01-03…回り込み<float>

(01) この写真・画像は、現在1文字分の巨大な文字として認識されています。そのため画像の右には1行分しか文章が回り込みされません。残りの文章も回り込ませるには、CSSで画像に「float」プロパティを指定します。画像を...

§01-04…回り込みの解除<clear>

(01) 「この公園には…」の段落からは回り込みが解除されるように設定します。この段落を前の段落と区別するためにclass属性を設定します。この段落のclass属性を「kaijo」としてください。 <body>...

§01-05…画像ボタン作成の準備

(01) 同じフォルダー内に以下のようなWebページ「large.htm」を作成しましょう。完成後はブラウジングします。今度は画像を元と同じサイズにしています。 <?xml version="1.0" encodi...

§01-06…画像をリンクボタンにする

(01) 「index.htm」の画像をクリックしたら「large.htm」に切り替わるようにリンクを設定します。「index.htm」の<img />に「large.htm」へのリンクを設定してください。 ...

§01-07…画像のボーダーを変更する

(01) 画像をリンクボタンにすると自動的にボーダーが設定されます。これを赤い細点線に変更しましょう。CSSに以下のようなソースを追加してください。更新後はWebページ(index.htm)をブラウジングしましょう。 a...

§01-08…背景画像 {background-image}

(01) フォルダー内に「grd01.gif」をコピーしておきましょう。 (grd01.gif 80×80) (02) この画像をWebページ全域(body)の背景にします。画像を背景にするには、CSSの「backgro...

§01-10…背景画像の表示位置

(01) フォルダー内に「sakura01.jpg」をコピーしておきましょう。 (sakura01.jpg 343×232) (02) 背景色を白にし、かつ「sakura01.jpg」を背景画像に採用します。繰り返しはし...

§01-11…body内部・ボックスの拡張範囲と<min-height>

(01) body内部・ボックス内のコンテンツが多ければ高さは自動拡張されます。ただし少なければウィンドウ下部が余白になってしまいます。コンテンツが少ない場合も、親ボックス(body)にある程度の高さを確保させることがで...

§01-12…その他の要素に背景を設定する

(01) 「grd03.gif」をフォルダー内にコピーしておきましょう。 (grd03.gif 20×20) (02) この画像をh1内の背景にしましょう。CSSのh1セレクタ内を以下のように更新してからWebページをブ...