CSS を使ってよくある問題を解決する

このページでは、CSS の一般的な問題を解決するのに役立つ質問と回答、MDN サイトで公開されている他の素材について扱っています。

ボックスのスタイル付け

要素にドロップシャドウを付けるには

ボックスに影を追加するには、box-shadow プロパティを使用します。このチュートリアルでは、その作業方法を説明し、例を示します。

画像を歪ませずに枠内に収めるには

縦横比の異なるボックスに画像を収める異なる方法が object-fit プロパティによって提供されており、その使用方法はこのチュートリアルで確認することができます。

ボックスを装飾するのに使える方法

CSS を使用してボックスをスタイル設定する際に有益な、さまざまなプロパティを紹介します。

要素を半透明にするには

opacity プロパティや、アルファチャンネルのついたカラー値を使うと実現できます。いつどちらを使うかについて確認しましょう。

ボックス装飾のレッスンとガイド

CSS とテキスト

テキストにドロップシャドウを付けるには

テキストに影を追加するには、text-shadow プロパティを使用します。このチュートリアルでは、その作業方法を説明し、例を示します。

段落の最初の行を強調するには

::first-line 擬似要素で段落の最初の行を対象とする方法を確認しましょう。

記事の最初の段落を強調するには

:first-child 擬似クラスで最初の段落を対象とする方法を確認しましょう。

見出しの直後に来た段落だけを強調するには

結合子は、文書内のどこにある要素を正確に対象とするのに役立ちます。このチュートリアルでは、見出しの直後に続く段落に対して CSS を適用する方法について説明します。

テキスト装飾のレッスンとガイド

CSS レイアウト

アイテムを中央揃えするには

ボックスの中にあるアイテムを水平方向と垂直方向にセンタリングするのは厄介なことでしたが、フレックスボックスなら簡単にできるようになりました。

レイアウトガイド

メモ: CSS レイアウトの問題解決に向けた料理帳があり、良くあるレイアウトのタスクの完全に動作する例と説明が付いています。また、実践的な位置指定の例では、位置指定を使用してタブ付きの情報ボックスやスライド式の隠しパネルを作成することができますので、調べてみてください。