知っていると便利なCSS

定番のcss

普段の仕事でよく利用するcssのメモをまとめておきました。
わりと定番から、定番だけど忘れやすいというコードも書きたいと思います。

clearfix – クリアフィックス

まずは基本のclearfixです。色んなやり方がありますが、これを長らく使っています。

.clearfix:after {
    content:".";
    height:0;
    clear:both;
    display:block;
    visibility:hidden;
}
.clearfix {
    zoom:100%;
}

画像置換

テキストを画像に変更する時は多いです。さくっと利用する時のコピペ用です。
displayはblockでもいいです。

.hoge {
    display: inline-block;
    *display: inline;
    *zoom:1;
    width: 100px;
    height: 100px;
    overflow: hidden;
    margin:0;
    padding:0;
    border: none;
    background: url(hoge.png) no-repeat;
    text-align: left;
    vertical-align: middle;
    text-indent: -9999px;
    *text-indent:0;
    *line-height: 9999px;
}

文字を…にするcss　文字数制限css

text-overflow: ellipsis;は　1行でのみ可能です。
スマホでよく利用します。

.extend-text-overflow {
     text-overflow: ellipsis;
     white-space: nowrap;
     overflow:hidden;
     width:100%;
}

placeholderの文字色を変更する

プレイスフォルダーの文字色を変更する場合、こちらのコードを入れます。
IEは適応していませんので、jsを利用することになります。

/*for Webkit*/
.commentForm input::-webkit-input-placeholder {
    color:    #aaa;
}
/*for Firefox*/
.commentForm input:-moz-placeholder {
    color:    #aaa;
}

IEでも適応させるには、ah-placeholder.js を利用します。

ローマ字を折り返す

これもよく利用します。
word-wrap:break-word;を入れればOKなのですが、tableで利用する場合は工夫が必要です。

tableで折り返す場合

以下の３行を入れることで適応可能です。

table {
	table-layout:fixed;
	word-break:break-all;
	word-wrap:break-word;
}

テーブルの時に英数字を折り返すcssの基本

ローマ字の折り返しも含めた、テーブルの基本的なソースです。

table{
	width:auto;
	border-spacing:0;
	border-collapse:separate;
	/border-collapse:collapse; /* ie6,7 */
	border-right:1px solid #333333;
	border-bottom:1px solid #333333;
	table-layout:fixed;
	word-break:break-all;
	word-wrap:break-word;
}
th, td{
	border-top:1px solid #333333;
	border-left:1px solid #333333;
	padding:5px;
}

border（padding）の数値を含ませる

borderやpaddingを使う時は、設定しておくことが多いです。ベンダープレフィックスを入れた形はこちら。

.hoge {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	    -ms-box-sizing: border-box;
	        box-sizing: border-box;
}

ロールオーバー（マウスオーバー）のボタン

画像をhoverで切り替える場合の基本の形。下にhoverした画像を敷いておく方法です。

.hoge{
          background: url(hoge_on.png) no-repeat;
          width:300px;
          height:80px;
          margin-bottom:20px;
}
.hoge a{
          background: url(hoge.png) no-repeat;
          width:300px;
          height:80px;
          display:block;
          text-indent:-9999px;
          overflow:hidden;
}
.hoge a:hover{
          background:none;
          width:300px;
          height:80px;
}

コンテンツが短いサイトのフッターの下に色を敷く場合

そんな案件をやるときは、htmlに文字を敷くのもありです。

html {
    background: #f6f6f6;
}
body {
    background: #fff;
}

スマホサイトで　タップの色を変更

たまーに利用します。基本はデフォルトでよいと思います。

a {
  color: #313131;
  -webkit-tap-highlight-color: rgba(140,140,140,0.4);
  text-decoration: none;
}

text-decoration:underline;が出ない場合は

コピペのコードではないですが、この前つまずいたところなので書いておきます。

line-height:1.0が指定されている場合が多いのでこれチェックです。
これ頭の片隅に入れておいてください。

IEハック

忘れやすいのでメモ。（もう使うことはないと思う）

.hoge {
    height: 34px; /* IE以外 */
    _height: 30px; /* IE6 */
    *height: 30px; /* IE7 */
    height: 30px\9; /* IE8 */
}
:root .hoge  {
   height: 36px \0/; /* IE9 */
}

というわけで、他に思いついたのがあれば、追加します。