Bootstrapなどのフレームワークは使用せずに、Webサイトを実装した際に学んだCSSの4つのテクニック

新しいプロジェクトをゼロから始めることは、どれくらい経験豊かであっても、新しいことが学べる素晴らしいチャンスです。Bootstrapなどの完成されたフレームワークは使用せずに、Webサイトを実装した際に学んだCSSのテクニックを紹介します。

4 CSS tricks I've learnt the hard way

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

• borderの注意点、box-shadowまたはbox-sizingで
• 要素にユーザーの注意を引き付ける
• 要素を水平および垂直の中央に配置する
• 要素を親要素に対して相対的に配置する

borderの注意点、box-shadowまたはbox-sizingで

今までに、borderを使用したことがきっとあるでしょう。borderについて知っておきたいことがあります。

borderはページのレイアウトにスペースを確保します。これは、ボーダー要素に余分な幅と高さが加えられることを意味します。

ポイント

• リストやグリッドのようなアプローチではレイアウトが複雑になることを避けるために、要素の幅と高さを手動で計算する必要があります。
• ホバー時にborderを加えると、レイアウト全体が移動します。これはパフォーマンスキラーです。

デモで、その挙動を確認できます。

1番目のdiv要素をホバーすると、2番目のdiv要素も移動することに気がつくでしょう。

回避策

• 「box-sizing:border-box;」を使用して、widthの値にborder-widthも含まれるようにします。
• 「box-shadow: /* ... */」を使用して、偽のボーダーを作成します。

デモで、その挙動を確認できます。
div要素をホバーしても、レイアウトは移動しません。

要素にユーザーの注意を引き付ける

ユーザーが特定のボタンをクリックするようにしたい場合は、ユーザーの注意を促すための戦略がいくつかあります。

その中から、私はシンプルでカスタマイズ可能なテクニックを共有したいと思います。

利点

• 要素の幅や高さに変化がないため、レイアウトは壊れません。
• 「animation: radial-pulse 1s infinite;」と一行追加するだけです。
• カラー・サイズ・持続時間を変えることができます。
• 簡単なテクニックですが、効果は抜群です。

要素を水平および垂直の中央に配置する

CSSで要素を水平および垂直の中央に配置する方法は、まだまだ進化しています。

中央に配置するにはたくさんの方法がありますが、私が日常的に使用する実装を紹介します。

• marginを使う方法

  子要素に「margin: auto;」を定義します。必要に応じて「text-align:center;」を加えます。

• flexboxを使う方法

  親要素に「display:flex;」「justify-content:center;」「align-items: center;」を定義します。

要素を上下の中央、左右の中央に配置する他の方法については、下記の記事をご覧ください。

• 要素を上下左右の中央に配置、最近主流になっている実装方法のまとめ

要素を親要素に対して相対的に配置する

このテクニックは、ドロップダウン、ツールチップ、ポップオーバーを実装するときに非常に便利です。

要件は、下記の通り。

• 親要素はstaticではない、position: relative | fixed | absolute のいずれか。
• 子要素はposition:absolute。

その上で、top | left | bottom | right で子要素を親要素に対して相対的に配置します。

子要素の矩形はクリック・ホバーで表示されるポップオーバーをイメージしています。下記のような感じです。

ポップオーバー