- WEBデザイン&WEBプログラミング -sei2の日記- - http://blog1.dd-company.com -

基金訓練に行ってきました。(41日目)


基金訓練(Webデザイン・プログラミング科)の41日目に行ってまいりました。
本日は、HTML&CSSプログラミングの実習です。

本日の内容は下記のとおりです。

1.角丸の背景のボックスを作る。

文字文字文字文字文字文字

↑こんな風にしたいとき。

その1(教科書のやり方)

CSS部
.box {
width : 100px;
background-color: #CF9;
}
.box .bgTop {
background-repeat : no-repeat;
background-position : center top;
background-image: url(bgtop.gif);
width: 100px;
padding-top: 10px;
}
.box .bgBottom {
background-repeat : no-repeat;
background-position : center bottom;
background-image: url(bgbottom.gif);
width: 84px;
padding-bottom: 10px;
padding-right: 8px;
padding-left: 8px;
}

HTML部
<div class=”box”>
<div class=”bgTop”>
<div class=”bgBottom”>
文字文字文字文字文字文字
</div>
</div>
</div>

  • 上の例は、教科書に載っているやり方ですが、上下端の画像の背景色と、ホームページに貼り付ける場所の背景色を同じにしないと画像の背景色が見えてしまいます。また、画像の背景を透明にすると、backgraound-colorで設定した色が角に出でしまい、角丸になりません。
  • 上下端の画像サイズは、幅100px、高さ10pxです。

その2(背景に影響されないやり方)

CSS部
.box .bgTop {
background-image: url(bgtop.gif);
background-repeat: no-repeat;
background-position: center top;
width: 100px;
height: 10px;
}
.box .bgCenter {
width: 84px;
background-color: #0FF;
padding-right: 8px;
padding-left: 8px;
}
.box .bgBottom {
background-image: url(bgbottom.gif);
background-repeat: no-repeat;
background-position: center bottom;
width: 100px;
height: 10px;
}

HTML部
<div style=”box”>
<div style=”bgTop”></div>
<div style=”bgCenter”>
文字文字文字文字文字文字
</div>
<div style=”bgBottom”></div>
</div>

  • 上下端の画像の背景を透明にする必要があります。
  • 上下端の画像サイズは、幅100px、高さ10pxです。




実習で使用している教本

入門Webデザイン

3週間でマスター Webデザインの教室[CS4対応版]