100日後にエンジニアになるキミ - 14日目 - CSS - CSSの基礎1 #初心者

本日はCSSについてです。

HTMLからの続きになるので
そちらがまだの方はこちらをどうぞ

HTMLにの基礎1
HTMLにの基礎2
HTMLにの基礎3
HTMLにの基礎4

CSSとは

CSS（Cascading Style Sheets）
カスケード・スタイル・シートなどと呼び、ウェブページのスタイルを指定するための言語です。

HTMLなどで作成されるウェブページにスタイルを適用する場合には、
スタイルシート言語の1つであるCSSが一般的に利用されており
CSSは、HTMLと組み合わせて使用します。

HTMLがウェブページ内の各要素や情報構造を定義するのに対し
CSSではそれをどのように装飾するかを指定します。

例えば、色・サイズ・レイアウトなどの表示スタイルを指定することができます。

HTMLは情報構造を定義するための言語であるので
HTMLでは文書構造のみを定義して
スタイルについてはスタイルシートで指定することが推奨されています。

CSSを適用する

HTML内で文書にスタイルシートを適用するには以下の方法があります。

1.<link>要素で外部CSSファイルを呼び出して適用する
2.<style>要素で文書単位に適用する
3.要素にstyle属性を追加して局所的に適用する

外部CSSファイルを呼び出して適用する

スタイルシートを記述したCSSファイルをHTMLファイルとは別で用意して
HTML文書の中で呼び出して適応させる方法です。

先ずはCSSファイルを用意しましょう。

以下のソースコードを書いたファイルを用意します。

sample.css

p {color:red; }

sample.html

<html>
  <head>
    <link rel="stylesheet" type="text/css" href="sample.css">
  </head>
  <body>
    <p>こんにちは、今日は能天気ですね</p>
  </body>
</html>

ファイルは同じディレクトリに配置します。

デスクトップなどで行う場合は両方のファイルをデスクトップにおきます。

用意できたらブラウザーでHTMLを見てみましょう。

CSSファイルに書かれたスタイルは
p {color:red}
となっています。

意味は pタグの色を red にするという意味です。
ソースコードに間違いがなければ文字が赤色になるはずです。

こうしてCSSファイルを分離しておくと
デザインと文書構造を切り離すことができ、複数人で共同開発がおこえます。

style要素で文書単位に適用する

外部からCSSファイルを適応せず
直接HTMLの中にスタイルを書き込んでしまう方法です。

head要素にスタイルシートを書き込んでおきます。

スタイルシートの書き方は
<style type="text/css">スタイル</style>
となります。

sample2.html


<html>
  <head>
    <style type="text/css">
      <!--
      p {color:red; }
      -->
    </style>
  </head>
  <body>
    <p>またまた能天気</p>
  </body>
</html>

用意できたらブラウザーでHTMLを見てみましょう。

一人で開発する場合であればよく用いられる手法です。

ソースコード書く際にファイルを切り替えなくて済むので
こちらの方が楽な場合がありますが
ある程度慣れたら、CSSファイルに分離する方法も覚えておきましょう。

要素にstyle属性を追加して局所的に適用する

head要素にスタイルを書かずにタグの中で
直接スタイルを指定する方法です。

書き方は
<タグ style="スタイル">

sample3.html

<html>
  <head>
    <meta name="Content-Style-Type" content="text/css">
  </head>
  <body>
    <p style="color:red; ">能天気です!!</p>
  </body>
</html>

結果は

style属性によるスタイル指定は、部分的にスタイル指定する際などには便利ですが
HTMLソースが複雑になり管理が複雑になりがちです。

効率の良いスタイル管理を目指す場合には、 CSS部分を外部ファイル化しましょう。

CSSの書き方

CSSでスタイルを指定する際には、どの部分にどんなスタイルどんな感じで
適応させるのかを指定します。

CSSの各部分には名称がついており、基本的なCSSの書き方は
セレクタ {プロパティ名:値;}
となります。

セレクタ {プロパティ名:値;}の{から}で囲んだ部分を宣言ブロック（declaration block）
プロパティ名と値を:(コロン)で1つにした部分をスタイル宣言（declaration）と呼びます。

セレクタ(selector)

セレクタはCSSを適応させる対象のことです。

プロパティ(property)

プロパティは適応するスタイルの種類のことで、様々な種類があります。

例えば colorでは色を指定することができます。

値(value)

プロパティの値です。プロパティに対して様々な値が用意されています。

複数のスタイルを指定する

一つのセレクタにスタイルを複数指定したい場合は
1つのスタイルの宣言を;で区切ります。

p {color:red; line-height:15px;}

コメントの書き方

コメントは一時的にCSSを無効にしたり、CSSソース内にメモを残す際などに使用します。
/*から*/で囲んだ範囲はコメントとなります。
コメント部分はブラウザには無視されます。

コメントの例：

p {color:red; line-height:2;}    /*段落を赤くして行の高さを2倍にする*/
/*
コメントは複数行にすることも可能です。
*/

そのほか

大文字、小文字どちらでも区別しませんが
小文字に統一しておいた方が良いでしょう。

まとめ

一般的なCSSの使い方と書き方を押さえておこう。

明日は色々なスタイルについて学んでいきます。

君がエンジニアになるまであと86日

作者の情報

乙pyのHP：
http://www.otupy.net/

Youtube：
https://www.youtube.com/channel/UCaT7xpeq8n1G_HcJKKSOXMw

Twitter：
https://twitter.com/otupython