プロデミア

HTML＆CSS

HTML

HTMLとは？

HTMLとは「ハイパーテキスト・マークアップ・ランゲージ（Hyper Text Markup Language）」のことで、WEBページを作成するための言語です。

Webページの骨組みとして利用され、さまざまな場面で使用されます。

ただし、HTMLだけで使用することはあまりなく、多くはCSSやJavaScriptなどの言語とともに用います。

CSSやJavaScriptについてはChapter2以降で解説します。

レッスンを始める前にCloud9に作業用のフォルダを作成しましょう。

「Lesson1_HTML_CSS」という名前で新しくフォルダを作成しましょう。

このレッスンでは「Lesson1_HTML_CSS」フォルダの中にファイルを追加していきます。

「Lesson1_HTML_CSS」フォルダの中に新たに「Chapter1_HTML」を作成しましょう。

Lesson1_HTML_CSS
 └ Chapter1_HTML

1-1 HTMLの骨組み

HTMLの骨組みは以下のコードです。

「Chapter1_HTML」ファルダの中に「html_1.html」を作成し、以下のコードを張り付けてください。

<!doctype html>
<html lang="ja">
        <head>
            <!-- ファイルの読込などを行う -->
        </head>
        <body>
            <!-- ここに記載した内容が画面に表示される -->
        </body>
</html>

HTMLは基本的に<タグ名></タグ名>という形で記述します。

最初の<タグ名>を開始タグ、</タグ名>を終了タグまたは閉じタグといいます。

タグの中に書かれている文字を要素名といい、書かれている内容がその文書でどのような意味を持つのかを示すことができます。タグは画面には表示されません。

それぞれのタグがどのような意味を持っているのか、1つずつ解説していきます。

1. <!doctype html> この部分は「これから書く内容はHTMLですよ」ということを宣言しています。

2. <html lang=”ja”></html> HTMLを記述する場合はまず<html></html>を記述します。あまり深く考えなくて大丈夫です。 ※lang=”ja”は言語が日本語であることを表しています。英語の場合は「en」と記述します。

3. <head></head> headタグといわれる部分で、この中でサイトに関する情報やCSSファイルなどを読み込みます。 例えば、メタ情報と呼ばれるサイトに関する情報や、linkタグで他のファイルを読み込んだり、　titleタグでブラウザのタブに表示されるサイト名を設定したりします。

 

①　<!doctype html>

具体例
・メタ情報
<meta name=”description” content=”サイトの説明文”>
　→検索されたときのサイトの説明文を設定できます
<meta name=”twitter:url” content=”リンク先URL”>
　→twitterで共有され、リンクが押されたときのリンク先を設定できます

・ファイル読み込み
<link href=”cssファイル名” rel=”stylesheet”>

・タイトル設定
<title>サイトタイトル</title>

4. <body></body> bodyタグといわれる部分で、実際に画面に表示される部分を記述します。 画面表示に関するHTMLの記述方法については、次のChapter1-2で詳しくご紹介します。

まとめると、以下の画像のように記述場所を分けます。

コメントとは？
骨組みのコードの中で<!—　—>で記載されているものをコメントといいます。
コメントは画面には表示されません。開発時のメモを残すときに活用します。

1-2 HTMLの記述方法

先ほどHTMLの骨組みについて解説しましたが、ここからは実際にbodyタグ内に記載し、画面に表示する具体的なHTMLの記述方法について解説します。

  • 段落（文章）
  • 文章中の改行
  • 画像
  • ページリンク
  • リスト
  • 表
  • フォーム

具体的には以上の８つをご紹介します。

1-2-1 段落【p要素】

書き方

<p>テキストが入ります。</p>

表示

説明

p要素のpは Paragraph（パラグラフ：段落）の略です。

段落ごとに区切った文章を書きたい場合は、各段落をpタグでくくります。

３段落の文章であれば以下のようになります。

<p>一段落目</p>
<p>二段落目</p>
<p>三段落目</p>

1-2-2 段落【br要素】

書き方

<p>改行にはbrタグを使います。<br>Enterキーで改行しただけでは認識されません。</p>

表示

説明

brは BReak（断つ）の略です。

先ほどのpタグでは開始タグ(<p>)と終了タグ(</p>)がありましたが、br要素については終了タグが必要ありません。

HTMLではbr要素を使わないと改行ができません。画面幅によって自動改行される場合はありますが、空白スペースなどでは改行は行われません。

<p>改行にはbrタグを使います。<br>Enterキーで改行しただけでは認識されません。</p>
<p>改行にはbrタグを使います。

画像のようにbr要素を含む場合は正しく改行されていますが、スペースがたくさん入った場合は改行されません。

1-2-3 画像【img要素】

書き方

<img src="FMnetロゴ.png" alt="F&Mnetのロゴ">

表示

説明

imgは IMaGe（画像）の略です。img要素もbr要素と同様、終了タグのない要素です。

img要素を使用する際は、src属性に画像のURLを指定することで画像を表示します。

srcは SouRCe（源）の略です。

ここで指定するURLは、パスに気を付ける必要があります。パスについてはLesson1-6で詳しく解説します。

さらにalt属性についても理解しておきましょう。

alt は ALTernate（代替）の略で、画像に対するテキストでの説明を記述します。

通常は見えませんが、画像がうまく表示されなかったときなどに表示される画像の解説テキストになります。また、視覚障害や認識機能障害を持つ方のための音声補助ソフトが読み上げてくれる役割もあります。

属性については、Lesson1-4で詳しく説明します。

1-2-4 ページリンク【a要素】

書き方

<a href="https://www.officestation.jp/">オフィスステーション</a>

表示

説明

aは Anchor（アンカー：錨）の略です

<a></a>で囲まれた文字列が画面に表示され、リンクになります。

href属性にはリンク先のURLを設定します。

また、文字だけでなく画像をリンクにすることもできます。

<a href="https://www.officestation.jp/">
   <img src="ofs.jpg" alt="オフィスステーション">
</a>

1-2-5 リスト【li ul ol要素】

リストを表示する場合も、要素を指定する必要があります。

順序の有無で書き方が異なります。

  • 順序なしリスト

書き方

<ul>
    <li>HTML&CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
    <li>SQL</li>
    <li>Laravel</li>
</ul>

表示

説明

ulとは Unordered Listの略で、「順序のないリスト」の意味です。

liは List Itemの略で、リスト内の1つの項目を意味します。

<ul></ul>で囲った中に必要な数だけ<li></li>を記述していきます。

また、リストの前についている「・」は、Lesson1-2で紹介するCSSで消すこともできます。

  • 順序ありリスト

書き方

<ol>
    <li>HTML&CSS</li>
    <li>JavaScript</li>
    <li>PHP</li>
    <li>SQL</li>
    <li>Laravel</li>
</ol>

表示

説明

olとは Ordered Listの略で、「順序のあるリスト」の意味です。

使い方はulとまったく同じです。

ol要素を用いた場合、自動的に番号が表示されます。

1-2-6 表【table要素】

書き方

<body>
  <table border="1">
    <thead>
	    <tr>
          <th></th>
          <th>名前</th>
          <th>性別</th>
          <th>電話番号</th>
        </tr>
    </thead>
    <tbody>
	    <tr>
          <th>1</th>
          <td>山田 太郎</td>
          <td>男</td>
	      <td>09011112222</td>
        </tr>
        <tr>
          <th>2</th>
          <td>江坂 次郎</td>
          <td>男</td>
          <td>09033334444</td>
	    </tr>
	    <tr>
	       <th>3</th>
           <td>吹田 花子</td>
           <td>女</td>
           <td>09055556666</td>
	    </tr>
     </tbody>
  </table>
</body>

表示

説明

テーブル（表）を作成したい場合は、table要素を使います。

他にもさまざまな要素を使用するので、合わせて覚えておきましょう。

table 表を始める要素、最初に書く。必須
thead 表の見出し（表の一番上の部分）を書くときに使う。
tbody 表の内容を書くときに使う。
tr table rowの意味。横一列を書くときに使う。必須
th

table headの意味。見出しの内容を書くときに使う。

デフォルトで太字になる。必須
td table dataの意味。内容を書くときに使う。必須 
table
├ thead
│  └ tr
│     └ th
└ tbody
   └ tr
      ├ th
      └ td

テーブルのHTML構造は上記の通りです。

今回は表が見やすいように<table border="1">としています。

このように指定することで表を囲む境界線が表示されます。

続いて表の内容を記述するtbodyについて見ていきましょう。

thタグとtdタグはtrタグの中に記述します。

thタグとtdタグの数は同じにしましょう。

同じでなければ、テーブルのレイアウトが崩れてしまいます。

1-2-7 フォーム【form要素】

書き方

<form>
    <label for="name">名前</label>
    <input type="text" id="name">
    <br>

    <label for="tel">電話番号</label>
    <input type="tel" id="tel">
    <br>

    <label for="email">メールアドレス</label>
    <input type="email" id="email">
    <br>

    <label for="password">パスワード</label>
    <input type="password" id="password">
    <br>

    <input type="submit" value="登録する">
</form>

表示

説明

form要素はお問合せフォームなどによく使われます。

また、Lesson3以降で学習するJavaScriptやPHPでも使用するので覚えておきましょう。

form内の要素について見てみましょう。

label要素はinput要素のためのラベル（表示用の項目名）で、 for="" の属性でinput要素のid属性（Lesson1-4-1で解説）を指定します。例えば「名前」「電話番号」「メールアドレス」「パスワード」のような表示に使うものです。

input要素は実際の入力エリアを指します。

type=""によってどんな形式のデータが入力されるのかを指定します。

typeには以下のような種類があります。

text: テキストフィールド。文字列を入力することができます。

password: パスワードフィールド。文字列を入力することができますが、入力された文字は「●」で表示されます。

radio: ラジオボタン。複数の選択肢の中から1つだけを選択することができます。

checkbox: チェックボックス。複数の選択肢の中から複数を選択することができます。

submit: 送信ボタン。フォームを送信するためのボタンです。

reset: リセットボタン。フォームの入力内容をクリアするためのボタンです。

file: ファイル選択フィールド。ファイルを選択するためのボタンと、ファイル名を表示する
テキストフィールドがあります。

hidden: 隠しフィールド。フォームを送信するときに、このフィールドに入力された値も一緒に送信されますが、画面上には表示されません。

image: 画像ボタン。画像をクリックすることでフォームを送信することができます。

書き方の例

// テキスト
<input type="text">
// パスワード
<input type="password">
// ラジオボタン
<input type="radio">
// チェックボックス
<input type="checkbox">
// 送信ボタン
<input type="submit" value="submitボタン">
// リセットボタン
<input type="reset" value="リセットボタン">
// ファイル選択フィールド
<input type="file">
// 日付選択フィールド
<input type="date">

表示例

form要素には、action属性やmethodなどを指定できますが、これらについてはLesson7 PHPの中で詳しく触れていきます。

1-2-8 divタグ

書き方

<div>
  <a href="<https://www.officestation.jp/>">オフィスステーション</a>
</div>

表示

説明

divはDIVision（部分）の略です。

div要素は表示されることはありません。また、特に何か特徴をもつ要素でもありません。

ただ、Lesson1-2で学習するCSSで多くの恩恵をもたらしてくれますので、覚えておきましょう。

1-3 インデント

ここまでさまざまな要素を紹介してきましたが、タグごとに段落の開始位置が揃っていたことに気づいたでしょうか。これをインデントといいます。

下の図は、Chapter1-2-6のコードを抜粋したものです。インデントが揃っているため、タグごとの関係が目で追いやすくなっています。

インデントはタブ、もしくはスペースでつけることができます。

1-4 属性

属性は、次のようにHTMLやXMLの要素に記述します。

<要素 属性="値">

属性は、HTMLやXMLの要素に対してさまざまな情報を指定することができます。

例えば、HTMLのa要素にはhref属性があり、この属性を使用することでリンク先のURLを指定することができます。

<a href="<https://example.com/>">リンクテキスト</a>

1-4-1 id属性

id属性とは、HTMLやXMLなどのマークアップ言語で使用される属性のことを指します。

id属性は、要素を一意に識別するために使用します。

次のように、HTMLやXMLの要素に記述します。

<h1 id="title">こんにちは</h1>

id属性の値は、HTMLやXMLドキュメント内で一意である必要があります。つまり、同じ値を持つid属性を複数の要素に指定することはできません。

1-4-2 class属性

class属性とは、HTMLやXMLなどのマークアップ言語で使用される属性のことを指します。

次のようにHTMLやXMLの要素に記述します。

<h1 class="title h1">こんにちは</h1>

class属性はid属性とは違い複数の値を持つことができます。

一意である必要がないということです。

また、class属性とid属性を同時に持たせることもできます。

<h1 class="title h1" id="title">こんにちは</h1>

1-5 デベロッパーツールの使い方

ここでは開発中のデバックやちょっとした確認のときによく使われるデベロッパーツールの使い方について説明します。

1-5-1 デベロッパーツールについて

デベロッパーツールとは、Webブラウザに搭載されている、Webページの開発やデバッグを行うためのツールのことを指します。

デベロッパーツールを使用すると、WebページのHTMLやCSSを確認したり、JavaScriptのコンソールを開いたりすることができます。

デバッグとは？ プログラムやシステムに潜む不具合や
バグを発見し、修正することを指します。デバッグを行うことで、
プログラムやシステムが正しく動作するようになります。

1-5-2 デベロッパーツールの使い方

①　開き方

【開き方その１】

右クリックで検証をクリック

【開き方その２】

ctrl + shift + j　を押す

【開き方その３】

F12　を押す

②　使い方

下の画像の赤丸をクリックしWebページの適当な要素にカーソルを持って行ってください。

実際にHTMLやこの後出てくるCSSを編集することができます。

※変更は自分のパソコンにしか反映されません。さらに画面を読み込むともとに戻ります。

Chapter2で学習するCSSや送受信したデータ、URLなど様々な情報をデベロッパーツールで確認することができます。

1-6 ファイルのパス

ここではファイルのパスについて解説します。

ファイルパスはファイルや画像など、呼び出すファイルの場所を指定するための文字列です。

ページの中でリンクを貼ったり、画像を読み込んで表示させたりするときに、呼び出し元のページ（例えば今回はindex.html）から見て「読み込みたいファイルがどこにあるのか」を指定します。

パスの指定方法は相対パスと絶対パスと呼ばれる方法が存在します。

1-6-1 相対パス

相対パスは、基本となるパスの書き方です。「呼び出し元のファイルを起点として、呼び出し先のファイルがどの位置にあるのか」を示します。下図を例に見てみましょう。

※top内にあるindex.htmlがトップページです。

top
├ first
│  └ one
│     └ index.html
├ second
│  └ two
│     ├ index.html
│     └ css
│       └ style.css
├ third
│  └ three
│     ├ index.html
│     └ main.js
└ index.html

topフォルダ内には複数のフォルダが入っており、階層構造になっています。

firstやsecondなどのサブフォルダは、「今 topフォルダで作業している」という指定がされれば、そのサブフォルダ名などを確認できます。

一方で、main.jsはthirdフォルダ内のthreeフォルダに移動しないとファイルを確認できません。

このように現在どこの位置で作業をしているのかを示すカレントディレクトリ（カレントフォルダ、作業ディレクトリ）を指定する必要があります。

HTMLファイルなどを作成するとき、そのファイルがどこのフォルダにあるのかを示すのがカレントディレクトリになります。

では、top フォルダ内の index.html から css フォルダの中にある style.css を呼び出す方法を考えてみましょう。つまり、カレントディレクトリは、top となります。

HTMLは以下のようになります。

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

topフォルダ内のindex.html の中で ./css/style.css と書いた場合、どういう意味を持っているのか順番にたどって見てみましょう。

  1. ./：index.html と同じ階層にある
  2. css/：cssフォルダの中の
  3. style.css：style.css を呼び出す

このようになります。

フォルダの区切りには/を使います。./は「記述されたファイルと同じ階層にある」という意味です。

次は thirdフォルダのthreeフォルダ内にある index.html から style.css を呼び出す場合です。 thirdフォルダのthreeフォルダ内にある index.html と secondフォルダのtwoフォルダのcssフォルダ内にある style.css は異なるフォルダ（ディレクトリ）になります。つまり、cssフォルダ内に該当するファイルがあるのかどうかは、そのフォルダに移動（フォルダを指定）しないと呼び出すことができません。 したがってこの場合は、以下の順番で呼び出します。

  1. ../：1つ上の階層へ行く（thirdフォルダ）
  2. ../：さらに1つ上の階層へ行く（topフォルダ）
  3. second/：secondフォルダへ移動して
  4. two/：twoフォルダへ移動して
  5. css/：cssフォルダへ移動して
  6. style.css：その中の style.css を呼び出す

以上をまとめて、../../second/two/css/style.css と記述します。

../ は「1つ上の階層へ行く」という意味です。

よって、third/three/index.html では、次のように書いて、 style.cssファイルを呼び出します。

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

画像を呼び出す場合や、リンクを張る場合も、同じく../を使えます。../は階層ごとに1セットずつ増えます。

CSSが読み込めない、画像が表示されない場合などは、このパスを間違えている可能性が高いです。再度、位置関係と階層を確かめてみましょう。

1-6-2 絶対パス

相対パスが「呼び出し元のファイルを起点として、呼び出し先のファイルがどの位置にあるのか」を示すのに対し、絶対パスは「サイトの最上位を起点として、呼び出し先のファイルがどの位置にあるのか」を示します。 絶対パスは、呼び出したいファイルが同じサイト構成内にある場合とない場合で記述方法が異なってきます。まずは、同じサイト構成内にある（同一サーバー内のファイルを参照する）場合を見ていきましょう。

上図のようなサイトで、secondフォルダのtwoフォルダ内のindex.htmlファイルおよびfirstフォルダのoneフォルダ内のindex.htmlファイル、thirdフォルダのthreeフォルダ内のindex.htmlファイルのすべてにcssフォルダ内にあるstyle.cssを適用したいと考えます。

しかし、先に紹介した相対パスで指定した場合は次のようになってしまい、ファイルごとに修正する必要が出てきます。

・secondフォルダのtwoフォルダ内のindex.htmlファイルでの指定方法

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

・firstフォルダのoneフォルダ内のindex.htmlファイルおよびthirdフォルダのthreeフォルダ内のindex.htmlファイルでの指定方法

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

このようにファイルによって指定する方法が変わってくるのは、カレントディレクトリ（カレントフォルダ、作業ディレクトリ）が異なっているためです。

では、カレントディレクトリについては無視し、サイト構成の上位階層から指定する方法を用いて上記を書き換えることにします。

上図の場合、topフォルダから構成されていますが、サイト構成の最上位ディレクトリ（フォルダ）を「/」で表します。つまり、cssフォルダ内にあるstyle.cssファイルを絶対パスにて指定すると以下のとおりとなります。

・絶対パスでのcssファイルの適用方法

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

ただし、この書き方ができるのは、呼び出したいファイルが同じサイト内にある必要があります。

この書き方では、href属性で指定しているファイルパスの先頭が「/」から始まっていることがポイントになります。 絶対パスは、どのファイルから参照するにしてもパスが変わることがありませんので、先ほど紹介した3つのindex.htmlファイル内での指定方法が同じになります。

次に、呼び出したいファイルが同じファイル構成内にない場合を見てみましょう。

例えば、下図のような構成のサイトのtopフォルダにあるcssフォルダ内のstyle.cssファイルを呼び出したいとします。

絶対パスはサイトの最上位から呼び出し先のファイルがどこにあるかを示す必要がありますので、「sample.com」から「style.css」までを順に記述します。

この際、「sample.com」はこのサイトのドメイン名となるので「http://」のうしろから書き始めます。

・sample.comのcssファイルの適用方法

<link rel="stylesheet" href="<http://sample.com/top/css/style.css>">
 ドメインとは？ コンピューターやネットワークは「IPアドレス」という
数値によって識別されていますが、それを分かりやすい文字に置き換えたものが「ドメイン」です。
ネットワーク上の「住所」と表現されることが多いです。

Chapter2 CSSとは？

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

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

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

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

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

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

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

h1 {
  color: red;
}

2-1 CSSのファイル作成

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

「Lesson1_HTML_CSS」フォルダ内に新しく「Chapter2_CSS」フォルダを作成してください。

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

Lesson1_HTML_CSS
 ├ Chapter1_HTML
 └ Chapter2_CSS
    └ css_1.css

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

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

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

2-2 CSSの記述方法

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>

2-3 Webページのレイアウト

レイアウトとは、デザイン・設計などにおいて、何を、どこに、どのように配置するかということです。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が指定されます。

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要素の位置の変更（marginを使う）

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

ボックスモデルとは？

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

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

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

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

先に挙げた4つの領域は、CSSで指定することでボックスのサイズを変更することができます。

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）を用意しました。

  1. 要素の幅を調整する

ブロックレベル要素をそのまま並べるだけでは、各ブロックの幅がブラウザ幅いっぱいになってしまうため、「横並びレイアウト」が実現しません。ボックスを横へ並べるためには、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.Flexboxモデルで、左や右に寄せる

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

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

追記部分のCSS

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

表示

解説

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

しかし、メインを幅 50%、サイドバーを幅 30% にしたため、サイドバーの右側に20% 分の空白ができてしまいました。メインが左端に配置されているように、サイドバーも右端に配置してみましょう。

         3. justify-contentで配置場所を調整する

配置場所の調整に使用するのが、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;
}

表示

2-4 さまざまな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に値を設定したため、下記の画像のように要素が配置されます。

表示

2-5 レスポンシブデザイン

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

Webページが画面のサイズやデバイスの種類に応じて自動的に調整されるようなデザイン方法のことを指します。

レスポンシブデザインを実現するためには、CSSのメディアクエリを使用します。

CSSのメディアクエリを使用すると、Webページの表示方法を画面のサイズやデバイスの種類に応じて指定することができます。

例えば、次のように書くと、画面の幅が480px以下の場合に、h1要素のフォントサイズを20pxに設定することができます。

@media (max-width: 480px) {
  h1 {
    font-size: 20px;
  }
}

2-6 メモ帳を作成してみよう！

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

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

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>

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

  1. lang=”en” ⇒ lang=”ja”
  2. <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」をクリックしてみましょう。]

ここでファイル構造を確認し、ccsフォルダの中に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;は横並びにしたい要素の親要素に対して指定します。

最後に以下の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;
}

2-7 課題

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

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

これまで学んできた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を読み込むようにしてください。

投稿日

カテゴリー:

投稿者:

prodemia-admin-user

タグ:

コメント

コメントを残す

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