2009年07月24日

block要素の横幅を要素の内容によって伸縮させる方法 その3

こんにちは、馬場です。


今回は、
block要素の横幅を
要素の内容によって
伸び縮みさせる方法について、
positionを使った実現方法を
ご紹介します。





▼positionを使った実現方法


block要素の横幅を
要素の内容によって
伸び縮みさせる方法について
positionを使って実現する場合は、
relativeではなく、「absolute」を使います。


私のイメージですが、
block要素の横幅を伸縮させるには、
そのblock要素を周りから見て、
浮かせる
(floatやposition:absoluteなどで、
その要素の高さが周りから認識されないようにする)
と、キュっとなるようです。

(↑私のイメージですので、聞き流してください。)


▼スクリーンショット

※スクリーンショットは、windows Firefox3.0のものです。

(htmlコーディング)
<div class="wrapper03">

<div class="balloon03">花火を観にいきます!!</div>
<p>あしたは・・・。</p>

</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper03 {

padding:10px;

}
.wrapper03 p {

padding-top:50px;

}
.balloon03 {

position:absolute;
padding:10px 10px 25px 10px;
background-color:#67C3EC;
background-image:url(images/bg01.gif);
background-repeat:no-repeat;
background-position:center bottom;

}
.clear {

clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;

}


position:absoluteを使用すると
topやleftを設定することで
表示位置の調整がしやすいのですが、
floatのように
clearで解除する、ということができません。

浮きっぱなしになるため、
要素のheightが増えた際に、
それに合わせて、
その下の要素が下へズレることはありません。


▼スクリーンショット

※スクリーンショットは、windows Firefox3.0のものです。
吹き出しで、下の要素が隠れてしまっています。


(htmlコーディング)
<div class="wrapper03">
<div class="balloon03">

花火を観にいきます!!<br />
今年も、あの橋まで

</div>
<p>1時間くらい、歩いていきます。・・・いい運動になります。</p>
</div>
(cssサンプル)
* {

margin:0;
padding:0;

}
body {

font-size:75%;

}
.wrapper03 {

padding:10px;

}
.wrapper03 p {

padding-top:50px;

}
.balloon03 {

position:absolute;
padding:10px 10px 25px 10px;
background-color:#67C3EC;
background-image:url(images/bg01.gif);
background-repeat:no-repeat;
background-position:center bottom;

}
.clear {

clear:both;
height:0;
font-size:1px;
line-height:0;
visibility:hidden;

}

また、
position:absoluteは
positionプロパティで
static以外の値が指定された親要素に対しての
絶対位置
になるため、
topやleftなどで位置を調整する際は、
どの要素からの絶対位置になるかも
意識する必要があります。



block要素の横幅を
要素の内容によって
伸び縮みさせる方法について、

displayを使った実現方法、
floatを使った実現方法、
positionを使った実現方法の3つをご紹介しましたが、

サンプルのように
吹き出しを表示する場合は、
マウスオーバーした時だけ表示されるような
一時的に表示する吹き出しは、
positionで、

常に表示しておく吹き出しについては
floatで対応するのが良いかと思います。
posted by baba at 20:14 | Comment(0) | TrackBack(0) | テクニック

2009年07月17日

『table-layout』を使おう! その2

こんにちは。
溝上です。

今回は『table-layoutを使おう! その2』をお送りします。
まずは前回と同じく、table-layoutの効果を簡単に説明します。

table-layoutにfixedを指定すると
1.tableの幅が指定されており、th,tdで幅が指定されていない場合、同じ幅になる
2.1行目のtd,thの幅が2行目以降に適用される
3.ページの表示速度がUPする

▼1行目のtd,thの幅が2行目以降に適用される


それでは前回の続きからご紹介します。
table-layoutにfixedを指定すると1行目で指定した幅が2行目以降にも適用されます。
まずはサンプルをどうぞ。
(cssサンプル)
body {
  padding:15px;
}
.section {
  width:400px;
  padding-bottom:30px;
}
table {
  width:100%;
}
table.auto {
  table-layout:auto;
}
table.fixed {
  table-layout:fixed;
}

table td {
  padding:10px;
  border:1px solid #000000;
}
table .w50 {
  width:50px;
}
htmlコーディング例
<div class="section">
<table class="auto">
<tr>
<td class="w50">width:50px</td>
<td>指定無し</td>
<td>指定無し</td>
</tr>
<tr>
<td>指定無し</td>
<td class="w50">width:50px</td>
<td>指定無し</td>
</tr>
</table>
</div>

<div class="section">
<table class="fixed">
<tr>
<td class="w50">width:50px</td>
<td>指定無し</td>
<td>指定無し</td>
</tr>
<tr>
<td>指定無し</td>
<td class="w50">width:50px</td>
<td>指定無し</td>
</tr>
</table>
</div>

さて、autoとfixedではどう変わるでしょうか。
まずはautoの場合をどうぞ。

▼スクリーンショット(table-layout:auto)

※スクリーンショットは、Windows Firefox3.0のものです。

続いてfixedの場合。

▼スクリーンショット(table-layout:fixed)

※スクリーンショットは、Windows Firefox3.0のものです。

table-layoutがautoの場合、2行目のtdの幅指定が効いて一番左と真ん中の列が同じ幅になっています。
table-layoutがfixedの場合、1行目で指定した幅のみ効いていて2行目の幅指定は無視されています。
1行目が読み込まれた時点でth,tdの幅を決定してるらしいです。

ちなみにtableの幅が指定させていなければth,tdの2行目以降の幅指定も有効になるみたいです。

次回はいよいよ最後、『ページの表示速度がUPする』についてお伝えしたいと思います。
タグ:CSS table-layout
posted by baba at 19:42 | Comment(0) | TrackBack(0) | 情報

2009年07月13日

marginとpadding

こんにちは。島津です。
今回が初記事です。よろしくお願いいたします。

今日は、スタイルシートで余白を設定する際に使用する
『margin』及び『padding』プロパティについてご紹介します。

各プロパティの詳しい情報や応用テクニック、ブラウザ別の挙動などの
深いお話は次回・次々回で触れることにして、今回は初めて(記事の担当が)ですので
まず『margin』と『padding』の超・基本からご説明します。


どちらも、要素の余白を指定するためのプロパティですが、
『margin』が対象要素の外側の余白を設定するのに対し、
『padding』プロパティは対象要素の内側の余白を設定します。

図で表すと、こんな感じになります。

具体的な実装例を見てみましょう。

・marginプロパティ

要素の外側、つまりスタイルを設定する対象の要素と
他の要素との間の余白を設定します。
ここではとりあえず、IMGタグで試してみます。

▼スクリーンショット
   
※スクリーンショットは、windows Firefox3.0のものです。
左はmargin未設定、右はmargin設定をしたスクリーンショットになります。
(htmlコーディング)
<img src="img1.jpg" alt="" /><img src="img2.jpg" alt="" /><img src="img3.jpg" alt="" />
(cssサンプル)
img {

width:35px;
height:35px;
margin-right:5px;

}
各IMGタグの右側に、5pxの余白を開けてみました。
marginプロパティは、インライン要素でもブロック要素でも同じように使えます。
特にこれといってわかりにくいところはないかと思いますが、どうでしょうか?

 次、paddingプロパティです。

・paddingプロパティ

要素の内側の余白を設定します。
タグによっては「内側ってどこ?」となりますが、
ここではとりあえず、DIVタグの中に画像を入れて試してみます。
(グレーの枠線で囲まれた部分がDIVタグです。)

▼スクリーンショット
   
※スクリーンショットは、windows Firefox3.0のものです。
左はpadding未設定、右はpadding設定をしたスクリーンショットになります。
(DIVタグは幅を指定しないと横幅いっぱいに広がるので、右側には最初から余白が空いています。)
(htmlコーディング)
<div class="imgWrap">

<img src="img1.jpg" alt="" />

</div>
(cssサンプル)
.imgWrap {

border:solid 1px #DDDDDD;
padding:20px;

}
paddingプロパティはブロック要素に対して使用します。
インライン要素は基本的に「高さ・幅」の概念はないので
基本的にはpaddingプロパティは使用しません(※)。

※ インライン要素にpaddingを設定するケースもあります。
 詳しくは次回以降にご説明します。

とりあえず、基本中の基本の知識は以上です。

次回、『margin』『padding』各プロパティの応用編に続きます。
posted by baba at 20:30 | Comment(0) | TrackBack(0) | 情報

新メンバーの島津です

初めまして。
今回からCSSプログ執筆担当に加わりました、島津です。

CSSコーディングについては担当者中一番経験が少ないので、
基本的な知識のご紹介や、業務中に見つけた「初心者が陥りやすいミス」を
TIPS集のような感じでまとめていこうと思います。

自分の記事が、同じ落とし穴にはまってしまった人達の助けになれば幸いです。
どうぞよろしくお願い致します!
posted by baba at 20:27 | Comment(0) | TrackBack(0) | その他
 
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。