便利なスタイルシートのテクニック集

ども、@kimihom です。

f:id:cevid_cpp:20200605212202j:plain

簡単そうに見えて奥が深いのがスタイルシート。HTML5 でいろいろな CSS が追加されて、より柔軟に好みのスタイルを適用できるようになった。そこで本記事では私が特に便利だなと感じているスタイルシート記述をテクニック集としてまとめてみる。

text-overflow

ユーザーの文字入力数が多すぎて、内容を表示しきれないケースがある。その時に、文字を改行して表示させるのではなく、横幅に応じて超えた分を「....」で省略する方法がある。この方法のいいところは、横幅で表示できる限り文字を出して、限界を超えた時に初めて「...」を出すという点だ。強引にプログラムで「...」を追加するよりよっぽど綺麗にできる。

.content {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

<div class="content">長い文字を入力しています</div>

f:id:cevid_cpp:20200605204323p:plain

Flexbox

CSS をそれなりに使ってる方なら一度は聞いたことがあるだろう、「Flexbox」。ただ、私がこの Flexbox を使うケースは最小限に留めている。後で見返した時に Flexbox の種類が多すぎて訳がわからなくなるのが理由だ。ではどのケースで Flexbox を使うのかというと、左右にそれぞれ Div を置いて、左の Div を 200px にして、右は残りのレイアウト全部ってしたい時である。

f:id:cevid_cpp:20200605205131p:plain

float:left などで対応すると、上記水色の高さを超えた分の緑のエリアが、水色の下に行ってしまってうまく実現できない。Flexbox であれば、思った通りに上記レイアウトを実現できる。

.wrapper {
  display: flex;
  .left {
    width: 200px;
  }
  .main {
    width: 100%;
    flex: 1;
  }
}

その他の Flexbox 利用ケース

float: left と clearfix を使ったレイアウトだと、不要な padding が勝手に入ってしまって、その空白が問題になる時
特定のエリアのど真ん中に画像などを表示したいケース

calc

縦横の長さを px や % として表現すると思うが、それらを組み合わせて計算した横幅のサイズを指定することができる。スタイルシートの世界も数学だなと感じる瞬間だ。とりわけスクロールなしの高さ 100% なページを作る時に大活躍する。使いすぎると数字がなんのことだかわけわからなくなるので、大事な時にだけ使おう。

例えば、ヘッダは画像の高さ固定で表示されてて、その下は高さフルで画像を表示したいケースなどで使える。

.list {
  height: calc(100% - 42px);
}

vertical-align

画像やフォントアイコンの隣に文字を入れて、画像と文字の高さのバランスが微妙でなんとかしたい時がよくある。その対応として便利に使えるのが、vertical-align だ。

画像やフォントアイコンのスタイルシートに指定するだけで、よしなに位置を調整してくれる。いろいろな値の種類があるので、Chrome コンソールで最適なのを探してみよう。

f:id:cevid_cpp:20200605210328p:plain

box-sizing

CSS を書いていて "あるある" が、padding を入れた div 要素を width: 100% にすると、その分 width が 100% を超えてしまってスクロールが発生してしまうというケースだ。

ほとんどの人のイメージでは、 padding は width に含まれていると考えることだろう。まさに、それを実現してくれるのが、box-sizing である。

content-box =>padding, border を幅と高さに含めない（デフォルト） border-box => padding, border を幅と高さに含める

.wrapper {
  width: 100%;
  box-sizing: border-box;
}

こう書いておけば、wrapper が100%を超えて外にはみ出ることがなくなる。

input::invalid

HTML5 では、<input> に対して、HTML側でシンプルなバリデーションを提供してくれている。

required, minlength, maxlengthなど。もちろん、これらは簡単に修正されてしまうので、サーバー側での検証も必須ではあるが、手軽にUI側でのバリデーションとして実装できるので便利だ。

そして、CSS でこれらの検証が通っていない場合に、::invalid の擬似クラスが用意されている。例えば、必須要素を満たしていない場合に赤の枠線を表示したりすることができるわけである。

.invalid-form input:invalid {
  border: 1px solid #FF0000 !important;
}

ちなみに、required は最初何も入力されてなければ、いきなりこの CSS が適用されてしまうので、"送信"ボタンを押した時に初めてフォーム自体に invalid-formクラスを付与してあげるなどの工夫が必要だ。

終わりに

今回はメジャーではないけど、実際はよく使うスタイルシートのテクニックを紹介した。スタイルシートの発展のおかげで、想像通りの HTML を表現できるようになってきている。

私は、HTML, CSS, JavaScript の3つをプログラミングさせたら、速いスピードでイメージ通りに実現できる自信がある。これは、単に CSS や JavaScript の引き出しの多さでしかないと思っている。

でも、それも大事なプログラミングスキルの一つだ。最新テクノロジーばかりを追い続けるのではなく、HTML の基本に戻ってみるのもたまには学んでみてはいかがだろうか。

ボクココ

個人開発に関するテックブログ