Staff Blog

はじめまして、デザインチームのMoritaです！
コーディングをメインにお仕事をしています。

ニックネームは「さかな」で、好きなものは「ゲーム」と「ミルクティー」。

■ ニックネーム
今では本名より呼ばれ慣れている気がしますw
結構お気に入りです。

■ ゲーム
基本的には友達とわいわいできるゲームをやっています。
PC、PS4、Switch、アナログゲーム…なんでもござれ。

■ ミルクティー
特に好きなのは「リプトン」のミルクティー。
ほぼ毎日飲んでます！

今回は、私がコーディングをする際によく使用するCSSをいくつかまとめてみました。

要素を横並びにするのに便利！「display: flex;」

本当に便利。これを知ってから大分作業効率が上がった気がする。
水平や垂直の揃え方を指定したり、子要素の順番を変えたりもできます。
ただ、IEでバグが発生する場合もある為、注意が必要です…
参照：https://www.webcreatorbox.com/tech/css-flexbox-cheat-sheet

paddingで親要素からはみ出る問題を解決！
「box-sizing: border-box;」

子要素にwidthとpaddingを指定すると、親要素の横幅を超えて配置される…という現象を解決するcssです。
もちろんheightにも対応してますし、borderにも対応！
よく見たら親要素からはみ出ているんですよねborder …
参照：https://phiary.me/css3-box-sizing/

高さが決まっていない要素を上下中央寄せに！
「transform: translateY(-50%);」

例えば、親要素に対して子要素であるテキストエリアを上下中央に配置したい場合、テキストエリアってheightを指定しづらいですよね、文字数によって高さ変わりますし…
そういった高さの決まっていない（変わる予定のある）要素を上下中央に配置してくれるcssです！
参照：https://coliss.com/articles/build-websites/operation/css/css-centering-vertically-and-horizontally.html

リストの特定の箇所を指定！「nth-child」

「○番目だけ色を変えたい」「最後の列はmarginをなしに」など、リストの特定の箇所を指定して、スタイルを変更する事ができます。
様々な指定の仕方ができるので、使える場面も様々です！
参照：https://iwb.jp/css-nth-child-howto-under-over/

値を指定する際に計算ができる！「calc()」

「width: calc(100% / 2);」とすれば親要素の半分の値になり、「width: calc(100% * 2);」とすれば親要素の倍の値になります。
ちょっとクセがありますが、使い所によっては大変便利なcssです！
参照：https://developer.mozilla.org/ja/docs/Web/CSS/calc()