Web系のこととかー。

ここ最近、覚えてよかったなーと思った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 />
§180 · 4月 22, 2010 · デザイン_HTML_CSS · · [Print]

8 Comments to “覚えて良かったCSSテクニック”

  1. k より:

    IE8, winxpです。
    セルをクリックすると中の文字が再整列?文字位置が変わるのですが、これってなぜでしょうか?

  2. [...] 覚えて良かったCSSテクニック « zaru blog (tags: webdesign css) [...]

  3. zaru より:

    >kさん
    セルとは、横並びにしている li ボックスのことですかね?
    文字選択をするとおかしくなるのは、このブログの他のCSS等が影響しているためと思われます。普通に使用すれば、そのような症状は出ません。

  4. mick より:

    「liにはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。」とのことですが、このソースでは出来ませんでしたよ。
    こちらのサンプルのソールを見ると#box-allに幅600pxが指定されているようですが、重要なのはこのdivではないでしょうか?

  5. zaru より:

    >mickさん
    ご指摘ありがとうございます。
    そうですね、親のdivに幅指定をしないと、きちんとハマらない事があるようです。修正しました。

  6. freewebdev.jp より:

    覚えて良かったCSSテクニック…

    ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 「liをクラス指定せずに3カラムで並べる」「liをクラス指定せずに4カラムで並べる」「高さ指定したボックスの一番下にボタンとかを配置したい。」「dt / ddを横並びにする」「に画像を使う」といったちょっとした時に思い出したいtipsが揃っています。…

  7. tomato より:

    「liをクラス指定せずに3カラムで並べる」ですが、
    li {width:190px; padding:0px;}
    にすると、
    winxp IE6 IE7 の印刷(印刷プレビュー)でカラム落ちしました。

    ちなみに、
    width:189px; padding:1px; ではカラム落ちし、
    width:188px; padding:2px; だとカラム落ちしません。

    こちらの環境だけでしょうか??

  8. [...] 覚えて良かったCSSテクニック « zaru blogたなーと思ったcssテクニックをまとめてみる cssテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うcssテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅:190px マージン:1…はてなブックマークより [...]

Leave a Reply