CSSの忘備録を作ろう

こんにちは、ミスターXです。

前回はSassの忘備録を作りましたので、今回はCSSの忘備録を作りましょう。


【1】スマホで画像保存を禁止するコード

jqueryを使って画像の上に透過GIFなどを乗せたりと色々な対応策はあるとは思うのですが、
一応いれておきましたよレベルでいい場合は下記を使います。

/* 画像保存禁止処理 */
section {
    -webkit-user-select:none;
    -khtml-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    -o-user-select:none;
    user-select:none;
    -webkit-user-drag:none;
    -khtml-user-drag:none;
    -webkit-touch-callout:none;
}


【2】スマホでリンクを無効にするコード

これはタブボタンなどのナビでよく使います。

例えばナビボタン全てにリンクを付けて、該当ページのボタンだけリンク無効にすれば
わざわざリンクを消したり、リンクをつけたりしなくていいのでリンクミスも減らせたりします。

※注意点として段階リリースなどでリリース前にページがサーバにUPされていて
リンク先のURLはわかっているけど、
まだ公開はしないでねという時には使わないようにしましょう。
ソース見たらリンク先わかっちゃいますからねｗ

/* リンク無効 */
a {
    pointer-events:none;
    cursor:default;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}


【3】文字は透過せず、背景のみを透過する

これはボックス内のテキストには透過を適用せず背景のみを透過する場合に使います。

あまり使用頻度は高くないですが念のためにｗ

/* 文字は透過せず、背景のみを透過する */
section {
    background-color:rgba(赤,緑,青,数値);
}


【4】透過する

これはロールオーバー画像がない場合によく使いますね。

/* 透過する */
a:hover img {
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    opacity:0.5;
}


【5】文字が横幅より長い場合・・・として表示する

最近ではあまり使われなくなってますが、
横幅を超えた長い文字は・・・で表示させたい場合に使います。

/* 省略符号「…」をつける */
p {
    width:横幅;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
    -webkit-text-overflow:ellipsis;
    -o-text-overflow:ellipsis;
}


【6】背景画像を複数重ねる

これは背景に複数の画像を使用したい場合に使います。

デザイン上どうしても背景を切り分けて複数してなくてはいけない場合に使うのですが
これもあまり使用頻度は高くないように思います。

※スマホで使用する場合は必ず背景の画像サイズは指定してあげましょう。

/* 背景を複数重ねる */
section {
    background-image:
    url(/img/top/pw_bottom.png),
    url(/img/top/pw_back.png);
    background-repeat:
    no-repeat,
    repeat-y;
    background-position:
    bottom left,
    top left;
    -webkit-background-size:100% auto;
    -moz-background-size:100% auto;
    -o-background-size:100% auto;
    -ms-background-size:100% auto;
    background-size:100% auto;
}


【7】パディングとボーダーを幅と高さに含める

これは指定した幅や高さの中にパディングとボーダーを含めて表示してくれます。

いちいち指定幅からパディングやボーダーの幅を引かなくてもいいので結構便利です。

Xはスマホでボックスにボーダーを使う場合には必ずいれています。

これを指定しておけば予期せぬブラウザの横ズレや段落ちなどをあらかじめ回避できたりします。

※この指定を後入れすると逆にレイアウトが崩れたりしますので注意です。

/* パディングとボーダーを幅と高さに含める */
section {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -o-box-sizing:border-box;
    box-sizing:border-box;
    border:solid 1px #ccc;
}


【8】ボックスの横並び

ボックスの横並び方法は色々あると思うのですが
スマホのページャーなどでよく使ってました。

ページャーはクライアントやディレクターによってはトリッキーな要求があったりしますので
下記を基本にして要求に合うようにコードを追加したりします。

※ページャーに関しては開発側で動的に表示させたりするので
コーディング前にデザインを基にして開発側と認識のすり合わせを行いましょう。

/* ボックスの横並び */
ul {
    display:-webkit-box;
    display:-moz-box;
    display:-ms-box;
    display:-o-box;
    display:box;
    width:100%; /* firefoxで横幅を広げる指定 */
}

li {
    width:100%;
    -webkit-box-flex:1;
    -moz-box-flex:1;
    -o-box-flex:1;
    -ms-box-flex:1;
    box-flex:1;
}


【9】角丸とボックスシャドウ

下記は角丸にボックスシャドウを指定した場合です。

昔のAndroid端末で角丸を使うとシャギー(ギザギザ）が出たりするので
ボックスシャドウと併用してシャギーが目立たないように調整したりします。

/* 角丸 */
section {
    -webkit-border-radius:10px 10px 10px 10px;
    -moz-border-radius:10px 10px 10px 10px;
    -ms-border-radius:10px 10px 10px 10px;
    -o-border-radius:10px 10px 10px 10px;
    border-radius:10px 10px 10px 10px;
    -webkit-box-shadow:#6e5525 0px 0px 2px 0;
    -moz-box-shadow:#6e5525 0px 0px 2px 0; /* color, h-offset, v-offset, blur, spread */
    -ms-box-shadow:#6e5525 0px 0px 2px 0; /* color, h-offset, v-offset, blur, spread */
    -o-box-shadow:#6e5525 0px 0px 2px 0; /* color, h-offset, v-offset, blur, spread */
    box-shadow:#6e5525 0px 0px 2px 0; /* is optional */
}


どうでしたでしょうか？
上記のように自分が過去にコーディングしたコードを忘備録として残しておいて、
いつでも使えるようにまとめておけばコピペして足りないコードを足したりすれば
作業時間が短縮できたりしますのでSassの忘備録と合わせて用意しておけば
意外と便利に使えるのではないでしょうか。



次回は「Photoshopのスライスを使わない書き出し方」です。






ブログ王ランキングに参加中！