1. /
  2. /
  3. CSS
教材

CSS

  • by toyoshi
  • 0

CSSとは

CSSは、HTMLと組み合わせて使用する言語で、
CSSの技術力が高いか高くないかで、
Webページの見た目（デザイン）に大きく関わってきます。

HTMLとCSSの関係性で言うと、
HTMLでWebページ内の構造や部品を作って、
CSSでそれらの位置、色、大きさ、並び方などを指定（スタイリング）できます。

HTMLでも、属性をうまく活用すれば大きさや色などをある程度、
操ることができます。
しかし、 HTMLは構造を定義するための言語であるため、
WebページのスタイリングにHTMLを用いるべきではありません。
なぜなら、HTMLの要素をどのように表示するかは、表示するブラウザによって異なる場合があります。
例えば、GoogleChromeで表示しながらHTMLタグを駆使して編集したHTMLファイルを、
Microsoft Edgeで開いたときに、表示が崩れていたりする可能性があるということです。

また、CSSは基本的にhtmlファイルにcssファイルをリンクさせて使います。

つまり、一つのhtmlファイル用に、cssファイルをいくつも作っておけば、
リンクさせるcssファイルを変えるだけで、
Webページの着せ替え（スタイルの変更）が容易にできてしまうわけです！

まずはcssファイルを作るところから始めましょう。
１．htmlの節で使ったsampleフォルダ内に
　　cssという名前のフォルダを新しく作ります。
２．その中にtest.cssという名前のファイルを作ります。

そしてhtmlファイルを開き、先ほどつくったcssファイルをリンクさせます。

やり方は簡単で、HTMLのlink要素を使います。

HTMLファイルにlink要素を書き、
rel属性にファイルとの関係性（今回はstylesheetで統一します。）
href属性にファイルパスを書きます。

ここで注意
ファイルパスは記述したHTMLファイルから読み込みたい対象のファイルへのパスを書きます。


書き方は以下です。
（本項冒頭の手順でtest.cssを作成した場合。）

例

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

ここで注意点、これはルールとして覚えていただきたいのですがlink要素はhead要素の中に入れてください。

以下のように埋め込みできたと思います。

<!DOCTYPE html>
<html>
  <head>
    <title>CSSの学習</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>
    <h1>CSS</h1>
    <p>CSSを学習するよ！</p>
  </body>
</html>

これでcssを使う前準備はできました。
次は実際にスタイリングしてみましょう。

関連動画

htmlとのリンクのさせ方

リンク確認

さて、HTMLとCSSのリンク方法はわかりましたので
今回はCSSで実際にスタイルを指定してみます。

先ほど作成したCSSファイルをエディタで開いてみてください。
新規で作成した場合何も記入されていないと思います。

CSSファイルに以下のコードをコピペ（コピー&ペースト）して保存してください。

p {
 color: red;
}

そしてHTMLファイルにはこのコード以下のコピペ（コピー&ペースト）して保存してください。

<!DOCTYPE html>
<html>
  <head>
    <title>CSSの学習</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>
    <h1>CSS</h1>
    <p>CSSを学習するよ！</p>
  </body>
</html>

HTMLファイルをブラウザで開いてみてください。
p要素内に記述した「CSSを学習するよ！」が赤色になっていたら、成功です！

うまくいかなかったら以下を再度確認してみて下さい。
・ファイル名はあっているか？
・ファイルパスはあっているか？
・タグ名や属性名、が間違っていないか？
・半角スペースを使うべきところに全角スペースを使っていないか？

CSSの書き方

先ほどはまずコピペで表示しただけなので、
まだ何がどうなっているのかわからないですよね。

まず、分解して説明します。

左上のセレクタを見てください。「ｐ」とありますね？
これはHTMLのp要素のpです
ここをh1にすればｈ１要素「CSS」が赤文字になりそうですよね？
そうです！なります！

つまり「セレクタ」とはセレクトする、選ぶもの。
HTMLソースの中の何を操作するかを選ぶものです。

そしてプロパティ名に「color」を指定しています。
プロパティは、HTML要素で言うと「属性」のイメージです。
colorは色、
値には「red」赤色を指定しています。
つまりこのコードを要約すると

「p要素の色を赤にするよ！」

という意味のコードになります。

書き方のポイントとしては
・セレクタを書いて｛　　｝波カッコでくくる。
・プロパティ名の後ろに：（コロン）を書く。
・：（コロン）の後ろに設定したい「値」を書く。

セレクタ｛
　プロパティ名: 値;
｝

セレクタ｛ プロパティ名: 値; ｝
このように一行で書いてしまっても問題ありませんが
プロパティ名は複数指定する場合が多いので行を分けて書く書き方に慣れていきましょう。

複数指定した場合の例

p {
  color: blue;
  line-height: 1.5;
}

また、CSSでは、同じ対象に対して同じプロパティを設定する記述を書いた場合、
基本的に下に書いた記述が反映されます。

これは、上から下に向かってコードが読み込まれるためです。

<!DOCTYPE html>
<html>
  <head>
    <title>CSSの学習</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>
    <p>こんにちは！</p>
  </body>
</html>

p {
  color: blue;
}

p {
  color: red;
}

このコード実行するとcolor: red;が反映されます



最初、
「p要素　の　color　を　blue　にします」という命令が入りますが、
次に
「p要素　の　color　を　red　にします」という命令が入り、
命令が上書きされたためです。

デベロッパーツール

デベロッパーツールとは、Google Chromeに標準搭載されている開発者にとっては非常に便利なツールです。

ブラウザ上で適用されているcssを確認したりテスト的に、cssを編集できたりします。

「CSSの書き方」で作成したファイルをブラウザで開いた状態で以下の操作をしてください。
・Windowsの人は「F12」キーを押す。もしくは、「Ctrl」＋「Shift」＋「I」キーを同時押し
・Macの人は「Command」＋「Option」＋「I」キーを同時押し

このような画面が表示されたでしょうか。
この画面で赤枠の部分をクリックしてみてください。

もし、上記と同じような画面が開けなかった場合は、

赤枠の部分の「Elements」（表示によっては「要素」）を押してみましょう。


このように、color: blue;が横線で取り消され、color: red;が反映されていることがわかりますね。

デベロッパーツールには他にも便利な機能がたくさんあります。
以下のサイトでも紹介されているので目を通してみてください。
https://saruwakakun.com/html-css/basic/chrome-dev-tool


関連課題

はじめてのCSS

idとclassの使い分け

セレクタには、要素以外にも、様々な対象を指定することが出来ます。
今回お伝えする内容は、id属性とclass属性です。

記述の仕方をお伝えする前に、使い方のルールをお伝えします。

id属性

同じWebページ内でid属性の値が重複してはいけません。
idとは、「識別」の役割を担っていて、オンリーワン（重複しない）ことが前提です。
また、プログラムの世界では、「一意」や「ユニーク」と言ったりもします。

class属性

同じWebページ内で同じclass属性の値を何度でも用いることができます。
classとは、「部類、共通する」という役割を担っています。
同じ値を指定したい場合は、class属性を使いましょう！

使い方のルールをお伝えしただけではイメージが付きづらいと思いますので
実際にソースコードに実装して確認してみましょう！

今回の手順は、下記のよう行っていきます。

  1. HTMLファイルを用意する。
  2. id属性やclass属性をHTMLファイル内で指定する。
  3. CSSファイルを用意する。
  4. id属性やclass属性をCSSファイル内で指定する。

１．HTMLファイルを用意する。

下記のHTMLファイルをhtmlフォルダ内に作成しましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>id属性とclass属性の学習</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <p>1つ目のp要素</p>
    <p>2つ目のp要素</p>
    <p>3つ目のp要素</p>
    <p>4つ目のp要素</p>
    <p>5つ目のp要素</p>
  </body>
</html>

２．id属性やclass属性をHTMLファイル内で指定する。

まずは、id属性を指定していきたいと思います。

<p>1つ目のp要素</p> のp要素の開始タグに、id=”elem1”を追記し、 下記のようにしましょう。

※id属性の値（id名）は、半角英数と「_（アンダースコア）」が使うことが出来ます。
　ここで注意していただきたいのは、先頭に数字は入れないでください。
　どのように値を書いたら良いのか？という詳しい内容は、
　JavaScript教材「命名規則について」で習いますので、
　現時点では、先頭に数字は入れないと覚えておきましょう！

<p id="elem1">1つ目のp要素</p>

次に、class属性を指定していきたいと思います。

<p>3つ目のp要素</p> のp要素の開始タグに、class=”elem”を追記し、
<p>4つ目のp要素</p> のp要素の開始タグに、class=”elem”を追記し、
<p>5つ目のp要素</p> のp要素の開始タグに、class=”elem font_large”を追記し、 下記のようにしましょう！

※id属性の値と同様、半角英数と「_（アンダースコア）」が使うことが出来ます。
※5つ目のp要素のclass属性の値は、elemの後ろに半角スペースを入れましょう。

<p class="elem">3つ目のp要素</p>
<p class="elem">4つ目のp要素</p>
<p class="elem font_large">5つ目のp要素</p>

３．CSSファイルを用意する。

cssフォルダ内にCSSファイルを作成しましょう。
作成出来ましたら、CSSファイルを開きます。

４．id属性やclass属性をCSSファイル内で指定する。

指定方法は、要素のときと同様です。
id属性を指定する場合は、id名の前に「#」をつけます。

#elem1 {
  color: green;
}

class属性を指定する場合は、class名の前に「.」をつけます。

.elem {
  color: orange;
}

一旦、上記の内容をブラウザで確認してみましょう！
「１つ目のp要素」が緑になり、 「３つ目のp要素」〜「５つ目のp要素」がオレンジになったと思います。

ブラウザに上記の画像のように表示されれば、成功です！

※もし、要素の色が変わっていない場合は、
　CSSファイルがうまく読み込めていないやセレクタの指定が間違っているなどの
　原因が考えられますので、記述している内容を確認しましょう！

id属性とclass属性の指定方法について、学べましたね！

次に、class属性の値は、複数指定することが出来ます。
２．で指定した「5つ目のp要素」のclass属性を確認してみましょう！

<p class="elem font_large">5つ目のp要素</p>と記述していますので、
class属性の値には、「elem」と「font_large」を指定していることになります。

CSSファイルに下記の内容を追記しブラウザを確認してみましょう！

.font_large {
  font-size: large;
}

「５つ目のp要素」だけ、フォントが大きくなったと思います。

このように、class属性は複数指定することが出来ます。
しかし、id属性は複数指定できませんので、注意しましょう！

関連課題

style変更

関連動画

idとclass

float

floatは要素を回り込ませたいときに指定するプロパティです。
指定できる値としては以下の３つです
１：left（要素を左寄せにする）

２：right（要素を右寄せにする）

３：none（初期値。配置を指定しない）

では実際にfloatはどのような時に使われるのか、以下を見てみましょう。

参考例

<!DOCTYPE html>
<html>
  <head>
    <title>CSSの学習</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>
    <div class="wrap">
      <div class="box">画像</div>
      テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。テキスト。文章。
    </div>
  </body>
</html>
.box {
  width: 120px;    /* 箱の幅 */
  height: 120px;   /* 箱の高さ */
  background-color: rgb(164, 164, 199);    /* 背景色設定 */
}

このような場合に、画像と文章を横並びにしたい時に使います。
横並びにしたい要素に floatを指定します。

.box {
  width: 120px;    /* 箱の幅 */
  height: 120px;   /* 箱の高さ */
  background-color: rgb(164, 164, 199);    /* 背景色設定 */
  float: left;    /* 要素を左寄せにする */
}

floatによるレイアウト崩れ

まずは以下のソースを見てみてください。

<!DOCTYPE html>
<html>
  <head>
    <title>CSSの学習</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>

    <div class="wrap">
      <div class="boxA">A</div>
      <div class="boxB">B</div>
    </div>
    
    <div class="footer">
    </div>

  </body>
</html>
.wrap{
  background-color: rgb(241, 241, 119);
}

.boxA {
  height: 140px;
  width: 140px;
  margin: 8px;
  background-color: red;
}

.boxB {
  height: 140px;
  width: 140px;
  margin: 8px;
  background-color: blue;
}

.footer {
  height:  200px;
  background-color: rgba(129, 253, 145, 0.867);
}

そしてこの boxA と boxB に
cssで「float」をかけて横並びにしてみます。

.wrap{
  background-color: rgb(241, 241, 119);
}

.boxA {
  height: 140px;
  width: 140px;
  margin: 8px;
  background-color: red;
  float: left; /* 要素を左寄せにする  */
}

.boxB {
  height: 140px;
  width: 140px;
  margin: 8px;
  background-color: blue;
  float: left; /* 要素を左寄せにする  */
}

.footer {
  height: 200px;
  background-color: rgba(129, 253, 145, 0.867);
}

boxAとboxBに float: left;を指定しただけですよね？
wrapやfooterはなにもいじってないですよね？

はい。ではCSSも保存してブラウザを更新してみてください。

こんな画面が出るはずです。

え？

って思いませんでしたか？笑

boxA と boxB の回り込みはできているのに、
wrapどこいった！？footerなんで上に来てるの！？
と思いますよね。

説明するとこんなメカニズムです。

まず、＜div class=”wrap”＞は消えたのではありません。
高さ（height）が0になったんです。
なぜ０になってしまったかというと

floatとは和訳すると「浮く」という意味です。
floatを指定した要素は、基本の位置から浮いた状態になります。

親要素の＜div class=”wrap”＞の中にいたboxA と boxB が「浮いた」状態になったんです。

もともと、親要素＜div class=”wrap”＞の高さは、
子要素であるboxA と boxBの「高さ（height）」を基準にして決められていました。
そしてその子要素が「浮いて」しまったことにより、
親要素であるは基準となるものを失い、0になってしまったわけです。

そして＜div class=”wrap”＞の下にいた＜div class=”footer”＞は、
上の要素の高さが0になったため、その分上昇してきてしまったということです。

さて、犯人をつきとめたところで解決策です。

親要素＜div class=”wrap”＞に
overflow: hidden;
指定してあげましょう！

.wrap{
  overflow: hidden;
  background-color: rgb(241, 241, 119);
}

ちゃんと表示されましたね！よかったです。

overflow プロパティをデフォルト値（visible）以外の値にすると
自分の範囲内のフロートした要素を認識してその高さを知ることができるようになるのです！

関連動画

float

floatの解除について

上記の項で説明した通り、floatをかけることによって要素が浮いた状態になります。
そして、その浮いた状態を解除することが、レイウトを組む上で必要不可欠な動作になります。
floatとfloatの解除はセットで覚えて行きましょう。

上記の項ではoverflowを使って説明しましたが他にも方法はあるので
用途や好みに合わせてお好きなやり方でやってみてください。

clearを使う方法

clearプロパティは、floatプロパティで左寄せ、 または右寄せを指定された要素に対する回り込みを解除する際に使用します。

参考例

<!DOCTYPE html>
<html>
  <head>
    <title>CSSの学習</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>

    <div class="wrap">
      <div class="boxA">A</div>
      <div class="boxB">B</div>
      <div class="clear"></div>
    </div>
    
    <div class="footer">
    </div>
  </body>
</html>
.wrap{
  background-color: rgb(241, 241, 119);
}

.boxA {
  height: 140px;
  width: 140px;
  margin: 8px;
  background-color: red;
  float: left; /* 要素を左寄せにする  */
}

.boxB {
  height: 140px;
  width: 140px;
  margin: 8px;
  background-color: blue;
  float: left; /* 要素を左寄せにする  */
}

.clear {
  clear: both;
}

.footer {
  height: 200px;
  background-color: rgba(129, 253, 145, 0.867);
}

擬似要素を利用して使うのもオススメです。

参考例

<!DOCTYPE html>
<html>
  <head>
    <title>CSSの学習</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>

    <div class="wrap clearfix">
      <div class="boxA">A</div>
      <div class="boxB">B</div>
    </div>
    
    <div class="footer">
    </div>
  </body>
</html>

.wrap{
  background-color: rgb(241, 241, 119);
}

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.boxA {
  height: 140px;
  width: 140px;
  margin: 8px;
  background-color: red;
  float: left; /* 要素を左寄せにする  */
}

.boxB {
  height: 140px;
  width: 140px;
  margin: 8px;
  background-color: blue;
  float: left; /* 要素を左寄せにする  */
}

.footer {
  height: 200px;
  background-color: rgba(129, 253, 145, 0.867);
}

関連動画

float解除

余白について

CSSでレイアウトを組む時、余白の使い方が肝になってきます。
余白には
内側の余白：　padding
外側の余白：　margin
の２種類があり、それぞれ用途によって使い分けます。

上記画像のように内側から順に
width(height),padding,border,marginというように、構成されています。

レイアウトではこれらの関係を意識してそれぞれの値を決める必要があります。

以下は余白の取り方の例です。
大きい枠（親要素）の中に小さい枠２つ（子要素）をはめる時に、
余白をぴったり合わせたい場合、

そのときは以下画像の様な関係性を理解して値を入れましょう。

親要素のwidthを460pxとしたとき、子要素のwidthはそれぞれいくつになるか、考えてみましょう。

<div class="wrap">
  <div class="box_2">
  </div>
  <div class="box_2">
  </div>
</div>

要素の幅・高さの計算

幅計算のポイントは、まず要素の構造を捉えることです。

各要素は外側から
margin,
border,
padding,
width と height
という順番で作られています。

下記のように質素なものでも、この構造があります。

サンプルコード

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>
    <div class="wrap">
    </div>
  </body>
</html>
.wrap{
  width: 460px;
  height: 90px;
  padding: 10px;
  border: solid 10px;
  margin: 10px;
}

それが入れ子になるので
親要素のwidthの中に
子要素のmargin
子要素のborder
子要素のpadding
子要素のwidthとなります

親要素の青枠の中に子要素が全て入るようなイメージです。

親要素のwidthが決まっている場合
子要素の横幅(width)を求める計算式は

子要素の横幅(width) = 親要素のwidth - (子要素の左右margin合計 + 子要素の左右border合計 + 子要素の左右padding合計)

になります

上記画像だと、

子要素のwidth = 460 – (20 + 20 + 20)
となり、400pxでぴったりになります。
縦幅も同様に計算できます。

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>
    <div class="wrap">
      <div class="box_2">
      </div>
    </div>
  </body>
</html>
.wrap{
  width: 460px;
  height: 90px;
  padding: 10px;
  border: solid 10px;
  margin: 10px;
}
.box_2{
  width: 400px;
  height: 30px;
  padding: 10px;
  border: solid 10px;
  margin: 10px;
}

逆算だとこうなります

子要素のwidth + 子要素の左右margin合計 + 子要素の左右border合計 + 子要素の左右padding合計 ＝ 親要素のwidth

次に、前項の　子要素が複数の場合かつ子要素の外の余白がない場合　を見ていきましょう。

親要素は変わらずwidth: 460px;とします。

子要素の横幅(width)を求める計算式は

子要素の横幅(width) = 460 - (子要素の左右margin合計 + 子要素の左右border合計 + 子要素の左右padding合計)

ですね。

(子要素の左右margin合計 + 子要素の左右border合計 + 子要素の左右padding合計)は、紙などに書いて把握しましょう。

これを式に当てはめると
子要素の横幅(width) = 460 – (10 + 40 + 40)
となり、
子要素の横幅(width) = 370
となります。

今回要素は２つ作りたいのでwidthを２等分すると
１つあたりのwidthは185pxが適切となります。

<!DOCTYPE html>
<html>
  <head>
    <title>test</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>
    <div class="wrap">
      <div class="box_2">
      </div>
      <div class="box_2">
      </div>
    </div>
  </body>
</html>
.wrap{
  width: 460px;
  height: 90px;
  padding: 10px;
  border: solid 10px;
  margin: 10px;
}

.box_2{
  width: 185px;
  height: 50px;
  padding: 10px;
  border: solid 10px;
  margin-right: 10px;
  float: left;
}

.box_2:last-child{
  margin-right: 0px;
}

calc関数

calc() 関数とはプロパティに設定する値を 数式で計算することができる大変便利なものです。

cssを学習する時にcalc関数が使えることで コーディングの幅が広がるので是非覚えていきましょう。

基本的な使い方 数式として使用できる演算子は、
＋ (足し算)、ー (引き算)、× (掛け算)、÷ (割り算) の4種類となっています。

/*加算*/

.box1{
    width:calc(100px + 10px);
}
 
/*減算*/
.box2{
    width:calc(100% - 10px);
}
 
/*乗算*/
.box3{
    width:calc(100px * 5);
}
 
/*除算*/
.box4{
    width:calc(100px / 2);

横並びにした３つのボックスの幅を親コンテナの幅(100%)の1/3の幅にしたい場合、 どのように記述しますか？

.childElement01, .childElement02 {
  width: 33%;
}

.childElement03 {
  width: 34%;
}

たとえばこんな感じではないでしょうか？

または、

.childElement01, .childElement02, .childElement03 {
  width: 33.3%;
}

といった記述になるかと思います。

100%割る３を計算して… え、ちょうどいい数字で割り切れないなー？と、迷いませんでしたか？

これに対して calc()関数を使った場合には、以下のように記述できます。

.childElement  {
  width: calc(100% / 3);
}

とても簡潔に書けますね！ このように演算子の組み合わせや使用方法によって、大変便利に活用することができます。 レイアウトデザイン上で重要な役割を今後担う機能ですので、ぜひ活用してください。

ここで一旦、以下のレイアウト課題に取り組んでください。

float_レイアウト課題①〜⑤

flexbox

flexboxについて説明していきます。flexboxとは一行プラスするだけで横並びにできたり、縦並びにできたり、横並びになった要素の高さが最初からそろっていたり、とても便利な手法になります。

まずは実際に使ってみましょう。

<!DOCTYPE html>
<html>
  <head>
    <title>CSSの学習</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>
    <div id="box">
      <div class="item">Item 1</div>
      <div class="item">Item 2</div>
      <div class="item">Item 3</div>
      <div class="item">Item 4</div>
    </div>
  </body>
</html>
#box {
  display: flex;
}

.item {
  width: 80px;
  height: 80px;
  margin: 8px;
  background-color: aqua;
}

表示できましたでしょうか、

また、flex-directionプロパティでは、以下の値を指定できます。
row（初期値）… 子要素を左から右に配置
row-reverse … 子要素を右から左に配置
column … 子要素を上から下に配置
column-reverse … 子要素を下から上に配置

関連課題

flexbox_レイアウト課題①〜⑤

Bootstrapについて

Twitter社が開発した、WebサイトやWebページを効率よく開発するためのWebフレームワークです。

今までは、自分でHTMLファイルに、class属性を指定し、
CSSファイルにどのようにしたいかを実装いただいていたと思いますが、
Bootstrapでは、すでに用意されているclass属性を記述するだけで、ボタンの形や色を変えることが出来ます！

では、その内容を確認してみましょう！
Bootstrapには、バージョンがあるのですが、今回はバージョン5を使っていきたいと思います。
※バージョン5は、現時点で最新版になります。

Bootstrapを使うには、「ファイルをダウンロードして使う方法」と「CDNを使う方法」がありますが
この教材では、CDNを使った方法を使っていきたいと思います。

前準備

  1. HTMLファイルを用意し、ひな形を記述する
  2. レスポンシブデザインに対応するためのmetaタグを記述する
  3. Bootstrapのサイトに記載があるCSSを読み込む
  4. 自分が指定したいCSSファイルを読み込む
  5. Bootstrapのサイトに記載があるJS(Bundle)を読み込む

では、詳しい手順を確認していきましょう！

１．HTMLのひな形を記述する

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap学習用</title>
</head>
<body>

</body>
</html>

２．レスポンシブデザインに対応するためのmetaタグを記述する

下記のmetaタグを適切な箇所に記述しましょう！

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

３．Bootstrapのサイトに記載があるCSSを読み込む

Bootstrapのサイトにアクセスしていただき、画像の赤枠部分をコピーしましょう。

そして、適切な箇所にコピーした内容を貼り付けましょう！

４．自分が指定したいCSSファイルを読み込む

※今回は、style.cssとしていますが、ご自身でファイル名は変更していただいてOKです。

５．Bootstrapのサイトに記載があるJS(Bundle)を読み込む

Bootstrapのサイトにアクセスしていただき、画像の赤枠部分をコピーしましょう。

そして、適切な箇所にコピーした内容を貼り付けましょう！

上記の内容まで記述いただければ、準備OKです！
※バージョンが変わってくると、３と５の内容は変わってきますので、注意しましょう！

Bootstrapを使った実装

前準備が終わりましたので、Bootstrapを実際に使っていきましょう。
しかし、実際どのように使っていくか、イメージがつかないと思いますので、
どのように実装していくのかを、確認していきましょう。

Bootstrapにはできることは、沢山ありますが、
この教材では、Forms (フォーム)、Cards(カード)、Grid System(グリッドシステム)について触れていきます。

Bootstrap：Forms (フォーム)

この章で実装する完成形は、下記のようなイメージです。

では、早速ですが、実装していきましょう！
まずは、下記のようなHTMLファイルを用意します。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
  <title>BootStrap練習用</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" media="all" href="../css/style.css">
</head>

<body>
  <div class="container-fluid">
    <form>
      <div>
        <label>Email</label>
        <input type="email" placeholder="Email">
      </div>
      <div>
        <label>Password</label>
        <input type="password" placeholder="Password">
      </div>
      <input type="submit" value="Button">
    </form>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

ブラウザで確認していただくと、下記の画像のように、入力フォームと送信ボタンが表示されると思います。

では、次にBootstrapを使っていきたいと思います！

はじめに、送信ボタンを変更していきたいと思います。

ドキュメントにアクセスし、サイドバーにある Components > Buttons をクリックします。

今回は、青色のボタンにしたいので、Bootstrapのコードを参考に、button要素にclass属性を追加しましょう。

下記のようなコードを追加すると、

<button type="submit" class="btn btn-primary">送信</button>

ブラウザは、下記の画像のような表示になると思います。

では、次はinput要素の幅などを変更していきましょう！
サイドバーにある Forms > Form controls >Example を確認しましょう。

幅を変更するには、input要素のclass属性を確認してみましょう。
input要素には、class="form-control" と記載がありますので、
ご自身のソースコードのinput要素にclass="form-control" を追加しましょう！

<!-- email入力欄にclass属性を追加 -->
<input type="email" class="form-control" placeholder="Email">

<!-- password入力欄にclass属性を追加 -->
<input type="password" class="form-control" placeholder="Password">

ブラウザは、下記の画像のような表示になれば、完成です！

Bootstrap：Cards (カード)

この章で実装する完成形は、下記のようなイメージです。

では、早速ですが、実装していきましょう！
まずは、下記のようなHTMLファイルを用意します。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
  <title>BootStrap練習用</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" media="all" href="../css/style.css">
</head>

<body>
  <div class="contents">
    <div class="content">
      <div>
        <h5>タイトル</h5>
        <h6>サブタイトル</h6>
        <p>本文をここに書く</p>
        <a href="#">リンク</a>
      </div>
    </div>
    <div class="content">
      <div>
        <h5>タイトル</h5>
        <h6>サブタイトル</h6>
        <p>本文をここに書く</p>
        <a href="#">リンク</a>
      </div>
    </div>
  </div>
  <div class="contents">
    <div class="content">
      <div>
        ヘッダー
      </div>
      <div>
        <h5>タイトル</h5>
        <p>本文をここに書く</p>
        <a href="#">リンク</a>
      </div>
    </div>
    <div class="content">
      <div>
        ヘッダー
      </div>
      <div>
        <h5>タイトル</h5>
        <p>本文をここに書く</p>
        <a href="#">リンク</a>
      </div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>
.contents {
  margin-bottom: 10px;
  display: flex;
}

.content {
  width: 18rem;
  margin: 10px 0 0 10px;
}

ブラウザで確認していただくと、下記の画像のような表示がされると思います。

では、次にBootstrapを使っていきたいと思います！

はじめに、Card自体を作っていきたいと思います。

ドキュメントにアクセスし、サイドバーにある Components > Cards をクリックします。

今回は、２種類のカードを実装しようと思います！
１つ目は、完成形の画像の上のカード
２つ目は、完成形の画像の下のカードです。

まずは、１つ目のカードから実装してきましょう。

ドキュメントから、完成形の画像に似ているカードを見つけましょう。

見つけられたら、ソースコードの下記の部分を確認し、ドキュメントをもとにclass属性を追加していきます。

<div class="content">
  <div>
    <h5>タイトル</h5>
    <h6>サブタイトル</h6>
    <p>本文をここに書く</p>
    <a href="#">リンク</a>
  </div>
</div>
  1. 1行目のdiv要素に「card」というclass属性を追加します。
  2. 2行目のdiv要素に「card-body」というclass属性を追加します。
  3. 3行目のh5要素に「card-title」というclass属性を追加します。
  4. 4行目のh6要素に「card-subtitle」、「mb-2」(*1)、「text-muted」(*2)というclass属性を追加します。
  5. 5行目のp要素に「card-text」というclass属性を追加します。
  6. 6行目のa要素に「card-link」というclass属性を追加します。
    *1 mb-2・・・margin-bottomを指します。
    *2 text-muted・・・テキストの文字色を指します。

上記の手順で実装いただくと、下記の画像（赤枠内）のような画面が表示されると思います。

同じような画面になっていれば、上手く反映できていますよ！
画像の右側に表示されている部分についても、同じような表示ができるように実装してみましょう。

次に、２つ目のカードを実装していきましょう。

１つ目のカード同様に、ドキュメントから、完成形の画像に似ているカードを見つけましょう。

見つけられたら、ソースコードの下記の部分を確認し、ドキュメントを素にclass属性を追加していきます。

<div class="content">
  <div>
    ヘッダー
  </div>
  <div>
    <h5>タイトル</h5>
    <p>本文をここに書く</p>
    <a href="#">リンク</a>
  </div>
</div>
  1. 1行目のdiv要素に「card」というclass属性を追加します。
  2. 2行目のdiv要素に「card-header」というclass属性を追加します。
  3. 5行目のdiv要素に「card-body」というclass属性を追加します。
  4. 6行目のh5要素に「card-title」というclass属性を追加します。
  5. 5行目のp要素に「card-text」というclass属性を追加します。
  6. 6行目のa要素に「card-link」というclass属性を追加します。

上記の手順で実装いただくと、下記の画像（赤枠内）のような画面が表示されると思います。

同じような画面になっていれば、上手く反映できていますよ！
１つ目のカード同様、画面右側に表示されている部分についても、
同じように表示ができるように、実装してみましょう。

Bootstrap：Grid system (グリッドシステム)

12 カラムのシステムと 5 段階のレスポンシブなどが定義されており、
画面のレイアウトの作成が可能となっています。

12 カラムや 5 段階のレスポンシブについて、イメージつかないと思いますので、
下記で解説していきたいと思います。

まずは、12カラムについてです。
グリッドシステムでは、1つの行で指定できるカラム数が決まっています。
その数が、最大12カラムになります。

文章でお伝えしてもイメージがつかないかもしれませんので、実際にソースコードを見て確認してみましょう！
まずは、下記のようなHTMLファイルを用意しましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
  <title>BootStrap_From</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" media="all" href="../css/style.css">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col col_color">Column1</div>
      <div class="col col_color">Column2</div>
      <div class="col col_color">Column3</div>
      <div class="col col_color">Column4</div>
      <div class="col col_color">Column5</div>
      <div class="col col_color">Column6</div>
      <div class="col col_color">Column7</div>
      <div class="col col_color">Column8</div>
      <div class="col col_color">Column9</div>
      <div class="col col_color">Column10</div>
      <div class="col col_color">Column11</div>
      <div class="col col_color">Column12</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

カラムの色をわかりやすくするために、CSSファイルも用意しておきましょう。

.col_color:nth-child(2n + 1) {
  background-color: #82C9C9;
}

上記のファイルをブラウザで読み込むと下記のような表示がされると思います。
※ブラウザの幅によって、Column11とColumn12のdiv要素が違う行になっている場合があります。

12個のカラムが横並びになっていますね。
では、次にここでHTMLファイルのColumn12と書かれているdiv要素の下にdiv要素を追加してみましょう！
追加した例は下記のようなイメージです。

<div class="container">
  <div class="row">
    <div class="col col_color">Column1</div>
    <div class="col col_color">Column2</div>
    <div class="col col_color">Column3</div>
    <div class="col col_color">Column4</div>
    <div class="col col_color">Column5</div>
    <div class="col col_color">Column6</div>
    <div class="col col_color">Column7</div>
    <div class="col col_color">Column8</div>
    <div class="col col_color">Column9</div>
    <div class="col col_color">Column10</div>
    <div class="col col_color">Column11</div>
    <div class="col col_color">Column12</div>
    <!-- ここにカラムを追加する -->
    <div class="col col_color">Column13</div>
  </div>
</div>

上記のファイルをブラウザで読み込むと下記のような表示がされると思います。

Column13（13個目のカラム）のdiv要素が違う行になりましたね。
これが、12カラムということになります。

上記では、カラムの数を指定しませんでしたが、class名をcol と指定しているところを
col-2 や col-4 のように実装することで、カラム数を指定することが出来ます。

では、実際にソースコードを見て確認してみましょう！
下記のようなHTMLファイルを用意しましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
  <title>BootStrap_From</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" media="all" href="../css/style.css">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col col_border">1 / 12</div>
      <div class="col col_border">2 / 12</div>
      <div class="col col_border">3 / 12</div>
      <div class="col col_border">4 / 12</div>
      <div class="col col_border">5 / 12</div>
      <div class="col col_border">6 / 12</div>
      <div class="col col_border">7 / 12</div>
      <div class="col col_border">8 / 12</div>
      <div class="col col_border">9 / 12</div>
      <div class="col col_border">10 / 12</div>
      <div class="col col_border">11 / 12</div>
      <div class="col col_border">12 / 12</div>
    </div>
    <div class="row">
      <div class="col-3 col_border">1 / 4</div>
      <div class="col-3 col_border">2 / 4</div>
      <div class="col-3 col_border">3 / 4</div>
      <div class="col-3 col_border">4 / 4</div>
    </div>
    <div class="row">
      <div class="col-4 col_border">1 / 3</div>
      <div class="col-4 col_border">2 / 3</div>
      <div class="col-4 col_border">3 / 3</div>
    </div>
    <div class="row">
      <div class="col-6 col_border">1 / 2</div>
      <div class="col-6 col_border">2 / 2</div>
    </div>
    <div class="row">
      <div class="col-12 col_border">1 / 1</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

カラムをわかりやすくするために、CSSファイルも用意しておきましょう。

.col_border {
  border: 1px solid;
}

上記のファイルをブラウザで読み込むと、下記のような表示がされると思います。

class名が「col」の場合、12カラム並んでいますが、
class名が「col-3」の場合は、4カラム並んでいますね。

今回の場合は、全ての行で同じカラム数にしましたが、
行のカラム合計が12になれば指定できますので、いろいろ試してみましょう！

次は、5 段階のレスポンシブについてです。
Extra Small, Small, Medium, Large, Extra Large（特小、小、中、大、特大）のデバイスで、
適切と思われる列のサイズをカスタマイズしてくれます。

カラム数の指定の場合、class名の指定方法は、
特小から「.col」、「.col-sm-」、「.col-md-」、「.col-lg-」、「.col-xl-」、「.col-xxl-」のように指定します。

では、実際にソースコードを見て確認してみましょう！
下記のようなHTMLファイルを用意しましょう。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
  <title>BootStrap_From</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
  <link rel="stylesheet" type="text/css" media="all" href="../css/style.css">
</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8 col_border">.col-md-8</div>
      <div class="col-6 col-md-4 col_border">.col-6 .col-md-4</div>
    </div>
    <div class="row">
      <div class="col-12 col-md-4 col_border">.col-12 .col-md-4</div>
      <div class="col-12 col-md-4 col_border">.col-12 .col-md-4</div>
      <div class="col-12 col-md-4 col_border">.col-12 .col-md-4</div>
    </div>
    <div class="row">
      <div class="col-6 col_border">.col-6</div>
      <div class="col-6 col_border">.col-6</div>
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>

</html>

カラムをわかりやすくするために、CSSファイルも用意しておきましょう。

.col_border {
  border: 1px solid;
}

上記のファイルをブラウザで読み込むと、下記のような表示がされると思います。

ブラウザの幅を狭くしていくと、あるポイントから下記のような表示がされると思います。

このように、アクセスする端末の画面サイズによって、
デザインを切り替えるポイントのことをブレイクポイントといいます。

他にも、rowのカラム数の指定など様々な内容がありますので、
ぜひ、ドキュメントを読んでみましょう！

レスポンシブレイアウト

レスポンシブレイアウトとは
Webページを表示する画面の幅にあわせたレイアウトのことです。

普段私たちがWebページを見るときはいろいろな端末（デバイス）で見ていますよね。
例えばスマホ、タブレット、ノートPC、デスクトップなど。
そしてそれぞれ画面のサイズが違いますよね。

スマホサイズの画面ではスマホ向けのレイアウトを、
PCサイズの画面ではPC向けのレイアウトを、
というように画面の幅によって適応するCSSを変えることができます。

まずはhtmlの設定です。
head要素の中に以下のmeta要素を記述してください。

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

以下のようになるかと思います

<head>
  <title>CSSの学習</title>
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../css/test.css">
</head>

次にCSSでメディアクエリというものを設定します。

@media screen and (max-width:959px){
  /*画面幅が959pxまでの時 */
}

指定した画面幅内でのみ、内容が適用されます！

今回は
PC画面（おおよそ960px以上）、
タブレット画面（おおよそ960px～600px）、
スマホ画面（おおよそ599px以下）を基準に設定します。

この基準を「ブレイクポイント」といいます。

あとは通常通りCSSを書いていくだけです。

@media screen and (max-width:959px){
  p {
    color: green;
  }
}

参考例

<!DOCTYPE html>
<html>
  <head>
    <title>CSSの学習</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../css/test.css">
  </head>
  <body>
    <p>レスポンシブ</p>>
  </body>
</html>
/*960px以上は青色*/
p {
  color: blue;
}
@media screen and (max-width:959px){
  /*画面幅が959pxまでの時（おおよそタブレットの画面幅の時）に
  以下の記述を適用
  */
  p {
    color: green;
  }
}
@media screen and (max-width:599px){
  /*画面幅が599px以下の時（おおよそスマホの画面幅の時)に
  に以下の記述を適用
  */
  p {
    color: red;
  }
}

まずブラウザで表示してみてください。
そしてウィンドウ枠を伸ばしたり縮めたりして、ブレイクポイントで要素の色が変わっているのを確認出来たら、成功です。

関連課題

レスポンシブ課題

関連動画

レスポンシブ

各ブラウザのCSS設定（reset.cssについて）

ブラウザには、デフォルトのCSSが設定されています。
そのCSSが悪さをしないように、自身で指定したいCSSの前に
予め、各ブラウザのデフォルトのCSSを取り消す内容を記述したファイルをreset.cssと言います。

ブラウザのデフォルトの値の取り消し方には、
ほぼすべてのデフォルトスタイルをリセットする方法やブラウザ間の差異を統一調整する方法などがあります。
検索していただくと、いろいろなCSSがあると思いますが、この教材では、下記を使いましょう。

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
  display: block;
}
body {
  line-height: 1.5;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

これを使いましょう！と言っても、イメージがつかないと思いますので、
HTMLフォルダ、CSSフォルダを作成した後に、下記のソースコードに書いて確認してみましょう！

■index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>reset.cssの確認</title>
    <link rel="stylesheet" href="../css/style.css">
  </head>
  <body>
    <h1>h1タグ</h1>
    <h2>h2タグ</h2>
    <h3>h3タグ</h3>
    <h4>h4タグ</h4>
    <h5>h5タグ</h5>
    <h6>h6タグ</h6>
    <p><strong>pタグ</strong>を強調しています</p>
  </body>
</html>

■style.css

strong {
  color: red;
}

上記のソースコードをブラウザで表示すると、下記のようになります。

では、reset.cssを指定したら、どうなるでしょうか？
HTMLファイルの <link rel="stylesheet" href="../css/style.css"> のすぐ上に下記のを記述し、

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

CSSフォルダ内に、教材で使用する reset.css を実装しましょう！

では、実装した内容をブラウザで確認してみましょう！
ブラウザで表示すると、下記のようになります。

reset.cssがあるのとないのとで、表示が変わりましたね。
このように、ブラウザ特有のデフォルトの値をリセットすることで
どのブラウザで表示しても、同じように表示できるようになりますよ！