2017TipsCSSで「〇〇したい」とか「これどうするんだっけ...」というときに使えるものや地味だけど覚えておくと便利だと思う簡易的なスニペットを紹介します。以前であれば画像やJavaScriptを用いなければいけなかったものがCSSのみで表現できたり、上手く使えばよりシンプル且つ効率良く記述するのに役立つものもあるので、特にこれからCSSを学びたいという人や学び始めたばかりでもう少しレベルアップしたいという人は是非試してみてください。※以下で紹介するものは基本的にプレフィックスを省略しています。※デモが用意されていないものについては、自身で簡単な環境を作成して試してもらうか「CodePen」や「JSFiddle」などを利用して実際の動きを確認してください。@font-faceフォーマット以前であれば様々なブラウザに対応するために@font-faceには多くのフォーマットの記述が必要でしたが、現在は下記のような形でひと通りのブラウザでウェブフォントが使用できるようになります。モダンな指定を行う場合はwoff2とwoffのみでの指定が可能です。skew()を利用することで斜体にすることができます。9px;と指定しても10pxで表示されてしまいます。scale()を利用して縮小表示することでフォントサイズが10px以下の見栄えにすることができます。scale(.9);}ちなみに、この方法を用いたことによって表示位置が大きくずれてしまうようなときは、併せてtransform-originも指定して調整することで見栄えを整えることができます。scaleX()を使用して下記のように記述することで、テキストを長体や平体のような見栄えで表示させることができます。scaleX()の指定だけでとりあえず目的の見栄えにはなるのですが、そうすると長体にしたい場合に左右に大きく余白が空き、平体にしたい場合は本来表示したい領域を大きくはみ出してしまう見栄えになってしまうため、その対策としてwidthとtransform-originを併せて指定します。scaleX()と同じ値を記述)としておくと楽です。table;を利用して並べることが多かったですが、column-countを利用すればシンプルな記述で実装することができます。ひとつのp要素内にテキストが入っており、それを上のイメージのように3段組にしたい場合はCSSを下記のように記述します。20px;}これだけで簡単に段組表示され、さらにテキストも上手く流し込まれた形で表示されるようになります。使用する際はcolumn-countで任意のカラム数を指定し、カラム間の余白を調整したい場合はその下のcolumn-gapを任意のものに変更します。placeholderの見栄えを変更する・揃えるinput要素やtextarea要素にplaceholder属性を指定することで入力時のヒント的な内容を表示する際、デフォルトではその文字カラーはグレーになっています。それを任意のカラーに変更し且つ各ブラウザで同じ見栄えにしたい場合は下記のように記述します。#000;}注意点としてはplaceholder属性のスタイル指定はブラウザ毎に必要で、同じスタイルを指定する場合でもこのようにそれぞれ記述をする必要があります。Firefoxのplaceholder属性はデフォルトでopacityが指定されており、これによって他のブラウザと同じようにカラー指定をしているはずなのにFirefoxだけ見栄えが異なってしまいます。1;も指定して透過されないようにすることで他のブラウザと合わせた見栄えにできます。type="text"などにフォーカスした時点ではまだプレースホルダは表示されたままで、入力をしたタイミングでプレースホルダが消えるという挙動なのですが、これがIEだとフォーカスした時点でプレースホルダが消えるという挙動になります。IEの挙動を他のブラウザに合わせるとなるとJavaScriptを使うしかない(多分)のですが、逆に他のブラウザをIEの挙動に合わせるという場合はCSSのみで下記のように記述して実装できます。type="number"を使うとChromeやFirefoxでは入力欄の右にイメージのようにスピンボタンが表示されますが、これを非表示にしたい場合はCSSで下記のように記述します。特定のラジオボタンがチェックされたら(少し変更すればチェックボックスにも対応可)、その横に表示されているラベル(文字列)を目立たせる方法です。type="radio"とlabel要素が横並びにあるものを使用します。for="baz">baz</label>このようなHTMLでラジオボタンがチェックされたときにその横にあるlabel要素にスタイル指定したいときは、下記のように疑似クラスと隣接セレクタを組み合わせることで実装できます。textareaのスクロールバーを非表示(IE対策)textareaに表示されるスクロールバーは、ChromeやFirefoxでは表示領域以上の内容になったときにのみ表示されるのですが、IEでは未入力の状態であっても初期表示でスクロールバーが表示されてしまいます。これを他のブラウザと同様に表示領域内に収まる内容の場合はスクロールバーが非表示になるようにしたいときは、CSSで下記のように記述します。Snippetsに関しては下記ページにまとめているので、興味ある方はこちらもご覧ください。