もじゃもじゃラボ/CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識
HTMLCSSJavaScriptJava
HTMLCSSJavaScriptJava

CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識

CSSデザインの基礎を学ぼう！Webデザインに最低限必要な知識
JavaScriptでプログラミングの基本的概念を学ぼう！
Webページに動きをつけるプログラミングを学ぼう！
ライン公式アカウント
オンラインレッスンのお得なクーポン配信しています！
 
このチャプターの目次

CSS とは?

CSSとは「Cascading Style Sheet」の略で、Webページのスタイルシート言語です。

スタイルシート言語とは？

HTMLのような構造化文書の見た目を指定する言語で、見栄えと構造を分離するという目的で提唱されました。

CSSとは？

HTMLをどのように装飾するかを指定するものです。

CSSの書式

CSSの構造

  1. セレクタ
      2. ページ内のどの要素にスタイルを適用するかを特定するもの。
  1. 宣言
      • プロパティ
          • スタイルの種類（色や大きさなど）のこと。
      • 値
          • スタイルの設定値のこと。プロパティ毎に任意の値を設定することができる。
HTMLのページの中の、どこに対して、何を、どのようにするかを指定します。 プロパティは、既に用意されているものの中から選んで記述します。値は、何色にするとかサイズをいくつにするなどを指定します。決まっているものの中から選ぶ場合と、具体的な値を指定するものがあります。

CSSの記述ルール

  • セレクタに続く{ }部分を宣言ブロックという。
  • 宣言ブロックの中に「プロパティ:値」の形式で宣言を指定する。
  • 宣言の終わりにはセミコロン（;）を指定する。複数の宣言を記述することもできる。
1つのブロックの中には宣言を複数書くことが可能です。いくつかのスタイルを組み合わせて見た目を整えていきます。

CSS の適用方法

CSSの適用方法にはいくつか種類があります。以下に適用方法の種類と実装方法を記載します。
  • 要素内スタイルシート(インライン型)
      • HTML要素の開始タグのstyle属性の中にスタイルの宣言を書いていきます。
      値に宣言の部分だけが書かれているような状態になります。これにより、スタイルを適用する要素がこの要素だけに限定されますので、セレクタは不要です。
  • ページ内スタイルシート(埋め込み型)
      • styleタグを使います。開始タグと終了タグの間にスタイルシートを記述し、head要素内に配置します。そのページ内のセレクタに該当する部分全てにスタイルが適用されます。
  • 外部スタイルシート（外部リンク型）
      • スタイルの部分をhtmlファイルの中ではなく、別のファイルとして保存します。拡張子は.cssになります。
      htmlファイルの方からは、このファイルを関連付けるためにタグで記述します。linkというタグを使います。
      href属性に外部スタイルシートのファイル名を記述します。rel属性にはそのファイルがスタイルシートであることを明示します。
外部スタイルシートを使用すると、1つのCSSファイルを複数のHTMLに読み込むことができます。また、どのHTMLドキュメントも同じような文書構造であれば、統一感を与えることができます。通常、構造と見た目を分離する観点からも、外部スタイルシート形式で実装することが一般的です。

適用方法と適用範囲

適用方法CSSの記述場所適用範囲
要素内スタイルシート（インライン型）style属性属性を指定したその要素のみ
ページ内スタイルシート（埋め込み型）style要素そのページ全体
外部スタイルシート（外部リンク型）外部ファイル複数ページ