CSS Snippets #6

CSS Snippets #6 目次

1. @font-faceフォーマット
2. テキストを無理やり斜体にする
3. フォントサイズを無理やり小さく（Chrome対策）
4. テキストを長体・平体で表示させる
5. column-countで簡単に段組表示を実装
6. placeholderの見栄えを変更する・揃える
7. placeholderの挙動をIEに合わせる
8. input type="number"のスピンボタンを非表示にする
9. チェックされたらラベルをハイライト表示
10. textareaのスクロールバーを非表示（IE対策）

1. @font-faceフォーマット

以前であれば様々なブラウザに対応するために@font-faceには多くのフォーマットの記述が必要でしたが、現在は下記のような形でひと通りのブラウザでウェブフォントが使用できるようになります。
また、よりモダンな指定を行う場合はwoff2とwoffのみでの指定が可能です。

CSS

@font-face {
  font-family: 'FontName';
  src: url('FontName.woff2') format('woff2'),
       url('FontName.woff') format('woff'),
       url('FontName.ttf') format('truetype');
}

目次へ

2. テキストを無理やり斜体にする

テキストをイタリック体や斜体にしたいとき、ほとんどの場合はfont-styleのitalicかobliqueを指定することで実装できますが、例えばメイリオを指定していて「IEやEdgeで適用されない！」などのように何らかの理由でそれでは対応できないときは、無理矢理な方法ではありますがtransform: skew()を利用することで斜体にすることができます。

CSS

element {
  transform: skew(-15deg);
}

目次へ

3. フォントサイズを無理やり小さく（Chrome対策）

CSSでfont-size: 9px;のように10px以下のフォントサイズ指定をしたとき、FirefoxやSafariなどであればそのまま指定通り9pxで表示されますが、Chromeの場合はブラウザ側で最小フォントサイズとして10pxがデフォルトで設定されているため、font-size: 9px;と指定しても10pxで表示されてしまいます。
最近だとここまで小さいフォント指定を行うことは稀なように思いますが、何らかの理由で10px以下の見栄えにしなければいけない場合は、下記のようにtransform: scale()を利用して縮小表示することでフォントサイズが10px以下の見栄えにすることができます。

CSS

element {
  font-size: 10px;
  transform: scale(.9);
}

ちなみに、この方法を用いたことによって表示位置が大きくずれてしまうようなときは、併せてtransform-originも指定して調整することで見栄えを整えることができます。

目次へ

4. テキストを長体・平体で表示させる

CSSのtransform: scaleX()を使用して下記のように記述することで、テキストを長体や平体のような見栄えで表示させることができます。

CSS

/* 長体 */
element {
  width: calc(100% / .8);
  transform: scaleX(.8);
  transform-origin: 0 0;
}

/* 平体 */
element {
  width: calc(100% / 1.2);
  transform: scaleX(1.2);
  transform-origin: 0 0;
}

transform: scaleX()の指定だけでとりあえず目的の見栄えにはなるのですが、そうすると長体にしたい場合に左右に大きく余白が空き、平体にしたい場合は本来表示したい領域を大きくはみ出してしまう見栄えになってしまうため、その対策としてwidthとtransform-originを併せて指定します。
widthは長体なら縮小されてしまっているのでその分だけ領域を広げ、平体なら拡大されてしまっているのでその分だけ領域を狭めるという感じで、指定の際にはこのサンプルコードのようにcalc()を利用してcalc(100% / x)（xの部分はtransform: scaleX()と同じ値を記述）としておくと楽です。

目次へ

5. column-countで簡単に段組表示を実装

以前であれば上のイメージのような段組表示を行いたい場合、複数の要素を用意してそれらをfloatとかdisplay: table;を利用して並べることが多かったですが、column-countを利用すればシンプルな記述で実装することができます。
例えばひとつのp要素内にテキストが入っており、それを上のイメージのように3段組にしたい場合はCSSを下記のように記述します。

CSS

p {
  column-count: 3;
  column-gap: 20px;
}

これだけで簡単に段組表示され、さらにテキストも上手く流し込まれた形で表示されるようになります。
使用する際はcolumn-countで任意のカラム数を指定し、カラム間の余白を調整したい場合はその下のcolumn-gapを任意のものに変更します。

目次へ

6. placeholderの見栄えを変更する・揃える

input要素やtextarea要素にplaceholder属性を指定することで入力時のヒント的な内容を表示する際、デフォルトではその文字カラーはグレーになっています。
それを任意のカラーに変更し且つ各ブラウザで同じ見栄えにしたい場合は下記のように記述します。

CSS

::-webkit-input-placeholder {
  color: #000;
}
::-moz-placeholder  {
  color: #000;
  opacity: 1;
}
:-ms-input-placeholder {
  color: #000;
}

注意点としてはplaceholder属性のスタイル指定はブラウザ毎に必要で、同じスタイルを指定する場合でもこのようにそれぞれ記述をする必要があります。
また、Firefoxのplaceholder属性はデフォルトでopacityが指定されており、これによって他のブラウザと同じようにカラー指定をしているはずなのにFirefoxだけ見栄えが異なってしまいます。
なので、しっかりと見栄えを揃えたい場合は任意のスタイルとは別にopacity: 1;も指定して透過されないようにすることで他のブラウザと合わせた見栄えにできます。

目次へ

7. placeholderの挙動をIEに合わせる

ChromeやFirefoxの場合はinput type="text"などにフォーカスした時点ではまだプレースホルダは表示されたままで、入力をしたタイミングでプレースホルダが消えるという挙動なのですが、これがIEだとフォーカスした時点でプレースホルダが消えるという挙動になります。
IEの挙動を他のブラウザに合わせるとなるとJavaScriptを使うしかない（多分）のですが、逆に他のブラウザをIEの挙動に合わせるという場合はCSSのみで下記のように記述して実装できます。

CSS

input:focus::-webkit-input-placeholder {
  color: transparent;
}
input:focus::-moz-placeholder {
  color: transparent;
}

目次へ

8. input type="number"のスピンボタンを非表示にする

input type="number"を使うとChromeやFirefoxでは入力欄の右にイメージのようにスピンボタンが表示されますが、これを非表示にしたい場合はCSSで下記のように記述します。

CSS

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}
input[type="number"] {
  -moz-appearance: textfield;
}

目次へ

9. チェックされたらラベルをハイライト表示

特定のラジオボタンがチェックされたら（少し変更すればチェックボックスにも対応可）、その横に表示されているラベル（文字列）を目立たせる方法です。
ここではサンプルとしてHTMLは下記のように単純input type="radio"とlabel要素が横並びにあるものを使用します。

HTML

<input type="radio" name="example" id="foo"><label for="foo">foo</label>
<input type="radio" name="example" id="bar"><label for="bar">bar</label>
<input type="radio" name="example" id="baz"><label for="baz">baz</label>

このようなHTMLでラジオボタンがチェックされたときにその横にあるlabel要素にスタイル指定したいときは、下記のように疑似クラスと隣接セレクタを組み合わせることで実装できます。

CSS

input[type="radio"]:checked + label {
  background: #3498db;
  color: #fff;
}

目次へ

10. textareaのスクロールバーを非表示（IE対策）

textareaに表示されるスクロールバーは、ChromeやFirefoxでは表示領域以上の内容になったときにのみ表示されるのですが、IEでは未入力の状態であっても初期表示でスクロールバーが表示されてしまいます。
これを他のブラウザと同様に表示領域内に収まる内容の場合はスクロールバーが非表示になるようにしたいときは、CSSで下記のように記述します。

CSS

textarea {
  overflow: auto;
}

目次へ