画像の張り付けについてですがまず何から始めましょうか目的はこの（今見てい るページの）レイアウトが出来れば良いということに徹してつくってみましょう。こ のページは最初上部に文字が少し大きい部分の物がありその下に、文字の並びが ある。文字の並びの、上部の左右には、にゃんたろうが御挨拶（歓迎猫）があり、 文字の並びの最終部の下部に、横棒があり、その下にページ案内の画像と文字が 並んでいる、最後の所に横柄にもコピーライトの項目をもうけてある。

• ページ全体の文字の色、背景色を決める。
• 表題に相当する部分（上部の文字の大きい所）文字の色、表題の枠の表示方法今 回は左側のみ表示をしているが、これだけではないオプションがある。
• 画像の貼込、と文字の集まりの配列、左右に画像がありその画像の間に文字の集 まりをいれてゆく。
• 横棒を引く
• ページ案内の画像の並べかた。上部は左右２個今回は３個（おなじこっちゃ！） そのとおりですが？
• 最後にコピーライトをいれる（お約束ですので、不要な場合省略してください。）

• color: #000000;
• color: black ;
• color: rgb(0,0,0) ;

次、背景色今回なんにしましょう、"#ffffcc"にしましょう。

• color: #0099cc; 文字の色
• border-color: #0000ff; 周りの色
• border-style: inset; 周りの表示形式、オプションを使ってみた
• padding: 0.23em; 文字と周りのスペース
• text-indent: 1.2em; 最初の文字までの間隔
• border-width: 5px 3px 2px 15px; 周りの枠の表示今回、四方全て表示し 特徴上部が左端に比べて細い。
• line-height: 1.02em; もし枠内で改行が生じた時文字の重なりをさける。

.img-right {float: right ;
       margin-left: 0.8em ;
       margin-right: 0 ;
}

.img-left {float: left ;
       margin-left: 0 ;
       margin-right: 0.8em ;
}

”margin”の項目は取り敢えず無視（適当なスペース調整用と考える）して、画像と 文字の集まりに対しての位置関係を示す。”float: right”の場合画像 にたいして文字が画像の左側、画像は文字の集まりに対して、右側にく る。これが”float: right”である。一方 ”float: left ”はその反対 で画像は、文字の集まりに対して、左側にくる。わかりにくいと思われ るのでやってなんぼじゃここをクリック してね！

どうですかわかりましたか？皆様もにゃんたろうの様に試行錯誤してみて下 さい。資料は全部ありますね？（やりかたが正鵠ではないのは重々承知 しております。）

ページ案内の画像を並べる、もう皆様は出来るでしょう以下蛇足です。にゃ んたろうはあまりうまい方法では無いのですが、こうしました。まず html の 内容は

<div class="divsamp">
<a href="f010.html" >
<img src="022_welc_w59h100.png" width="59"
 height="100" alt="歓迎猫"><p class="divcl">
ようこそ</p></a>
</div>
<div class="divsamp">
<a href="f010.html" >
<img src="023_wefl_w59h100.png" width="59" height="100" 
alt="春爛漫"><p class="divcl">春爛漫</p></a>
</div>
<div class="divsamp">
<a href="f010.html" >
<img src="031_w100h100.png" width="100" height="100" 
alt="花猫"><p class="divcl">花猫</p></a>
</div>

css に 関係する項目は ”<div class="divsamp">”、”<p class="divcl">”の場所が、重要な点になります。 css で対応する場所とし て

.divsamp { width : 30%; float : left; border-style :none;
font-size: 0.68em;
}

.divcl{ clear : left;}

下記の表示は 全て前のページに移動するようになっている、サンプルです。戻 る時は、必ず UA （ブラウザ）の戻るで戻ってきてね！

ようこそ

春爛漫

花猫

これで 文字の所”春爛漫”を ”前のページ”なんぞに変更し、画像も適当なも のに入れ換えればおわりです。

ここで、なんにもふれてなかった、” <a href="###.html" >”の項目、と”<img src="###" width="59" height="100" alt="歓迎猫">”の項目について少々、説明もどきをしておき ます。類推がついてるとは思いますが、参考にしてください。まず、”<a href="###.html" > ”については、終の印 ”</a>”で 一組となります。これは、関係する場所を記述するようになっております。” href=”にてファイルの居所を記述します、場所は、自分自身の内部のファイル だけでなく、ネットワーク上のファイルも引用する事が可能です。例えば ” <a href="http://cricrima-sa.no-ip.info">CriCri Ma-sa</a> ” の様に記載した場合ここを CriCri Ma-sa （現在は 別の 所です） クリックすると、 サーバーが動作していれば”CriCri Ma-sa”の所のページが見れるでしょう。こ れが巷でいう所の”ハイパーなんとか”という機能です（詳細はネットの世界で にゃんたろうは詳細については存じませぬ）。次に”<img src="###" 云々” については、画像の場所を何処にあるかという指示項目です、後、大きさ（幅；高 さ）と、もし画像が探せない場合お断りの説明を入れておく”alt=ごめんなさい” なんぞ表示する項目とで構成されています。一例として、存在していないものを 表示させた時どうなるか？やってみまひょう” <img src="abcxyz.png" width="200" height="50" alt="そんな残酷なも のありません">猫鍋料理の圖 ”と入力した場合下記様になるでせう。
猫鍋料理の圖

わかりにくくいえば、" <a href="ファイルのある場所"> |説明書|</a> の様になり
|説明書| が "< img src="画像のある所 " width="幅" height="高さ" alt=" お断り"> の様になり、それに画像を使った”ファイルのある場所”の解説と いう風に考えられます。後残りはコピーライトですが、今回省略します。

次は、この残りのコピーライトを扱いましょう。

前へ

次へ

戻る