ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる
CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。
liをクラス指定せずに3カラムで並べる
- liボックス
幅：190px
マージン：15px - liボックス
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 - liボックス
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
<li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。
<style type="text/css">
#box1{
width: 600px;
}
ul{
width: 615px;
margin: 0 -15px 0 0;
overflow: hidden;
_zoom: 1;
font-size:77%;
}
li{
width: 180px;
padding: 5px;
margin-right: 15px;
float: left;
background-color: #cccccc;
}
</style>
<ul>
<li>liボックス<br />
幅：190px<br />
マージン：15px</li>
<li>liボックス<br />
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
<li>liボックス<br />
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
</ul>
liをクラス指定せずに4カラムで並べる
- liボックス
幅：141px
マージン：12px - liボックス
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 - liボックス
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 - liボックス
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
もちろん、3列じゃなくて4列でも何列でもできる。
<style type="text/css">
#box2{
width: 600px;
}
ul{
width: 612px;
margin: 0 -12px 0 0;
overflow: hidden;
_zoom: 1;
font-size:85%;
}
li{
width: 131px;
padding: 5px;
margin-right: 12px;
float: left;
background-color: #cccccc;
}
</style>
<ul>
<li>liボックス<br />
幅：141px<br />
マージン：12px</li>
<li>liボックス<br />
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
<li>liボックス<br />
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
<li>liボックス<br />
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</li>
</ul>
高さ指定したボックスの一番下にボタンとかを配置したい。
高さ：100px
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
高さを揃えたいけれど、中身の要素量がバラバラ…の時にでも。
<style type="text/css">
#box3_1{
border:1px solid #cccccc;
background-color: #ffffff;
padding: 5px;
margin: 5px;
height: 100px;
position: relative;
}
#box3_1 input{
position: absolute;
right: 0;
bottom: 0;
}
</style>
<div id="box3_1">
<p>高さ：100px<br />
ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</p>
<p>
<input type="button" value="ボタン" />
</p>
</div>
dt / ddを横並びにする
- dtです。
- ddです。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
- dtです。
- ddです。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
<style type="text/css">
dt{
clear: left;
float: left;
margin:0 0 0.8em 0;
width: 7.5em;
padding:5px;
}
dd{
margin:0 0 0.8em 0em;
padding:5px 0 5px 8em;
background-color: #cccccc;
}
</style>
<dl>
<dt>dtです。</dt>
<dd>ddです。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</dd>
<dt>dtです。</dt>
<dd>ddです。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。</dd>
</dl>
<hr />に画像を使う
↓<hr />。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。
IE6でも表示可能だが、右はじに変な縦線が出る。背景色と罫線画像の色が一緒であれば誤魔化すことは可能。
<style type="text/css">
*html hr{
display :list-item;
width:0;
margin-left:-10px;
list-style :url(line.png) inside;
color:#ffffff;
background-color: #ffffff;
}
hr{
border:0;
height: 26px;
background:url(line.png) 50% 0 no-repeat;
}
</style>
<hr />
zaru
IE8, winxpです。
セルをクリックすると中の文字が再整列？文字位置が変わるのですが、これってなぜでしょうか？
[...] 覚えて良かったCSSテクニック « zaru blog (tags: webdesign css) [...]
＞kさん
セルとは、横並びにしている li ボックスのことですかね？
文字選択をするとおかしくなるのは、このブログの他のCSS等が影響しているためと思われます。普通に使用すれば、そのような症状は出ません。
「liにはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。」とのことですが、このソースでは出来ませんでしたよ。
こちらのサンプルのソールを見ると#box-allに幅600pxが指定されているようですが、重要なのはこのdivではないでしょうか？
>mickさん
ご指摘ありがとうございます。
そうですね、親のdivに幅指定をしないと、きちんとハマらない事があるようです。修正しました。
覚えて良かったCSSテクニック…
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 「liをクラス指定せずに3カラムで並べる」「liをクラス指定せずに4カラムで並べる」「高さ指定したボックスの一番下にボタンとかを配置したい。」「dt / ddを横並びにする」「に画像を使う」といったちょっとした時に思い出したいtipsが揃っています。…
「liをクラス指定せずに3カラムで並べる」ですが、
li {width:190px; padding:0px;}
にすると、
winxp IE6 IE7 の印刷（印刷プレビュー）でカラム落ちしました。
ちなみに、
width:189px; padding:1px; ではカラム落ちし、
width:188px; padding:2px; だとカラム落ちしません。
こちらの環境だけでしょうか？？
[...] 覚えて良かったCSSテクニック « zaru blogたなーと思ったcssテクニックをまとめてみる cssテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うcssテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅:190px マージン:1…はてなブックマークより [...]