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

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

動作サンプル

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

選択して下さい ——– 選択肢01 選択肢02 選択肢03 選択肢04 選択肢05 ——– 選択肢06 選択肢07 選択肢08 選択肢09 選択肢10 ——– 選択肢11 選択肢12 選択肢13 選択肢14 選択肢15

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

西暦2009 2008 2007 2006 2005 2004 2003 2002 2001 2000 1999 1998 1997 1996 1995 1994 1993 1992 1991 1990 1989 1988 1987 1986 1985 1984 1983 1982 1981 1980 1979 1978 1977 1976 1975 1974 1973 1972 1971 1970 1969 1968 1967 1966 1965 1964 1963 1962 1961 1960 1959 1958 1957 1956 1955 1954 1953 1952 1951 1950 1949 1948 1947 1946 1945 1944 1943 1942 1941 1940 1939 1938 1937 1936 1935 1934 1933 1932 1931 1930 1929 1928 1927 1926 1925 1924 1923 1922 1921 1920 1919 1918 1917 1916 1915 1914 1913 1912 1911 1910 1909 1908 1907 1906 1905 1904 1903 1902 1901 1900 西暦／和暦
2009年／平成21年
2008年／平成20年 2007年／平成19年 2006年／平成18年 2005年／平成17年 2004年／平成16年 2003年／平成15年 2002年／平成14年 2001年／平成13年 2000年／平成12年 1999年／平成11年 1998年／平成10年 1997年／平成9年 1996年／平成8年 1995年／平成7年 1994年／平成6年 1993年／平成5年 1992年／平成4年 1991年／平成3年 1990年／平成2年 1989年／平成元年 1988年／昭和63年 1987年／昭和62年 1986年／昭和61年 1985年／昭和60年 1984年／昭和59年 1983年／昭和58年 1982年／昭和57年 1981年／昭和56年 1980年／昭和55年 1979年／昭和54年 1978年／昭和53年 1977年／昭和52年 1976年／昭和51年 1975年／昭和50年 1974年／昭和49年 1973年／昭和48年 1972年／昭和47年 1971年／昭和46年 1970年／昭和45年 1969年／昭和44年 1968年／昭和43年 1967年／昭和42年 1966年／昭和41年 1965年／昭和40年 1964年／昭和39年 1963年／昭和38年 1962年／昭和37年 1961年／昭和36年 1960年／昭和35年 月 1 2 3 4 5 6 7 8 9 10 11 12 日 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

都道府県

都道府県を選択 北海道 青森県 岩手県 秋田県 宮城県 山形県 福島県 東京都 神奈川県 埼玉県 千葉県 茨城県 栃木県 群馬県 新潟県 富山県 石川県 福井県 山梨県 長野県 岐阜県 静岡県 愛知県 三重県 滋賀県 京都府 大阪府 兵庫県 奈良県 和歌山県 鳥取県 島根県 岡山県 広島県 山口県 徳島県 香川県 愛媛県 高知県 福岡県 佐賀県 長崎県 熊本県 大分県 宮崎県 鹿児島県 沖縄県

ソースコード（一部）

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

<p>
<select>
<option value="" selected="selected">選択して下さい</option>
<option disabled="disabled" >--------</option>
<option value="選択肢01">選択肢01</option>
<option value="選択肢02">選択肢02</option>
<option value="選択肢03">選択肢03</option>
<option value="選択肢04">選択肢04</option>
<option value="選択肢05">選択肢05</option>
<option disabled="disabled" >--------</option>
<option value="選択肢06">選択肢06</option>
<option value="選択肢07">選択肢07</option>
<option value="選択肢08">選択肢08</option>
<option value="選択肢09">選択肢09</option>
<option value="選択肢10">選択肢10</option>
<option disabled="disabled" >--------</option>
<option value="選択肢11">選択肢11</option>
<option value="選択肢12">選択肢12</option>
<option value="選択肢13">選択肢13</option>
<option value="選択肢14">選択肢14</option>
<option value="選択肢15">選択肢15</option>
</select>

年号（西暦／和暦）

<select name="year2">
<option selected="selected" value="西暦／和暦">西暦／和暦</option>
<option value="2009年／平成21年">2009年／平成21年</option>
<option value="2008年／平成20年">2008年／平成20年</option>
<option value="2007年／平成19年">2007年／平成19年</option>
<option value="2006年／平成18年">2006年／平成18年</option>
<option value="2005年／平成17年">2005年／平成17年</option>
<option value="2004年／平成16年">2004年／平成16年</option>
<option value="2003年／平成15年">2003年／平成15年</option>
<option value="2002年／平成14年">2002年／平成14年</option>
<option value="2001年／平成13年">2001年／平成13年</option>
<option value="2000年／平成12年">2000年／平成12年</option>
<option value="1999年／平成11年">1999年／平成11年</option>
<option value="1998年／平成10年">1998年／平成10年</option>
<option value="1997年／平成9年">1997年／平成9年</option>
<option value="1996年／平成8年">1996年／平成8年</option>
<option value="1995年／平成7年">1995年／平成7年</option>
<option value="1994年／平成6年">1994年／平成6年</option>
<option value="1993年／平成5年">1993年／平成5年</option>
<option value="1992年／平成4年">1992年／平成4年</option>
<option value="1991年／平成3年">1991年／平成3年</option>
<option value="1990年／平成2年">1990年／平成2年</option>
<option value="1989年／平成元年">1989年／平成元年</option>
<option value="1988年／昭和63年">1988年／昭和63年</option>
<option value="1987年／昭和62年">1987年／昭和62年</option>
<option value="1986年／昭和61年">1986年／昭和61年</option>
<option value="1985年／昭和60年">1985年／昭和60年</option>
<option value="1984年／昭和59年">1984年／昭和59年</option>
<option value="1983年／昭和58年">1983年／昭和58年</option>
<option value="1982年／昭和57年">1982年／昭和57年</option>
<option value="1981年／昭和56年">1981年／昭和56年</option>
<option value="1980年／昭和55年">1980年／昭和55年</option>
<option value="1979年／昭和54年">1979年／昭和54年</option>
<option value="1978年／昭和53年">1978年／昭和53年</option>
<option value="1977年／昭和52年">1977年／昭和52年</option>
<option value="1976年／昭和51年">1976年／昭和51年</option>
<option value="1975年／昭和50年">1975年／昭和50年</option>
<option value="1974年／昭和49年">1974年／昭和49年</option>
<option value="1973年／昭和48年">1973年／昭和48年</option>
<option value="1972年／昭和47年">1972年／昭和47年</option>
<option value="1971年／昭和46年">1971年／昭和46年</option>
<option value="1970年／昭和45年">1970年／昭和45年</option>
<option value="1969年／昭和44年">1969年／昭和44年</option>
<option value="1968年／昭和43年">1968年／昭和43年</option>
<option value="1967年／昭和42年">1967年／昭和42年</option>
<option value="1966年／昭和41年">1966年／昭和41年</option>
<option value="1965年／昭和40年">1965年／昭和40年</option>
<option value="1964年／昭和39年">1964年／昭和39年</option>
<option value="1963年／昭和38年">1963年／昭和38年</option>
<option value="1962年／昭和37年">1962年／昭和37年</option>
<option value="1961年／昭和36年">1961年／昭和36年</option>
<option value="1960年／昭和35年">1960年／昭和35年</option>
</select>

都道府県

<select name="pref">
<option value="" selected="selected">都道府県を選択</option>
<optgroup label="北海道・東北">
<option value="北海道">北海道</option>
<option value="青森県">青森県</option>
<option value="岩手県">岩手県</option>
<option value="秋田県">秋田県</option>
<option value="宮城県">宮城県</option>
<option value="山形県">山形県</option>
<option value="福島県">福島県</option>
</optgroup>
<optgroup label="関東">
<option value="東京都">東京都</option>
<option value="神奈川県">神奈川県</option>
<option value="埼玉県">埼玉県</option>
<option value="千葉県">千葉県</option>
<option value="茨城県">茨城県</option>
<option value="栃木県">栃木県</option>
<option value="群馬県">群馬県</option>
</optgroup>
<optgroup label="甲信越・北陸">
<option value="新潟県">新潟県</option>
<option value="富山県">富山県</option>
<option value="石川県">石川県</option>
<option value="福井県">福井県</option>
<option value="山梨県">山梨県</option>
<option value="長野県">長野県</option>
</optgroup>
<optgroup label="東海">
<option value="岐阜県">岐阜県</option>
<option value="静岡県">静岡県</option>
<option value="愛知県">愛知県</option>
<option value="三重県">三重県</option>
</optgroup>
<optgroup label="近畿">
<option value="滋賀県">滋賀県</option>
<option value="京都府">京都府</option>
<option value="大阪府">大阪府</option>
<option value="兵庫県">兵庫県</option>
<option value="奈良県">奈良県</option>
<option value="和歌山県">和歌山県</option>
</optgroup>
<optgroup label="中国">
<option value="鳥取県">鳥取県</option>
<option value="島根県">島根県</option>
<option value="岡山県">岡山県</option>
<option value="広島県">広島県</option>
<option value="山口県">山口県</option>
</optgroup>
<optgroup label="四国">
<option value="徳島県">徳島県</option>
<option value="香川県">香川県</option>
<option value="愛媛県">愛媛県</option>
<option value="高知県">高知県</option>
</optgroup>
<optgroup label="九州・沖縄">
<option value="福岡県">福岡県</option>
<option value="佐賀県">佐賀県</option>
<option value="長崎県">長崎県</option>
<option value="熊本県">熊本県</option>
<option value="大分県">大分県</option>
<option value="宮崎県">宮崎県</option>
<option value="鹿児島県">鹿児島県</option>
<option value="沖縄県">沖縄県</option>
</optgroup>
</select>

ダウンロード

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

Posted in html
Tags: form, html, option, プルダウン

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

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%;
}

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

Posted in css
Tags: text-shadow

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

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

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

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

Posted in 未分類
Tags: Feed burner, RSS

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

ロールオーバーの手法は様々ありますが、画像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

<a href="#"><img src="img/btn.gif" alt="ホーム" width="174" height="50" /></a>

画像置換の場合

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

<p class="btn"><a href="index.html">ホーム</a></p>

Posted in 未分類
Tags: css, ロールオーバー

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

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

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

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

css

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

HTML

<span>月〜金</span>11:00〜16:00（ラストオーダー15:00）<br />
<span>土・日・祝</span>11:30〜22:00（ラストオーダー21:30）<br />

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

Posted in css
Tags: css