Webクリエイターボックス » CSS http://www.webcreatorbox.com WebデザインやWebサイト制作、最新のWeb業界情報などを紹介していくサイト。 Sat, 04 Feb 2012 01:55:43 +0000 ja hourly 1 http://wordpress.org/?v=3.3.1 CSS3とjQueryでフォームを美しく装飾する方法 http://www.webcreatorbox.com/tech/css3-jquery-form/ http://www.webcreatorbox.com/tech/css3-jquery-form/#comments Wed, 27 Oct 2010 02:00:38 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=2943 どんなWebサイトでも設置されているフォーム。なんの装飾もなく味気ないフォームより、デザインされたもののほうが連絡してみたくなるはずです！そんなフォームも少し手を加えるだけで素敵なデザインに変身させることができます。今回はCSS3とjQueryを使ってより美しいフォームを作成する方法を紹介します。


IT系、Web業界の求人に強い転職サイト【green】

フォームの仕様

CSS3+jQueryでフォームを装飾

今回チャレンジするフォームの主な仕様です！

  • グラデーション・ボックスシャドウを使って立体感を表現
  • 角丸で丸みをつける（モダンブラウザ）
  • 対応ブラウザ: IE7△, IE8△, IE9, Firefox, Chrome, Safari

サンプル

フォーム制作の流れ

CSS3ってなんだ？という人もひとつひとつ記述していけば意外と簡単に作れるはずです！リンクをクリックで各項目にジャンプします。

  1. テキストボックス、セレクトメニュー、テキストエリアの装飾
  2. 送信ボタンの装飾
  3. チェックボックス、ラジオボタンの装飾
  4. 完成！

1. テキストボックス、セレクトメニュー、テキストエリアの装飾

テキストボックス、セレクトメニュー、テキストエリアには同じ効果を実装させます。

1-1. まずは部品設置とベースの装飾

フォームの部品を設置

<form>内にテキストボックス、セレクトメニュー、テキストエリアを設置し、背景色などの基本的な装飾を実装します。

HTML

<form>
    <div>
        <label>名前</label><br />
        <input type="text" class="text" size="35" value="" />
    </div>

    <div>
        <label>メールアドレス</label><br />
        <input type="text" class="text" size="35" value="" />
    </div>

    <div>
        <label>セレクトメニュー</label><br />
        <select class="dropdown">
            <option>選択してください</option>
            <option>嬉しい</option>
            <option>楽しい</option>
            <option>大好き</option>
        </select>
    </div>

    <div>
        <label>コメント</label><br />
	<textarea cols="35" rows="7" name="comments" id="comments"></textarea>
    </div>
</form>

CSS

form{background: #eee;width:400px;}
	form div{padding: 10px 20px;}

1-2. グラデーション

CSS3でグラデーション

それぞれにCSS3でグラデーションをつけます。各ブラウザーによって書き方が違うのでややこしいのですが、下記コードをコピペしてご使用ください :)

CSS

.text, textarea, .dropdown{
	border:1px solid #777;
	padding: 5px;
	color: #999;
	background: #fff;

/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eee),
		to(#fff)
		);

/* Firefox */
	background: -moz-linear-gradient(
		top,
		#eee,
		#fff
		);

/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
	zoom: 1;
}

1-3. 角丸

CSS3で角丸

コーナー部分に丸みをもたせて柔らかい印象に！※Chrome, Safari, Firefox対応

CSS

.text, textarea, .dropdown{
	border:1px solid #777;
	padding: 5px;
	color: #999;
	background: #fff;
	border-radius: 5px;

	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eee),
		to(#fff)
		);
	-webkit-border-radius: 5px;

	/* Firefox */
	background: -moz-linear-gradient(
		top,
		#eee,
		#fff
		);
	-moz-border-radius: 5px;

	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
	zoom: 1;
}

1-4. ボックスシャドウ

CSS3でボックスシャドウ

背景色をつけている場合、ボックスシャドウをプラスすることでより立体的に表現できます。

CSS

.text, textarea, .dropdown{
	border:1px solid #777;
	padding: 5px;
	color: #999;
	background: #fff;
	border-radius: 5px;

	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eee),
		to(#fff)
		);

	-webkit-border-radius: 5px;
	-webkit-box-shadow: 1px 1px 1px #fff;

	/* Firefox */
	background: -moz-linear-gradient(
		top,
		#eee,
		#fff
		);

	-moz-border-radius: 5px;
	-moz-box-shadow: 1px 1px 1px #fff;

	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
	zoom: 1;
}

» サンプルを見る

フォーム制作の流れ 目次へ。

2. 送信ボタンの装飾

送信ボタンの装飾

送信ボタンも 1. と同じくグラデーション、角丸、ボックスシャドウの効果を付け加えます。色はお好みで変更してください！

HTML

<div>
    <input type="submit" class="submit" value="送信する" />
</div>

CSS

.submit{
	border:1px solid #777;
	padding: 4px 10px;
	color: #fff;
	cursor: pointer;
	background: #428ec9;
	border-radius: 5px;

/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#99c9e5),
		to(#428ec9)
		);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 1px 1px 1px #fff;

/* Firefox */
	background: -moz-linear-gradient(
		top,
		#99c9e5,
		#428ec9
		);
	-moz-border-radius: 5px;
	-moz-box-shadow: 1px 1px 1px #fff;

/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ff99c9e5,endColorstr=#ff428ec9);
	zoom: 1;
}

» サンプルを見る

フォーム制作の流れ 目次へ。

3. チェックボックス、ラジオボタンの装飾

CSSでは装飾できないチェックボックスとラジオボタンには画像とjQueryを使ってデザインします。

3-1. 画像をつくる

CSSスプライト画像

チェック前、チェック後ともにひとつの画像を使用します。チェック前は上部分のみ表示し、チェック後に下部分を表示する仕組みです。（CSSスプライトについては→CSSスプライトで画像を円滑に表示させる）

3-2. チェックボックス、ラジオボタンを画像に置換

チェックボックス、ラジオボタンを画像に置換

チェックボックスとラジオボタンに z-index: -1; position: absolute; を加えて画像に置換します。図のようにチェックボックスとラジオボタンの上に画像を重ねているわけです。

HTML

<!-- チェックボックス -->
<div>
	<input id="CheckBox1" type="checkbox" class="checkbox"/>
	<label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Checkbox 1</label>

	<input id="CheckBox2" type="checkbox" class="checkbox"/>
	<label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">Checkbox 2</label>
</div>

<!-- ラジオボタン -->
<div>
	<input id="Radio1" type="radio" class="radio" name="group1" >
	<label id="Label1" for="Radio1" class="radiolabel">Radio 1</label>
	<input id="Radio2" type="radio" class="radio" name="group1"/>

	<label id="Label2" for="Radio2" class="radiolabel">Radio 2</label>
	<input id="Radio3" type="radio" class="radio" name="group1"/>
	<label id="Label3" for="Radio3" class="radiolabel">Radio 3</label>
</div>

CSS

.checkbox,.radio{
	z-index: -1;
	position: absolute;
	}
	.CheckBoxLabelClass{
		background: url("http://www.webcreatorbox.com/sample/images/checkbox.png") no-repeat top left;
		margin-right:20px;
		padding-left:22px;
		}

	.radiolabel{
		background: url("http://www.webcreatorbox.com/sample/images/radio.png") no-repeat top left;
		margin-right:20px;
		padding-left:22px;
		}

3-3. jQueryでクラスを与える

jQueryでクラスを与える

チェックされた時にjQueryを使ってクラスを与えます。チェックされた時の画像を表示させるためです。jQueryファイルをダウンロードして <head> 内に記述しましょう。

header内でjQueryファイルを読み込む

<script type="text/javascript" src="js/jquery.js"></script>

jQueryコード

<script type="text/javascript">
$(document).ready(function(){
	$(".checkbox").change(function(){
		if($(this).is(":checked")){
			$(this).next("label").addClass("LabelSelected");
		}else{
			$(this).next("label").removeClass("LabelSelected");
		}
	});
	$(".radio").change(function(){
		if($(this).is(":checked")){
			$(".RadioSelected:not(:checked)").removeClass("RadioSelected");
			$(this).next("label").addClass("RadioSelected");
		}
	});
});
</script>

CSS

.LabelSelected,.RadioSelected{
	background-position: bottom left;
	}

» サンプルを見る

フォーム制作の流れ 目次へ。

4. 完成！

フォーム完成

素敵に変身をとげました！コードをまとめるとこんな感じです↓

HTML（header内）

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".checkbox").change(function(){
		if($(this).is(":checked")){
			$(this).next("label").addClass("LabelSelected");
		}else{
			$(this).next("label").removeClass("LabelSelected");
		}
	});
	$(".radio").change(function(){
		if($(this).is(":checked")){
			$(".RadioSelected:not(:checked)").removeClass("RadioSelected");
			$(this).next("label").addClass("RadioSelected");
		}
	});
});
</script>

HTML（body内）

<form>
    <div>
        <label>名前</label><br />
        <input type="text" class="text" size="35" value="" />
    </div>

    <div>
        <label>メールアドレス</label><br />
        <input type="text" class="text" size="35" value="" />
    </div>

    <div>
        <label>セレクトメニュー</label><br />
        <select class="dropdown">
            <option>選択してください</option>
            <option>嬉しい</option>
            <option>楽しい</option>
            <option>大好き</option>
        </select>
    </div>

    <div>
        <input id="CheckBox1" type="checkbox" class="checkbox"/>
        <label id="Label1" for="CheckBox1" class="CheckBoxLabelClass">Checkbox 1</label>

        <input id="CheckBox2" type="checkbox" class="checkbox"/>
        <label id="Label2" for="CheckBox2" class="CheckBoxLabelClass">Checkbox 2</label>
    </div>

    <div>
        <input id="Radio1" type="radio" class="radio" name="group1" >
        <label id="Label1" for="Radio1" class="radiolabel">Radio 1</label>

        <input id="Radio2" type="radio" class="radio" name="group1"/>
        <label id="Label2" for="Radio2" class="radiolabel">Radio 2</label>	

        <input id="Radio3" type="radio" class="radio" name="group1"/>
        <label id="Label3" for="Radio3" class="radiolabel">Radio 3</label>
    </div>

    <div>
        <label>コメント</label><br />
        <textarea cols="35" rows="7" name="comments" id="comments"></textarea>
    </div>

    <div>
        <input type="submit" class="submit" value="送信する" />
    </div>
</form>

CSS

form{background: #ddd;width:400px;}
	form div{padding: 10px 20px;}

.text, textarea, .dropdown{
	border:1px solid #777;
	padding: 5px;
	color: #999;
	background: #fff;
	border-radius: 5px;

	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#eee),
		to(#fff)
		);

	-webkit-border-radius: 5px;
	-webkit-box-shadow: 1px 1px 1px #fff;

	/* Firefox */
	background: -moz-linear-gradient(
		top,
		#eee,
		#fff
		);

	-moz-border-radius: 5px;
	-moz-box-shadow: 1px 1px 1px #fff;

	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ffeeeeee,endColorstr=#ffffffff);
	zoom: 1;
	}

.submit{
	border:1px solid #777;
	padding: 4px 10px;
	color: #fff;
	cursor: pointer;
	background: #428ec9;
	border-radius: 5px;

	/* Webkit */
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(#99c9e5),
		to(#428ec9)
		);
	-webkit-border-radius: 5px;
	-webkit-box-shadow: 1px 1px 1px #fff;

	/* Firefox */
	background: -moz-linear-gradient(
		top,
		#99c9e5,
		#428ec9
		);
	-moz-border-radius: 5px;
	-moz-box-shadow: 1px 1px 1px #fff;

	/* IE */
	filter:progid:DXImageTransform.Microsoft.gradient
        (startColorstr=#ff99c9e5,endColorstr=#ff428ec9);
	zoom: 1;
	}

.checkbox,.radio{
	z-index: -1;
	position: absolute;
	}
	.CheckBoxLabelClass{
		background: url("http://www.webcreatorbox.com/sample/images/checkbox.png") no-repeat top left;
		margin-right:20px;
		padding-left:22px;
		}

	.radiolabel{
		background: url("http://www.webcreatorbox.com/sample/images/radio.png") no-repeat top left;
		margin-right:20px;
		padding-left:22px;
		}
	.LabelSelected,.RadioSelected{
		background-position: bottom left;
		}

「えー、もっと楽な方法あるよ？」というのがあればぜひぜひ教えてください！

» サンプルを見る

フォーム制作の流れ 目次へ。

]]> http://www.webcreatorbox.com/tech/css3-jquery-form/feed/ 16 Webサイトの基本要素 見出し・リスト・引用文のスタイルを整える http://www.webcreatorbox.com/tech/css-heading-list-blockquote/ http://www.webcreatorbox.com/tech/css-heading-list-blockquote/#comments Wed, 06 Oct 2010 02:01:15 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=2758 Webサイトを装飾していく時に無視できない要素、見出し・リスト・引用文。特にWordPressでオリジナルのテーマを作る時は、ブログ用にこれら基本の要素すべての装飾もすると思います。そんな時に使うコードのバリエーションをメモしていたので記事にしました。少し変えるだけで応用できると思うので、ぜひ使ってみてください！


IT系、Web業界の求人に強い転職サイト【green】

色、フォント、サイズなどを変えるだけで、どんなサイトでも使える見出し・リスト・引用文用のHTMLとCSSコードを紹介します。そのままコピペして使っちゃってください。少しはコーディングの手間が省ける…かもしれません。ちょいちょい使っている画像も保存して使ってもらってもOKです :)

サンプルはこちら。IE6, 7, 8, FF, Chrome, Safariで動作確認済。

サンプル

見出しの装飾

斜線を使った見出し

見出しのデザイン

まずは基本。背景画像を使って見出しの下部に斜線を表示させます。斜線だけでなく、線種を変えていろんなデザインに応用できます。

HTML

<h2 id="heading1">デザインサンプル</h2>

CSS

#heading1{
	background: url(images/line.gif) repeat-x bottom left;
	padding-bottom: 15px;
	color: #3cf;
	}

グラデーションを使った見出し

見出しのデザイン

CSS3を使ってグラデーションを！IE6～8にも対応させるため、CSS3 PIEを利用します。まずはCSS3 PIEをダウンロード。PIE.htcファイルをアップロードし、behavior: url(PIE.htc); と -pie-background:linear-gradient(グラデーションの位置と色); を記述すればOK。「たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE」で詳しく説明されています。

HTML

<h2 id="heading2">デザインサンプル</h2>

CSS

#heading2{
	background: #fff;
	border-top:1px solid #ddd;
	border-right:1px solid #ddd;
	border-bottom:1px solid #ddd;
	border-left:3px solid #3cf;
	padding: 5px 0 5px 10px;
    background: -moz-linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); /* firefox */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(50%,#eee), color-stop(51%,#ddd), color-stop(100%,#fff)); /* webkit */
    -pie-background:linear-gradient(top, #fff 0%, #eee 50%, #ddd 51%, #fff 100%); /* ie */
    behavior: url(images/PIE.htc);  /* ie */
}

グラデーションと角丸を使った見出し

グラデーションと角丸の見出し

こちらもCSS3を使います。上記と同様、CSS3 PIEをIE用に利用。見出しだけでなくボタンなどにも使えますね！

HTML

<h2 id="heading3"><span>デザインサンプル</span></h2>

CSS

#heading3{
    border:solid 1px #ddd;
    padding: 5px;
    border-radius: 5px;
    background: #eee;
    -moz-border-radius: 5px; /* FF */
    background: -moz-linear-gradient(top,  #fff,  #eee); /* FF */
    -webkit-border-radius: 5px;/* Webkit */
    background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));/* Webkit */
    -pie-background:linear-gradient(top,  #fff,  #eee); /* ie */
    behavior: url(images/PIE.htc);  /* ie */
    }
    #heading3 span{border-left:5px #3cf solid;padding-left:10px;}

英語も一諸に表示した見出し

英語と日本語を使った見出しデザイン

時々見かける日本語＋英語の見出し。画像を使っているサイトが多いのですが、テキストでももちろん実装可能です！

HTML

<h2 id="heading4">デザインサンプル<span>Design Sample</span></h2>

CSS

#heading4{
	border-bottom: 5px #3cf solid;
	padding-bottom: 5px;
	}
	#heading4 span{
		margin-left:20px;
		font-size:60%;
		color: #ccc;
		position: relative;
		top: -5px;
		}

リストの装飾

数字のリスト

CSSデザイン

数字の部分もフォントや色を変えたらとっても素敵なデザインに！ここでは最近マイブームなGoogle Font APIを利用。ここのサイトに登録してあるフォントを無料でWebフォントとして使うことができます。IE6〜対応。英語しか登録されていないので、日本語サイトではこのように「部分的に」しか使えないと思いますが…。詳しい使い方は「Google Font APIを試してみた。」を覗いてみてください。原理としては、ol でフォントや色を変えて、span で元に戻す感じです。

header内に追加

<link href='http://fonts.googleapis.com/css?family=Neucha&subset=latin' rel='stylesheet' type='text/css'>

HTML

<ol id="ol1">
	<li><span>リストの装飾です</span></li>
	<li><span>Neuchaというフォントを使っています</span></li>
	<li><span>色も変えるとなんだか新鮮！</span></li>
</ol>

CSS

#ol1 li{
	color: #3cf;
	font-size:200%;
	font-family: 'Neucha';
	list-style: decimal inside;
	}
	#ol1 li span{
		color: #666;
		font-size:14px;
		font-family:'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro',Osaka,'ＭＳ Ｐゴシック',sans-serif;
		}

点の部分だけ色を変える

CSS　リストの装飾

お手軽に装飾できるこの技。技というほどでもないかもしれませんが、さっと使えて便利です。先ほどと同じくul に色をつけて、 span で元に戻します。

HTML

<ul id="ul1">
	<li><span>リストの装飾です</span></li>
	<li><span>点の部分だけ色を変えて</span></li>
	<li><span>ちょこーっと変化をつけましょう</span></li>
</ul>

CSS

#ul1 li{list-style: square outside; color:#3cf;list-style-image:none;}
	#ul1 li span{color:#666;}

画像を使う

CSSでリスト装飾

王道ですね。サイトにあった色・マークを選択してください！

HTML

<ul id="ul2">
	<li>リストの装飾です</li>
	<li>とっても無難なやり方ですが</li>
	<li>画像を使って装飾します</li>
</ul>

CSS

#ul2 li{list-style-image: url(images/arrow.png);}

グラデーションを使う

CSSでグラデーションを使ったリストを実装

再び登場、CSS3＋CSS3 PIE。グラデーションと1pxのラインを使う事で立体感が出せます。

HTML

<ul id="ul3">
	<li>リストの装飾です</li>
	<li>グラデーションと1pxのラインで</li>
	<li>立体感がでますね！</li>
</ul>

CSS


#ul3{
	border: 1px solid #ccc;padding: 0;
	border-bottom: 0 none;
	width: 300px;
	}
#ul3 li{
	background: #eee;
        list-style-image:none;
	padding: 5px;
	border-bottom: 1px #ccc solid;
	border-top: 1px #fff solid;
    list-style: inside square;
	margin:0;
	background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ddd));/* webkit */
	background: -moz-linear-gradient(top,  #eee,  #ddd);/* ff */
    -pie-background:linear-gradient(top,  #eee,  #ddd);/* ie */
    behavior: url(images/PIE.htc);  /* ie */
	}

引用文の装飾

背景色とボーダー

背景色とボーダーで引用文を装飾

とっても無難な装飾。でもあるのとないのでは見た目が全然違いますね！

HTML

<blockquote id="bq1">
引用部分のデザイン。とってもベーシックですが、背景色とボーダーを加えてみました。こんな感じでいかがでしょう？
</blockquote>

CSS

#bq1{
	border-left:5px solid #ddd;
	background: #eee;
	padding: 10px;
	}

大きなクォーテーション背景画像

クォーテーション画像を使って装飾

インパクトあります。クライアントや読者からの感想を表示する時にアクセントとなっていいかも。

HTML

<blockquote id="bq2">
引用部分のデザイン。Webクリエイターボックスのコメントエリアでも使用中の、大きなクオートを背景画像として用いたデザインです。長めの引用文でないと画像が途中で切れちゃいます。背景の画像には薄い色を使ってくださいね！
</blockquote>

CSS

#bq2{
	background: #eee url(images/quote.gif) no-repeat 5px 5px;
	padding: 15px;
	}

最初と最後にクォーテーションの画像

クォーテーション画像で引用文を装飾

ちょんちょんっとつけるだけで雰囲気が全然違いますね。blockquote に最初の画像、中の span タグに閉じ画像をプラス。

HTML

<blockquote id="bq3">
<span>
引用部分のデザイン。最初と最後にクォーテーションの画像を使いました。ちょこんとかわいらしく、ポイントになっていいのでは？
</span>
</blockquote>

CSS

#bq3{
	background: #cbf5ff url(images/quote_open.gif) no-repeat top left;
	padding: 10px;
	text-indent: 15px;
	}
	#bq3 span{
	background: url(images/quote_close.gif) no-repeat bottom right;
	display: block;
	}

これらの色やサイズ、フォントなどをちょっと変えるだけで簡単に使用できると思います。サンプルも合わせてみてみてくださいね！

]]> http://www.webcreatorbox.com/tech/css-heading-list-blockquote/feed/ 10 少しのコードで実装可能な20のCSS小技集 http://www.webcreatorbox.com/tech/css-tips20/ http://www.webcreatorbox.com/tech/css-tips20/#comments Wed, 14 Apr 2010 02:40:56 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=1095 CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！


IT系、Web業界の求人に強い転職サイト【green】

サンプル

まずはCSS基礎編

1. divを中央揃えにする

CSS: divを中央揃えにする

ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。

サンプル

#wrapper{ width: 950px; margin: 0 auto; }

2. divを横並びに

CSS: divを横並びに

floatでdivを並べてレイアウトを組んでいきます。floatを解除する場合はclear:both;を使います。

サンプル

#main{ float: left; }
#side{ float: left; }
#footer{ clear: both; }

3. 複数のクラスを指定

実はクラスは一度に複数指定できます。スペースを空けるだけなので簡単ですね。

HTML

<p class="border float bg">いろんなクラスが！</p>

CSS

.border{ border: 1px solid #000; }
.float{ float: left; }
.bg{ background-color: #eee; }

4. マージンやパディングのプロパティを短く指定

マージンやパディングを指定する際、いちいちmargin-top:10px;、margin-left: 20px;、、、と書かなくても一行で指定することができます。margin: 上、右、下、左;と、上から時計回りの順で指定していきます。

#main{ margin: 10px 20px 30px 40px; }

/* 上下が同じ、左右が同じ幅 （margin: 上下 左右;）*/
#main{ margin: 10px 20px; }

/* 左右が同じ幅 （margin: 上 左右 下;）*/
#main{ margin: 10px 20px 30px; }

5. ボーダーの色を短く指定

同様にボーダーの色も上、右、下、左の順に指定できます。

#main{ border-color: #ccc #666 #666 #ccc; }

6. フォントのプロパティを短く指定

さらにフォントのプロパティも短くできます。body { font: font-style font-variant font-weight font-size line-height font-family; }の順に指定。全てを指定する必要はないので、必要なもの以外は省いてOK。

body { font: italic small-caps bold 14px/25px Verdana, Arial, Helvetica, sans-serif; }

7. リンクの点線を消去

CSS: リンクの点線を消去

リンクをクリックしたときに表示される点線を消去。

追記: 私の場合かなりの確率でクライアントから依頼があり消していますが、これをするとタブキーを使ってリンクを辿る際、どこにフォーカスしているかわからなくなります。

a{ outline: none; }

8. 画像リンクのラインを消去

画像にリンクを張ったとき、aタグに指定された色の線が表示されると思います。それを消去しちゃいます。

img{ border: none; }

9. 透明度を変更

CSS: 透明度を変更

各数値を変更して透明度を変更。

サンプル

.image{
    filter:alpha(opacity=50);  /* IE7以下用 */
    -ms-filter: "alpha(opacity=50)"; /* IE8用 */
    -moz-opacity:0.5; /* Firefox 1.5未満, Netscape用 */
    -khtml-opacity: 0.5;  /* Safari 1.x, 他khtmlに対応したブラウザ用  */
    opacity: 0.5; /* Firefox 1.5以上, Opera, Safari用 */
    }

10. ブラウザー毎にCSSを変える

IE用にCSSを変える場合、header内に以下の条件を記述することで実装できます。

<!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->

IEのバージョン毎にCSSを変える場合は上記[if IE]の部分を下記に変更。

<!--[if IE 6]> →IE6のみ -->
<!--[if gt IE 6]> →IE7以上 -->
<!--[if lt IE 6]> →IE6未満 -->
<!--[if gte IE 6]> →IE6以上 -->
<!--[if lte IE 6]> →IE6以下 -->

いろいろ使える画像編

11. マウスオーバーで画像を変更

これにはいろんなやり方があります。以前書いたCSSスプライトもその一つ。今回は２枚の画像を使ったやり方を紹介します。まずはdivにマウスオーバー時に表示される画像を背景画像として指定。その中に通常時の画像を置きます。そしてvisibility: hidden;でマウスオーバーしたときに通常時の画像を隠します。

サンプル

HTML

<div class="btn">
    <a href="#">
        <img src="btn.jpg" width="200" height="60" />
    </a>
</div>

CSS

div.btn{
    background: url(btn-hover.jpg) no-repeat;
    width: 200px;
    height: 60px;
    }
    div.btn a { display: block; }
        div.btn a:hover{ background: none; }
	    div.btn a:hover img { visibility: hidden; }

12. ファビコン

URLアドレスバーの横にちょこんとある小さな画像、ファビコンを作成。まずはPhotoshop、Illustratorなどで16px四方の画像を作成し、.gifか.pngで保存。その画像を.icoに変換してくれるサイトなどで.ico画像を作ります。その後header内に以下を記述すればファビコン設置完了です。（わざわざ.gifから.icoに変換しなくてもWindowsのPhotoshopなら別名保存から.icoで保存できるらしい。。？Windows使わないのでこの辺よくわかりません。。）

<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

13. ページサムネイル画像

ソーシャルブックマークサイト等に表示されるサムネイル画像を指定します。（動作しないサイトもあり？）headerに下記を記述。

<link rel="image_src" href="thumb.jpg" />

14. 画像の好きな部分を切り抜く

clip: rect

clipを使って画像を好きな位置で切り抜きます。サムネイル画像なんかに使えそうですね。divにposition: relative;を、中に入れる画像にposition: absolute;を使うのがポイント。clip: rectの値は少しわかりづらいのですが、下の図を参考にしてみてください。

clip: rect
サンプル

div {
  position: relative;
  height: 130px;
  width: 200px;
  border: solid 1px #ccc;
}
div img {
  position: absolute;
  clip: rect(30px 165px 100px 30px);
}

かゆいところに手が届く応用編

15. 長いURLを途中で折返す

CSS word wrap

URLなどの長い英単語が続くとうまく改行せず続けて表示されてしまいます。その問題はword-wrapで解決。

サンプル

ul li{ word-wrap: break-word; }

16. 逆に途中で折り返さず、次の行に

逆に途中で折り返さず、次の行に

図のように次の行に表示させたい場合はこちらが有効。

サンプル

p span { white-space: nowrap; }

17. リストの最初の仕切り線を消去

css overflow hidden

仕切りのボーダーを表示する際、各リストにボーダーを指定すると思いますが、その場合トップ（もしくはボトム）にも線がついてしまって悩んでいるあなた！overflow: hidden; を使えば簡単に解決できます！

サンプル

HTML

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

CSS

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

18. ２行目以降にスペースを

※を使った注意事項などに使える小技。最初の行は通常に、次の行からは一文字分開けて表示します。

サンプル

HTML

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

CSS

p{
    padding-left: 1em;
    text-indent: -1em;
    }

19. min-height

divなどの最低限表示する高さを指定。例えば最低500pxは表示させ、あとはコンテンツによってどんどん長くなる。。というdivに有効です。IE6ではmin-heightが動いてくれないので、下記のように指定すると動いてくれます。

サンプル

.minheight {
  min-height:500px;
  height:auto !important;
  height:500px;
}

20. 横並びブロックのマージンを調節

css overflow hidden

div内にある横並びブロックにマージンを、でも最初と最後のブロックをdivの幅に合わせる方法。何かと使う機会が多いです。

サンプル

HTML

<div>
    <ul>
             <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

div{
    width: 470px;
    border:2px solid #F33;
    }

   div ul {
             width: 480px;
             margin-right: -10px;
             overflow: hidden;
             _zoom: 1;
             }

             div ul li {
                          float: left;
                          margin-right: 10px;
                          }



参照サイト:

]]> http://www.webcreatorbox.com/tech/css-tips20/feed/ 40 CSSハック一覧 – IE, Firefox, Safariなどなど http://www.webcreatorbox.com/tech/css-hack-list/ http://www.webcreatorbox.com/tech/css-hack-list/#comments Thu, 18 Feb 2010 01:46:58 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=538 異なるブラウザーで見たらレイアウトが崩れる。。CSSハックはそんな時のお役立ち裏技（？）です。私がブックマークしているCSSハックに関するWebサイトがたくさんあったので（Safariがのってない・IE8しかのってない。。等の理由で）、自分用メモ。「こんなやり方もある！」というのがあればコメントして教えてください！


IT系、Web業界の求人に強い転職サイト【green】

Internet Explorer

IE6以下

#help_me { _color: blue; }

* html #help_me  { color: red; }

IE7

*:first-child+html #help_me { color: red; } 

*+html #help_me {  color: red; }

IE6, IE7

#help_me { /color: blue; }

IE8

#help_me { color: blue\9; }

IE7, IE8

#help_me { color/*\**/: blue\9; }

IE6以外

#help_me { color/**/: blue; }

IE6, IE7以外

html>/**/body #help_me { color: red; }

IE6〜IE8以外

:root *> #help_me { color: red;  }

モダンブラウザ

Firefox

#help_me,  x:-moz-any-link  { color: red; }

Firefox 3.0以上

#help_me,  x:-moz-any-link, x:default  { color: red; }

Safari 2-3

html[xmlns*=""] body:last-child #help_me { color: red; }

Safari 2 – 3.1

html[xmlns*=""]:root #help_me  { color: red; }

Safari 2 – 3.1, Opera 9.25

*|html[xmlns*=""] #help_me { color: red;  }

Safari 3以上, Chrome

@media screen and (-webkit-min-device-pixel-ratio:0) {
 #help_me  { color: red;  }
}

Safari 3以上, Chrome, Opera 9以上, Firefox 3.5以上

body:nth-of-type(1) #help_me { color: red; }

body:first-of-type #help_me {  color: red; }

Opera 9.25以上

;;body #help_me {  color: red; }

html:\66irst-child #help_me {  color: red; }

Opera 8, 9以外

body[class|="hypen-ated"] #help_me {  color: red; }

iPhone

iPhoneのみCSSを変える場合はiPhone用CSSを作成して読み込ませます。

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />

ブックマークしていたCSSハックのサイトの中にiPhone用ハックもありました。iPhone持ってないのでテストできませんが… 一応載せておきます。

/* iPhone / mobile webkit */
@media screen and (max-device-width: 480px) {
 #help_me { color: red;  }
}

これでたくさんありすぎてごちゃごちゃしていたブックマークが整理できる。。なるべくCSSハックを使わないですむようなデザインができれば一番いいんですけどね。

]]> http://www.webcreatorbox.com/tech/css-hack-list/feed/ 31 迷惑メールのこないEメールアドレス表示方法 http://www.webcreatorbox.com/tech/display-email-address-without-spam/ http://www.webcreatorbox.com/tech/display-email-address-without-spam/#comments Sun, 17 Jan 2010 23:55:59 +0000 Webクリエイターボックス http://www.webcreatorbox.com/?p=202 EメールアドレスをWebサイトに表示させたい。でも迷惑メールは受け取りたくない… 誰もが思っていることですよね。一般的にはEメールアドレスを画像にして公開しているWebサイトが多いと思います。画像以外に表示する方法はないかな？と思っていたところ、techblog.tilllate.comのSilvan Muhlemann氏がCSSを使った迷惑メール対策を紹介していました。その中からCSSを使ったすぐにでも実装できる簡単な方法を紹介します。


IT系、Web業界の求人に強い転職サイト【green】

2006年、Silvan氏はどの方法でEメールアドレスを表示すれば迷惑メールを受け取りにくいのかを調べるため、９つのEメールアドレスを作成し、それぞれ違う方法で表示して１年半の間Webサイト上に掲載してみました。送られたメールは21MB。

迷惑メール対策方法と、受け取った迷惑メールの数

CSSコードの表示方向を反転させる

表示結果

moc.etalllit@7raboofnavlis

コーディング

HTMLコーディング

<p>
    <span class="codedirection">
        moc.etalllit@7raboofnavlis
    </span>
</p>

CSSコーディング

span.codedirection {
    direction:rtl;
    unicode-bidi:bidi-override;
    }

CSS display:none; を使用する

表示結果

silvanfoobar8@nulltilllate.com

コーディング

HTMLコーディング

<p>
    silvanfoobar8@
    <span class="hide">null</span>
    tilllate.com
</p>

CSSコーディング

p span.hide { display:none; }

上記2つの表示方法だと１年半の間、迷惑メールを全く受け取らなかったようなので、迷惑メール対策に効果的ですね。ただし両方とも表示させるためだけのコードなので、実際にコピー・ペーストすると正しいEメールアドレスは表示されません。その他、迷惑メール対策に効果的な方法があれば是非是非コメントください！

参考Webサイト: techblog.tilllate.com

]]> http://www.webcreatorbox.com/tech/display-email-address-without-spam/feed/ 3