コーディングするのが楽になるかも?と思うCSSテクニックのまとめ

コーディングするのが楽になるかも?と思うCSSテクニックのまとめ

今まで使ってコーディングが楽になったと思われるCSSテクニック(一部CSSではない部分もありますが...)などをまとめておきたいと思います。

コーダーの方は知っている事が殆どだと思いますが、知らない人は直ぐにでも使える簡単な事も多いので是非使ってみて下さい。

demo page

…ここからが続き

画像の下に回り込みをしない

画像の下に回り込みをしない

この方法だとソースもシンプルで済みますし、画像の横幅や高さが変わってもソースがそのままで対応出来ます。

HTML

<div class="section2">
<p class="imgL"><img src="image/001.jpg" alt="サンプル画像" width="150" height="100" /></p>
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>
</div>

CSS

.demo1	{
	width: 400px;
	border: 2px solid #CCC;
	padding: 5px 10px;
	margin-bottom: 30px;
	_zoom: 1;   
	overflow: hidden;
}
.imgL	{ float: left; margin: 0 10px 5px 0; }
.demo1 p	{ overflow: hidden; _zoom: 1; }

横並びのブロックレベル要素の配置の調整系

横並びのブロックレベル要素の配置の調整系

上記画像の用に決めらた幅の左右にピタっとくっついた感じの配置のデザインは良くあると思います。こういう時に最初か最初だけ class を追加したり、class 名を変更したら問題ない話なのですが、これを使えば何かと効率はよいかと思います。

HTML

<div class="demo2sample">
<ul class="demo2">
<li><img src="image/001.jpg" alt="サンプル画像1" width="150" height="100" /></li>
<li><img src="image/002.jpg" alt="サンプル画像2" width="150" height="100" /></li>
<li><img src="image/003.jpg" alt="サンプル画像3" width="150" height="100" /></li>
</ul>
</div>

CSS

.demo2sample	{
	width: 470px;
	border:2px solid #F33;
}/* ここまでは参考用のソース */
.demo2	{ width: 480px; margin: 0 -10px 0 0; overflow: hidden; _zoom: 1; }
.demo2 li	{ float: left;  margin-right: 10px; }

横並びのブロックレベル要素の配置の調整系 divのサンプル

HTML

<div class="demo2-2sample">
<div class="demo2-2">
<div class="column">
<h2>サブタイトルみたいな?</h2>
<p>その内容みたいな?感じのテキスト</p>
</div>
<div class="column">
<h2>サブタイトルみたいな?</h2>
<p>その内容みたいな?感じのテキストテキストテキストテキストテキスト</p>
</div>
<div class="column">
<h2>サブタイトルみたいな?</h2>
<p>その内容みたいな?感じのテキストテキストテキストテキストテキスト</p>
</div>
<!--/ .demo2-2--></div>
</div>

CSS

.demo2-2	{
	width: 570px;
	margin: 0 -10px 0 0;
	_zoom: 1;   
	overflow: hidden;
}
.demo2-2 .column	{
	width: 168px;
	min-height: 110px;
	_height: 110px;
	padding: 0 5px 5px;
	margin-right: 10px;
	float: left;
	border: 1px solid #999;
}
.demo2-2 .column h2	{
	background: #666;
	padding: 5px;
	border-bottom: 1px solid #999;
	color: #FFF;
	margin: 0 -5px 5px;
}

リストの最初だけ border を消す

リストの最初だけ border を消す

CSS Happylife さんの「とっても使えるoverflowプロパティ。その使い方色々。」で知り、かなり使えるので紹介しておきます。

HTML

<ul class="demo3">
<li>リストメニュー 1</li>
<li>リストメニュー 2</li>
<li>リストメニュー 3</li>
<li>リストメニュー 4</li>
<li>リストメニュー 5</li>
</ul>

CSS

.demo3 {
	_zoom: 1;
	overflow: hidden;
}
.demo3 li {
	margin-top: -1px;
	padding: 5px;
	border-top: 1px dotted #999;
}

ページ分割系のナビゲーション

ページ分割系のナビゲーション

inline-block を使う事でもメリットは 3つもあります。

  1. クリックエリアが広い
  2. text-align: center; でセンター配置が可能
  3. クリックした際の IE のずれの解消
    ページ内分割をするナビゲーションのクリックエリア?IEバグ対応」を参考に!

上記理由から現状では inline-block を使う事が一番だと思います。

HTML

<ul class="demo4">
<li><strong>1</strong></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
<li><a href="#">10</a></li>
</ul>

CSS

.demo4 {
	text-align: center;
}
.demo4 li {
	display: inline;
}
.demo4 li strong {
	display: -moz-inline-box;
	display: inline-block;
	padding: 2px 7px 4px;
	background: #EEE;
	border: 1px #CCC solid;
}
.demo4 li a {
	display: -moz-inline-box;
	display: inline-block;
	padding: 2px 7px 4px;
	border: 1px #CCC solid;
}
.demo4 li a:hover {
	border: 1px solid #2D88B3;
	background: #2D88B3;
	color: #FFF;
}

注意事項系に使える

注意事項系に使える

バシャログさんの「CSSで簡単にぶら下げインデントをする方法」を見て知ったのですが、※を使った注意書きみたいな時によく使えると思います。2行目からは一文字文空けて表示してくれます。

HTML

<p class="demo5">※注意事項系に使えるようなサンプル<br />
注意事項系に使えるようなサンプル</p>

CSS

.demo5	{  
	margin-left: 1em;
	text-indent: -1em;
}

リンクが途中で折り返しされるの防ぐ

リンクが途中で折り返しされるの防ぐ

代表的なのでいえばタグクラウドみたいなのに使えます。

HTML

<ul class="demo6">
<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>
<li><a href="#">サンプルサンプルサンプルサンプル</a></li>
</ul>

CSS

.demo6	{
	width: 350px;
	border: 2px solid #CCC;
	padding: 20px;
	overflow: hidden;
	_zoom: 1;
}
.demo6 li	{
	list-style-type: none;
	float:left;
	margin: 3px 10px 3px 0;
}
.demo6 a	{ white-space:nowrap; }

IEでテキストエリアの縦スクロールバーを非表示

IEでテキストエリアの縦スクロールバーを非表示

これはリセット(デフォルト)系のCSSに指定しておいても良いかと思います。

HTML

<textarea class="demo7" rows="10" cols="50"></textarea>

CSS

.demo7 { overflow: auto; }

最小、最大の高さや横幅を指定

これも知っておいても便利になる事はけっこうあります。

ネガティブマージン

これは必須だと思いますので、まだ使い方がちゃんと分かってない人はしっかりと把握しておいた方が何かと特ですよ。

demo page

Track Back

Webクリエイターボックス

少しのコードで実装可能な20のCSS小技集

CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマ...

by Webクリエイターボックス  

wembley

知っておきたい簡単で便利なCSSテクニック集

...

by wembley  

Comments

MIYA

MIYA

お!

全然気がついてなかったです…すみません。
ご指摘ありがとうございました!修正しておきました。

2010年02月14日 02:23

cello

cello

どれも悩みの種で困っていたのでとても勉強になりました!有難うございます!

ただデモページのdemo7が、CSSの記載が無く動いておりませんでした。

2010年02月11日 13:31

MIYA

MIYA

Relmさんありがとうございます。

自分は今まで margin を使って困った事がなかったので、Relmさんがおしゃってる現象を知りませんでした><

それなら padding でやった方が良さそうですね!ありがとうございます^^

2009年12月14日 01:23

Relm

Relm

デザイン情報が豊富なので、勉強も兼ねて毎度楽しく拝見させて頂いております。ありがたやー。

.demo5のインデントについて。
私も注意書き等でよくインデントを利用するのですが、marginではなくpaddingを使った方が良いのでは、と思いました。
例えば.demo5にoverflow:hidden;を指定した際(.demo1のpをインデントしたい時とか)、marginだと※が隠れてしまいますが、paddingだと隠れず表示してくれます。
又背景やボーダーを指定した際にも※だけが取り残されてしまいますし、(個人的には)見栄えもpaddingのが良いんじゃないかなーと。

ここまで書いて、『もしかしたら個人の趣味レベル?』と思いつつ、ちょっと気になったのでコメントさせて頂きました。

2009年12月13日 07:36

MIYA

MIYA

左マージンは0なので指定してるつもりはないと言う意味です。
なので心配してる事は問題ではないと思いますよ。

2009年11月18日 10:29

mick

mick

ご回答ありがとうございます。
>左右マージンの方は指定しているつもりはない
とのことですが
.demo2-2 {
width: 570px;
margin: 0 -10px 0 0;
だから左マージンは0なんじゃないですか?

例えばあるボックスの包含ブロックの幅が1000pxで、そのボックスには
width:800px; margin-left:50px; margin-right:50px;
と指定されており、ボーダーとパディングがすべて0のとき
実際のそのボックスの右マージンは、50pxではなく150pxとして扱われる
と思うのですが、今回の場合はどうなんでしょうか?
という質問です。

2009年11月18日 00:55

MIYA

MIYA

mickさん。
>.demo2-2でwidthと左右マージンが同時指定されており
とありますが、左右マージンの方は指定しているつもりはないのですが…
もし左マージンも効いてるならレイアウトは崩れてると思います。

回答になっていなかったらすみません。

2009年11月17日 10:38

mick

mick

.demo2-2でwidthと左右マージンが同時指定されており、「制限しすぎ」の状態になっていると思うのですが、この場合.demo2-2の右マージンの指定値-10pxは無視されて別の使用値になりそうなんですが、私の勘違いでしょうか?

2009年11月17日 03:38

Comment Form

※コメントが認証されるまで、コメントは反映されません。ご了承くださいませ。


(公開されません)
 
Captcha

画像の中に見える文字を入力してください。

page top へ

Sponsor

  • heteml
  • Movable Type

Category

Recent Article

2011 04-05
iPhone スマートフォンサイトのデザインのまとめ
2011 04-04
スマートフォン対応にしてみました
2011 04-01
CSS3 要素を透明に出来る Opacity と RGBa の使い方
2011 03-31
サイトリニューアルしました
2010 12-01
CSS3 でボタンを作る為のテクニック、サンプル集
2010 11-24
綺麗でリッチなフッターデザイン集のまとめ 60
2010 11-18
緑と黒色を使った Webデザインのサイト 25
2010 11-10
知っておいた方が便利なエクセルの知識

Recent Comments

Archive

2011年
2010年
2009年
2008年

Related Article