４：ロボットふくろうセレクタを使いこなす

ロボットふくろうセレクタとは、ある最初の要素の隣接要素すべてにあるプルパティを設定することができるパワフルなセレクタの総称です。

ロボットふくろう(Lobotomized Owl)とは、ユニバーサルセレクタ「＋」と兄弟セレクタ「＊」を使って「＊＋＊」というフクロウの顔のような形になることから、そう呼ばれているようです(実際は半角)。


a：ユニバーサルセレクタ1つの場合 b：ロボットふくろうセレクタの場合の処理 / 画像引用元：A List Apart

例えば、以下の例では、.wrap以下の要素の一番初め以外の要素に、margin-topを採用します。

＊ ＋ ＊{
　　margin-top: 1.5em;
}

(「＊」「＋」は実際には半角です)

たった数行でmarginを取ることができるので、かなり重宝するのではないでしょうか。

５：スマートフォンでフォーム入力時の自動拡大を防ぐ

スマートフォンでは、viewportで拡大を許可していない場合に、ページの横幅がぴったりだったとしても、フォーム入力時にテキストエリアなどのインプット要素をタップすると意図しない拡大が発生してしまう場合があります。

しかし、Input要素などにfont-sizeを指定すれば、ブラウザが勝手に拡大表示されるのを防ぐことができます。

input, select, textarea {
　　font-size: 16px;
}

ここでは、selectタグのドロップダウンリストでも拡大されてしまう恐れがあるため、テキストエリア以外の要素も加えています。

６：2枚の写真を透過合成する

ブログ記事のアイキャッチ画像や、画像にコピーライト表示をしたいときなどに便利なのが、Photoshopなどを使わずにCSS側で2枚の画像を合成するテクニックです。
-webkit-cross-fadeプロパティを使っていることからもわかるように、Webkit系のブラウザで作動します。

.mask-synth {
　　background: -webkit-cross-fade( url(pict1.png) ,url(pict2.png) , 50% );

background-size: cover;
}

100％に近づくにつれて、1枚目の画像の透過率が高くなります。

７：HTMLの改行タグをCSSだけで消す

WordPressなどのCMSソフトウェアを使っていると、意図しないところでBRタグ(改行)が挟み込まれてしまうことがあります。
段落中に不用意に挿入されたBRタグを一発で消すには、以下のコードで解決します。

p br {
　　display: none;
}

言われてみれば簡単な方法かもしれませんが、「その手があったか！」と思いつくまでに時間がかかりますよね。
ぜひ便利なスニペットのストックに取り入れてみてください。

まとめ

たった数行のシンプルなコードばかりですが、知っておくと非常に便利なコード*をご紹介しました。

実際のところ、CSSの実務レベルをあと少しだけ上げたいと思った時に、役に立つのは数行のコードというのはよくあることです。
ぜひこれらのTipsを活用して効率よくコーディングを行いましょう。