 前回の講義の最終ページは、画像表示がいまいちのままぢゃった。このページ
今回はそこをスタイルシートで見栄え良く改良ぢゃ。」
画像をページに貼り付ける時、htmlでは、imgタグを使う。
ぢゃから、スタイルシートの方も、そのimgに対して指定するのぢゃ。
前回に続いてstyle6.cssに、赤い部分を追記していくぞい。
body {
background-color: white;
color: black;
}
h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";
}
h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
}
p
{line-height: 1.5em;
}
img
{
float: left;
margin-right:
1em;
margin-bottom: 1em;
}
|
こうなったかいのぉ？
さて、解説しよう。
| ●float:
left; |
… |
ここで画像を左よりにしておるのぢゃ。
※leftをrightにすると当然右よりになる。 |
| ●margin-right:
1em; |
… |
画像の周りの余白の設定ぢゃ。 画像の右側に1em開けるという意味ぢゃ。 |
| ●margin-bottom:
1em; |
… |
これも画像の周りの余白の設定ぢゃな。 画像の下に1em開けるという意味ぢゃ。 |
●ついでに余白設定の追記もしておくぞい。 |
| ●margin-left:
1em; |
… |
これも画像の周りの余白の設定ぢゃな。 画像の左側に1em開けるという意味ぢゃ。 |
| ●margin-top:
1em; |
… |
これも画像の周りの余白の設定ぢゃな。 画像の上に1em開けるという意味ぢゃ。 |
しかし、これでやるとそのページの画像全てがそのスタイルで表示されてしまう。
まー・・・方法はあるんぢゃが、普通のホームページの場合は、画像の回り込みは、htmlの方でやった方がいいかもしれん。ソフトで見た目で操作できるしのぉ。
ブログはそうはいかんから、スタイルシートで設定するんぢゃが。
それから、画像の回り込みを指定したとき、その仕切をしとかんと、画像が大きくて文章が少ない場合、こんな風になることもある。（サンプルページはわざと画像サイズの拡大表示をしている）
ま、この場合、小見出しでキリというか仕切ぢゃから、小見出しh2の設定に赤い文字のところを追加しておけば、大丈夫ぢゃ。
body {
background-color: white;
color: black;
}
h1 {
text-align: center;
color: white;
background-color: green;
font-size: x-large;
font-family: "HG明朝E";
}
h2 {
border-color: green;
border-style: solid;
border-width: 1px;
padding-left: 2em;
color: blue;
font-size: large;
clear: both;
}
p
{line-height: 1.5em;
}
img
{
float: left;
margin-right: 1em;
margin-bottom: 1em;
}
|
both となっておるのは、左寄せであっても右寄せであってもいいように、両方に対応させたのぢゃ。もう２つ目の小見出しは右側にはないぢゃろ？ サンプル
|
