初心者のためのHTML・CSS入門講座【CSS編】

前回のHTML編に続き、今回はCSS編です。

もしHTMLが全く分からないという人は先にHTML編をご覧ください。

初心者のためのHTML・CSS入門講座【HTML編】

CSSとは?

CSS(Cascading Style Sheets、カスケーディング・スタイル・シート)というのは、HTMLで組まれたWebページを装飾するための言語です。

HTMLだけだと、下方向に要素が積まれていくだけです。

要素を見やすくレイアウトしたり、色やサイズを変えたりと様々な装飾をCSSで施すことができます。

現在使用されているのはCSS3というバージョン(レベル)です。それまでJavaScriptで表現していたアニメーションを手軽に使えるなど、CSS3で一気に便利になりました。

CSSの書き方の基本

まずは、CSSの基本から解説していきます。

慣れている人にとっては当たり前のようなことから説明していきますのでご了承ください。

まず、どのHTML要素にCSSを適用させたいかを書きます。

body

そして、CSSの中身は括弧で囲みます。

body{}

例えば、フォントサイズを指定したい場合は、font-sizeで指定します。

今回は、bodyにフォントサイズを指定してみます。

body{font-size:16px;}

このままでは括弧の中が増えると読みにくくなるので、改行・スペース・インデントを入れて読みやすくします。

body {
  font-size: 16px;
}

bodyの部分をセレクタ、font-sizeの部分をプロパティ、16pxの部分を値と呼びます。

指定するプロパティは以下のように追加していきます。

body {
  font-size: 16px;
  background-color: #f9f9f9;
}

各行の最後にはセミコロン(;)をつけますが、最後の行は省略しても大丈夫です。

ただし、セミコロンのつけ忘れの原因になるので、最後の行にもつけるのが一般的です。

CSSの基本的な決まり

基本的には全て半角英数で書きます。スペースが全角でもエラーになるので気をつけましょう。

クラス名の指定やクォーテーション(”、’)で囲まれた部分に日本語や全角英数字を使うことはできます。

とはいえクラス名を日本語や全角英数字にすることはほとんどありません。

CSSを書く場所

CSSを書く場所は大きく分けて3つあります。

別ファイルにして読み込む

最もメジャーな方法です。見やすくて管理もしやすいので、ほとんどの人が別ファイルにしてHTMLのコードで読み込んでいます。

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

.cssという拡張子で保存して、それをlinkタグで読み込みます。rel属性とhref属性は必須です。

HTML内に直接記述する

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <title></title>
</head>
<body>
<style>
body {
 font-size: 16px;
}
</style>
</body>
</html> 

このように、HTML内に直接記述することができます。

こういう方法を「インラインで記述する」という言い方をします。

HTMLのタグに記述する

以下のように、HTMLタグのstyle属性を使って直接していすることもできます。

直接指定すると見づらいのと管理がしづらいというデメリットがあります。

特別な理由がない限りこの方法では記述しません。

<p style="font-size:14px;"></p>

 

最近ではインラインも増えている

一般的なのはCSSファイルで管理する方法ですが、読み込み速度を速くするためにインラインで記述する人もチラホラみかけます。

私もサイトによってはインラインで記述しています。

とはいえ、管理しづらいのであまりお勧めはしません。まずはCSSファイルを読み込む方法で覚えましょう。

CSSを使ってみよう

それでは実際にCSSを試してみましょう。

フォルダを作成

まず初めに、フォルダとファイルを作っていきます。

任意の場所に「sample」フォルダを作って下さい。とりあえずデスクトップで大丈夫です。

 

HTMLファイルを作る

お次にテキストエディタを開いて下さい。

前回のHTML編ではVisual Studio Codeをおすすめしましたが、他に好きなエディタがあるならそれで大丈夫です。

ちなみに私はSublime Textを使っています。

テキストエディタを開いたら、以下の記述をして下さい。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>CSSのテスト</title>
</head>
<body>
 <p>テスト</p>
</body>
</html>

 

これを先ほど作成したフォルダの中に「index.html」という名前で保存して下さい。

保存できたら、それをブラウザで開いて下さい。ブラウザにこだわりがないのであれば、Google Chromeを使って下さい。

ファイルを右クリックして「このアプリケーションで開く」からブラウザを選択して開くか、ブラウザに直接ドロップして下さい。

CSSファイルの作成

次に、CSSのコードを書いていきます。

テキストエディタで新規作成をして、以下のコードを書いて下さい。

@charset "UTF-8";

最初の行で文字コードを指定します。フォント名などで日本語を書くことがありますので。

@charset "UTF-8";

body {
  background-color: #eee;
}

ここまで書けたら、「style.css」という名前で先ほど作ったフォルダに保存して下さい。

このままではまだ反映されません。HTML側でCSSファイルを読み込む設定をする必要があります。

CSSファイルの読み込み方

それではCSSの読み込み方です。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>CSSのテスト</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <p>テスト</p>
</body>
</html>

上記のように、head内に一行書き足します。

<link rel="stylesheet" href="style.css">

追加したらindex.htmlファイルを保存して、ブラウザをリロードして下さい。

これで背景の色がグレーになりました。

ついでに文字の色も変えてみましょう。

@charset "UTF-8";

body {
  background-color: #eee;
}
p {
  color: #ff0000;
}

これで文字色が変わったと思います。

色の指定には、カラーコードを使います。

以下のサイトでカラーコードを調べることができます。いちいち覚える必要はありません。

https://www.color-sample.com/

コメントアウトの書き方

以下のような記述はブラウザから認識されず無視されます。

/* コメント */
@charset "UTF-8";

/* スタイルの定義 */
body {
  background-color: #eee;
}
p {
  color: #ff0000;
}

このようにコメントを書いたり、

@charset "UTF-8";

body {
  background-color: #eee;
}
p {
  /* color: #ff0000; */
}

いったん認識されないように使ったりします。

クラスを指定してみよう

実際には、bodyやpなど要素を直接指定するのは最小限に抑えるのが一般的です。

一部の文字色を変えたいのに、全部の文字色が変わってしまうからです。

ですので、HTMLのタグにクラス名を指定して、それにスタイルを定義しましょう。

 

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>CSSのテスト</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <p>テスト</p>
 <p class="caution">注意!</p>
</body>
</html>

「注意!」と書かれたpタグに、「caution」というクラス名を指定しました。

属性と値の指定の仕方は前回やりましたね。

このクラス名を付与した場所に文字色を反映させてみましょう。

@charset "UTF-8";

body {
  background-color: #eee;
}
.caution {
  color: #ff0000;
}

セレクタを「p」から「.caution」に変更しました。クラス名の前にドット(.)を入れて指定します。

これで保存してみて下さい。

「注意」と書かれた部分だけの文字色が変化しました。

idを指定してみよう

classとは別に、idというのもあります。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>CSSのテスト</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <h1 id="page-title">サンプルサイト</h1>
 <p>テスト</p>
 <p class="caution">注意!</p>
</body>
</html>

 

page-titleというidをつけたh1要素を追加しました。

@charset "UTF-8";

body {
  background-color: #eee;
}
#page-title {
  color: #a92348;
}
.caution {
  color: #ff0000;
}

セレクタにidを指定する場合は、(#)を先頭に付けます。

これで色が変わりました。

idとclassの違い

idとclassは使いどころが異なります。

同じページの中に、同じ名前のid名があってはいけません。

一方、クラス名は同じページ内に何度でも使えます。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>CSSのテスト</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <!-- page-titleというid名をこれ以上増やしてはいけない -->
 <h1 id="page-title">サンプルサイト</h1>
 <p>テスト</p>
 <!-- 同じクラス名は何回出てきても大丈夫 -->
 <p class="caution">注意!</p>
 <p class="caution">注意!</p>
</body>
</html>

また、同じタグにidは一つしか指定できませんが、classは複数指定することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
 <meta charset="utf-8">
 <title>CSSのテスト</title>
 <link rel="stylesheet" href="style.css">
</head>
<body>
 <!-- idの指定は一つだけ -->
 <h1 id="page-title">サンプルサイト</h1>
 <p>テスト</p>
 <!-- classは同じタグに複数指定可能 -->
 <p class="caution waining">注意!</p>
 <p class="caution">注意!</p>
</body>
</html>

基本的にid名をつける場面は限定的でcssの指定にはclass名が使われます。

classで指定する理由

スタイルの定義にidではなくclassを使うのにはいくつか理由があります。

classは使い回せる

同一のページに同じclass名は何度でも使えるので、スタイルの使い回しができます。

<body>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
 <div class="box"></div>
</body>
.box {
  width: 100px;
  height: 50px;
  margin: 20px auto 0;
  background-color: #ddd;
}

この例のように、同じボックスを複数作成することができます。idは同じ名前を使えないので、使い回すことができません。

idは優先度が高くclassで上書きできない

以下のようなhtmlがあるとします。

<h1 id="title" class="title"></h1>

cssを以下のように書きます。

#title {
  font-size: 24px; /* こちらが優先される */
}
.title {
  font-size: 16px;
}

通常、後から書いたcssの方が優先されるのですが、classよりidの方が優先度が高いので、上の記述が優先されます。

.title {
  font-size: 24px;
}
.title {
  font-size: 16px; /* こちらが優先される */
}

後から指定を上書きすることが稀にあります。

idで指定するとclassで後から上書きすることができないのです。

cssのコードが長く複雑になると、指定ミスが起こる可能性があります。

打ち間違いを防ぐ

上記のような理由でclass名による指定がほとんどになります。

そうするとclass名で指定するクセがつくので、idが混ざると打ち間違えてしまいます。

打ち間違いを防ぐためにも全てclassで統一するのが安全でしょう。

親子要素を使ったスタイルの定義

お次は親子要素を使ったcssの指定方法です。

<body>
 <div class="content">
   <p>テキスト</p>
 </div>
 <div class="sub-content">
   <p>テキスト</p>
 </div>
</body></body>

これに以下のCSSを指定します。

.content p {
  font-size: 20px;
}

こうすると、親要素に「content」というclass名があるp要素に、スタイルが適用されます。

 

<body>
  <div class="content">
    <p class="text">テキスト</p>
  </div>
  <div class="sub-content">
    <p class="text">テキスト</p>
  </div>
</body>

 

「text」とclassがふられたp要素が、divの子要素になっています。

そして、以下のように記述します。

.content .text {
  font-size: 20px;
}

こうすると、<div class=”content”> 〜 </div> の中にある「text」とclassがふられた要素にだけスタイルが適用されます。

実はかなり奥が深いCSS

簡単に書き始められて初心者向けのマークアップ言語CSSですが、実はかなり奥が深いです。

意外と知られていないプロパティがあったり、新しいプロパティが追加されたりと、掘れば掘るほど色んなことができることに気づかされます。

一見Web上では表現がむずかしいようなデザインも、CSSのテクニックで実現できることもあります。

皆さんもCSSの勉強を頑張って、CSS沼にハマって下さい。

他にもこんな記事書いています。

初心者のためのHTML・CSS入門講座【HTML編】

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です