ウェブデザイン演習 第05回 - ウェブデザイン演習 | WordPress・jQuery・HTML・CSSのスニペット集 WEBCRE8TOR.COM

WEBCRE8TOR.COM

ウェブデザイン演習 第05回

前回は、index.htmlのコーディングを開始しましたね。
その中で、HTMLファイルには必ず必要である4つのブロックがあると説明しました。

  • 「文書型定義」ブロックは、HTML文書として扱うために、「HTMLがどのバージョンのルールで書かれているのか」を宣言し、ブラウザのルールに沿った表示をさせるために記述が必要。
  • 「<html></html>タグ(HTMLの文書の本体ブロック)」は、htmlの記述部分、表示・制御に関わる部分の範囲全てを包括するもの。
  • 「<head></head>タグ」セクションは、モニタには表示されないが、デザイン制御を行うCSSや、動きの制御を行うJavaScriptなどの外部ファイルの読み込みを行うブロック。
  • 「<body></body>タグ」セクションは、ブラウザに表示される内容を記述するブロックで、ブラウザでは<body></body>タグ内に記述されたHTMLタグにCSSを使って指定したレイアウトやデザイン、そしてJavaScriptを使った動きを表示している。

といった内容でしたね。

今回は、CSSの基本的な考え方と記述方法を学び、その上で、一般的なCSSでは必ずと言っていいほど行われているCSSリセットの記述を行っていきましょう。

ウェブデザイン演習 第05回

今回もコーディングを行いながら解説を行いますので、まずはDreamweaverを起動し、前々回作成した「main.css」ファイルを開いてコーディングの準備を行ってください。

手順は以下。

  1. Adobe Dreamweaver CCを起動する。
  2. 前回作成した「html」フォルダの中の「css」フォルダ内にある「main」というファイルを、Dreamweaverのウィンドウ内にドラッグ&ドロップして開く。

以上です。準備ができたら早速始めましょう。

CSSの基本的な考え方と記述方法

CSSの書き方

CSSの書き方、何をどうすればどう反映されるのかを知る上で、
念頭に置いておく必要があるのが以下のような原理です。

CSSでは、この要素(セレクタ)に、
こんなデザイン(プロパティ)を、
これくらい(値)反映させる。

そして、これをCSSの記述に置き換えると以下のようなものになります。

CSS

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

いきなり「セレクタ」だとか「プロパティ」だとか「値」といった新しいワードが出てきましたが、これも詳しく解説するので安心してください。

セレクタ

セレクタは「どのHTMLタグに適用するか」を指定するものです。
<div></div>タグにデザインを適用したければセレクタは<div></div>タグになりますし、<p></p>タグにデザインを適用したければセレクタは<p></p>タグになります。

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の指定を記述することでCSSが反映されるということです。

プロパティ・値

プロパティは「どんなスタイルを適用させるか」の指定です。
例えば、背景色を指定したければ「background-color」というプロパティを使い、
フォントのサイズを指定したければ「font-size」というプロパティを使います。

値はプロパティを「どれくらい適用させるか」の指定です。
背景色を赤にしたい(いや、赤は目が痛いからやめて)場合は色名やカラーコードで指定したり、
フォントのサイズを大きくしたり小さくしたりしたい場合は数字を変えたりします。

CSS

/*-- 〜背景色を赤(red)に指定する場合の記述〜 --*/
div {
  background-color: red;
}

/*-- 〜フォントのサイズを14pxに指定する場合の記述〜 --*/
p {
  font-size: 14px;
}

上の例では、
2〜4行目の記述で<div></div>タグをセレクタにして背景色を赤に指定、
7〜9行目の記述で<p></p>タグをセレクタにしてフォントのサイズを14pxに指定しました。

こんな風に、セレクタごとにプロパティに値を指定して・・・を繰り返しているわけです。

ちょっと練習してみよう

セレクタ・プロパティ・値に関しては理解できましたか??
ちょっと練習してみましょう。

例えば、ぺージ全体やブロックごとのタイトルには「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>ウェブデザイン演習</title>
</head>
<body>
  <h1>ウェブデザイン演習</h1>
</body>
</html>

次に、「main.css」に以下の3行を全て記述しましょう。

CSS

h1 {
  font-size: 20px;
}

さらに、文字色を赤色にしたい場合、以下のような追記をします。

CSS

h1 {
  font-size: 20px;
  color: red;
}

この結果、h1タグの文字の大きさは20px、文字色は赤色になります。
CSSではこんな記述を繰り返しデザインを反映させていきます。

ちょっと見てみましょう。今使ってるブラウザで新規タブを開いて、そこにhtmlフォルダ内にある「index.html」をドラッグ&ドロップしてください。

どうかな??ちゃんと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>ウェブデザイン演習</title>
</head>
<body>
 <h1>ウェブデザイン演習</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標準の技術を採用したブラウザ)ではこう表示されます。

lesson07_1

逆にInternet Explorerなどのレガシーブラウザ(Web標準の技術をサポートしきれていないブラウザ)で見るとこう表示されます。

lesson07_2

Internet Explorerだと指定した200pxにpaddingとborderの値が足されてしまい、
ボックスのサイズが大きくなってしまっています。

lesson07_3

これにより、実際にCSSで指定したサイズよりも幅や高さが大きくなり、レイアウトが崩れてしまうことがあります。

例えば「カラム落ち」というものがあります。
下の画像をみてください。

lesson07_4

2カラム(横並び2列)の標準的なレイアウトを行った場合に、モダンブラウザで見ると横並びしてくれるのに、レガシーブラウザで見ると右側のカラムが下に落ちてる!ということになってしまったりします・・・ダルい。

それでは今日の本題であるCSSリセットを行うので、index.htmlに記述した<h1></h1>タグと、main.cssに記述したh1に関する指定を削除しておきましょう。

CSSリセットとは?何のためにリセットするの?

今回CSSのリセットというのを行いますが、ブラウザ独自のCSSを上書き無効化してリセットすることでブラウザ間の表示の違いを最小限にとどめようというのが狙いです。

あらかじめ最初の段階でリセットしておくことで、表示崩れは最小限にとどめることができます。
また、リセットしてもなお表示崩れを起こしていたとしても、リセットされていない箇所に崩れの原因があるはずなので、原因を見つけ出しやすく修正作業も簡単です。

CSSを使ってブラウザ独自のCSSをリセットする。

ではまず最初に、CSSに対して文字コードの指定を行います。
文字コードの指定を怠ると何がどうまずかったのか覚えていますか??

第4回 headセクションに記述① meta要素を使ってエンコーディング

そうです。文字化けしちゃうんです。
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やpaddingもブラウザによっては勝手に意味のわからない数値に設定されていることがありますので、これを最初の段階で「0」に指定します。

text-size-adjustというのは、主にiPhoneのブラウザで勝手に文字が拡大された状態で表示させられる問題を解決します。

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></a>タグの指定の下に1行あけて、以下の記述を追加しましょう。

ul(リスト群の親に対しての設定)

main.css

ul {list-style: none;} /* リストスタイルを削除 */

ulタグはリストになる要素の親で、リストをまとめたものになります。
デフォルトではリストマーク(点)がついてきますので、これを削除。 

次に、<ul></ul>タグの指定の下に1行あけて、以下の記述を追加しましょう。

input(フォームのテキスト入力エリアや送信ボタンへの設定)

main.css

input[type="text"],
input[type="submit"] {-webkit-border-radius: 0;}

inputタグはフォーム周りで使用するものです。このブログでも課題提出にフォームを使用しています。
input[type=”text”]は氏名などに、input[type=”submit”]は送信ボタンへの指定になります。

PCで見る分には問題ないんですが、iPhoneで見るとinput要素は勝手に角に丸みが付いてしまうのでこれを削除。

ちなみに「,(カンマ)」を使うことでタグを複数指定することができます。これにより全然別のタグに同じプロパティがあってもまとめて書くことができます。

次に、<input></input>タグの指定の下に1行あけて、以下の記述を追加しましょう。

img(画像に対しての設定)

main.css

img {
  border: 0;
  max-width: 100%;
  line-height: 1em;
  vertical-align: bottom;
  -ms-interpolation-mode: bicubic;
}

前回ちらっと出てきましたが、imgタグは画像を表示させるのに必要です。
デフォルトではborderが勝手についていたり、コンテンツ幅を超えて表示されたりします。

またIEでは画像を実際のサイズよりも縮小表示するとギザギザになってとても汚く表示されてしまうので、これをリセットします。

最後に、<img>タグの指定の下に1行あけて、以下の記述を追加しましょう。

header〜footer(HTML5に対応させるための設定)

main.css

header,
nav,
menu,
article,
section,
main,
aside,
footer {
  display:block;
  margin: 0;
}

前回の講義で説明したようにHTML文書にもバージョンがあります。

現在最も新しい技術が今回勉強しているHTML5になりますが、技術が新しいためにサポートできていないブラウザもあります。header〜footerに関してはとても重要なので今後の講義で一つ一つ説明しますが、そもそもこれらはHTML5から始まったタグなので、サポートしていないブラウザには存在すら認識されません。

それを要素として認識させるために指定をします。
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のリセットは完了です。
上書き保存を忘れずに。

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE