目次
定番の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で折り返す場合
以下の3行を入れることで適応可能です。
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 */
}
というわけで、他に思いついたのがあれば、追加します。