CSS technique

シェアする

[Sponsored link]

img{border:0 none;}とかの書き方は有名ですが、ちょっと自分のメモのためにもCSSテクニック一覧を掲載します。

<画像の上にボタンを置くCSS>

★XHTML

<p><a href=”#”><img src=”image/001.gif” alt=”画像説明” width=”120″ height=”20″ /></a></p>

★CSS

.sample01    {
background: url(image/001.jpg) no-repeat;
width: 500px;
height:35px;
border: 1px solid #666;
text-align: right;
padding: 80px 7px 7px;
margin-bottom: 12px;
}

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

★XHTML

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

★CSS

ul .example02  {
_zoom: 1;
overflow: hidden;
}

ul .example02  li{
margin-top: -1px;
padding: 5px;
border-top: 1px dotted #999;
}

未稼働。確認中。

<画像の下に回り込みをしない>
★XHTML

<div>
<div class=”sample03″>
<p><img src=”image/003.jpg” alt=”サンプル画像” width=”150″ height=”100″ /></p>
<p>hogemogehogemogehogemoge<br />hogemogehogemogehogemoge<br />hogemogehogemogehogemoge<br />hogemogehogemogehogemoge<br />hogemogehogemogehogemoge<br />hogemogehogemogehogemoge<br />hogemogehogemogehogemoge<br />hogemogehogemogehogemoge<br /></p>
</div>

★CSS

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

が、特によく使われる要素でしょうか。
そして、一番は「overflow:hidden;」です!
本当はあまりダメですが、画像のこの部分だけってのを実現できたり、色々と便利な要素なので、是非とも♪

それと、やはり外せないのが「CSS sprite」ですね。

最後におまけで・・・

<select name=”都道府県”>
<option value=””>都道府県をお選びください。</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>
</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>
</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>

お疲れ、俺ー^^

この記事が気に入ったら
いいね ! しよう

Twitter で

フォローする