Lesson3 CSS

01CSSとは？

CSSとは「カスケーディング・スタイル・シート（Cascading Style Sheets）」の略で、Webページの見た目を指定するためのスタイルシート言語のことを指します。

CSSを使用することで、Webページの文字や色、配置などの見た目を指定することができます。

CSSは、HTMLやXMLなどのマークアップ言語と組み合わせて使用します。

HTMLやXMLでマークアップされたWebページに、CSSで指定した見た目を適用することで、Webページのデザインを実現します。

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

セレクタ {
  プロパティ: 値;
  プロパティ: 値;
  ...
}

例えば、次のように書くと、h1要素に対して、文字色を赤色に設定することができます。

h1 {
  color: red;
}

02CSSのファイル作成

それではCloud9に作業用フォルダを作成しましょう。

新しく「Lesson2_CSS」フォルダを作成してください。

作成できたら「css_1.css」のCSSファイルを作成しましょう。

Lesson2_CSS
└ css_1.css

CSSファイルの拡張子は「.css」です。

@charset "UTF-8";と書いておくことで、ファイルの文字エンコーディングを指定します。これは文字化け対策なので、決まり文句だと覚えておきましょう。

CSSのコメントアウト方法

HTMLでも紹介しましたが、画面上には表示させたくないがコード上にメモを残したいときなどにコメントアウトを使用します。

03CSSの記述方法

CSSでは、セレクタとプロパティを用いてHTML要素のスタイルを指定します。セレクタで指定されたHTML要素に、プロパティで指定されたスタイルを適用します。

以下は、h1要素の文字色を赤色にするCSSの例です。

h1 {
  color: red;
}

以下は、p要素の文字色を青色、背景色を黄色にするCSSの例です。

p {
  color: blue;
  background-color: yellow;
}

また、複数のセレクタを組み合わせることで、複数のHTML要素に対してスタイルを適用することもできます。（複数のプロパティを指定する場合は、セミコロンで区切ります。）

以下は、h1要素とp要素の文字色を赤色にするCSSの例です。

h1, p {
  color: red;
}

さらに、セレクタには、classセレクタやidセレクタを用いることで、特定のHTML要素だけにスタイルを適用することもできます。

以下は、classセレクタを用いて、文字色を赤色にするCSSの例です。

// CSS側
.red-text {
  color: red;
}

<!-- HTML側 -->
<p class="red-text">赤色のテキスト</p>

04Webページのレイアウト

レイアウトとは、デザイン・設計などにおいて、何を、どこに、どのように配置するかということです。Webページでは、CSSを用いてHTML要素をどこに配置するかを決めます。

なぜレイアウトが必要となるかというと、HTMLだけでは各要素が上から下に配置されていくだけで、好きな位置に配置することができないためです。そこでCSSを使用し、文字や画像などを横並びや中央揃えにすることで、HTMLの配置を変更し、レイアウトを整えます。

HTML要素を自由にレイアウトするには、HTML要素自体の大きさを変更することと、HTML要素の位置を変更することの2つができるようになる必要があります。

2-3-1 displayプロパティのデフォルト値の違い

まず覚えてほしいのは、各HTML要素によって displayと呼ばれるプロパティのデフォルト値が異なる ことです。

displayプロパティとは、「要素の表示形式を変更することができる」プロパティのことです。

レイアウトの前提知識となるので押さえておきましょう。

div要素は画面サイズの横いっぱいまで占領するため、複数のdiv要素を並べた場合には自動的に改行され、上から下へと縦方向に並びます。

一方、span要素を複数並べた場合は、改行されず左から右へと横方向に並びます。

では、下記の具体例を見てみましょう。

表示の上3つがdiv要素、下3つがspan要素です。わかりやすいように背景色を指定しています。

書き方

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML&CSS</title>
	<style>
	　.red{
	　　　background-color: #ff7f7f;
	　}
　　　　　.blue{
	　　　background-color: #7fbfff;
	　}
          .green{
	　　　background-color: #7fff7f;
	　}
	</style>
    </head>
    <body>
        <div class="red">div1</div>
        <div class="blue">div2</div>
        <div class="green">div3</div>

        <span class="red">span1</span>
        <span class="blue">span2</span>
        <span class="green">span3</span>
    </body>
</html>

表示

2-3-2 blockとinline

displayプロパティに指定できる値には、いくつか種類があります。一例を以下の表に示します。

プロパティと値	内容
display: block;	ブロックレベル要素になる
display: inline;	インラインレベル要素になる
display: inline-block;	要素全体はインラインレベル要素、要素内はブロックレベル要素になる
display: none;	要素が画面に表示されなくなる
display: flex;	Flexboxモデルに従った表示にな特に主要な値はblockとinlineの2つです。 di要素はデフォルトでblock、span要素はデフォルトでinlineが指定されます。
display: grid;	gridレイアウトモデルに従った表示を行います。 gridを設定することでその子要素に対して行や列を定義することができます。

blockの要素は、1行分の幅全体に適用されます。つまり、1つの要素が画面サイズの横いっぱいを占領するため、連続して指定した場合には自動的に改行され、上から下へと縦方向に並びます。

一方で、inlineの要素は1行のうちの一部に適用されます。そのため、連続して指定した場合には改行されず、左から右へと横方向に並びます。

display: block;がデフォルトで設定される要素には、以下のようなものがあり、ブロックレベル要素 と呼ばれます。

h1, h2, ….など見出し要素
div
section
article
p
ul, ol
table

display: inline;がデフォルトで設定されている要素には、以下のようなもがあり、インラインレベル要素 と呼ばれます。

span
a
img

div要素をインラインレベル要素の表示に変更したい場合は、下記の具体例のように、セレクタにdisplay: inline;を指定します。

以下の例では、先ほどの例の背景色が赤（.red）と青（.blue）にだけdisplay: inline;を指定し、デフォルト値であるdisplay: block;を上書きしています。

書き方

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML&CSS</title>
	<style>
	　　.red{
	　　　　background-color: #ff7f7f;
	　　}
	　　.blue{
		background-color: #7fbfff;
	　　}
          .green{
		background-color: #7fff7f;
	　　}
          .display-inline{
              display: inline;
          }
	</style>
    </head>
    <body>
        <div class="red display-inline">div1</div>
        <div class="blue display-inline">div2</div>
        <div class="green">div3</div>

        <span class="red">span1</span>
        <span class="blue">span2</span>
        <span class="green">span3</span>
    </body>
</html>

表示

2-3-3 デフォルトのレイアウト

Webのレイアウトを学ぶうえで大切なのが、ブラウザ（Webページが表示される画面）の特性を理解することです。理由としては、 画面の横幅と縦幅は多様に変化し、1ページは無限に長くなる 可能性があるためです。

ブラウザの大きさを変更すると、1画面に収まる情報量を変えることができます。また、1ページにコンテンツを大量に載せることで、どこまでもページを長くすることもできます。サイズが固定されている書籍や雑誌、新聞などに対し、1画面に収まる情報量を変化させられることがブラウザの特徴です。

そのため、ブラウザは 画面の左上を起点として上から下、左から右へと、HTML要素を詰めるように並べていくようにデフォルトでレイアウトされています。

displayプロパティの説明で例に挙げた、div要素とspan要素の並びを確認してみましょう。ブロックレベル要素（display: block;）であるdiv要素は上から下へ、インライン要素（display: inline;）であるspan要素は左から右へ並んでいることが分かります。

2-3-4 ボックスモデル

displayプロパティを理解したところで、レイアウトについて学んでいきましょう。

ここでは ボックスモデル について解説します。ボックスモデルはWebページのレイアウトを考えるうえでとても重要な概念なので、何度も読み直してしっかり理解しましょう。

ボックスモデルを理解することで

HTML要素自体の大きさの変更 (padding , width , heightを使う）
HTML要素の位置の変更（display: block;を使う）

をどちらも、ある程度できるようになります。padding, marginなどは、後ほど解説します。

ボックスモデルとは？

ボックスモデルの「ボックス」とは、HTMLの各要素に割り当てられている 四角い領域 のことです。

HTML要素にはdivやspan , p , h1など様々な要素がありますが、それらのHTML要素すべてがボックスという四角い領域として存在しています。

ボックスには下記の4つの領域があります。この4つの領域それぞれに、指定された値（もしくはデフォルト値）が与えられ四角い領域として表示されます。

margin（要素の外側の余白）
border（境界線）
padding（要素の内側の余白）
content area（コンテンツエリア）　→width（幅）、height（高さ）

2-3-5 余白と境界線

下記は、div要素である.boxに対して、余白と境界線を指定しています。

書き方

.box {
    margin: 50px;
    border: 5px solid blue;
    padding: 50px;
    background-color: silver
}

表示

例として挙げたCSSを解説します。

margin: 50px; によって上下左右の外側の余白を 50px ずつとっています。

border: 5px solid blue; によって境界線の太さを 5px, 境界線の種類を solid（実線のほかに破線なども指定可）, 境界線の色を blueにしています。

padding: 50px; によって上下左右の内側の余白を 50px ずつとっています。

わかりやすくするため background-color プロパティを指定しました。background 系のプロパティはpadding（内側の余白）にまで影響するため、paddingとcontent areaを含めた領域が silver になっています。

div要素である.boxのcontent areaが横いっぱいに拡がっているのは、前節で説明したとおり、div要素が display: block; としてデフォルト表示されるブロックレベル要素であるためです。

解説

グレーの破線は、外側の境界線を表しています。

また、オレンジの塗りつぶしはcontent areaを表しています。

2-3-6 コンテンツの幅と高さ

さらにcontent areaのサイズを指定するために、width と height を指定してみましょう。

下記のdiv要素の背景領域のサイズはpadding + content areaであるため、縦の長さの合計は50px(padding-top) + 100px(height) + 50px(padding-bottom) = 200px となります。横の長さの合計も同じく、50px(padding-left) + 100px(width) + 50px(padding-right) = 200px となります。

-topや-botoom、-leftや-rightについては次の章で説明します。

書き方

.box {
    margin: 50px;
    border: 5px solid blue;
    padding: 50px;
    width: 100px;
    height: 100px;
    background-color: silver;
}

表示

解説

グレーの破線は、外側の境界線を表しています。

また、オレンジの塗りつぶしはcontent areaを表しています。

2-3-7 接尾辞をつけて個別に指定する

続いて、margin や border, padding のサイズの指定方法を見てみましょう。

margin や border, padding のサイズは、上下左右を個別に指定することができます。各領域名に対して、上・下・左・右の意味をもつ -top, -bottom, -left, -right を追加することで個別に指定が可能です。

例：margin-top: 50px;（外側の上の余白を50pxにする）

解説

2-3-8 一度に上下左右を指定する

ほかにも、marginとpaddingは、padding: 10px 20px 30px 40px;のように一気に上下左右を決めることができます。このときの順番は上下左右ではなく、padding: 上右下左; と上から時計回り の順番になります。

接尾辞をつけて個別に指定する方法と一度に上下左右を指定する方法は、どちらの書き方もよく使用されるので覚えておきましょう。

一度に上下左右を指定する場合、必ず値を4つ用意する必要はありません。

以下の表のように、値の数が3つの場合には「上」「下」の指定が優先され、「左」と「右」に同じ値が指定されます。ほかの指定方法も確認しておきましょう。

値の数	形式	使用例と意味
4つ	margin: 上右下左;	margin: 10px 20px 30px 40px; （上：10px, 右：20px, 下：30px, 左：40px）
3つ	margin: 上左右下;	margin: 10px 20px 30px; （上：10px, 右：20px, 下：30px, 左：20px）
2つ	margin: 上下左右;	margin: 10px 20px; （上：10px, 右：20px, 下：10px, 左：20px）
1つ	margin: 上下左右;	margin: 10px; （上：10px, 右：10px, 下：10px, 左：10px）

2-3-9 divの中のdivのレイアウト

div要素の.boxの中にさらにdiv要素の.box-innerを入れた場合、親にあたる.boxのcontent area（width、height）を基点として、子の.box-innerの位置が決定されます。次の具体例のmarginに着目してください。

書き方

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML/CSS</title>
		<style>
			.box {
		    margin: 50px;
		    border: 5px solid blue;
		    width: 300px;
		    height: 300px;
		    background-color: skyblue;
			}

			.box-inner {
		    margin: 70px;
		    border: 3px solid green;
		    padding: 20px;
		    width: 100px;
		    height: 100px;
		    background-color: lime;
			}
		</style>
    </head>
    <body>
        <div class="box">
            <div class="box-inner">
                内側のbox
            </div>
        </div>
    </body>
</html>

表示

解説

グレーの破線は、外側の境界線を表しています。

解説の図からわかるように、内側のboxのmarginは外側のboxのborderから70pxの幅が取られています。

2-3-10 Flexboxモデル（2カラムレイアウト）

Webページ全体のレイアウトとして、縦に並べたり横に並べたりする方法を学びましょう。この章では、HTML要素の横並びを学びます。

セクションのタイトルである「2カラムレイアウト」とは、メインコンテンツとサイドバーなど、横並びの2つの区分けを持つレイアウトのことを言います。カラムとは列のことで、2列に並べられたレイアウトを意味します。

なお、下の例では、親要素として2列に並ぶメインとサイドバーを囲むdiv要素（wrapper）を用意しました。

要素の幅を調整する

ブロックレベル要素をそのまま並べるだけでは、各ブロックの幅がブラウザ幅いっぱいになってしまうため、「横並びレイアウト」が実現しません。ボックスを横へ並べるためには、widthプロパティを使用して、幅を縮めることが必要です。

今回はブラウザ幅全体 (100%)に対し、メインを width: 50%; に、サイドバーを width: 30%; にします。

書き方

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML/CSS</title>
		<style>
			header {
		    height: 50px;
		    background-color: #b2d8ff;
			}
			#wrapper {
		    height: 100px;
			}
			#main {
		    width: 50%;
		    background-color: #bfff7f;
			}
			aside {
		    width: 30%;
		    background-color: #ffbf7f;
			}
			footer {
		    height: 50px;
		    background-color: #b2b2ff;
			}
		</style>
    </head>
    <body>
        <header>
            ヘッダー
        </header>
        <div id="wrapper">
            <div id="main">
                メイン
            </div>
            <aside>
                サイドバー
            </aside>
        </div>
        <footer>
            フッター
        </footer>
    </body>
</html>

表示

解説

続いて、メインコンテンツとサイドバーを2カラムにします。今回はメインを左、サイドバーを右に配置することにします。2カラムレイアウトは display: flex; を使用することで実現できます。

下の例では、先ほどの例のメインとサイドバーの親要素である #wrapper に display: flex; のCSSを追記しています。

追記部分のCSS

#wrapper {
    height: 100px;
    display: flex;
}

表示

解説

メインとサイドバーのどちらも、高さが親要素 #wrapper と一緒になり、さらに #wrapper の要素の中で横並びになりました。また、HTML内で先に記述したメインが左側、後に記述したサイドバーが右側に配置されています。このように、display: flex; を使用して、ボックスを横並びにする手法が Flexboxモデルです。比較的最近のブラウザ（Chrome, Firefox, Edgeなど）で対応しています。

配置場所の調整に使用するのが、justify-content プロパティです。今回はメインを左端、サイドバーを右端に配置したいので、display: flex; の下に justify-content: space-between; と追記します。

追記したCSS

#wrapper {
    height: 100px;
    display: flex;
    justify-content: space-between;
}

表示

幅 50% のメイン、幅 20% の空白、幅 30% のサイドバーの順で並ぶデザインを作ることができました。

justify-content プロパティの代表的な値は以下の5種類です。

デザインに応じて使い分けましょう。

プロパティと値	内容
justify-content: flex-start;	すべての要素が左寄せになる（要素間の余白なし）
justify-content: flex-end;	すべての要素が右寄せになる（要素間の余白なし）
justify-content: center;	すべての要素が中央寄せになる（要素間の余白なし）
justify-content: space-between;	最初は左端、最後は右端、要素間の余白は均等に配置される
justify-content: space-around;	すべての要素の位置と要素間の余白が均等になる

2-3-11 メニューボタンなどのHTML要素を横に並べる

Webサイトには、グローバルナビゲーションと呼ばれる全ページに共通で表示されるサイトの主要ページへのリンクが表示されています。これらの多くは横並びに表示されています。このような横並びのボタンを作るための方法として display: inline-block; を紹介します。

先ほどのように display: flex; によって横に並べることも可能ですが、ボタンぐらいの小さなものであれば display: inline-block; を用いた方が簡単で便利です。

HTML5で追加されたinline-blockという表示形式は、ブロックレベル要素とインライン要素の中間のような振る舞いをします。ブロックレベル要素のように高さと幅を持ちつつ、インライン要素のように左から右へ並んでいきます。

まずは下のコードを見てみましょう。この段階ではただのリストです。 li はブロックレベル要素なので、横幅は画面いっぱいまで広がり、1つ1つ縦に並んでいます。

書き方

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>HTML/CSS</title>
    </head>
    <body>
        <!DOCTYPE html>
        <html lang="ja">
            <head>
                <meta charset="UTF-8">
                <title>HTML/CSS</title>
            </head>
            <body>
                <nav>
                    <ul>
                        <li><a href="#">HTML&CSS</a></li>
                        <li><a href="#">JavaScript</a></li>
                        <li><a href="#">jQuery</a></li>
                        <li><a href="#">PHP</a></li>
                        <li><a href="#">Laravel</a></li>
                    </ul>
                </nav>
            </body>
        </html>
    </body>
</html>

表示

画面いっぱいに横幅が広がっているかは、背景を入れると分かりやすいです。

背景色をつけた場合の表示

横並びにするために、li要素に対して display: inline-block;を指定します。

書き方

nav ul li {
    display: inline-block;
}

表示

また、flexboxを使うとさらに簡単に横並びにすることができます。

書き方

nav ul li {
    display: flex;
	justify-content: space-around;
}

表示

05さまざまなCSSセレクタの指定方法

2-4-1 子孫セレクタ

子孫セレクタは、HTML要素の入れ子構造を利用して特定の要素を正確に選択することができます。

例えば、特定のクラスに属する要素の中にある特定の要素にだけスタイルを適用する場合などに便利です。

子孫セレクタの書き方は以下の通りです

親要素 子要素 {
  /* スタイルのプロパティと値 */
}

ここでの「親要素」「子要素」については、要素やクラス名、ID名を設定することができます。

具体的なコードで見ていきましょう。

<div class="container">
  <h2>タイトル</h2>
  <p>これは子孫セレクタの例です。</p>
</div>

この場合、<h2>要素と<p>要素は.containerクラスを持つ<div>要素の子孫です。

子孫セレクタを使用してCSSを記述すると以下のようになります。

.container h2 {
  color: blue;
}

.container p {
  font-size: 30px;
}

こちらにより、<h2>は文字が青色になり、<p>要素は文字サイズが30pxになります。

2-4-2 疑似クラス

疑似クラスは、特定の要素が特定の状態にある場合にのみスタイルを適用するために使用されます。

要素がマウスオーバーされたときや、リンクされたとき、あるいは特定の位置にあるときなど、状態に応じてスタイルを変更したい場合に非常に便利です。

一般的な疑似クラスの例をご紹介します。

疑似クラス	説明
hover	マウスが要素の上に乗ったときに適用される状態。例）リンクの色をマウスオーバー時に変更
active	要素がクリックされている間に適用される状態。例）ボタンのクリック時にボタンの色を変更
focus	要素がフォーカスを受け取ったときに適用される状態。フォームの入力欄にフォーカスがあたったときにスタイルを変更するのに便利。
nth-child(n)	要素の中でn番目にある子要素に対してスタイルを適用。 nには整数や数学的な表現式を指定できる。
nth-of-type(n)	同じ要素の中でn番目にある特定の子要素に対してスタイルを適用する。
first-child	要素の最初の子要素に対してスタイルを適用する。
last-child	要素の最後の子要素に対してスタイルを適用する。

それではそれぞれのコード例を見てみましょう。

/* リンクをマウスオーバーしたときのスタイル */
a:hover {
  color: red;
  cursor: pointer;
}

/* ボタンをクリックしたときのスタイル */
button:active {
  background-color: green;
  color: white;
}

/* フォームの入力欄にフォーカスがあたったときのスタイル */
input:focus {
  border: 2px solid blue;
}

/* リストの奇数番目の要素にスタイルを適用 */
li:nth-child(odd) {
  background-color: #f1f1f1;
}

/* リストの偶数番目の要素にスタイルを適用 */
li:nth-child(even) {
  background-color: #e1e1e1;
}

2-4-3 長さの指定

長さの単位には、さまざまな種類がありますが、大きく「絶対値」と「相対値」の２つに分類することができます。

絶対値

他要素の単位や大きさに影響を受けない値のことで、pxが該当します。以下のように指定すると、他要素の単位や大きさに関わらず、必ずフォントの大きさは20pxになります。

.text {
  font-size: 20px;
}

相対値

他要素の単位や大きさに影響を受け、数値が決まる値のことです。%、em、remなどが該当します。以下のように指定すると、元となる要素の50%、つまり親要素の半分の大きさになります。

.text {
  font-size: 50%;
}

それぞれの単位を詳しく見てみましょう。

px (ピクセル)

画面サイズや他要素の単位、大きさに関わらず、指定した要素そのままのサイズになります。

.text {
  font-size: 20px;
}

% (パーセント)

指定する要素の親要素によって値が変わります。親要素にサイズ指定がされていなければ、「画面幅」が基準となります。

例えば、親要素が200pxで指定したい要素に50%と指定すれば、その大きさは100pxになります。

.text {
  font-size: 50%;
}

em (エム)

フォントや指定している文字の大きさによって値が変わります。1emはfont-size値を基準とした相対的な値となり、下記のコードを例とした場合は、1emが10pxとなるため、2.5emと記載することで、指定したフォントサイズ10pxの2.5倍で出力されます。

親要素でフォントサイズが指定されていない場合は、bodyのデフォルトフォントサイズ(16px)が基準になります。

.base_font {
  font-size: 10px;
}

.font {
  font-size: 2.5em;
}

rem (レム)

ルート要素のフォントサイズが基準となり値が変わります。

ルート要素とは、htmlセレクタを指します。

下記のコードを例とした場合は、1remが20pxとなるため、font1は40pxになります。

em指定の場合は、親要素に影響を受けますが、remの場合はルート要素が基準となるため、

font1-childは10pxになります。

html {
  font-size: 20px;
}

.font1 {
  font-size: 2rem;
}

.font1-child {
  font-size: 0.5rem;
}

2-4-4 色の指定

色を表す記述には、いくつかの種類があります。それぞれ記述方法や特徴などが少しずつ異なるので細かく見ていきましょう。

カラーネーム

色の名前を単語で指定する記述方法です。例えば、赤ならred、青なら blueと記述します。

書き方

.box {
    background-color: blue; /* 背景色指定 */
}

表示

明示的に指定できるため、コード上で何色なのかわかりやすいです。しかし、ブラウザによっては正しく認識されないカラーネームも存在するので、使用する場合は正しく表示されているか確認するようにしましょう。

カラーコード

それぞれの色に付与されているコードである「カラーコード」で指定する記述方法です。

#（シャープ）の後ろに、英数字を記述し、指定します。

何色なのかわかりづらいという難点はありますが、どのブラウザでも認識されます。

書き方

.box {
    background-color: #bfff7f; /* 背景色指定 */
}

表示

RGB

光の三原色を使用した指定方法です。Red（赤）、Green（緑）、Blue（青）の頭文字をとって、RGBと呼ばれています。

基本書式は以下の通りです。

セレクタ {
　　background-color: rgb(赤の数値,緑の数値,青の数値);
}

それぞれの数値は0~255で表され、数値のバランスで色を決定します。

書き方

.box {
    background-color: rgb(255, 191, 127);   /* 背景色指定 */
}

表示

RGBA

RGBに透明度（alpha）が追加され、色を透過して指定することができる方法です。

基本書式は以下の通りです。

セレクタ{
　　background-color: rgba(赤の数値,緑の数値,青の数値,透明度);
}

赤、緑、青の数値についてはRGBと全く同様です。透明度は、0.0~1.0の間で指定し、0.0が透過度0%（無色透明）の状態で、1.0が透過度100%（透過せず色がある）の状態となります。

透明度が指定できると、要素の重なりなどで表現の幅を広げることができます。

書き方

.box {
    background-color: rgba(63, 81, 181, 0.5);   /* 背景色指定（透過度50％） */
}

表示

上のコードを実行した場合には、左側のような表示になります。

色の違いを分かりやすくするため、透過度が100%の場合を右側に用意しました。

2-4-5 要素の固定法

画面の決まった位置に要素を固定させたいときに使用するposition: fixed;について紹介します。

スクロールしても位置が変化しないヘッダーやトップに戻るボタンを表示したいときに使用すると便利です。

基本書式は以下の通りです。

セレクタ {
  position: fixed;
  top: 値;
  right: 値;
  bottom: 値;
  left: 値;
}

position: fixed;が適用された要素は、基準位置が親要素ではなく、「ウィンドウ全体」です。そのため、top: 0;と指定すれば画面の最上部、left: 0;と指定すれば画面の1番左に表示されます。

それでは、具体的なコードを見てみましょう。

書き方

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

.box {
  width: 100px;
  height: 100px;
  background: blue;
  position: fixed;
  top: 50px; /* 画面上から50px */
  left: 50px; /* 画面左から50px */
}

top, leftに値を設定したため、下記の画像のように要素が配置されます。

表示

06レスポンシブデザイン

レスポンシブデザインとは？

PC・タブレット・SPといった異なるデバイスや画面サイズに合わせて画面の表示を調整することで最適なUIを作成することです。

レスポンシブデザインのメリット・デメリットとそれを実現するための３つの方法を順番に解説します。

レスポンシブデザインのメリット

UI・UXの向上　・・・　異なるデバイスでも利用者が快適にコンテンツを閲覧することができます。
開発の効率アップ　・・・　１つのHTMLソースで、PC・タブレット・スマホの画面表示を調整することが可能なため、運用保守がしやすくなります。

レスポンシブデザインのデメリット

パフォーマンスの最適化　・・・　画像の最適化や不要なリソースの遅延読み込みなど、動作のパフォーマンスを意識した対策が必要になります。
クロスブラウザテスト　・・・　異なるブラウザやデバイスでのテストが不可欠です。特に古いバージョンのブラウザでは互換性がない場合があるので留意する必要があります。

2-5-1 グリッドやフレックスボックスを利用した柔軟なレイアウト

グリッドやフレックスボックスを利用して、コンテンツを相対的な単位で配置する方法です。

グリッド、フレックスボックスについては前項＜2-3-10 Flexboxモデル（2カラムレイアウト）＞で説明していますのでそちらをご参照ください。

2-5-2 メディアクエリの利用

CSS3のメディアクエリを使用して、デバイスの特定の条件（画面幅、解像度など）に基づいてスタイルを変更します。これを利用すると異なるデバイスに最適化されたスタイルを作成することができます。

このスタイルを作成するにはまずブレイクポイントについて理解する必要があります。

ブレイクポイントとは

レスポンシブデザインにおいてブレイクポイントは、異なるデバイスや画面サイズに対応するために、デザインやスタイルを変更する特定の画面幅のポイントを指します。

具体的なデバイスやレイアウトによって異なりますが、年々新しく発売されるデバイスの画面幅も変化していくため常に最新のブレイクポイントを知り、どのようなデバイスのシェアが高いかを理解する必要があります。

それでは一例としてブレイクポイントを紹介します。このブレイクポイントが正解という訳ではないのでブレイクポイントを変更する場合もありますし、微調整が必要な場合はもっと細かくブレイクポイントを作る場合もあります。

デバイス	横幅
PC	1025px以上
タブレット	768px～1024px
SP	375px～767px

ではこのブレイクポイントを使って実際にメディアクエリを追加します。

(max-width: 375px) の部分をmax-widthにするか、min-widthにするかで画面幅の基準を最大値にするか最小値にするか変更することができます。

PC基準でコーディングすることをデスクトップファースト、SP基準でコーディングするすることをモバイルファーストと呼びます。

それでは実際のソースコードで見てみましょう。

下記のどちらの方法でコーディングしてもPC幅ではh1要素が48px、タブレット幅では32px、SP幅では16pxで表示されるようになります。

1. PC基準（デスクトップファースト）でコーディングする場合

/* @media以外の所は全てのサイズで読み込まれるスタイル（PC） */ 
h1 {
  font-size: 48px;
}
@media screen and (max-width: 1024px) {
  /* タブレットサイズの画面幅（768px～1024px）で適用されるスタイル */
  h1 {
    font-size: 32px;
  }
}
@media media screen and (max-width: 767px) {
  /* SPサイズの画面幅（375px～767px）で適用されるスタイル */
  h1 {
    font-size: 16px;
  }
}

2. SP基準（モバイルファースト）でコーディングする場合

/* @media以外の所は全てのサイズで読み込まれるスタイル（SP） */ 
h1 {
  font-size: 16px;
}
@media media screen and (min-width: 768px) {
  /* タブレットサイズの画面幅（768px～1024px）で適用されるスタイル */
  h1 {
    font-size: 32px;
  }
}
@media media screen and (min-width: 1025px) {
  /* PCサイズの画面幅（1025px以上）で適用されるスタイル */
  h1 {
    font-size: 48px;
  }
}

このようにブレイクポイントを利用してスタイルを適用することで画面幅に応じたデザインにすることが可能となります。

2-5-3 viewportの設定

viewportを利用すると、PCデザインをそのままタブレットやSPに縮小して表示することができますが、デザイン自体はPCデザインのままなのでSPで閲覧する際はズームする必要があります。

それでは実際に設定してみます。HTMLのセクションに、viewportの設定を行うためのタグを追加します。

<head>
<!-- 通常のメタタグ -->
<meta charset="UTF-8">
<meta name="description" content="サイトの説明文">
<!-- ビューポートの設定メタタグ -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

プロパティ	説明
width=device-width	デバイスの画面幅に基づいてビューポートの幅を設定します。これにより、デバイスの画面幅に合わせてコンテンツが自動的に調整され、レスポンシブな表示が可能になります。
initial-scale	initial-scale=1.0は、ページが最初に読み込まれたときの拡大率を指定します。 1.0は通常の拡大率で、これによりユーザーはページを通常の大きさで閲覧できます。

07メモ帳を作成してみよう！

ここまで学んだことを使い以下の画像のようなメモ帳を作成します。

※予定の登録処理等は他の言語の研修で行います。

2-6-1 ファイルを作成する

Documentsフォルダに「memo_css」というフォルダを作成しましょう。

その後以下の画像のようにファイルを作成しましょう。

2-6-2 HTMLを記述する

まずはHTMLの雛形を作成します。

PhpStormでは「！＋tab」もしくは「html:5」と入力すると自動でひな形を作成してくれます。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

</body>
</html>

上記のように表示されていたらOKです。

今のままだと、lang=”en”やタイトルが「Document」になってしまっているので変更します。

以下のように書き換えてください。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>メモ帳</title>
</head>
<body>

</body>
</html>

書き換えた場所は２か所になります。

lang=”en” ⇒ lang=”ja”
<title>Document</title> ⇒ <title>メモ帳</title>

変更できたらindex.htmlをブラウザで開いてみましょう。

上記の画像のようにタブの名前が「メモ帳」と表示されていたらOKです。

まだなにも記述していないので、画面は真っ白になっています。

では、実際にHTMLを書いていきましょう。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>メモ帳</title>
</head>
<body>
    <div class="container">
        <div class="memo_area">
            <div class="memo_form">
                <h2>メモを追加</h2>
                <form action="">
                    <input class="memo_text" type="text" name="" id="">
                    <input type="submit" value="追加">
                </form>
            </div>
            <div class="memo_show">
                <div class="memo_item">
                    <div class="memo_title">
                        <time>2022.10.10</time>
                        <p>サッカー</p>
                    </div>
                    <div class="btn_area">
                        <div class="edit_form">
                            <form action="">
                                <input type="submit" value="編集">
                            </form>
                        </div>
                        <div class="del_area">
                            <form action="">
                                <input type="submit" value="削除">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="memo_item">
                    <div class="memo_title">
                        <time>2022.10.10</time>
                        <p>大阪旅行</p>
                    </div>
                    <div class="btn_area">
                        <div class="edit_form">
                            <form action="">
                                <input type="submit" value="編集">
                            </form>
                        </div>
                        <div class="del_area">
                            <form action="">
                                <input type="submit" value="削除">
                            </form>
                        </div>
                    </div>
                </div>
                <div class="memo_item">
                    <div class="memo_title">
                        <time>2022.10.10</time>
                        <p>メモ内容</p>
                    </div>
                    <div class="btn_area">
                        <div class="edit_form">
                            <form action="">
                                <input type="submit" value="編集">
                            </form>
                        </div>
                        <div class="del_area">
                            <form action="">
                                <input type="submit" value="削除">
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

画面を読み込んでみると以下の画像のように表示されるはずです。

このままでは見にくく使いにくいメモ帳になってしまいます。

見た目を装飾するためにここからCSSを追加していきます。

まずはCSSファイルを読み込みます。

最初にcssフォルダの中にstyle.cssを作成しました。作成済のstyle.cssを読み込ませてみましょう。

HTMLのheadタグの最後に以下のコードを追記してください。

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

次から実際にCSSを記述していきます。

2-6-3 CSSを記述する

まずはCSSが本当に読み込まれているか確認してみましょう。

style.cssに以下のコードを記述してください。

body{
    background-color: #edf2f4;
}

記述できたら画面を再読み込みしてみましょう。

全体の背景色が薄い灰色になれば無事にCSSファイルが読み込まれています。

※他の確認方法

デベロッパーツールを開いた後「source」をクリックしてみましょう。]

ここでファイル構造を確認し、cssフォルダの中にstyle.cssがあれば無事に読み込まれています。

ここから実際にCSSを記述していきます。

まずはメモを追加するフォームから作成していきます。

以下のコードをstyle.cssに追加してください。

.container{
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
}

.memo_area{
    display: flex;
    justify-content: space-between;
}

.memo_form{
    text-align: center;
    width: 40%;
}

.memo_form input[type="submit"]{
    border-radius: 5px;
    border: none;
    padding: 5px 20px;
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}

.memo_form h2{
    text-align: center;
}

.memo_text{
    display: block;
    margin: 0 auto 15px;
    border: none;
    height: 20px;
}

メモ追加エリアが出来上がりました。

CSSの解説をします。

まず以下の部分

.container{
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
}

ここでは最大横幅を設定しています。

ページの横幅はデバイスによって変わります。

画面が小さくなる場合はメディアクエリで設定できますが、大きくなり超横長画面でもデザインを崩さずに表示させる必要があります。

さらに、横幅をそろえることでサイトに統一感を出すこともできます。

.memo_area{
    display: flex;
    justify-content: space-around;
}

次に上記の部分です。

display: flex;でメモ入力部分とメモ内容表示部分を横並びにしてます。

justify-content: space-around;で横並びにした要素の間隔を均等にしています。

もし忘れている場合は「フレックスボックス」の部分を見直してみましょう。これがない場合は要素が左寄りになってしまいます。

.memo_form input[type="submit"]{
    border-radius: 5px;
    border: none;
    padding: 5px 20px;
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}

続いて上記の部分についてです。

まず、セレクタのinput[type="submit"]ですが子孫セレクタに特定のインプットタグ等も指定することもできます。

ここではinputタグでtypeがsubmitである要素を指定することができます。他にもinput[name=”mail”]などのname属性を指定することが可能です。

ではCSSの中身についての解説です。

border-radius: 5px;で「追加ボタン」の四隅を丸にしています。

border: none;では「追加ボタン」の枠線を消しています。消さなくても問題ないですが初期デザインでは少し古っぽくなるので今回は削除します。

これで「追加ボタン」のCSSは完成です。最後に以下の部分です。

.memo_text{
    display: block;
    margin: 0 auto 15px;
    border: none;
    height: 20px;
}

display: block;とmargin: 0 auto 15px;でテキストエリアを真ん中にしています。

ブロック要素に対してmargin: auto;を設定することで要素を真ん中にすることができます。

注意しないといけないのは「ブロック要素」であることです。インライン要素では真ん中にはなりません。他にはdisplay: flex; と justify-content: center;を組み合わせることで要素を真ん中にそろえることができます。

続いて以下のCSSをstyle.cssに追記してください。

.memo_item{
    background-color: #fefefe;
    display: flex;
    width: 100%;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 5px;
}

.memo_title{
    width: 90%;
}

.memo_title p{
    margin: 0;
}

.memo_title time{
    font-size: 10px;
}

.memo_itemのdisplay: flex;ですが、HTMLの親要素に対して設定することで「memo_title」「btn_area」クラスを横並びにしています。

<div class="memo_item">
    <div class="memo_title">
        <time>2022.10.10</time>
        <p>サッカー</p>
    </div>
    <div class="btn_area">
        <div class="edit_form">
            <form action="">
                <input type="submit" value="編集">
            </form>
        </div>
        <div class="del_area">
            <form action="">
                <input type="submit" value="削除">
            </form>
        </div>
    </div>
</div>

display: flex;を設定する前

display: flex;を設定した後

横並びになりましたね。

display: flex;は横並びにしたい要素の親要素に対して指定します。

最後に以下のCSSをstyle.cssに追記してください。

.btn_area{
    display: flex;
    justify-content: center;
    align-items: center;
}

.edit_form{
    margin-right: 10px;
}

.edit_form input,
.del_area input {
    border-radius: 5px;
    padding: 5px 12px;
    border: none;
}
.memo_form input[type="submit"]:hover,
.edit_form input:hover,
.del_area input:hover{
    opacity: .8;
}

.edit_form input{
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}

.del_area input{
    background-color: #d64045;
    color: #fefefe;
    font-weight: bold;
}

まずは下記の部分についてです。

.btn_area{
    display: flex;
    justify-content: center;
    align-items: center;
}

display: flex;で横並びにした後、justify-content: center;とalign-items: center;で要素が縦横真ん中にくるように設定します。justify-content: center;で要素を横真ん中に、align-items: center;で要素を縦真ん中に設定しています。

最後に下記の部分ですが、「追加」「編集」「削除」ボタンがホバーされたとき（マウスが要素に乗った時）透明度を「0.8」にしています。「.8」は「0.8」という意味です。

.memo_form input[type="submit"]:hover,
.edit_form input:hover,
.del_area input:hover{
    opacity: .8;
}

これでようやくメモ帳らしくなりました！

CSSのプロパティを暗記するより、横並びにするにはどうしたらいいか？要素を真ん中にするにはどうCSSを組み合わせたらいいかを理解するようにしましょう。

以下全体のCSSです。

body{
    background-color: #edf2f4;
}

.container{
    max-width: 980px;
    margin-right: auto;
    margin-left: auto;
}

.memo_area{
    display: flex;
    justify-content: space-between;
}

.memo_form{
    text-align: center;
    width: 40%;
}

.memo_form input[type="submit"]{
    border-radius: 5px;
    border: none;
    padding: 5px 20px;
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}

.memo_form h2{
    text-align: center;
}

.memo_text{
    display: block;
    margin: 0 auto 15px;
    border: none;
    height: 20px;
}

.memo_show{
    width: 60%;
}

.memo_item{
    background-color: #fefefe;
    display: flex;
    width: 100%;
    margin-top: 10px;
    padding: 5px 10px;
    border-radius: 5px;
}

.memo_title{
    width: 90%;
}

.memo_title p{
    margin: 0;
}

.memo_title time{
    font-size: 10px;
}

.btn_area{
    display: flex;
    margin: auto;
}

.edit_form{
    margin-right: 10px;
}

.edit_form input,
.del_area input {
    border-radius: 5px;
    padding: 5px 12px;
    border: none;
}
.memo_form input[type="submit"]:hover,
.edit_form input:hover,
.del_area input:hover{
    opacity: .8;
}

.edit_form input{
    background-color: #38B000;
    color: #fefefe;
    font-weight: bold;
}

.del_area input{
    background-color: #d64045;
    color: #fefefe;
    font-weight: bold;
}

08課題

自分の自己紹介サイトを作成してみましょう。

画像やテーブルなどを用いて簡単なサイトを作成してもらいます。

これまで学んできたCSSセレクタ以外にも、検索して見つけた教材にないCSSを用いても問題ありません。

※CSSにこだわりすぎないようにしましょう！

Lesson1_HTML_CSSフォルダ内に「kadai」フォルダを作成し、以下のファイル構造にしてください。

Lesson1_HTML_CSS
 ├ Chapter1_HTML
 ├ Chapter2_CSS
 └ kadai
    ├ css
    |  └ style.css
    └ index.html

index.htmlにはHTMLをstyle.cssにはCSSを記述し、index.html内でstyle.cssを読み込むようにしてください。

01CSSとは？

02CSSのファイル作成

CSSのコメントアウト方法

03CSSの記述方法

04Webページのレイアウト

2-3-1 displayプロパティのデフォルト値の違い

2-3-2 blockとinline

2-3-3 デフォルトのレイアウト

2-3-4 ボックスモデル

2-3-5 余白と境界線

2-3-6 コンテンツの幅と高さ

2-3-7 接尾辞をつけて個別に指定する

2-3-8 一度に上下左右を指定する

2-3-9 divの中のdivのレイアウト

2-3-10 Flexboxモデル（2カラムレイアウト）

要素の幅を調整する

2-3-11 メニューボタンなどのHTML要素を横に並べる

05さまざまなCSSセレクタの指定方法

2-4-1 子孫セレクタ

2-4-2 疑似クラス

2-4-3 長さの指定

2-4-4 色の指定

2-4-5 要素の固定法

06レスポンシブデザイン

レスポンシブデザインとは？

レスポンシブデザインのメリット

レスポンシブデザインのデメリット

2-5-1 グリッドやフレックスボックスを利用した柔軟なレイアウト

2-5-2 メディアクエリの利用

ブレイクポイントとは

1. PC基準（デスクトップファースト）でコーディングする場合

2. SP基準（モバイルファースト）でコーディングする場合

2-5-3 viewportの設定

07メモ帳を作成してみよう！

2-6-1 ファイルを作成する

2-6-2 HTMLを記述する

2-6-3 CSSを記述する

08課題

コメント

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル