独り言

プログラミングの講師をしています。新人研修で扱う技術の解説と個人の技術メモ、技術書の紹介など

【CSS】CSS入門

Web CSS

ここではWebサイトのレイアウトを整える技術であるCSSについて学びます。

事前準備

CSSはHTMLのレイアウトを作るための技術で、HTMLとセットで使用します。
そのためHTMLの知識があることが前提となりますので、HTMLの知識が不十分という人は下記の記事を参照ください。

case10.hateblo.jp

使用するツールとしては、Webブラウザとテキストエディタがあれば十分ですので、HTMLの学習をした人はCSSで新たに必要となるツールはありません。

CSSの基本

CSSとは

CSSは、Cascading Style Sheetsの略です。
Webページのレイアウトを整えるための技術で、HTMLと合わせて使用します。
HTMLはWebページの構造（内容）を定義するものでしたが、CSSではレイアウトに関する部分を定義します。
例えば、文字のサイズや色、背景の色や画像、コンテンツのサイズや配置などです。

ファイル名・拡張子

cssファイルの拡張子は「.css」です。
ファイル名は任意ですが、「style.css」や「styles.css」などが多いです。

ファイル名を日本語にすることも可能ですが、その場合は文字化けを防ぐために、ファイルの先頭に 「@charset "UTF-8";」 と記述します。

バージョン

HTMLと同じくW3Cという団体が仕様を決めています。
現在の最新バージョンはCSS3です。
最新バージョンの機能の場合、HTMLと同様、ブラウザの種類やブラウザのバージョンによっては対応していない機能もある可能性があります。
下記のサイトから、ブラウザのバージョンごとに対応状況を確認することができます。
https://caniuse.com/

リファレンス

リファレンスに関してはHTMLの場合と同じくMDNをご利用下さい。

適用方法

HTMLファイルのレイアウトを整えるには、CSSを適用させる必要があります。
HTMLにCSSを適用させる方法は3つあります。

  1. style属性に指定する
  2. styleタグの中に記述する
  3. 外部ファイルに記述する

一般的には3の方法が使われることがほとんどです。
それぞれ説明していきます。

1.style属性に指定する

これは、タグの中にstyle属性を指定して、その中にスタイルを指定します。

index.html

<h1 style="color: red; ">Hello</h1>

style属性はグローバル属性なので、どのタグに対しても設定することができます。
この例では、文字色を赤に設定しています。
複数の属性の指定する場合、空白区切りで複数指定します。

index.html

<h1 style="color: red; font-size: 14px;">Hello</h1>

この例では文字色を赤にして、フォントサイズを14ピクセルに設定しています。

メリット

試行錯誤しながらWebサイトを作成しているとき、この方法だとお手軽に試すことができるので便利です。

デメリット

この方法でスタイルを適用させる場合、様々な要素にstyle属性を書く必要があるため、HTMLファイルの中身が煩雑になります。
複数の要素に同じ設定をしたい時、同じことを何度も書く必要があり、効率が悪くなります。
例えば、1つのファイルの中にh1要素が複数あって、それら全ての文字色を赤にしてフォントサイズを14ピクセルにしたい場合、全てのh1要素にstyle属性で上記のような属性を指定する必要があります。

<h1 style="color: red; font-size: 14px;">Hello</h1>
...
<h1 style="color: red; font-size: 14px;">World</h1>
...

このような書き方だと、HTMLが読みにくくなり、かつ変更する時に修正箇所が多くなることが予想されます。

2.styleタグの中に記述する

2つ目は、headタグの中でstyleタグを使って設定する方法です。

index.html

<head>
    <style>   
    h1 {
        color: red;
    }
    </style>
</head>   
...
<h1>Hello</h1>

メリット

この方法では、ページ内のスタイルをまとめて書けるため、style属性を使用するよりはファイルの中身が見やすくなります。
仮に1つのファイルにh1要素が複数あった場合でも、h1要素に対するスタイルを1つ指定するだけで統一することができます。
また、1つのファイルでHTMLとCSSの両方を確認することができます。

デメリット

この方法の欠点は、複数のHTMLファイルに同じ設定をしたい場合、それぞれのファイルに同じ内容を何度も書く必要があるので、効率が悪くなります。
仮にレイアウトの変更があったとすると、全てのファイルで同じ修正をする必要が出てきます。

3.外部ファイルに記述する

CSSとHTMLを別々のファイルを分けて書く方法です。
この方法が一般的でよく使用されます。

index.html

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

style.css

h1 {    
    color: red;
}

HTMLとCSSを分けて書く場合、head要素内でlinkタグを用いて、使用するCSSファイルを指定します。
linkタグではrel属性とhref属性を指定します。
rel属性は現在はほぼほぼstylesheetしか指定しません。
href属性で適用したいcssファイルのパスを指定します。
ファイルの指定方法はaタグやimgタグなどと同様で、絶対パスを用いた方法と相対パスを用いた方法があります。
CSSをHTMLと分けて書く場合、CSSファイル用のフォルダを作成して、その中にまとめておくのが一般的です。

メリット

複数のHTMLファイルに同じ設定を簡単に出来るので、効率が良くなります。
HTMLファイルとCSSファイルを分けると事で、それぞれのソースコードが読みやすくなり、管理もしやすくなる。

デメリット

HTMLとCSSでファイルを分けるので、ファイル数は増えます。

CSSの適用方法のまとめ

  • CSSの適用方法は3つある
  • style属性を使う方法、styleタグを使う方法、外部ファイルに書いてlinkタグで読み込む方法
  • 一般的には、外部ファイルから読み込む形で作成することがほとんど
  • 規模が小さいWebページや、作成しながら軽く試したい場合に1や2の方法を使用する

CSSの書き方

CSSの書き方は以下の通りです。

セレクタ {    
    /* コメント */
    プロパティ: 値;
}    
/* サンプル */
h1 {   
    /* 文字色を赤く */
    color: red;
}

セレクタ

セレクタは、「どの要素に？」の役割を果たします。
タグを指定したり、id属性の値を指定したり、class属性の値を指定します。

プロパティ

プロパティは、「何を？」に当たります。
たとえは、文字の色、文字のサイズ、背景の色、余白の大きさ、などです。

値

値は、プロパティに対する値です。
文字色や背景色の場合は色、サイズなどの場合はピクセルによるサイズなどを指定します。
このサンプルの場合、h1要素に対して、文字色を赤に設定します。
という意味になります。
値は、プロパティによって設定できるものが異なります。
色、サイズなどの場合もあれば、プロパティによってあらかじめ決められているものもあります。

一つのセレクタに対してプロパティはいくつでも設定可能です。
{}(中かっこ)の中に並べて書くことが可能です。
一番最後に書いたセレクタの値に対しては、セミコロンを省略することができます。
ただし、セミコロンを省略してしまうと、後からプロパティを追加するときに付け忘れて思わぬ不具合につながる必要があるので、セミコロンはつける癖をつけておいた方がよいでしょう。

コメント

cssでコメントを書く場合は

/* */

の中に書きます。
複数行を跨ぐことも可能です。

CSSの書き方のまとめ

  • CSSではセレクタとプロパティと値を書く
  • セレクタは、どの要素かを指定する
  • プロパティは何を定義するかを指定する
  • 値はプロパティに対する値を指定する
  • コメントは /* */

セレクタについて

セレクタの指定方法や、指定できる種類について見ていきます。

セレクタの指定方法

セレクタの指定方法は全部で4つあります。

  1. ユニバーサルセレクタ
  2. 要素セレクタ
  3. クラスセレクタ
  4. idセレクタ

の4つです。
以下のhtmlをサンプルとして一つずつ見ていきます。

<h1 id="greet" class="c">あいさつ</h1>
<p id="hello" class="c">こんにちは</p>

1.全ての要素の指定

* (ユニバーサルセレクタ)
全ての要素に指定したスタイルを適用します。
*(アスタリスク)を使用します。

/* 全ての要素の文字色を赤に */
* {
    color: red;
}

2.要素で指定

要素名(要素セレクタ)
指定した要素にスタイルを適用します。
タグの名前を指定します。

/* h1要素の文字色を赤に */
hi {
    color: red;
}

3.クラス指定

.クラス名
class属性の値で該当するものにスタイルを適用します。
クラス名で指定する場合、クラス名の前に.(ピリオド)を付けます。

/* class属性がcの要素の文字色を赤に */
.c {
    color: red;
}

4. id指定

#id名
id属性の値で該当するものにスタイルを適用します。
id名で指定する場合、id名の前に#(シャープ)を付けます。

/* id属性の値がgreetの要素の文字色を赤に */
.greet {
    color: red;
}

セレクタの適用範囲

別々の要素に同じスタイルを適用させたい場合や、逆に適用する要素を絞り込みたい場合などのセレクタの書き方が色々あります。

<div class="out">
    <h1 id="greet" class="c">あいさつ</h1>
    <p id="hello" class="c">こんにちは</p>
    <div class="in">
        <p id="morning">おはよう</p>
    </div>
</div>

1. aとbに同じスタイルを適用

ここではaとbはセレクタを表しているとします。
書き方：a, b
「a, b」と書くと、aとbの両方にスタイルを適用することができます。
「a, b, c, d」の様に、2つ以上のセレクタを指定することもできます。

/* h1とp要素に適用される */
h1, p {
    color: red;
}

2. aの配下にあるbにスタイルを適用

書き方：a b
「a b」と書くと、aの配下にあるbに適用されます。
今回の例では「おはよう」と「こんにちは」の文字色が赤くなります。

/* divの配下にあるp要素に適用される */
div p {
    color: red;
}

3. aの直下にあるbにスタイルを適用

書き方：a > b
「>」を使うと、aの直下にある要素を指定することができます。
先に説明した配下の場合、入れ子構造で子要素や孫要素にも適用されますが、直下の場合はすぐ下の子要素にしか適用されません。

/* .outの直下にあるp要素に適用される */
.out > p {
    /* こんにちは の文字色だけが変わる */
    color: red;
}

4. aの次に来るbにスタイルを適用

書き方：a + b
「+」を使うと、aの次にくつb要素に適用されます。

/* h1の次に来るp要素に適用される */
h1 + p {
    /* こんにちは の文字色だけが変わる */
    color: red;
}

5. aかつbの要素にスタイルを適用

書き方：ab
セレクタをくっつけて書くと、aかつbという意味になります。

/* h1かつクラス名がcの要素 */
h1.c {
    color: red;
}

セレクタの適用範囲のまとめ

  • a, b ：aとb
  • a b ： aの配下のb
  • a > b ：aの直下のb
  • a + b：aに隣接（次にくる）b
  • ab ：aかつb

疑似クラス

疑似クラスは、要素が特定の状態の時にスタイルを適用したいという場合に使用するものです。
コロン(:)を使用して、状態を指定します。

リンクに関する疑似クラス

  • a:link（未訪問の場合）
  • a:visited（訪問済みの場合）
  • a:hover（マウスが乗ったとき）
  • a:active（マウスをクリックしたとき）
a:link {
    /* 未訪問時は文字色を青に */
    color: blue;
}

a:visited {
    /* 訪問済みの場合は文字色を赤に */
    color: red;
}

a:hover {
    /* マウスが乗っかった時文字色は緑に */
    color: green;
}

a:active {
    /* マウスをクリックしたとき文字色を黒に */
    color: black;
}

疑似クラスを指定する場合、セレクタと:と疑似クラスでスペースを空けてしまうとうまく動作しなくなるので注意が必要です。
(a: hoverなどとするとうまく動作しない場合がある)

フォーカスに関する疑似クラス

  • input:focus（フォーカスが当たった時）
input:focus {
    /* フォーカスが当たった時、背景色を黄色くする */
    background-color: yellow;
}

順番などに関する疑似クラス

  • li:first-child（最初の要素）
  • li:last-child（最後の要素）
  • li:nth-child(odd)（奇数番目の要素）
  • li:nth-child(even)（偶数番目の要素）
  • li:nth-child(2)（2番目の要素）
  • li:nth-child(3n)（3の倍数の要素）
  • li:not(:first-child)（最初以外の要素）
<ol>
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
    <li>E</li>
    <li>F</li>
    <li>G</li>
</ol>

/* Aの色を赤に */
li:first-child {
    color: red;
}

/* Gの色を青に */
li:last-child {
    color: blue;
}

/* A,C,E,Gのフォントサイズを20pxに */
li:nth-child(odd) {
    font-size: 20px;
}

/* B,D,Fのフォントサイズを10pxに */
li:nth-child(even) {
    font-size: 10px;
}

/* Bの色を緑に */
li:nth-child(2) {
    color: green;
}

/* C,Fを太字に */
li:nth-child(3n) {
    font-weight: bold;
}

疑似要素

疑似要素はある要素の特定の部分をスタイル指定するときに使用するものです。
コロンを2つ使用して指定します。

  • p::first-line（最初の1行に適用）
  • p::first-letter（最初の文字に適用）
<p>
    あいうえお<br>
    かきくけこ
</p>

/* あいうえお の色を赤く */
p::first-line{
    color: red;
}

/* あ の色を青く */
p::first-letter{
    color: blue;
}
  • p::before（p要素の前に何かを追加したい時に適用）
  • p::after（p要素の後に何かを追加したい時に適用）
<p>
    こんにちは
</p>

/* おはよう こんにちは おやすみ */
/* と表示される */

p::before{
    /* beforeとafterではcontentプロパティが必須となる */
    content: "おはよう";
}
p::after{
    content: "おやすみ";
}

属性セレクタ

属性や属性の値によってセレクタを指定する方法です。
[]を使用します。

<p id="aaa">おはよう</p>
<p class="bbb">こんにちは</p>
<p class="ccc">こんばんわ</p>
<p class="abc">さようなら</p>

/* p要素でid属性があるもの */
p[id] {
    color: red;
}
/* p要素でclassの値がcccのもの */
p[class="ccc"] {
    color: blue;
}
/* 部分一致 */
/* classの値にbを含むもの */
p[class*="b"] {
    color: green;
}
/* 前方一致 */
/* classの値がbから始まるもの */
p[class^="b"]{
    font-size: 20px;
}
/* 後方一致 */
/* classの値がcでおわるもの */
p[class$="c"]{
    font-size: 30px;
}

カスタム属性の指定

属性セレクタではカスタム属性を指定することもできます。

<p date-greet="morning">おはよう</p>
<p date-greet="hello">こんにちは</p>
<p date-greet="evening">こんばんわ</p>
<p date-greet="bye">さようなら</p>

p[date-greet="morning"] {
    /* おはようが赤くなる */
    color : red;
}

セレクタの詳細度

CSSの中身が増えてくると、一つの要素に対して複数のセレクタが対象となる場合があります。
その際に、どのセレクタが優先度が高くなるかというルールを決めるのがセレクタの詳細度です。

具体的には、まず詳細度が4つあります。
* a：style属性 * b：id指定 * c：属性、疑似クラス * d：要素、疑似要素

の4つです。
aが最も優先度が高く、dが低くなります。
a～dを左から横に並べて、その値が大きいものが適用されます。
a b c d
1 0 0 0 ：style属性を指定したとき
0 1 0 0 ：id指定したとき（#aaa）
0 1 0 1 ：要素とid指定を組み合わせた時（p#aaa）
0 0 1 1 ：疑似クラスを使用したとき（p[class="bbb"]）
0 0 0 1 ：要素指定したとき(p)
0 0 0 2 ：要素を2つ指定したとき(a, p)

上記の場合、優先度が高い順に並べると、
1 0 0 0 > 0 1 0 1 > 0 1 0 0 > 0 0 1 1 > 0 0 0 2 > 0 0 0 1
となります。
おなじ優先順位のスタイルがある場合は、後から適用されたもの(CSSファイルでいうと下に書かれている方)が適用されます。

また、強制的に優先度を上げたい場合、値の後にスペースを空けて「!important」を指定すると、優先度を上げることができます。

<!-- 1, 0, 0, 0 -->
<p id="aaa" class="bbb" style="color: red;">おはよう</p>
<p id="aaa" class="bbb">こんにちは</p>
<p class="bbb">こんばんわ</p>
<p>さようなら</p>

/* 0, 0, 0, 1 */
p {
    /* !importantを付けると最も優先度が高くなる */
    /* color: black !important; */
    color: blue;
}
/* 0, 0, 0, 2 */
p, a {
    color: pink;
}
/* 0, 1, 0, 1 */
p#aaa {
    color: green;
}
/* 0, 0, 1, 1 */
p[class="bbb"] {
    color: yellow;
}

プロパティについて

ここからは、プロパティについて紹介します。

テキストに対するプロパティ

まずは、テキスト(文章)に対してのプロパティを紹介します。

<p class="hello">Hello</p>
<p class="world">World</p>

/* 適宜コメントにするなどして、それぞれのレイアウトの違いを確認してみてください。 */
.hello {
    color: blue;   /* 文字色の指定 */
    font-size: 20px; /* フォントサイズ */

    font-weight: normal; /* 文字の太さ(細く) */                    
    font-weight: bold;  /* 文字の太さ(太く) */                 

    text-decoration: line-through; /* 取り消し線 */
    text-decoration: underline;    /* 下線 */
    text-decoration: none;         /* リンクの下線を消せる */

    /* 文字フォント。指定されたフォントが端末にない場合は
    表示されないので、優先順位を決めて複数指定する。
    フォント名に空白がある場合は、' または "で囲ってあげる */
    font-family:  Verdana, 'Arial Black', メイリオ, sans-serif; 

    /* 行ぞろえ */                                      
    text-align: left;   /* 左揃え */
    text-align: right;  /* 右揃え */
    text-align: center; /* 中央揃え */

    /* 行ボックス(段落に作られる四角い領域) の高さ */
    /* line-height - font-size の余りが、上下に割り当てられる */
    line-height: 32px;                                        
    line-height: 2em;/* フォントサイズの2倍 */
    line-height: 2;   /* フォントサイズの2倍 */  

    /* テキストの間に画像を挟む場合、行ボックスの
    どこに合わせて画像を配置するかを決める */
    /* 指定できる値 */
    /* top, bottom, middle, ?px, ?em */
    vertical-align: baseline;
}

リストへに対するプロパティ

ここではリストに対して指定できるプロパティを紹介します。

<ul>
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>
<ol>
    <li>html</li>
    <li>css</li>
    <li>JavaScript</li>
</ol>

ul {
    list-style-type: none;   /* 印をなくす */
    list-style-type: circle; /* 白丸 */
    list-style-type: disc;   /* 黒丸 */
    list-style-type: square; /* 四角 */
}
ol {
    list-style-type: lower-alpha; /* アルファベット */
    list-style-type: decimal;     /* 連番 */

    list-style-position: inside; /* 記号をリストの内側にする */                                   
    /* list-style-image: url();  /* 記号の代わりに画像を使用 */

    /* type posision image を一括指定する */
    /* list-style: circle inside url(); */
}

背景に関するプロパティ

背景に色や画像を指定するときに指定するプロパティです。

body {
    background-color: pink;   /* 背景色 */ 
    background-image: url();  /* 背景画像 */    
                                            
    background-repeat: no-repeat; /* 画像は一回だけ敷き詰められる */
    background-repeat: repeat;
    background-repeat: repeat-x; /* x方向(横要綱)にだけ敷き詰められる */
    background-repeat: repeat-y; /* y方向(縦方向)にだけ敷き詰められる */

    /* 画面の縦横比を保持したままなるべく大きく */
    background-size: cover;   
    /* 中央を起点に拡大縮小 */
    background-position: center;

    /* スクロールしたときに一緒にくっついてくる */
    background-attachment: scroll;                    
    background-attachment:fixed;   /* 固定される */  
                                            
    /* 一括指定プロパティ */
    /* position/size color image */             
    background: center/cover pink url();
}

カーソルに関するプロパティ

マウスのカーソルが載った時のアイコンを変更する際に使用するプロパティです。

p {
    cursor: help;    /* はてなマーク */         
    cursor: move;    /* 十字架 */          
    cursor: pointer; /* 手の形 */          
    cursor: url();   /* 画像 */           
}

ブロックボックスに関するプロパティ

ブロックボックス要素とは、h1, p, divのような、追加するたびに新しい行が作られていく要素のことです。
ブロックボックスには横幅と縦幅が指定できます。
また、四角い領域に対して枠線を付けることもできます。
枠線のことをborderといいます。
このコンテンツとborderの間の余白を、paddingといいます。
borderの外側の余白のことをmarginといいます。
ここでは、それぞれの指定方法を見ていきます。

<div class="box">
    Hello
</div>

.box {
    background-color: pink; /* 分かりやすいように背景色を付ける */
    /* コンテンツの横幅 */
    /* デフォルトは親コンテンツの横幅いっぱい */
    width: 200px;  
    /* width: 70%;   */ /* 親コンテンツの何%かでの指定方法 */

    /* コンテンツの縦幅 */
    /* デフォルトはコンテンツの高さ 今回の場合Helloの文字の高さ */
    height: 100px; 

    /* 枠線とコンテンツの余白 */
    /* paddingを付けると領域のサイズが広がる(witdhとheightには含まれないため) */
    padding: 20px;                     /* 上下左右に20pxの余白ができる */
    /* padding-top: 20px */            /* 上のみ20px */
    /* padding-bottom: 20px */         /* 下のみ20px */
    /* padding-left: 20px */           /* 左のみ20px */
    /* padding-right: 20px */          /* 右のみ20px */
    /* padding: 10px 20px; */          /* 上下 左右 */
    /* padding: 10px 10px 20px;*/      /*上 左右 下 */      
    /* padding: 10px 10px 20px 30px;*/ /* 上 右 下 左 */

    /* 枠線 */
    border: 3px red solid;           /* 太さ 色 線の種類 */
    /* border-color: red; */         /* 色 */
    /* border-width: 3px; */         /* 太さ */
    /* border-style: solid; */       /* 線の種類 solid：1本線、dotted：点線、dashed：破線、double：二重線、inset/outset：立体的に */
    /* border-top: 3px red solid; */ /* 上だけ枠線を付ける */
    /* border-top: none; */          /* 上だけ枠線をなくす */
    /* border-radius: 10px; */       /* 角を丸くする */
    /* border-radius: 50%; */        /* 円になる */

    /* 枠線の外側の余白 */
    margin: 30px;                     /* 上下左右に20pxの余白ができる */
    /* margin-top: 20px; */           /* 上のみ20px */
    /* margin-bottom: 20px; */        /* 下のみ20px */
    /* margin-left: 20px; */          /* 左のみ20px */
    /* margin-right: 20px; */         /* 右のみ20px */
    /* margin: 10px 20px; */          /* 上下 左右 */
    /* margin: 10px 10px 20px;*/      /*上 左右 下 */           
    /* margin: 10px 10px 20px 30px;*/ /* 上 右 下 左 */
    /* margin-left: auto;  */         /* 左に余白がついて、右寄せになる */
    /* margin-right: auto; */         /* 右に余白がついて、左寄せになる */
    /* margin: 0 auto; */             /* 中央寄せ */

    /* ボックス要素が上下に並ぶときにはmarginは結合されて大きい方になる */

}

配置に関するプロパティ

displayプロパティ

displayプロパティを使用すると、横並びのコンテンツを縦並びにしたり、縦並びのコンテンツを横並びにしたりなど、配置を変えることができます。

縦並びのコンテンツを横並びにする。

<div class="box">
    Hello
</div>
<div class="box">
    Hello
</div>
<div class="box">
    Hello
</div>

.box {
    /* block要素の特徴を持ちつつ横並びになる */
    display: inline-block;
                
    background-color: pink; /* 背景色 */
    width: 200px; /* コンテンツの横幅 */
    height: 100px; /* コンテンツの縦幅 */
    border: 3px red inset; /* 枠線：太さ 色 線の種類*/
}

.box {
    /* インライン要素として扱われる。(横並びになる) */
    display: inline;

    background-color: pink; /* 背景色 */
    /* インライン要素の場合横幅と縦幅の設定はできない */
    /* width: 200px; 
    height: 100px;  */
    border: 3px red inset; /* 枠線：太さ 色 線の種類*/            
}

横並びのコンテンツを縦並びにする。

<span class="box">
    Hello
</span>
<span class="box">
    Hello
</span>
<span class="box">
    Hello
</span>

 .box {
     /* インライン要素をブロック要素にする */
    display: block; 
}

非表示にする。

.box {
    display: none; 
}

TODO

  • グリッド
  • テーブル
  • FlexBox

positionプロパティとz-indexプロパティ

positionプロパティは、要素をどこに配置するかを指定するものです。
z-indexは重なり順を指定するプロパティです。

<div class="box box1">
    Hello
</div>
<div class="box box2">
    Hello
</div>
<div class="box box3">
    Hello
</div>
<div class="box box4">
    Hello
</div>

.box {
    width: 100px;
    height: 100px;
    margin: 10px;
}
.box1 {
    background-color: pink;
    /* 初期値。書かなくても一緒 */
    position: static;
}
.box2 {
    background-color: blue;
    /* staticからどれだけずらすか */
    position: relative;
    top: 30px;  /* 上から30px */
    left: 30px; /* 左から30px */

    /* 重なり順を指定するプロパティ */
    /* 何も指定しない場合は0。数値が大きい方が上にくる */
    z-index: 9999;
}
.box3 {
    background-color: yellow;
    /* 親要素がstaticかstatic以外かで挙動が変わる */
    /* 親要素がstaticの場合は、ウィンドウの左上を起点に配置される。 */
    /* 親要素がstatic以外(relativeなど)の場合、親要素の左上を起点とした配置になる */
    position: absolute;
    left: 100px;
}
.box4 {
    background-color: green;
    /* ウィンドウの左上の起点に上と左から30pxに固定される
    /* スクロールしても固定される */
    /* fixedにした場合、通常の配置から外れるの、続く要素が詰められる点に注意 */
    /* もともとその要素がなかったかのように扱われる */
    position: fixed;
    top: 500px;
    left: 100px;
}

TODO

  • box-sizing

floatプロパティ

floatを使用すると、ブロック要素を回り込ませることができます。

<div class="box1">
    <div class="box2">
        Hello
    </div>
    こんにちは
</div>    
<div class="box3">
    <div class="box4">
        Hello
    </div>
    こんにちは
</div>
<div class="box5">
    <div class="box6">
        Hello
    </div>
    こんにちは
</div>

.box2, .box4, .box6 {
    width: 100px;
    height: 100px;
}
.box3, .box5 {
    /* 回り込みを解除する */
    clear: both; 
}
.box2 {           
    background-color: pink;
    /* 左に配置する */
    float: left;
}
.box4 {
    background-color: blue;
    /* 右に配置する */
    float: right;
}
.box6 {
    background-color: yellow;
    /* 左に配置する */
    float: left;
}

floatが適用できるのはblock要素に限ります。

プロパティの一括指定

marginやpaddingなどのプロパティは、左右上下をそれぞれ別々に設定することも可能ですが、「margin」や「padding」のプロパティで一括で指定することもできます。
このような指定方法をプロパティの一括指定と呼びます。

div {
    /* 個別で指定する */
    margin-top: 20px;            /* 上のみ20px */
    margin-bottom: 20px;         /* 下のみ20px */
    margin-left: 20px;           /* 左のみ20px */
    margin-right: 20px;          /* 右のみ20px */
    /* 以下は一括指定 */
    margin: 30px;                /* 上下左右 */
    margin: 10px 20px;           /* 上下 左右  */
    margin: 10px 10px 20px;      /*上 左右 下  */           
    margin: 10px 10px 20px 30px; /* 上 右 下 左 */

    /* 個別での指定 */
    border-color: red;          /* 色 */
    border-width: 3px;          /* 太さ */
    border-style: solid;        /* 線の種類 */
    /* 一括指定 */
    /* borderの場合は値の並びは任意 */
    border: 3px red solid;      /* 太さ 色 線の種類 */
}

一括指定ができるかどうかはプロパティによります。
また、値を書く順番が決まっているものと決まっていないものがあります。

値について

値については、プロパティによって設定方法が異なります。
プロパティによって指定できるものが決まっているものもあれば、色や長さとして指定する方法があります。

サイズの設定

これはコンテンツの横幅や高さや文字のサイズなどを指定する方法です。

  1. px：ピクセル指定
  2. em：親要素に対して何倍かの指定
  3. %：親要素に対して何%かの指定

0を指定する場合は、単位を省略できます。
0以外を指定するときは、単位を指定しないとうまく動作しないので注意が必要です。

div {
    width: 100px; /* ピクセル指定 */
    width: 0.5em; /* 親要素の半分 */
    width: 50%;   /* 親要素の半分 */
}

色の指定

CSSでは背景色や文字色など、色を指定するプロパティも多くあります。
色の指定方法もいくつかの方法があります。

1.名前で指定する

red, blue, greenなど、メジャーな色の名前に関しては色の名前を直接指定することが可能です。

div {
    /* 色を直接指定する */
    /* 指定できる色はVS Codeなどのエディタを使用している場合は候補から選ぶことが可能 */
    color: red;
}

2.RBGによる指定です

red, blue, greenはの頭文字を取ったものです。
色の3原色によって様々な色を指定します。
RBGによる指定も2つの指定方法があります。

1.rgb(0, 0, 0)

それぞれを0～255の値で指定すします。
0,0,0だと黒になります。
255,255,255だと白になります。

div {
    color: rgb(0, 0, 0);       /* 黒 */
    color: rgb(255, 255, 255); /* 白 */
    color: rgb(255, 0, 0);     /* 赤 */
    color: rgb(0, 255, 0);     /* 緑 */
    color: rgb(0, 0, 255);     /* 青 */
    color: rgb(255, 255, 0);   /* 黄 */

    /* rgbaとすると透明度を0~1で指定できる */
    color: rgba(0, 0, 255, 1);   /* 通常の青 */
    color: rgba(0, 0, 255, 0);   /* 表示されない */
    color: rgba(0, 0, 255, 0.5); /* 薄い青 */

}

2.16進数で2桁ずつ、6桁で指定する方法

rgbには16進数による指定方法もあります。
先頭に#を付けて、00~FFを赤緑青の順で指定します。

div {
    color: #000000; /* 黒 */
    color: #000;    /* 同じ数字が並ぶ場合は省略して1桁にできる */
    color: #FFFFFF; /* 白 */
    color: #FFF;    /* 白 */
    color: #FFFF00; /* 黄 */
}

HSL

CSS3からはHSLという指定方法もあります。
HSLは
H：hue：色相 0~360
S：saturation：彩度 0~100%
L：lightness：輝度 0~100%
の3つで指定します。
rgbと同じで後ろにaを付けて透明度を指定することもできます。

div {
    color: hsl(360, 0%, 0%);     /* 黒 */
    color: hsl(360, 100%, 100%); /* 白 */
    color: hsl(360, 100%, 100%, 1);
}

値のまとめ

  • サイズの指定方法は3種類ある
    • px(ピクセル)とem(親要素の何倍か)と%(親要素の何%か)
    • 0の場合だけ単位を省略できる
  • 色の指定方法
    • 色の名前での指定
    • RGBによる指定(10進数と16進数の2つ)
    • HSLによる指定
    • aを付けて透明度を指定することもできる
  • それ以外はプロパティによって指定方法が決まっている

変数

CSSでは値を設定するときに変数を使用することもできます。
変数はカスタムプロパティとも呼ばれます。

<div>
    <span>Hello</span>
</div>

:root {
    /* CSSファイル全体で使用したい変数はroot疑似クラスで設定する */
    --fsize: 20px;
}
div {
    /* 変数定義 */
    /* 変数は-(ハイフン)2つから始まり、大文字と小文字が区別される */
    --bg-color: pink;
    --f-color: blue;

    /* 変数を使用するにはvar関数を使用する */
    /* 2つ目の引数で変数が見つからなかった場合の値をセットできる */
    background-color: var(--bg-color, white);

    /* root疑似クラスで定義した変数はどこでも使用可能 */
    font-size: var(--fsize, 15px);

    /* サイズの指定もできる */
    --pdding-size: 10px;
    padding: var(--pdding-size);

    /* calc関数を使用することで、単位を後から設定することも可能 */
    --margin-size: 10;
    margin: calc(var(--margin-size) * 1px);
}
span {
    color: var(--f-color, black);
}

Bootstrap

CSSの開発効率を上げるための技術にBootstrapという技術があります。
BootstrapはCSSのフレームワークです。
フレームワークとは、半完成品のようなもので、あらかじめ設定されたレイアウトを使うことで簡単にデザインを作成するための技術です。
公式サイト
https://getbootstrap.com/
で必要なファイルのダウンロードや使い方を調べることができます。

導入方法は簡単で、公式サイトからダウンロードしたBootstrap用のCSSファイルとjsファイルを読み込むと使用できるようになります。

Bootstrapでは、あらかじめ定義されたスタイルをclass属性の指定だけで設定することができます。
例えばテキストを中央揃えにしたい場合

<div class="text-center">
    ...
</div>

のように指定するだけで中央揃えにすることができます。

他、詳しくは公式サイトを参照ください。

Google Chrome DeveloperTools

ここではブラウザに搭載されている開発に役立つツールを紹介します。
Google ChromeでWebページを閲覧している状態で、F12 または Ctrl + Shift + I を押します。(Windowsの場合)
そうするとDeveloperToolsと呼ばれるツールが起動します。

様々な情報が表示されますが、CSSの開発の時に役に立つのはElementsタブの部分です。
Elementsタブでは、WebページのHTMLが階層構造で表示されます。
各要素を選択すると、Stylesの部分に、その要素に適用されているスタイルを確認することができます。

ここで、自分が作成したCSSが正しく適用されているかどうかを確認することができます。
また、DeveloperTools上でスタイルを修正して、ページのレイアウトがどう変わるかをその場で確かめることもできます。
複雑なレイアウトのページを作成する場合は使いこなせると非常に便利なツールなので、使い方に慣れておくと良いでしょう。

Sass, SCSS

CSSを効率よく書くための記法です。

Sassの記法に従って、拡張子が「.scss」のファイルを作成し、sassコマンドを使用するとcssファイルが出来上がるという流れです。
CSSにある程度慣れてきたら、効率よく書くために勉強してみてもよいかと思います。

レスポンシブデザイン

レスポンシブデザインは、ブラウザの幅によってスタイルを変える手法のことを言います。
Webページは、PCのブラウザで見ることもあれば、スマホのタブレットで見ることもありますし、iPadなどのタブレット端末で見る場合もあるでしょう。
それぞれで画面の幅が異なるため、PCに合わせてデザインを作成した場合、スマホでは見づらくなりますし、逆にスマホに合わせて作成した場合はPCで見づらくなります。
どの端末で見ても、それぞれのブラウザの幅に合わせて適切なスタイルになるように調整してWebページを作成する手法をレスポンシブデザインと呼びます。

対応方法

レスポンシブデザインの基本的な対応方法です。
まずはHTMLです。

viewportの設定
表示領域をスマホに合わせて変えるための設定

<meta name="viewport" content="width=device-width, initial-scale=1">

viewportは、モバイル端末における初期サイズに関する設定を与えるものです。
content属性で設定を記述します。
設定の詳細については、公式サイトMDNを参照して下さい。

続いてはCSSです。

/* 600px～800px の間に適用される */
@media(min-width: 600px) and (max-width: 800px) {
    .content {
        font-size: 11px;
    }
}

上記のように書くと、ブラウザの横幅が600pxから800pxの間の場合に、中に書かれたスタイルが適用されます。
@がついている部分は、@-規則と呼ばれるもので、CSSの動きを規定するものです。
@mediaでは、特定の条件の時にスタイルが適用されるように設定できます。
このような書き方をメディアクエリと呼びます。
上の例ではブラウザの幅が600~800pxの間の場合にスタイルが適用されるようになります。

600pxより小さい場合
600~800pxの場合
800pxより大きい場合
の3パターンに分けたい場合は以下の様に書きます。

/* 0~599の間 */
@media(min-width: 0px) and (max-width: 599px) {
    /*...*/
}

/* 600以上の場合 */
@media(min-width: 600px)  {

    /*...*/
}

/* 800px以上の場合 */
@media(min-width: 800px) {
    /*...*/
}

HTMLでブラウザの幅によって読み込むファイルを分ける

これまでの例ではCSS内でブラウザの幅によってスタイルを変えていましたが、HTMLのlinkタグでブラウザの幅によって読み込むCSSファイルを分ける方法もあります。
linkタグのmedia属性でメディアクエリを使用します。
条件を満たす場合のみcssファイルが読み込まれるようになります。

<link rel="stylesheet" href="css/style_sp.css" media="screen and (max-width: 599px)">
<link rel="stylesheet" href="css/style.css" media="screen and (min-width: 600px)">

確認方法

レスポンシブデザインの確認をするには、Google ChromeのDeveloper Toolsが便利です。
スマホでの表示や、タブレットでの表示を確認することができるので、有効に活用するよい良いでしょう。

おすすめ書籍

HTML/CSSの知識と共に、デザインに関する知識も同時に学ぶことができる入門書。
とても分かりやすいです。

実際に手を動かして試しつつ、Tipsを読むことでより理解を深めることができます。