まずはスマホ出席で出席登録を行ってください。
今回の4桁の認証コードは「 」です。
Sponsored Link
前回は、index.htmlのコーディングを開始しましたね。
その中で、htmlファイルには必ず必要である4つのブロックがあると説明しました。
- 「文書型定義」ブロックは、html文書として扱うために、「htmlがどのバージョンのルールで書かれているのか」を宣言し、ブラウザのルールに沿った表示をさせるために記述が必要。
- 「<html></html>タグ（htmlの文書の本体ブロック）」は、htmlの記述部分、表示・制御に関わる部分の範囲全てを包括するもの。
- 「<head></head>タグ」セクションは、モニタには表示されないが、デザイン制御を行うcssや、動きの制御を行うJavaScriptなどの外部ファイルの読み込みを行うブロック。
- 「<body></body>タグ」セクションは、ブラウザに表示される内容を記述するブロックで、ブラウザでは<body></body>タグ内に記述されたhtmlタグにcssを使って指定したレイアウトやデザイン、そしてJavaScriptを使った動きを表示している。
といった内容でしたね。
今回は、cssの基本的な考え方と記述方法を学び、その上で、一般的なcssでは必ずと言っていいほど行われているcssリセットの記述を行っていきましょう。
今回もコーディングを行いながら解説を行いますので、ひとまずテキストエディタを起動して「index.html」「main.css」へのコーディング準備を行ってください。
Visual Studio Codeの左のエクスプローラーメニューの「html」フォルダから「index.html」「main.css」を開いて早速始めていきましょう。
この記事の目次
- 1 cssの基本的な考え方と記述方法
- 2 cssの記述（リセット編）
cssの基本的な考え方と記述方法
cssの書き方
cssの書き方、何をどうすればどう反映されるのかを知る上で、
念頭に置いておく必要があるのが以下のような原理です。
この要素（セレクタ）に、こんなデザイン（プロパティ）を、これくらい（値）反映させる。
そして、これをcssの記述に置き換えると以下のようなものになります。
css
セレクタ {
プロパティ: 値;
}「セレクタ」だとか「プロパティ」だとか「値」といった新しいワードが出てきましたね。
詳しく解説します。
セレクタ
セレクタは「どのhtmlタグに適用するか」を指定するものです。
<div></div>タグにデザインを適用したければセレクタは<div></div>タグになりますし、
<p></p>タグにデザインを適用したければセレクタは<p></p>タグになります。
ざっくり言うと、cssへ記述する際は、htmlファイルに記述する際に書いていたhtmlタグから、<（小なり）と>（大なり）、そして閉じタグ</○○>を消せばいいわけです。
css
/*-- 〜<div></div>タグをセレクタにした場合〜 --*/
div {
background-color: #333;
}
/*-- 〜<p></p>タグをセレクタにした場合〜 --*/
p {
font-size: 14px;
}上の例では、<div></div>タグをセレクタにした場合（2〜4行目）と、
<p></p>タグをセレクタにした場合（7〜9行目）を記述しました。
上述したようにhtmlの記述との違いは、それぞれ、<と>、そして閉じタグ</○○>が取り払われ、その代わりにタグの後ろに波カッコ（ {と} ）を記述している点です。
cssの波カッコはhtmlタグの開始タグと閉じタグと同じように適用範囲の開始と終了を意味します。
{と}の間、つまり内側に、以下のプロパティと値を記述することでcssが反映されるということ。
プロパティ・値
プロパティは「どんなスタイルを適用させるか」の指定です。
例えば、背景色を指定したければ「background-color」というプロパティを使い、
フォントのサイズを指定したければ「font-size」というプロパティを使います。
値はプロパティを「どれくらい適用させるか」の指定です。
背景色を赤にしたい場合は色名やカラーコードで指定したり、
フォントのサイズを大きくしたり小さくしたりしたい場合は数字を変えたりします。
現時点では「1つのプロパティに対して値が1つ」だと思っておいてください。
css
/*-- 〜背景色を赤（red）に指定する場合の記述〜 --*/
div {
background-color: red;
}
/*-- 〜フォントのサイズを14pxに指定する場合の記述〜 --*/
p {
font-size: 14px;
}上の例では、
2〜4行目の記述で<div></div>タグをセレクタにして背景色を赤に指定、
7〜9行目の記述で<p></p>タグをセレクタにしてフォントのサイズを14pxに指定しました。
こんな風に、セレクタごとのプロパティ&値の指定を繰り返しているわけです。
なお、1つのセレクタに対しプロパティと値は複数指定することができます。
ちょっと練習してみよう
セレクタ・プロパティ・値に関しては理解できましたか？？
ちょっと練習してみましょう。
例えば、ぺージ全体やブロックごとのタイトルには「hタグ（heading）」というものを使いますが、ページタイトルにh1タグを使って、文字の大きさを20pxに指定したい場合、html・cssはこう書きます。
まずhtmlを記述しましょう。
前回コーディングした内容の中で<body></body>タグがありましたね。
<body></body>タグは何のためのタグだったか覚えていますか？？
<body></body>タグは、ブラウザに表示される内容を記述するブロックで、
ブラウザでは<body></body>タグ内に記述されたhtmlタグにcssを使って指定したレイアウトやデザイン、
そしてJavaScriptを使った動きを表示している・・・でしたね。
この練習もブラウザに表示される部分を調整するので、
当然<body></body>タグ内、つまり<body>から</body>の間に記述します。
早速index.htmlファイルに、ハイライトされている9行目の記述を追加してください。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザインA・演習</title>
</head>
<body>
<h1>ウェブデザインA・演習</h1>
</body>
</html>次に、「main.css」に以下の3行を全て記述しましょう。
css
h1 {
font-size: 20px;
}さらに、文字色を赤色にしたい場合、以下のような追記をします。
css
h1 {
font-size: 20px;
color: red;
}この結果、h1タグの文字の大きさは20px、文字色は赤色になります。
cssではこんな記述を繰り返しデザインを反映させていきます。
ちょっと見てみましょう。今使ってるブラウザで新規タブを開いて、そこにhtmlフォルダ内にある「index.html」をドラッグ&ドロップ（以後D&D）してください。
どうかな？？ちゃんとh1は赤いかな？？
問題なく表示されていたら、cssの入り口に入れたということですね。
以下のようにindex.htmlに追加した9行目の記述とmain.cssの記述を丸ごと削除しておきましょう。
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザインA・演習</title>
</head>
<body>
</body>
</html>css
/* h1の指定の記述を消す */cssの記述（リセット編）
レイアウト崩れはブラウザ独自のcssが原因であることが多い。
講義の第1回で、ブラウザによるhtmlとcssの解釈の違いがあって、そのせいでレイアウト崩れを起こしたり、使えない機能があると話しました。
これは、ブラウザが独自のcss（以下：ブラウザcss）をすでに設定しており、自分が書いたcssの設定がブラウザcssに影響を受けてしまうことが原因です。
影響を受けてしまうので、制作時に自分がテストしていたブラウザ以外では期待通りの表示がされず、レイアウトが崩れたり、動画が再生されなかったり、アニメーションが動かなかったりしてしまうんです。
代表的なものを例に挙げます。
コーディング経験の浅いデザイナーがだいたい最初に困るのが、
要素の内側と外側の幅、そして外枠線のサイズ計算の解釈の違いです。
cssで頻繁に使うプロパティで、
「指定要素と周りの要素との間の距離であるmargin」、
「指定要素の内側の余白の距離であるpadding」、
「指定要素の外側の枠線であるborder」
というものがあります。
先ほど記述した「h1」タグを使って説明します。
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザインA・演習</title>
</head>
<body>
<h1>ウェブデザインA・演習</h1>
</body>
</html>次にcssを記述します。
css
h1 {
width: 200px; /* ボックスの幅 */
height: 200px; /* ボックスの高さ */
margin: 20px; /* ボックスの外側から周りの要素までの距離 */
padding: 20px; /* ボックスの内側の余白の距離 */
background-color: yellow; /* ボックスの背景色 */
border: 1px solid red; /* ボックスの外枠線 */
}このように記述すると、Google ChromeやFirefox、Safariなどのモダンブラウザ（Web標準の技術を採用したブラウザ）ではこう表示されます。
逆にInternet Explorerなどのレガシーブラウザ（Web標準の技術をサポートしきれていないブラウザ）で見るとこう表示されます。
Internet Explorerだと指定した200pxにpaddingとborderの値が足されてしまい、
ボックスのサイズが大きくなってしまっています。
これにより、実際にcssで指定したサイズよりも幅や高さが大きくなり、レイアウトが崩れてしまうことがあります。代表的なもので「カラム落ち」というものがあります。下の画像をみてください。
2カラム（横並び2列）の標準的なレイアウトを行った場合に、モダンブラウザで見ると横並びしてくれるのに、レガシーブラウザで見ると右側のカラムが下に落ちてる！ということになってしまったりします・・・ダルい。
それでは今日の本題であるcssリセットを行っていきましょう。
cssリセットとは？何のためにリセットするの？
今回cssのリセットというのを行います。
ブラウザ独自のcssを上書き無効化してリセットすることで、
ブラウザ間の表示の違いを最小限にとどめるのが狙いです。
あらかじめ最初の段階でリセットしておくことで、
表示崩れは最小限にとどめることができます。
また、リセットしてもなお表示崩れを起こしていたとしても、
リセットされていない箇所に崩れの原因があるはずなので、
原因を見つけ出しやすく修正作業も簡単です。
cssを使ってブラウザ独自のcssをリセットする。
ではまず最初に、cssに対して文字コードの指定を行います。
文字コードの指定を怠ると何がどうまずかったのか覚えていますか？？
そうです。文字化けしちゃうんです。
cssの記述に関しても実は同じで、例えば「メイリオ」や「ヒラギノ」など日本語フォントの指定を行うときちんとcssが働いてくれません。
ということで、まずは以下をmain.cssに記述します。
cssの文字コードに対する指定
main.css
@charset "UTF-8";次に、すべてのhtmlタグに対して指定を行います。
すべてのhtmlタグはcssでは「*（アスタリスクマーク）」と書きます。
css
* {}この要素に指定を行うことで、記述するタグすべてに反映させることができます。
先ほどの文字コードの指定の下に1行あけて以下を記述しましょう。
✳︎（すべてのhtmlタグ）に対しての指定
main.css
* {
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;
}margin:0; padding: 0;
marginやpaddingもブラウザによっては勝手に意味のわからない数値に設定されていることがありますので、これを最初の段階で「0」に指定します。
-webkit-text-size-adjust: 100%;
text-size-adjustというのは、主にiPhoneのブラウザで勝手に文字が拡大された状態で表示させられる問題を解決します。これを指定しておかないと思い通りのフォントサイズになりません。
box-sizing: border-box;
box-sizingというのは、先ほどのpaddingとborderの問題を解決する有効策で、「border-box」という値を指定してborderもpaddingも内側に含めるという指定をしておき、ブラウザに勝手に解釈させないようにしています。
なお、「-webkit」や「-moz」「-ms」「-o」などどありますが、これは、box-sizingがまだ新しいプロパティで対応していないブラウザもあるため、またtext-size-adjustはWebkit系ブラウザ（ChromeやSafari）の独自仕様であるため、これらを一般的なブラウザでも適用できるようにしている「ベンダープレフィックス」という技術です。
参考サイト：ベンダープレフィックス－cssの基本
現在ではブラウザが新技術にどんどん対応してきているので、近い将来この技術は必要なくなると思います。あくまでツナギの技術ですね。
どんどんいきます。
*の指定の下に1行あけて、以下の記述を追加しましょう。
aタグ（リンクに対しての設定）
main.css
a {text-decoration: none;} /* 下線を削除 */<a></a>タグはリンクを指定した要素に対するものです。
text-decoration: none;
Webサイトでのテキストリンクにはデフォルトで下線が表示されます。
今回はデザインの自由度を高めるためにこれを削除します。
<a></a>タグに関する記述はこれだけ。
次に、<a></a>タグの指定の下に1行あけて、以下の記述を追加しましょう。
ul（リスト群の親に対しての設定）
main.css
ul {list-style: none;} /* リストスタイルを削除 */<ul></ul>タグはリストになる要素の親で、リストをまとめたものになります。
list-style: none;
デフォルトではリストマーク（点）がついてきますので、これを削除。
<ul></ul>タグに関する記述はこれだけ。
次に、<ul></ul>タグの指定の下に1行あけて、以下の記述を追加しましょう。
input（フォームのテキスト入力エリアや送信ボタンへの設定）
main.css
input[type="text"],
input[type="submit"] {-webkit-border-radius: 0;}<input>タグはフォーム周りで使用するものです。このブログでも課題提出にフォームを使用しています。
input[type=”text”]は氏名などに、input[type=”submit”]は送信ボタンへの指定になります。
-webkit-border-radius: 0;
PCで見る分には問題ないんですが、<input>タグはiPhoneで見ると勝手に角に丸みが付いてしまうのでこれを削除。
ちなみに「,（カンマ）」を使うことでタグを複数指定することができます。これにより全然別のタグに同じプロパティがあってもまとめて書くことができます。
<input>タグに関する記述はこれだけ。
次に、<input>タグの指定の下に1行あけて、以下の記述を追加しましょう。
img（画像に対しての設定）
main.css
img {
border: 0;
max-width: 100%;
line-height: 1em;
vertical-align: bottom;
-ms-interpolation-mode: bicubic;
}前回ちらっと出てきましたが、<img>タグは画像を表示させるのに必要です。
border: 0;
<img>タグにはデフォルトでborderが勝手についています。値を0とすることでこれを削除。
max-width: 100%;
<img>タグはデフォルトでは画像の実寸のサイズで表示されるんですが、デジカメで撮影した写真はたいてい横幅4000px以上あるため、ブラウザの横幅を超えてはみ出して表示され、横スクロールが出てしまいます。画像の横幅の最大値をモニタの横幅100%とすることではみ出させないようにしています。
line-height: 1em; vertical-align: bottom;
主に文章途中に画像を差し込む時のための指定。おまじないのようなものです。
-ms-interpolation-mode: bicubic;
IE（Edge）では画像を実際のサイズよりも縮小表示するとギザギザになってとても汚く表示されてしまうので、これをリセットします。
最後に、<img>タグの指定の下に1行あけて、以下の記述を追加しましょう。
main.css
header,
nav,
menu,
article,
section,
main,
aside,
footer {
display:block;
margin: 0;
}前回の講義で説明したようにhtml文書にもバージョンがあります。
現在最も新しい技術はウェブデザインA・演習で解説しているhtml5になりますが、
技術が新しいためにサポートできていないブラウザもあります。
header〜footerに関してはとても重要なので今後の講義で一つ一つ説明しますが、そもそもこれらはhtml5から始まったタグなので、サポートしていないブラウザには存在の認識すらされません。
display: block;
サポートしていないブラウザには新しい要素は認識されないと言いましたが、
ここで行っているのは新しい要素をきちんと要素として認識させるための指定です。
今後の講義でブロックレベル要素というものが出てくるので詳しくはその時に説明します。
margin: 0;
*（アスタリスクマーク）の時と同様にmarginのリセットも忘れずに。
リセットのまとめ
実はこの他にも、動画を表示させる「videoタグ」や要素にマウスが乗った時の「◯◯:hover」など、まだまだたくさんリセットしたいものはありますが、この講義内においてはこれで十分。
全てをまとめるとこんな感じ。
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;
}これでcssのリセットは完了です。
上書き保存を忘れずに。
