CSS Try and Clips

option要素のプルダウンメニューテンプレート［セパレーター・年号・都道府県］

kota — Tue, 17 Nov 2009 06:21:36 +0000

フォームで使用するoptionですが、年号など決まった形のものはテンプレートがあると便利です。選択できないセパレーター、西暦・和暦（平成／昭和）・月・日、都道府県のoption要素です。記事の最後には一式ダウンロードのファイルもリンクしています。

動作サンプル

選択できないセパレーター（リストを開いて罫線部分）

年号（西暦・和暦）と月日

都道府県

ソースコード（一部）

選択できないセパレーター

年号（西暦／和暦）

都道府県

ダウンロード

サンプルファイルをダウンロード

テキストに影をつけるtext-shadowプロパティ

kota — Tue, 18 Aug 2009 06:47:28 +0000

CSSのtext-shadowプロパティを使うと、簡単にテキストに影をつけることができます。
サポートブラウザはSafari、FF3.5、Operaなどです。IEには効かないので、モダンブラウザ用に“おまけ”として使用するのがいいかもしれません。IEの場合、filterを使用して実現が可能です。

基本的な使い方

text-shadowプロパティを使います。プロパティは左から “X座標・Y座標・ぼかし具合・色” となります。

h1 {
 color:#F30;
 text-shadow: 2px 2px 3px #999;
}

それでもIEで使いたい場合

IEの場合、filterを利用しますが、かなりクセがあるので要注意です。
まずwidthプロパティが必須です。autoやinheritは効きませんので、pxや%など、数値で入力する必要があります。さらに、color部分を3桁省略（例：#999など）ができません。
左から “色・X座標・Y座標・通常表示” となります。Positiveの値をfalseにすると影が反転します。
text-shadowと併用する場合はwidthを使わなければいけない関係でハックを使用した方がいいかもしれません。

h1 {
 color:#F30;
 filter: DropShadow(Color=#999999, OffX=2, OffY=2, Positive=true);
 width:100%;
}

サンプルファイルをダウンロード

RSS FeedのURLが変更になりました

kota — Wed, 08 Jul 2009 07:27:20 +0000

Feed Burnerに対応させたため、当ブログのRSSを今後下記に統一する予定です。

購読されている皆様、大変お手数ではございますが変更の程よろしくお願いします。

◎新しいRSS Feed
http://feeds.feedburner.com/cssclips

CSSのopacityプロパティで簡単に画像をロールオーバー

kota — Mon, 15 Jun 2009 11:08:22 +0000

ロールオーバーの手法は様々ありますが、画像1つで実現できるロールオーバー。細かい挙動は出来ませんが、軽く視覚変化を起こしたいときに有効です。

CSSのプロパティはopacityを使います。CSS3で勧告予定のプロパティですが、モダンブラウザでは実装されています。問題となるIEは独自拡張指定で対応。

IE
filter: alpha(opacity=透明度);
100＝100％相当。50％の場合は、50

Firefox・Netscape
-moz-opacity:.透明度;
1.0＝100％相当。50％の場合は、.50

Opera・Safari
opacity:透明度;
1.0＝100％相当。50％の場合は、.50

サンプルファイルをダウンロード

画像をimg要素で使用する場合

CSS

img {
border: none;
}
a:hover img {
filter: alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}

HTML

画像置換の場合

CSS

.btn a {
background: url(img/btn.gif) no-repeat;
display: block;
width: 174px;
height: 50px;
text-indent: -9999px;
}
.btn a:hover {
filter: alpha(opacity=80);
-moz-opacity: 0.80;
opacity: 0.80;
}

HTML

ホーム

複数行で、文字の空白と先頭を揃える

kota — Sun, 14 Jun 2009 02:02:24 +0000

どういう事かというと、下記のようなレイアウトの場合。

dl要素やtable要素でマークアップするのも良いですが、場合によりtableの中のtd内で上記のようなレイアウトを行いたいケースもあります。

floatなどでも実現できますが、あまりごってりしたソースにせず、スマートにやるにはinline-blockを使用します。

css

span {
display: inline-block;
width: 7em;
}

HTML

月〜金11:00〜16:00（ラストオーダー15:00）

土・日・祝11:30〜22:00（ラストオーダー21:30）

spanでマークアップした部分にinline-blockとwidthを当てます。
inline-blockはインライン要素でありながら、ブロック要素のように幅を付けたり出来ます。幅は、文字＋空き分をem指定で。

Unicodeで全角チルダと波ダッシュの文字化け対策

kota — Tue, 24 Mar 2009 05:28:16 +0000

web上でよく使う文字として、「〜」があります。たとえば日付の範囲表現（1/1〜1/10）だったり、語尾をのばす表現（お疲れ〜）だったり。

この「〜」ちょっとくせ者で、同じ「～」を入力していても、Winでは「全角チルダ(FF5E)」が表示され、Macでは「波ダッシュ(301C)」が表示されます。
OSによって表示される文字が変わってきます。

要件によっては、アプリケーションを複数連携したり、WinとMacで共同作業したり、UTF-8やShift_JISなどの文字コードを変換するケースも少なくありません。

ふとした原因で文字化けする場合があるので、”波ダッシュ”か”全角チルダ”か統一を意識して、混乱しないように実体参照で記述するといいかもしれません。

波ダッシュは化けるケースが多いので、全角チルダを使うと良さそうな気がします。

波ダッシュ「〜」

〜 (10進表記)
〜 (16進表記)

全角チルダ「～」

～ (10進表記)
～ (16進表記)

センタリグデザインの際、ブラウザの幅を変えると1pxずれる

kota — Wed, 24 Dec 2008 10:11:18 +0000

センタリングするデザインで、bodyに敷いた背景とcontainerなどの幅が、IEだと1pxずれて見えるケースがあります。いつも症状が出るわけではなく、ブラウザの幅を変えたときとかによく出ます。

原因としては、センター（ちょうど半分）という状態の場合、幅により1pxあまるのが原因のようです。100は半分に割れるけど、99だと整数では割りきれないような感じです。

これはハックで対応。

/* IE6 */
body {
	_padding-left: 1px;
}
/* IE7 */
*:first-child + html body {
	padding-left: 1px;
}

CSSのショートハンドの書き方

kota — Tue, 09 Dec 2008 05:12:03 +0000

CSSのプロパティではいくつか省略しての記述（ショートハンド）が認められています。その中で、margin(padding)・バックグラウンド・フォント・リストをご紹介します。

マージン記述（4点記述）

マージンの値を4つ記述します。左からtop・right・bottom・leftの順に適用されます。

#div {
margin : 0 5px 10px 15px;
}

マージン記述（3点記述）

マージンの値を3つ記述します。左からtop・right/left・bottomの順に適用されます。

#div {
margin : 10px 20px 0;
}

マージン記述（2点記述）

マージンの値を2つ記述します。左からtop/bottom・left/rightの順に適用されます。

#div {
margin : 0 auto;
}

マージン記述（1点記述）

マージンの値を1つ記述します。上下左右全方向に適用されます。

#div {
margin : 10px;
}

バックグラウンド記述

バックグラウンドをショートハンドで書くと、background-color・background-image・background-repeat・background-position（x座標／y座標）の順に適用になります。background-positionは、x座標はleft・center・right／yの部分はtop・center・bottomで指定できるほか、数値でも指定ができます。
数値で指定する場合は背景を指定する要素の左上から始まります。マイナスの値も認められます。ただし、数字と位置指定の組み合わせ（たとえば 10px center など）だと一部のブラウザで不具合が出る場合があります。

#div {
background : #CCC url(images/bg.gif) no-repeat 0 0;
}

フォント指定

フォントをショートハンドで書くと、font-style・font-weight・font-size/line-height・font-famillyにの順に適用されます。

#div {
font : italic bold 12px/1.5 Verdana, Arial, Helvetica;
}

Dreamweaver CS3でのショートハンド設定方法

Dreamweaverの初期設定ではショートハンドは適用されず、個別指定の長い形でCSSが設定されます。
ショートハンドに対応される方法…[編集]-[環境設定] (Windows) または [Dreamweaver]-[環境設定] (Macintosh) を選択して [環境設定] ダイアログボックスを表示し、[CSS スタイル] カテゴリで CSS 編集環境設定を変更します。

メニューリストを横並びさせてボーダーで区切る

kota — Thu, 20 Nov 2008 07:41:08 +0000

リスト要素をfloatで横並びにした際、「｜」などで区切るケースも多いと思います。ただし、テキストで｜を入れてしまうと不要なテキスト増えてしまい、HTMLを汚す原因にもなります。こんな時はborderプロパティを使用し実現します。

実現したいレイアウト↓。ポイントとしては、ホームの左側にはボーダーを表示させたくない。

リストの横並び

２種類のテクニックを紹介します。

Case1…liに左ボーダーを指定して、ulを左に-margin指定とはみ出す部分をdivのoverflowで隠す。

ulをdivで囲み、divにoverflow:hiddenを指定。ulをborder+padding分marginで左にマイナスする。結果、一番左のボーダーは見切れ状態にしてはみ出す部分はoverflow:hiddenで隠します。

Case2…liに左ボーダーを指定して、classを使って左のボーダーを消す。

とりあえずliは全部左のボーダーを付けます。最後にborderとpaddingが0のclassを作成し、一番左のliの線を打ち消します。

サンプルファイルをダウンロード

CSS

ul {
margin: 0;
padding: 0;
list-style: none;
}
ul li {
margin: 0;
padding: 0;
}

#navi {
overflow: hidden;
_height: 1.5em; /*IE6*/
}
#navi ul {
margin-left: -6px;
}
#navi ul li {
display: inline;
border-left: 1px solid #999;
padding: 0 5px;
}

ul#list li {
display: inline;
border-left: 1px solid #999;
padding: 0 5px;
}
ul#list li.noborder {
border-left: none;
padding-left: 0;
}

HTML Case1



ホーム
サイトマップ
お問い合わせ
プライバシーポリシー

HTML Case2


ホーム
サイトマップ
お問い合わせ
プライバシーポリシー

IABが定めるバナーのサイズと形状一覧

kota — Wed, 19 Nov 2008 01:40:31 +0000

webで利用するバナー、サイトのカラムサイズに合わせるのも一つの手ですが、IAB（Interactive Advertising Bureau）が定めるサイズも抑えておくべきポイントです。

レクタングル
名称	サイズ
ミディアムレクタングル	300×250
スクエアポップアップ	250×250
バーチャルレクタングル	240×400
ラージレクタングル	336×280
レクタングル	180×150
３：１レクタングル	300×100
ポップアンダー	720×300

バナーとボタン
名称	サイズ
フルバナー	468×60
ハーフバナー	234×60
ミクロバナー	88×31
ボタン１	120×90
ボタン２	120×60
バーチャルバナー	120×240
スクエアボタン	125×125
リーダーボード	728×90

スカイクレーパー
名称	サイズ
ワイドスカイクレーパー	160×600
スカイクレーパー	120×600
ハーフページアド	300×600

参考サイト：http://www.iab.net/iab_products_and_indutry_services/1421/1443/1452