CSS

スロットアプリの見た目は上のようになっています。一方、前回まで見てきたサンプルコードは下のようになります。

この違いは、CSSにあります。今回はCSSについて見ていきましょう。

CSS(Cascading Style Sheets)は、スタイルシート言語の一つです。スタイルシート言語とは、文書のスタイル(文字や段落の書式)を指定する言語です。オリジナルのスロットアプリは、HTML文書にCSSを指定することで、上のような見た目になっています。

HTMLにCSSを指定するには、いくつかの方法があります。「pタグ内の文字の色を赤に変えること」を例に、3つの方法を紹介します。

1. style属性

<p style="color: red;">

colorは文字の色を指定するプロパティ(CSSコード)です。プロパティとその値を、style属性の値としています。特定のタグにだけCSSを当てたい場合に有効です。

2. styleタグ

<head>
  <style>
    p {
      color: red;
    }
  </style>
</head>

headタグの中にstyleタグを置き、その中でCSSを指定します。コード量が少ない場合に適しています。

3. 外部ファイルを読みこむ

htmlファイルとは別にcssファイルを作り、そちらにCSSのコードを書く方法です。同じフォルダにあるstyle.cssを読みこむ場合は、下記のようになります。

<head>
  <link rel="stylesheet" href="style.css">
</head>
p {
  color: red;
}

headタグの中のlinkタグで、読みこむファイルを指定します。linkタグは他のファイルとの関係づけを行います。relは「relation(関係)」の略で、読みこむファイルがこの文書とどんな関係にあるのかを指定します。CSSの場合はstylesheetです。hrefは「hypertext reference」の略で、リンク先の場所を指定します。

コード量が多くなると、htmlファイルにCSSを記述するやり方は可読性・保守性が悪くなります。中規模以上のプロジェクトでは、別ファイルにCSSを書くようにしましょう。

ちなみに同じ要素に異なるCSSが指定された場合、よりタグに近い場所に書かれた指定が優先されます。つまり、「style属性 > styleタグ > 外部ファイル」となります。

次回は、スロットアプリのcssファイルを見ていきます。

コメント

タイトルとURLをコピーしました