Design
Coding
Setting
CSSの書き方
03:45CSSの書き方
- CSSとは
- CSSの書き方について
CSSとは
 | CSSはCascading Style Sheetsといいます。 Webサイトの見た目をデザインするための言語です。 |
HTMLで作ったページの構造に対して、色、フォント、レイアウトなどを指定して、ページを美しく整えます。CSSを使うことで、同じHTML内容でも、異なるデザインを簡単に調整できます。
それでは、CSSについて学んでいきましょう。
CSSの書き方について
CSSには、スタイルを効率的に定義するための決まった記述方法（基本構文）があります。
この基本構文を理解することで、CSSを記述していきましょう。
CSSの基本構文
CSSは「セレクタ」と「宣言ブロック」から構成されます。
セレクタはスタイルを適用したいHTML要素を指定し、宣言ブロックは適用するスタイルを指定します。
以下が基本構文です。
セレクタの主な例
CSSのセレクタにはいくつか指定できる要素があります。
以下は基本的なCSSの例となります。
-
要素セレクタ
HTMLの要素を直接指定してスタイルを適用させる方法です。See the Pen 264_CSSの書き方_001 by Yugo Harima (@yh-dezadezi) on CodePen.
-
クラスセレクタ
特定のclass(クラス)に対してスタイルを適用させる方法です。（HTMLのクラス属性を使って要素を指定）
※classについていては「classとは」のステップで説明します。See the Pen 264_CSSの書き方_002 by Yugo Harima (@yh-dezadezi) on CodePen.
-
IDセレクタ
特定のIDに対してスタイルを適用させる方法です。（HTMLのID属性を使って要素を指定）
※同じIDの指定は1ページに1つが原則です。文法上のエラーとなります。See the Pen 264_CSSの書き方_003 by Yugo Harima (@yh-dezadezi) on CodePen.
CSSの適用方法
CSSをHTMLに適用する方法は3つあります。
-
インラインスタイル
HTML要素のstyle属性に直接記述する方法です。See the Pen 264_CSSの書き方_004 by Yugo Harima (@yh-dezadezi) on CodePen.
style属性は全てのタグに個別にスタイルを指定する必要があり、時間がかかるうえ、コードが読みにくくなるので入力ミスも増えやすいです。そのため、局所的なスタイル適用や学習のためにCSSの効果を簡単に試す場合に限定して使うと良いでしょう。 -
内部スタイルシート
<style>タグを使ってHTMLの<head>内に記述する方法です。See the Pen 264_CSSの書き方_005 by Yugo Harima (@yh-dezadezi) on CodePen.
内部スタイルシートは一つのHTMLファイルにしか適用されず、別のHTMLファイルで同じスタイルを使う場合は再度記述する必要があります。そのため、局所的なスタイル適用やCSSの効果を試す場合に限定して使用するのが便利です。 -
外部スタイルシート
CSSファイルを別に作成し、HTMLのタグで読み込み、スタイルを適用する方法です。
※外部スタイルシートの読み込みの方法は次のステップで説明します。See the Pen 264_CSSの書き方_006 by Yugo Harima (@yh-dezadezi) on CodePen.
外部スタイルシートは一般的に使われるCSSの適用方法です。
headタグが共通化されている場合、たった1行のタグを使ってCSSファイルを読み込むだけで、スタイルがHTML全体に適用されます。
この方法はCSSを独立したスタイルシートに記述することで、コードの整理や再利用が簡単で便利です。
以上が、「CSSの書き方」についての説明でした。
CSSはHTMLにスタイルを適用して、Webページを美しく、使いやすくするための重要なツールです。
基本的な書き方を覚えて、実際にコードを書いてみることで、より深く理解することができます。
次のステップで、「ブラウザで表示」について説明していきます。
CSSの基本
全 6 動画
