CSSの作法

May 06, 2020

概要

今回は、CSSの書き方を紹介します。前回のHTMLの内容を引き継ぐので、ちょっとだけ前回の復習から始めます。

HTMLの書き方（前回の復習）

HTMLでは、<body>の開始タグと終了タグの間に、Webページに表示したいものをタグ（こんなの-><ほにゃらら>）を配置していきます。タグは、そのほにゃららに入る文字列ごとに意味を持っています。例えば、次のような感じです。

この場合は、h1タグを用いています。h1タグは、題名をつけるのに使います。Resultのところを押してみたください。題名というにふさわしいぐらいには、文字が大きく表示されていると思います。

こんな感じでそれぞれ意味のあるタグを配置してHTMLを記述していきます。もっとタグの種類を知りたいという場合は、「HTML　タグ　一覧」とでもブラウザで検索してあげれば、山のように出てきます。

CSSとは

CSSは、Cascading Style Sheetsの略で、日本語に直訳すると、階層式スタイルシートの意味です。階層式とかそこらへんの意味はあんま気にしなくていいです。

CSSの役割は、ご存知かもしれませんが、HTMLを装飾することです。HTMLだけでは、ただの白黒の面白みのないページでしたが、CSSを用いることで、デコレーションをすることができます。映えです。

CSSを書き始めるまえに

どこに書くのか

CSSは、基本的には、HTMLと別のファイルを作ってそこに書いていきます。この時のCSSファイルは、.cssという拡張子（ファイルの種類を表すもの）を用います。ファイルには、style.cssだったり、hoge.cssだったり自由に名前をつけることができます。

要は、CSSを足したくなったら、HTMLファイルとは別に、なんとか.cssというファイル名のファイルを用意したらいいわけです。

ここで、style.cssというファイルを作りたいが、どこに作ればいいのかという問いが生まれます。この答えは、端的に言えば、どこでも良いです。しかし、初めのうちは、HTMLファイルと同じ階層のところに作るのがいいでしょう。

例えば、次のような感じです。
ポートフォリオを作るために、portfolioというフォルダを作りました。そのフォルダの中に、index.htmlというHTMLファイルを作り、自分のページのHTMLを書いていきました。ここで、CSSファイルを追加したくなった場合、HTMLファイルindex.htmlと同じ階層、つまり、index.htmlと横並びのところに作れば良いです。

portfolio
├── index.html
└── style.css

HTMLにCSSを繋ぐ

前の節で、index.htmlと同じ階層にあるstyle.cssというCSSファイルを作ることができました。ただし、これだけでは、style.cssに何を書いても、index.htmlには、何も反映されません。これは、index.htmlがstyle.cssを読み込んでいないからです。

読み込み方は簡単です。index.htmlの<head>開始タグと</head>終了タグの間で、次のようなものを記述します。

<link rel="stylesheet" type="text/css" href="./style.css">

これは、linkタグと呼ばれるものです。終了タグがないので気をつけてください。そのタグに三つの属性を記述します（属性は、前回のimgタグのところでも出てきましたね。タグについて色々と細かい設定をできるものです）。

  • rel属性：CSSファイルを読み込むときは、“stylesheet”と指定する
  • type属性：CSSファイルを読み込むときは、“text/css”と指定する
  • href属性：そのCSSファイルまでのパスを指定する。

つまり、rel属性と、type属性は上記のようにそのまま書けば良いです。問題は、href属性です。パス？何それってなると思いますが、今回のようにindex.htmlとstyle.cssが同じ階層にある場合は簡単です。「./」（ピリオド、スラッシュ）の後に、そのCSSファイルの名前を記述してください。例えば、そのCSSファイルの名前がhoge.cssであったら、`href=“./hoge.css”といった感じです。

index.html全体を見ると次のようになります。

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="./style.css">
    </head>
    <body>
        <h1>Welcome to the starlight parade</h1>
    </body>
<html>

小まとめ

以上のことをまとめると、次のような手順になります。

  1. HTMLファイルと同じ階層にCSSファイルを作る
  2. HTMLファイルのheadタグ内に、<link rel="stylesheet" type="text/css" href="./スタイルシート名">と記述する

これで、やっと、CSSを書くことができます。。ひと段落。。

CSSの書き方の大まかな流れ

では、本題のCSSを記述していきましょう。

CSSを書くときは、次のような手順を踏みます

  1. CSSで装飾したいHTML要素にクラス属性をつける
  2. そのクラス属性を目印にデコレーションしていく

一つ一つ説明していきます。

HTMLのタグにclass属性を追加する

class属性とはなんぞやという方が多数だと思いますが、実はこれの仲間的な奴は、前回のHTMLの説明のときに出ています。imgタグで用いるsrc属性やaタグで用いるhref属性です。これらは、全て”属性”です。

属性の特徴は、タグの中に書くということでした。例えば、次のような感じです。

<img src="https://pbs.twimg.com/profile_images/1250356114681516032/Q8PDW0ur_400x400.jpg">

<タグ名 属性名=“なんとか”>という形で、属性をその要素に足すことができます。class属性も同様の形をとります。

では、class属性とはなんなのか。
class属性とは、スタイリング（CSSを追加する）際の目印となるクラス名を指定するものです。例えば、次のような感じです。 

<p class="クラス名">WINC</p>

これで、HTMLのタグにクラス属性を追加することができました。クラス名には、自分の好きな文字列を入れてください。例えば、それがサークル名を表す要素であったら、class="circle_name"という感じに。

結局クラスってなんなのよ思う人がいるかもしれませんが、今の時点ではあまり気にしなくていいです。とにかく、CSSを追加したいときは、CSSを追加したいHTML要素にclass属性を追加し、任意のクラス名をつけてあげてください。

スタイルをつける

次にやることは、要素のスタイルをCSSで記述していくことです。習うより慣れろってことで、最初からコードをみていきます。

.circle_name{
    color: red;
}

circlenameというのは、前節でp要素につけたクラス名です。その前にピリオドがついて`.circlenameという形になっています。それで、その後に中カッコ{}`が使われていて、その中カッコの中に得体の知れない何かが記述されています。なんとなく、色が赤？ってことはわかると思います。とりあえず実行してみましょう↓

なんとびっくり！サークル名のWINCが赤色で表示されたではないですか！
もっと実験してみましょう。

二つのp要素を並べて、一つのみクラス名を指定してみました。結果、「WINC」という文字列のみ赤くなっています。つまり、

.circle_name{
    color: red;
}

というコードは、circle_nameというクラス名をもつHTMLの要素に対してのみ、その中カッコの中のCSSを反映させよという指示なわけです。このように指示してあげることによって、特定の要素に対してスタイルを適用させられます。

小まとめ

以上のことをまとめると、次のような手順となります。

  1. HTMLファイル内のスタイリングしたいタグに対して、class属性を用いてクラス名をつける
  2. .クラス名{うだうだ}という記法で、そのクラス名のついてる要素に対し、うだうだの内容のスタイルを適用させる

クラスを使いこなす

クラスを使いこなせば、いろいろなことができます。

それぞれの要素に別のクラス名をつける

それぞれの要素に別の名前をつけることによって、スタイルを要素ごとに変えることができます。

二つ以上の要素に同じクラス名をつける

同じクラス名を二つ以上の要素につけることもできます。これによって、複数の要素で同じスタイリングをしたいときに、まとめて行うことができるようになります。

一つの要素に複数のクラス名をつける

一つの要素に複数のクラス名をつけることができます。
できると言っても、複数のクラス名をつける感覚がないと難しいので、上記の二つのやり方に慣れてからでいいと思います。

プロパティとは

さて、ひとまず、スタイルを反映させることができました。ただ、まだ教えていないことがあります。中カッコ（これ→{}）の中身についてです。今まで誤魔化して、なんとなーーく放置していましたが、今こそこれに立ち向かうときです。

中カッコの中に書いていたのは、プロパティと呼ばれるものです。colorプロパティやbackground-colorプロパティなど様々なものがあり、それぞれに役割を持っています。これに値を設定することによって、スタイリングできます。記法は次のような感じです。

.クラス名{
    プロパティ名: 値;
    プロパティ名: 値;
}

「プロパティ名: 値」というペアの後にセミコロンがあるので注意してください。日本語でいう句点、英語でいうピリオドみたいなもので、これで文に終止符を撃ちます。

よく使うプロパティ

プロパティは、たくさんの種類があります。しかし、頻繁に用いるのはそう多くはありません（多いと感じる人もいるかも、わからん）。ここからは、そのうちの最も頻繁に用いるもののみをピックアップし紹介いたします。

実際には、全部覚え切るのではなくて、その都度用途にそってググるといいでしょう。「文字色を変える CSS」や「角を丸くする CSS」なんかと打つと、いくらでも解説が出てきます。

colorプロパティ

colorプロパティは、文字色を設定します。値には、色を指定します。
色の指定の仕方は、大きく分けると次の3つがあります。

  1. “red”, “green”など色の名前で指定する方法
  2. “#FFFFFF”, “#FF0021”など16進数で指定する方法
  3. transparentという特殊な指定

一つ目のやり方は、非常に単純明快です。主な色であったら、名前さえわかればこの方法を用いることができます。名前がわからなくとも、原色の名前は、原色大辞典で調べることができます。 二つ目のやり方は、少しわかりづらいです。細かく色を指定したいときに使います。
三つ目は特殊で、値にtrasparentを指定すると、文字色が透明になります。

background-colorプロパティ

background-colorプロパティは、背景色を指定します。値には、色を指定します。
colorプロパティと混同しやすいのでお気をつけを。

font-sizeプロパティ

font-sizeプロパティは、文字の大きさを指定します。値には、大きさを指定します。
大きさは、様々な方法で表すことができますが、ひとまずは、“px”（ピクセル）という単位を使いましょう。

また、このプロパティは多用しないほうがいいです。h1タグで書いているのに、pタグ並みに文字を小さくさせたりすることができてしまうからです。多用すると、怖ーーいことがおきますよ。

font-weightプロパティ

font-weightプロパティは、文字の太さを設定します。値には、文字の太さを指定します。
太さは、様々な方法で表すことができますが、とにかく太くしたいときは”bold”を指定しましょう。

font-familyプロパティ

font-familyプロパティは、Webページのフォントを指定します。値には、フォント名を指定します。これは、様々なものがあるので、ぜひWebで「css フォント」とでも調べてみてください。

text-alignプロパティ

text-alignプロパティは、行揃えを設定します。値には、“left”, “right”, “center”を指定することができ、それぞれ、左寄せ、右寄せ、中央よせとなります。Wordとかでもこういう機能ありますよね。

line-heightプロパティ

line-heightプロパティは、行間の高さを設定します。値には、数値を指定します。例えば、“2”を指定すると、行間は、文字列の高さの二倍となります。確か、このサイトの行間は、“1.7”だったかな。。

borderプロパティ

borderプロパティは、ボーダーを設定します。縁取りです。border: スタイル 幅 色という順番で指定します。スタイルは、基本的には、“solid”を使います。

まとめ

長々と説明したわけですが、要点は次のようにまとめられます。

  1. CSSを書くときは基本的にHTMLファイルと同階層にCSSファイルを作成する
  2. linkタグを使ってHTMLとCSSを繋ぐ
  3. CSSを追加したいHTMLの要素に、クラス名をつける
  4. CSSファイルで、特定の記法.クラス名{プロパティ名: 値;}を用いて記述していく

練習問題

以下の文章を出力例の画像のようにしてみましょう．

条件・補足

  • class属性を使いましょう．class名はCSSにあったものやHTMl要素の内容にあったものにすればなんでもOKです
  • このJSFiddle上で試しましょう
  • 使うプロパティは，color, background-color, font-size, border です
  • spanタグはそれ自身に特に意味はありませんが、囲んだ範囲をひとかたまりとして、スタイルを適用するためのHTMlタグです
  • 全部できたら色やデザインをオリジナルにしてみましょう
  • 答えはほんの一例です．質問したいことがあったらこの講義の担当者に聞きましょう

出力例

CSSの作法 出力例

答えの1例

まずは自分で試してから答えをみましょう． 答え

参考記事

CSSの第一歩