自分用に、よく使うけど忘れやすいスタイルシートをリスト化してみました。
CSS は HTML で表現可能と考えられるデザインの大部分を実現できる要素を取り入れつつ、新たなデザイン機能を備える。
htmlなWebサイトをデザインする際には必須なのがこのCSSです。
いくつもサイトのコーディングをしていると、自分のCSSテンプレートを持っている人も多いと思います。
僕もよく使うものと忘れやすいスタイルシートを、自分用にリスト化してみました。
せっかくなのでシェア。全部で16のリストになっています。
こんなのも便利だし使えるよ！
というCSSがありましたら是非教えてください。
- リセット用CSSの設定
- bodyの設定
- ベースとなる箱の設定
- テキストリンクの設定
- 別窓リンクの設定
- 画像の透明度の設定
- 選択したテキストの見栄えを変える設定
- 自然改行しない時に、改行させる
- 画像のロールオーバーの設定
- 必要最低限の高さと幅の設定
- 背景画像の位置を指定
- リストを算用数字で表記
- 角丸(CSS3)
- テキストシャドウ(CSS3)
- ボックスシャドウ(CSS3)
- クリアフィックス
- 印刷用CSSの設定
リセット用CSS
ブラウザごとの差異をなくす。デフォルトのスタイルを揃えます。
body,div,dl,dt,dd,ol,ul,li,h1,h2,h3,h4,h5,h6,p,table,th,tr,td,pre,form,textarea,fieldset,input,select,address,iframe {margin:0; padding:0;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
img{vertical-align:bottom; line-hegiht:0;}
ol,ul{list-style:none;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,var{font-weight:normal; font-style:normal;}
caption,th{text-align:left;}
abbr,acronym{border:0;}
/* hタグのフォントサイズはサイトに合わせて好みで。 */
h2{font-size:130%;}
h3{font-size:120%;}
h4{font-size:110%;}
/* //hタグのフォントサイズはサイトに合わせて好みで。// */
/* //リセットはこんな感じ Reset// */
bodyの設定
bodyで背景やテキストのベースカラー・フォントスタイル等の設定。
/* body */
body{
background:#fff;
font:1.5/13px"メイリオ","ＭＳ Ｐゴシック","Osaka","Verdana",'Hiragino Kaku Gothic Pro','Lucida Grande',sans-serif;/* フォント一括指定 weight size/line-height sizeとfamilyの値は省略不可 */
color:#363636;
text-align:center;
}
ベースとなる箱の設定
サイトの全ての要素を入れる箱のようなもの。
※横幅が決まっている時。ブラウザの真ん中に配置。
#container{
text-align:left;
width:950px;
height:auto;
margin:0 auto;
}
テキストリンク
テキストリンクの色やホバー時、クリック済みなどテキストリンクのスタイルの設定。
a img{border:none; text-decoration:none;}/* リンクつき画像 */
a:link{color:#33f; text-decoration:none;}/* テキストリンク */
a:visited{color:#339; text-decoration:none;}/* リンク訪問(クリック)済み */
a:hover{color:#07c; text-decoration:underline;}/* テキストリンクホバー時 */
a:active{color:#33d;}/* テキストリンククリック時 */
a:focus{outline:none;}/* リンククリック時の点線を消す。Firefoxのみ */
/*- //リンク// -*/
別窓リンク
aタグにtarget=”_blank”がついている時、アイコンをつけたり別デザインに。ie非対応
a[target="_blank"] {
background: url(images/blank_link.gif) no-repeat right center; padding-right:10px;
}
/*- //別窓リンク// -*/
画像の透明度の設定
ロールオーバー時に画像を透明に。数字で透明度の指定。
a:hover img{
opacity: 0.5;
filter: alpha(opacity=50);
-ms-filter: "alpha( opacity=50 )";/* ie6 */
}
選択したテキストの見栄えを変える
テキスト選択時(コピペするような時)の、背景色と文字色の指定。 CSS3
*::-moz-selection{background:#000; color:#fff;}
*::selection{background:#000; color:#fff;}
自然改行しない時に、改行させる
ieでリスト要素が自然改行しないバグ時に、改行させる
ul li{white-space:nowrap;}
画像のロールオーバー
リンク付画像ボタンやグローバルナビをCSSで実装する時(テキストをブラウザ外へ飛ばして。
#btn1 a{
background:url(images/btn1.gif) no-repeat;
display:block;
overflow:hidden;
text-indent:-10000px;
height:50px;
width:100px;
}
#btn1 a:hover{background-position:0 -50px;/* -50px縦にずらす */}
必要最低限の高さと幅
要素に最低限必要な高さと幅の設定。
/* 要素に最低限必要な高さを指定。この場合60pxの高さを保証 */
.min-height{
height:auto !important; /* ie6 */
height:60px;
min-height:60px;
}
/* 要素に最低限必要な幅を指定できる。この場合60pxの幅を保証 */
.min-width{
width:auto !important; /* ie6 */
width:60px;
min-width:60px;
}
背景画像の位置を指定
paddingでももちろん指定できるけどうまくいかない時に。
.bg-position{/* 縦位置指定 */
background:url(images/icon.gif) no-repeat 0 1px;
}
.bg-position{/* 横位置指定 */
background:url(images/icon.gif) no-repeat 1px 0;
}
リストスタイルを算用数字で表記
ul li{
list-style:decimal;
}
角丸(CSS3)
ボックスの角を丸く。
/*IE8以前非対応 数字を変更で丸みが変わる */
.radius{
-moz-border-radius:3px;/* firefox */
-webkit-border-radius:3px;/* webkit 用*/
border-radius:3px;
border:1px solid #ddd;
}
/* 角丸(CSS3) 指定箇所のみ角丸に。 以下の場合は右下と左下のみ角丸 */
.bottom-radius{
border-right:solid 1px #ddd;
border-left:solid 1px #ddd;
border-bottom:solid 1px #ddd;
border-bottom-right-radius:5px;
border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-bottomleft:5px;
}
テキストシャドウ(CSS3)
文字のドロップシャドウのようなもの。 , で複数指定可能。
.text-shadow{
text-shadow: 1px 1px 3px #000;
/* 順番に横方向へのずれ 下方向へのずれ ぼかし具合 シャドウの色指定 */
}
ボックスシャドウ(CSS3)
文字ではなく ＜div＞ などのボックスにドロップシャドウのようなものをつけてデザインします。 , で複数指定可能
.box-shadow{
-moz-box-shadow: 1px 1px 3px #000; /* Firefox用 */
-webkit-box-shadow: 1px 1px 3px #000; /* Safari,Google Chrome用 */
/* 順番に横方向へのずれ 下方向へのずれ ぼかし具合 シャドウの色指定 */
}
クリアフィックス
floatを解除してくれる。枠や背景が消えたり、途中で切れたりした･･･。そんな困った時のクリアフィックス。
.clearfix:after{content: "."; display:block; clear:both; height:0; visibility:hidden;}
.clearfix{min-height:1px;}
.clear{clear:both;}
印刷用CSS
あまり使わないけど一応。印刷時に読みやすく不必要な箇所を消す。
@media print{
/* リンク先のURLを付与してあげる */
a:after{content: " ("attr(href)") "; font-size:10pt;}
a{color: #000; text-decoration:none;}
/* 印刷時に消しておきたい箇所を指定。, で複数指定ok */
#footer , #header{display:none;}
}
以上16コです。
他にも、便利だし使えるよ！
というCSSがありましたら是非教えてください。
CSS3の各ブラウザ対応状況は以下の表が参考になりそうです。
チェックしてみてください。
“[CSS]よく使うCSSをリスト化してみました。” への2件の返信
コメントは受け付けていません。