CSS（Cascading Style Sheets）とは、HTMLなどのマークアップ言語で書かれたWebページのレイアウトや装飾を行うスタイルシート言語のことです。CSSを使うことで、Webページを美しく見せるだけでなく、読みやすさやユーザビリティを高めることができます。
この記事では、CSSの基本構文や書き方など、初心者の方向けに分かりやすくご紹介させていただきます。
書き方・構文の基本
CSSでは、セレクタとプロパティと値を使ってスタイルを指定します。
- セレクタ：スタイルを適用する要素を指定する
- プロパティ：指定するスタイルの種類（フォント、色、余白など）を指定する。
- 値：プロパティの値を定義するために使用されます。
/* 基本構文 */
セレクタ{
プロパティ:値;
}
/* p要素を赤文字、16pxにする */
p{
color: red;
font-size: 16px;
}CSSでは、コメントを使用して、コードに注釈を付けることができます。コメントは、スタイルの定義や変更を説明するために使用されます。
CSSのコメントの書き方は、以下のようになります。
スタイルを指定する方法
CSSでスタイルを指定する方法には、インラインスタイル、内部スタイルシート、外部スタイルシートの3つがあります。
それぞれの違いや使い分けを説明します
インラインスタイル
インラインスタイルとは、HTML要素に直接スタイルを指定する方法です。
<p style="color: red;">赤い文字です。</p>他の要素には影響を与えませんが、大量の要素に対してスタイルを指定する場合は、HTMLコードが冗長になるため、使い勝手が悪いとされています。
内部スタイルシート
内部スタイルシートとは、HTMLファイル内にCSSコードを記述する方法です。head要素内にstyle要素を記述して、スタイルを指定することができます。
<head>
<style>
p {
color: red;
}
</style>
</head>
<body>
<p>赤い文字です。</p>
</body>インラインスタイルよりも使い勝手が良く、複数の要素に対して同じスタイルを指定する場合にも便利です。
外部スタイルシート
外部スタイルシートとは、CSSファイルを別ファイルとして用意し、HTMLファイルから読み込む方法です。
以下のように、link要素を使用してCSSファイルを読み込むことができます。
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<p>赤い文字です。</p>
</body>外部スタイルシートは複数のHTMLファイルから同じスタイルを共有できるため、再利用性が高く、メンテナンス性が良いとされています。また、キャッシュされるため、ページの読み込み速度を向上することができます。
基本的なスタイル（プロパティ）を適用する
テキストスタイル
テキストスタイルとは、文字の色や大きさ、フォントなどを指定するスタイルのことです。
テキストスタイルを指定するには、以下のようにCSSのプロパティと値を組み合わせて記述します。
p{
/* テキストの色を赤に指定 */
color: red;
/* フォントサイズを20pxに指定 */
font-size: 20px;
/* フォントを太文字に指定 */
font-weight: bold;
/* フォントファミリーをArialに指定 */
font-family: Arial, sans-serif;
}ボックススタイル
ボックススタイルとは、要素の背景色や枠線、余白などを指定するスタイルのことです。
ボックススタイルを指定するには、以下のようにCSSのプロパティと値を組み合わせて記述します。
div{
/* 背景色を黄色に指定 */
background-color: yellow;
/* 枠線を2pxの黒色の線に指定 */
border: 2px solid black;
/* 上下左右の余白を20pxに指定 */
padding: 20px;
/* 要素の外の余白を20pxに指定 */
margin: 20px;
}その他にもテキストスタイルやボックススタイルを指定するプロパティはたくさんあるので、調べて試してみてください。
カスケーディングと継承の仕組み
カスケーディングは、複数のCSSルールがある場合に、どのルールが優先されるかを決める仕組みです。
CSSのスタイル指定には、セレクタとプロパティの2つの要素がありますが、カスケーディングでは、セレクタが優先されます。より具体的なセレクタがある場合、そのスタイルが優先されます。また、同じセレクタの場合は、後に書かれたスタイルが優先されます。
/* より具体的にセレクタが優先される */
p{
color: red;
}
div p{
color: green;
}
/* 同じセレクタの場合には、後に書かれたスタイル（青）が適用 */
p{
color: red;
}
p{
color: blue;
}継承とは、ある要素に指定されたスタイルが、その要素の子要素にも自動的に適用される仕組みのことです。
例えば、body要素にフォントサイズを指定した場合、その子要素であるp要素にもフォントサイズが適用されます。ただし、継承されるのは、一部のプロパティに限られます。フォントサイズ、フォントカラー、テキストの太さ、行の高さなどが代表的な継承されるプロパティです。
CSSのレスポンシブデザイン
ウェブページが異なる端末やデバイスで見られる場合、それぞれのデバイスに最適な表示方法に調整する必要があります。この調整を行うために、レスポンシブデザインが使用されます。
レスポンシブデザインを使用することで、スマートフォン、タブレット、パソコンなどの異なる画面サイズや解像度に適応したウェブページを作成できます。
メディアクエリの使い方
メディアクエリは、特定の条件が真である場合にのみCSSを適用するためのテクニックです。たとえば、特定の画面幅以下の場合に、スタイルシートを適用することができます。
以下の例は、画面幅が800px以下の場合に適用されるスタイルシートの例です。
@media screen and (max-width: 800px) {
/* 800px以下の場合のスタイルシート */
}
アニメーションやトランジションを実装する方法
CSSでアニメーションとトランジションは、ウェブページに動きを付けるための方法です。
アニメーションとトランジションの違いは、アニメーションが要素を繰り返し動かすのに対して、トランジションは要素をスムーズに移動することです。
アニメーション
アニメーションは、キーフレームを定義して、要素がどのように動くかを指定します。キーフレームは、アニメーションの進行に沿って指定されたスタイルプロパティの値を変更する時間を指定します。アニメーションは、CSS3以降で使用できます。
以下の例では、div要素にmoveというキーフレームを定義し、アニメーションを適用しています。このアニメーションは、要素を右に100px移動し、元の位置に戻る動きを2秒間繰り返します。
/* 要素のキーフレームを定義 */
@keyframes move {
0% { transform: translateX(0px); }
50% { transform: translateX(100px); }
100% { transform: translateX(0px); }
}
/* 要素にアニメーションを適用 */
div {
animation: move 2s infinite;
}トランジッション
トランジションは、CSSの状態変化をスムーズに行うための方法で、hoverやclickといったイベントをトリガーにして状態変化を行います。トランジションは、CSS2以降で使用できます。
以下の例では、では、div要素に背景色のトランジションを適用しています。要素がhoverされると、背景色が1秒かけて青色に変化します。
/* 要素の初期状態 */
div {
background-color: red;
transition: background-color 1s;
}
/* 要素の状態変化 */
div:hover {
background-color: blue;
}まとめ
CSSは、静的なwebページを表示するうえで、HTMLと並び重要な言語となります。
今回のこの記事で紹介したCSSの基礎構文や書き方を参考に、HTMLファイルを装飾してみてください。
