[css]意外と知られていないかもしれない、cssの小技4つ[基礎的なこと]

意外と知られていない(かもしれない)cssの小技4つ

このところ、Vuetify や Firebase などの記事ばかり書いていましたので、

たまには、簡単な内容も書きたいな…、と言う事で。

今回は、基礎的なんですけど意外と知られていない(かもしれない)、 css の小技を書いていきたいと思います。
※ひとまず思いつくまま列挙する形式で書きます。整形はまた必要に応じて、行う可能性があります。

ほぼ確実に効く、最強の縦センタリング・横センタリング方法

・親要素に position: relative; を指定します。( width, height も持たせておきます )
・センタリングしたい子要素に position: absolute; を指定します。
・センタリングしたい子要素に top: 50%; を指定します。
・センタリングしたい子要素に left: 50%; を指定します。
ここが重要です。センタリングしたい子要素に transform: translate(-50%, -50%); を指定します。

これで、どんな要素でもほぼ確実に、
要素を親要素内の縦横中央の位置にレイアウトすることができます。
縦だけ中央配置したい場合は
transform: translateY(-50%);
を使えば大丈夫です。

縦センタリングは、 flexbox の align-items: center; で行なったりするのが楽ですが、
それが使えない場所などで、活躍してくれる方法です。

要素を画面の縦方向いっぱいに描画する方法

これは、メインビジュアルを必ずファーストビューいっぱいに
ぴったり描画したい場合などに役立ちます。
やりかたは簡単。

メインビジュアルを background 指定してある要素に、

height: 100vh;

これを指定してあげるだけです。
vh というのはその名の通り Viewport Height のことで、
100vhを指定すると、(正しいViewport指定が html の head 内にされていれば)
端末の縦方向の描画領域いっぱいに描画する、という意味と同義になります。

そのため、「メインビジュアルを必ずファーストビューいっぱいに
ぴったり描画したい場合
」等で役立つ、というわけです。

メインビジュアルを background 指定した要素には、
width の指定と、
background-size: cover; を指定するのをお忘れなく。

意外と忘れる、background のショートハンド

background: url(image.png) 0 0 / cover no-repeat;
↑この書き方で、
background-image
background-position
background-repeat
background-size
を包括します。
なぜあえてこれを書いたかというと、
background-position をショートハンドに含めて書けることを知らなかった」という話をたまに耳にするので、
同じようなケースがあればと思い、書いておきました。

モバイル対応では、値に vw を使うとあらゆるスマートフォンサイズにほぼ対応できる

これは、実際にご自身でやってみてほしいのですが、
もし案件で

iPhone X ではちゃんと見えるけど、
iPhone 8 Plus だとダメだよとか。改行されちゃって変なふうになるとか。

そういうとき、
px指定やrem指定ではなく、vw で値を指定してみてください。

vw というのはその名の通り Viewport Width、 つまり端末の Viewport を基にして描画してくれるので
これを使うと、スマートフォン上で、ほぼ意図したデザインが崩れることがありません。

世の中には、「px vw 変換」等のキーワードで検索すると、ありがたいことに
px値 → vw値変換の自動計算ツールを公開しているサイトが幾つもあります。

こういったスマートフォンサイト制作でのケースで困ったらぜひ、
vw値での指定を試してみるのが良いと思います。

この記事のまとめ

今回はとてもシンプルですが、実際にWebの制作現場でよく目にする
意外と知られていない(かもしれない)cssの小技について、思いつくまま書いてみました。

また何か小技を思い出したら、追記する可能性があります。

当サイトは、今後もWebデザイン、Web制作に関する記事を更新していきます。