Sponsored Link
前回は「ブロック」と「入れ子」、「インライン要素」と「ブロック要素」について解説しました。今回は、main.cssへページ全体の指定を行い、<div id=”container”></div>と<div class=”container”></div>など、idとclassのCSSでの記述方法を解説します。
idとclassの書き方
まずは前回index.htmlに記述を行った、<div id=”container”></div>と<div class=”container”></div>のCSSでの記述方法について説明します。
前回、idとclassの違いについて簡単に説明しましたが、HTMLでの記述ルールがあるように、CSSにもidとclassのそれぞれの記述ルールがありますので記述例を見ながら説明します。
idの書き方
CSS記述例
#container {
width: 100%;
}上記のCSSのセレクタは「#container」です。idは「#◯◯」と、シャープを頭につけて指定を行います。id指定しているものは、同一ページ内で一度だけ使うもので、id名を重複させてはいけません。
classの書き方
CSS記述例
.container {
width: 1000px;
}今回のCSSコードのセレクタは「.container」ですね。
classは「.◯◯」と、ピリオドを頭につけて指定を行います。
classと指定しているものは、同一ページ内で複数回使う可能性があるもので、
必要ならば、あらゆる場所で使用することができます。
idとclassの命名に関して
今回はidとclassの名前を「container」にしていますが、
以下のルールさえ守れば名前はなんでも構いません。
- 日本語を使わず半角英数字のみを使用。
- 記号を使うのなら「-」（ハイフン）もしくは「_」（アンダースコア）を使用。
- ①や□など機種依存文字は使用しない。
- スペースは使用しない（全角および半角）。
- 1文字目は数字を使用しない。
ブラウザに正しく認識されない場合がありますので命名ではこの5点を必ず守りましょう。
main.cssへの記述（ページ全体編）
ではmain.cssへの記述を行います。ひとまずテキストエディタを起動して「index.html」「main.css」へのコーディング準備を行ってください。
Visual Studio Codeの左のエクスプローラーメニューの「html」フォルダから「index.html」「main.css」を開いて早速始めていきましょう。
第5回の講義でCSSのリセットをしてブラウザのCSS解釈の違いを最小限にする記述をしましたが、
今回からいよいよページの制作のための記述を行います。
問題なく記述が終わっていれば以下のようになっているはず。
よく確認してくださいね。
main.css
@charset "UTF-8";
* {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
a {text-decoration: none;}
ul {list-style: none;}
input[type="text"],
input[type="submit"] {-webkit-border-radius: 0;}
img {
border: 0;
max-width: 100%;
line-height: 1em;
vertical-align: bottom;
-ms-interpolation-mode: bicubic;
}
header,
nav,
menu,
article,
section,
main,
aside,
footer {
display:block;
margin: 0;
}<html></html>タグと<body></body>タグに関する指定
ではまず<html></html>タグと<body></body>タグに関する指定を行います。
前回記述した最後の行を改行し、ハイライトされている28〜35行目のコードを追記しましょう。
main.css
@charset "UTF-8";
* {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
/*-- 〜ここは省略〜 --*/
header,
nav,
menu,
article,
section,
main,
aside,
footer {
display:block;
margin: 0;
}
html,body {
height: 100%; /* 高さ */
font-weight: normal; /* 文字の太さ */
font-size: 12px; /* 文字のサイズ */
line-height: 20px; /* 文字の高さ */
font-family: 'Hiragino Kaku Gothic ProN',Meiryo; /* 書体 */
text-align: center; /* 中に置くブロックや文字の配置 */
}以前講義で解説しましたが、セレクタは、カンマ（,）を間に挟むことで複数指定することができます。
これを使って<html></html>タグと<body></body>タグに同時に指定しておきたいプロパティと値を記述します。
<html></html>タグと<body></body>タグは画面いっぱいのブラウザの縦横100％です。
つまりこれは全てのコードを囲っている一番大きな箱（サイト全体）の指定になります。
height: 100%; = html,bodyを画面いっぱいの高さに指定
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| height | 要素の高さの指定 | auto（初期値）・%・px・emなど |
まず、デフォルトだとコンテンツのボリュームで高さが決まってしまうためコンテンツ量が少ない場合は高さを保持できません。その場合でも高さを100%に保つために「height: 100%;」で高さを100％に指定しています。
font-○○○: □□□□; & line-height: 20px; = サイトの本文部分のフォントに関する指定
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| font-weight | 書体の太さの指定 | 主にnormal・boldなどのキーワード値や、400や700などの数値 |
| font-size | 書体の大きさの指定 | 主に14pxや20pxなどの数値など |
| line-height | 行間の高さの指定 | 主に14pxや20pxなどの数値など |
| font-family | 書体の指定 | 主に書体名や総称フォントファミリー |
次にサイト内の主に本文部分のフォントの書体や太さ、サイズの指定です。
「font-weight: normal;」でフォントの太さを通常の太さにし、
「font-size: 12px;」でフォントサイズを12pxに指定し、
「line-height: 20px;」で行間の高さを20pxに指定しました。
「font-family: ‘Hiragino Kaku Gothic ProN’,Meiryo;」というのは書体の指定です。
ここは基本的にPCに必ずインストールされているであろう書体を指定するのが無難です。
インストールされていない特殊な書体を選んでもないものは表示してくれません。
text-align: center; = ブロック内の文字やブロックを中央揃えに指定
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| text-align | ブロック要素または表セルボックスの水平方向の配置を設定 | start・end・left・right・centerなど |
text-alignは親ボックス内でのアイテムの水平方向の配置の指定です。左寄せは「left」、右寄せは「right」、中央揃えは「center」などと記述します。今回はhtml・body内でアイテムを中央揃えする必要があるので「text-align: center;」で文字やブロックを中央揃えに指定します。
<body></body>タグに関する指定
次に、<body></body>タグに関する記述を行いましょう。
先ほどの記述の下に1行あけてハイライトされている12〜16行目のコードを追記してください。
main.css
/*-- 〜上部省略〜 --*/
html,body {
height: 100%; /* 高さ */
font-weight: normal; /* 文字の太さ */
font-size: 12px; /* 文字のサイズ */
line-height: 20px; /* 文字の高さ */
font-family: 'Hiragino Kaku Gothic ProN',Meiryo; /* 書体 */
text-align: center; /* 中に置くブロックや文字の配置 */
}
body {
background-image: url(../img/bg.png); /* 背景画像の指定 */
background-repeat: repeat; /* 背景画像の繰り返し */
background-position: center center; /* 背景画像の描画の開始位置 */
}<body></body>タグには背景画像に関する指定を記述しています。
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| background-image | 背景画像の指定 | url(画像までのパス) |
| background-repeat | 背景画像をどのように繰り返すかの指定 | 主にrepeatやrepeat-x・repeat-y、no-repeatなど |
| background-position | 背景画像の描画初期位置（座標）を指定 | 主にtop・left・centerや%などを「左右 上下」で指定 |
background-image: url(../img/bg.png); = 背景画像を画像までのパスで指定
まず「background-image: url(../img/bg.png);」は背景画像の指定です。
使いたい画像のパスを指定すれば表示されるようになります。
background-repeat: repeat; = 背景画像を繰り返し表示するかどうかの指定
次に「background-repeat: repeat;」は指定した背景画像をブロック内で繰り返し表示するかどうかの指定です。
background-position: center center; = 背景画像の描画初期位置（座標）の指定
最後に「background-position: center center;」は背景画像の描画開始の初期位置（座標）の指定です。値の指定は「background-position: 左右 上下;」の順番で行うので、今回の指定はブロックの縦横中央の位置から描画を行うという指定になります。
<div id=”container”></div>タグに関する指定
次に、前回講義内で登場した<div id=”container”></div>タグに関する記述を追記します。
先ほどの記述の下に1行あけてハイライトされている9〜15行目のコードを追記してください。
main.css
/*-- 〜上部省略〜 --*/
body {
background-image: url(../img/bg.png); /* 背景画像の指定 */
background-repeat: repeat; /* 背景画像の繰り返し */
background-position: center center; /* 背景画像の描画の開始位置 */
}
#container {
width: 100%; /* 横幅 */
min-width: 1040px; /* 横幅の下限 */
min-height: 100%; /* 高さの下限 */
position: relative; /*ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定 */
overflow-x: hidden; /* アイテムがブロックからはみ出した時の処理 */
}前回も登場した<div id=”container”></div>タグの指定です。
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| width | 要素の幅の指定 | %・px・emなど |
| min-width | 要素の幅の最小値の指定 | %・px・emなど |
| min-height | 要素の高さの最小値の指定 | %・px・emなど |
width: 100%; = 横幅を100％に指定
<div id=”container”></div>タグは<body></body>タグのすぐ内側に記述されるので、
「width: 100%;」と指定することで横幅を<body></body>タグと同じブラウザ幅に指定することができます。
min-width: 1040px; = 横幅の最小値を1040pxに指定
「min-width: 1040px;」は、コンテンツの横幅の最小値の指定。ブラウザの横幅がmin-widthの値よりも小さければ、ブラウザの下部に横スクロールバーが表示されるようになります。
最小値を指定せずにブラウザを縮めてしまうと必要な横幅がなくなりレイアウト崩れの原因になってしまうために指定しています。
min-height: 100%; = 高さを100%に
「min-height: 100%;」の指定により高さの最小値を100％に保つことができます。
例えばブラウザの上下をmin-heightの値より小さく縮めても縦のスクロールバーが表示されるため、「ブラウザの高さ=最小の高さ」にすることができます。
position: relative; = ボックスの配置方法（基準位置）が相対位置か絶対位置かを指定
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| position | 要素をどのように配置するかの指定 | static（初期値）・absolute・relative・fixedなど |
position: relative;は目に見えた変化があるわけではありません。それだけに現時点では理解するのが難しいプロパティです。ただ、とても重要な役割を担ってくれるものですので、今後の講義で改めて紹介します。
overflow-x: hidden; = アイテムがブロックの横にはみ出した時は非表示
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| overflow | 親要素に収まり切らない要素の表示方法の指定 | visible（初期値）・hidden・scroll・auto |
overflow: hidden;はブロックの外にアイテムがはみ出した際に、アイテムのはみ出した部分を非表示にする指定です。
縦の指定は「overflow-y」横の指定は「overflow-x」とあり、両方を指定する場合は「overflow」だけになります。
<header></header>タグから<footer></footer>タグに関する指定
次に、前回記述を行ったブロック要素の<header></header>タグから<footer></footer>タグまでに関する記述を追記します。先ほどの記述の下に1行あけてハイライトされている11〜14行目のコードを追記してください。
main.css
/*-- 〜上部省略〜 --*/
#container {
width: 100%; /* 横幅 */
min-width: 1040px; /* 横幅の下限 */
min-height: 100%; /* 高さの下限 */
position: relative; /*ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定 */
overflow-x: hidden; /* アイテムがブロックからはみ出した時の処理 */
}
header,nav,article,footer {
width: 100%; /* 横幅 */
min-width: 1040px; /* 横幅の下限 */
}width: 100%; = 横幅を100％に指定
先ほども出てきた横幅の指定ですが、<header></header>、<nav></nav>、<article></article>、<footer></footer>をカンマで区切って一括指定することで横幅をブラウザ幅に指定しています。
min-width: 1040px; = 横幅の最小値を1040pxに指定
「min-width: 1040px;」は、コンテンツの横幅の最小値の指定です。
これも先ほど出てきましたね。<header></header>から<footer></footer>も同じように最小値を指定しましょう。
<div class=”container”></div>タグに関する指定
最後に、前回解説した中央揃えのためのブロック、<div class=”container”></div>タグに関しての指定を追記します。先ほどの記述の下に1行あけてハイライトされている8〜13行目のコードを追記してください。
main.css
/*-- 〜上部省略〜 --*/
header,nav,article,footer {
width: 100%; /* 横幅 */
min-width: 1040px; /* 横幅の下限 */
}
.container {
width: 1000px; /* 横幅 */
margin: 0 auto; /* marginを使った中央揃えのテクニック */
text-align: left; /* 中に置くブロックや文字の配置 */
position: relative; /*ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定 */
}width: 1000px; = コンテンツ幅のサイズに指定
先ほどまでのブロック要素はすべて「width: 100%;」に指定してきましたが、
今回「1000px」と、初めて具体的な数値を指定しています。
<div class=”container”></div>にコンテンツ幅を指定するためですね。
margin: 0 auto; = ブロックの内側でブロックを中央揃えにする指定
| プロパティ | 指定の効果 | 値 |
|---|---|---|
| margin | 要素の上下左右の外側の余白サイズを設定 | %・px・em・auto |
「margin: 0 auto;」はmarginという要素の外側の余白の指定を行うプロパティを使った中央揃えのテクニックです。
記述の仕方として「margin: 上下 左右;」という指定になるので、
この場合は上下の余白を0にして左右の余白を自動計算（auto）にしてください、という記述になります。
「margin」そして「padding」のプロパティは非常に重要なので、以後、深く掘り下げて解説します。
text-align: left; = 中に置くブロックや文字を左寄せに指定
「text-align: left;」はブロックの内側にある文字やブロックを左寄せにする指定です。
<html></html>タグと<body></body>タグのところで「text-align: center;」を使い、
すでにテキストもブロックも中央揃えに指定していますよね。
実はこのままだとその指定がそのまま反映されて本文が中央揃えになってしまいます。
<div class=”container”></div>の内側はテキストもブロックも左寄せにしたいので、
「text-align: left;」によって左寄せに指定しましょう。
position: relative; = ボックスの配置方法（基準位置）が相対位置か絶対位置かを指定
先ほども出てきたposition: relative;ですが、<div class=”container”></div>でも指定を行います。
main.cssのページ全体の指定のまとめ
ページ全体への指定に関しては以上です。
今までの記述が問題なく行えていれば以下のようなコードになるはずです。
main.css
@charset "UTF-8";
* {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
a {text-decoration: none;}
ul {list-style: none;}
input[type="text"],
input[type="submit"] {-webkit-border-radius: 0;}
img {
border: 0;
max-width: 100%;
line-height: 1em;
vertical-align: bottom;
-ms-interpolation-mode: bicubic;
}
header,
nav,
menu,
article,
section,
main,
aside,
footer {
display:block;
margin: 0;
}
html,body {
height: 100%; /* 高さ */
font-weight: normal; /* 文字の太さ */
font-size: 12px; /* 文字のサイズ */
line-height: 20px; /* 文字の高さ */
font-family: 'Hiragino Kaku Gothic ProN',Meiryo; /* 書体 */
text-align: center; /* 中に置くブロックや文字の配置 */
}
body {
background-image: url(../img/bg.png); /* 背景画像の指定 */
background-repeat: repeat; /* 背景画像の繰り返し */
background-position: center center; /* 背景画像の描画の開始位置 */
}
#container {
width: 100%; /* 横幅 */
min-width: 1040px; /* 横幅の下限 */
min-height: 100%; /* 高さの下限 */
position: relative; /*ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定 */
overflow-x: hidden; /* アイテムがブロックからはみ出した時の処理 */
}
header,nav,article,footer {
width: 100%; /* 横幅 */
min-width: 1040px; /* 横幅の下限 */
}
.container {
width: 1000px; /* 横幅 */
margin: 0 auto; /* marginを使った中央揃えのテクニック */
text-align: left; /* 中に置くブロックや文字の配置 */
position: relative; /*ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定 */
}間違っていませんか？？半角と全角を間違えただけでもレイアウト崩れを起こす原因になります。
注意深く見直してみてください。
