widthを決めずにfloatさせたい

こんにちは、溝上です。

今回はちょっと便利なfloatの使い方をご紹介したいと思います。
以前紹介したfloatを使う際の注意点に反してしまいますが
幅が決められない（決めたくない）要素をfloatさせたいときってありますよね。
例えばフッターにテキストリンクを多数並べたい場合などが考えられます。

| 会社概要 ｜ お問い合わせ ｜ 個人情報保護方針 ｜ 採用情報 ｜ サイトマップ |

↑こんなリンクです。

「それなら以前紹介したこの方法でいいんじゃない？」

と先輩に突っ込まれましたので、今回は違う方法で実現してみたいと思います。
まずは前回の先輩のサンプルを応用（拝借）してみます。

（htmlコーディング）

<div class="list">

<ul>

<li>テストです</li><li>テストですよ</li><li>テストですね</li><li>テストなんだな</li><li>テストかぁ・・・</li>

</ul>

</div>

（cssサンプル）

* {

padding:0;
margin:0;

}
.list {

width:400px;
padding:10px;
background-color:#9FF;
list-style-type:none;
list-style-position:outside;

}
.list li {

display:inline;
padding-right:10px;
margin-right:10px;
border-right:1px solid #000000;

}

この方法は非常にシンプルにかけてとても使いやすいのですが、弱点があります。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

このサンプルのように親要素のwidthが小さい場合、
テキストの途中で改行されてしまう場合があります。

これはこれで有りですが、ひとつのaタグ内では改行してほしくない場合もあるかと思います。
例えばこうなってほしい場合です。

▼こうなってほしい！ってことありますよね

※これは「こうしたいなぁ」というサンプルです。よくありますよね？

aタグの終わりで次が入りきらない場合に改行したい！って時です。

これを実現する為には、white-spaceとfloatを同時に指定します。

（htmlコーディング）

<div class="list">

<ul>

<li>テストです</li>
<li>テストですよ</li>
<li>テストですね</li>
<li>テストなんだな</li>
<li>テストかぁ・・・</li>

</ul>
<div class="clear">&nbsp;</div>

</div>

（cssサンプル）

* {

padding:0;
margin:0;

}
.list {

width:400px;
padding:10px;
background-color:#9FF;
list-style-type:none;
list-style-position:outside;

}
.list li {

display:block;
float:left;
white-space:nowrap;
padding-right:10px;
margin-right:10px;
border-right:1px solid #000000;

}
.clear {

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

}

さて、実行結果はどうなるでしょうか。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

うまくいきました。
ちなみにwhite-space:nowrap;を指定しなくてもFirefoxでは問題ありませんが、
例のごとくInternet Explorer では表示が崩れてしまいます。

▼スクリーンショット

※またIEかと思わずにはいられません。
    スクリーンショットは、Internet Explorer6です。ちなみにIE7でも崩れました。

white-space:nowrap;はもともとは改行をさせなくさせるプロパティで
tableタグ内でthを改行させたくない場合などに良く使われますが
こんな使い方もあるんですね。

この方法の利点には『displayをinlineにしなくていい』ということもあります。
その為、インライン要素では指定できないpaddingの上下などを使うこともできます。

以前紹介した方法と、今回の方法、状況に合わせて使い分けるとかなり便利だと思います。

縦で区切るリストの表現（上下にボーダーが無い場合）

こんにちは、馬場です。


今回は前回の続きで、
「縦で区切るリストの表現」の
上下にボーダーが無い場合の対応について
お話しします。

• ○ 縦で区切るリストの表現（上下にボーダーがある場合）
• ○ 縦で区切るリストの表現（上下にボーダーが無い場合）

▼縦で区切るリストの表現（上下にボーダーが無い場合）

縦で区切るリストの表現で
リストの上下にボーダーが無い場合は、
ある場合に比べると、
少し考えさせられますよね。
（私だけ？）

いつものように、サンプルをご覧ください。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

（htmlコーディング）

<div id="wrap1" class="wrapper">

<ul>

<li class="first"><a href="#">あなたは</a></li>
<li><a href="#">イヌ派？</a></li>
<li><a href="#">ネコ派？</a></li>
<li><a href="#">私は</a></li>
<li><a href="#">イヌ派です。</a></li>

</ul>

</div>

（cssサンプル）

* {

margin:0;
padding:0;

}
.wrapper {

width:200px;
margin:10px auto;
padding:0 10px;
border:1px solid #71BED9;

}
.wrapper ul {

list-style-type:none;

}
.wrapper li {

padding:13px 10px 10px;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left top;

}
.wrapper li.first {

background:none;

}

liの上にボーダーを表示すると
一番上のボーダーが余分に出てしまうことになります。

サンプルのように、一番上のliにclassを設定し
ボーダー（今回は背景画像）をスタイルの上書きで非表示にすれば
対応可能です。
（ボーダーをliの下に付ければ、一番下のliにclassを設定することになります。）


ただ、
「プログラムで書き出すため、classを付けるのは面倒だ。」
という局面にぶち当たるかもしれません。


そんなときは、
下記のサンプルをお試しください。

▼スクリーンショット

※スクリーンショットは、Windows Firefox 3.0のものです。

（htmlコーディング）

<div id="wrap2" class="wrapper">

<ul>

<li><a href="#">犬派の人は、</a></li>
<li><a href="#">猫っぽい正確の人が</a></li>
<li><a href="#">多いと聞きますが</a></li>
<li><a href="#">私は</a></li>
<li><a href="#">猫っぽいですか？</a></li>

</ul>

</div>

（cssサンプル）

* {

margin:0;
padding:0;

}
.wrapper {

width:200px;
margin:10px auto;
padding:0 10px;
border:1px solid #71BED9;

}
.wrapper ul {

list-style-type:none;

}
.wrapper li {

padding:13px 10px 10px;
background-image:url(line.gif);
background-repeat:repeat-x;
background-position:left top;

}
#wrap2 {

overflow:hidden;

}
#wrap2 ul {

margin-top:-5px;

}

上記のサンプルは
ボーダーを付けた要素（li）の親要素である
ulにmargin-top:-5pxを付け、
ulの親要素のdiv（以降、親1と呼びます）
にoverflow:hiddenを付けることで
ボーダーをめり込ませて見えなくしています。

親1に、
padding-topが付いている際は
そのpadding分、
さらにmarginをマイナスにする必要がありますので
ご注意ください。


また、
めり込ませているため、
普通にclassを付けて消す対応に比べ
上の開きが小さくなってしまいます。
（上記のサンプルなら、5px分狭くなります。）

1〜2pxのボーダーなら、
あまり問題なさそうですが、
あまりに太いボーダーの場合は、
違いが明らかとなってしまいます。

そんなときは、
デザインにもよりますが、
親1のmargin-topで
開きを調整する等の対応が
必要となりそうです。

今回のようなサンプルの場合は、
親1にborderが付いてしまっているので
margin-topを設定しても、
borderとの間隔は
広くなりません。

親1をさらにdivなどで囲み
その要素にborderの設定を
移す必要がありそうです。


IEを無視して問題ない場合は
（超レアケースだと思いますが・・・）
疑似クラスの「first-child」が使えるので
こんなに苦労する必要はないですね。

marginとpadding その３

こんにちは。島津です。

前回・前々回と『margin』『padding』プロパティのお話をして来ましたが、
今回は『padding』プロパティについて、ちょっと使えるテクニックをご紹介します。

• ・背景色をつけた要素でpaddingを使うと…
• ・Pタグだけでアイコン付きテキストを実現

２番目は、知っておくといろいろ役に立ちそうな技です。

 

背景色をつけた要素でpaddingを使うと…

前々回の基本編ですでにご説明しましたが、
marginが要素の外側に対して余白を設定するのに対し、
paddingは要素の内側に対しての余白を設定します。

「要素の内側」に余白を入れるわけですから、marginの場合とは違って
余白の領域も要素の実体部分に含まれます。

ちょっとわかりにくいかも知れないですが、個人的なイメージでは

• ・要素＝段ボール箱
• ・内余白＝段ボール箱の内側にしきつめた、透明の梱包材

みたいなものかな〜と思ってます。
（さしずめmarginは箱の外につけたつっかえ棒？）

ブラウザの仕様の違いに影響されやすいmarginよりも
paddingの方が使い勝手がいいように思いますが
要素に対して背景色や背景画像を設定している場合は注意が必要です。

▼スクリーンショット

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

（htmlコーディング）

<div class="outer">
　　<p>marginもpaddingもなし</p>
　　<p class="text1">左にpadding</p>
　　<p class="text2">左にmargin</p>
</div>

（cssサンプル）

* {

margin:0;
padding:0;

}
.outer {

width:150px;
padding:10px;
border:solid 1px #DDDDDD;

}
p {

padding-left:0;
margin-left:0;
background-color:#96C1C5;

}
.text1 {

padding-left:20px;

}
.text2 {

margin-left:20px;

}

 

Pタグだけでアイコン付きテキストを実現

上で説明した特性を応用すれば、こんなことが出来ます。

▼スクリーンショット

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

（htmlコーディング）

<div class="outer">
　　<p>アイコンつきテキスト</p>
</div>

（cssサンプル）

* {

margin:0;
padding:0;

}
.outer {

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

}
p {

color:#666666;
font-size:15px;
padding:0 0 0 20px;
background-position:left top;
background-repeat:no-repeat;
background-image:url(img/icon.gif);

}

paddingで確保した領域に、背景画像としてアイコンを表示しています。
IMGタグでアイコンを配置するより、ソースもすっきりして管理もラクになります。
paddingとbackground-positionを左側ではなく右側にすれば、更新履歴でよく見る
「NEW！」のような表示も可能です。

但し、CSSで設定できる背景は一つだけ（※）ですので、アイコンを複数つけたい場合は
Pタグを多重に囲むか、一番よく使うアイコンだけCSS＋それ以外をIMGタグ…
といった使い分けをするか、なんらかの工夫が必要になります。
（※CSS2.0までのお話。CSS3.0からは複数設定できるようになるらしい？？）

paddingで稼いだ領域に背景画像を出すテクニックを覚えておくと
何かと応用が効くようになるので、とても便利です。


marginとpaddingの初心者講座は、とりあえずこんなところで
いったんおしまいです。ありがとうございました。