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

WEBCRE8TOR.COM

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

前回は「ブロック」と「入れ子」、「インライン要素」と「ブロック要素」について解説しました。今回は、main.cssへページ全体の指定を行い、<div id=”container”></div>と<div class=”container”></div>など、idとclassのCSSでの記述方法を解説します。

また前回見てもらった完成品のhtmlデータのPSDをダウンロードし、Photoshopの「画像アセット」という機能を使って、ページのパーツになる画像の書き出しを行います。

ひとまずDreamweaverを起動して「index.html」「main.css」ファイルを開いてコーディングの準備を行ってください。

手順は以下。

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

以上です。

この記事の目次

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

第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;
}

main.cssのページ全体の指定

<html></html>タグと<body></body>タグに関する指定

ではまず、記述した最後の行を改行し、ハイライトされているコードを追記しましょう。
これは、<html></html>タグと<body></body>タグに関する指定です。

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: 100%;」で高さを100％に指定しています。

font-○○○: □□□□; & line-height: 20px; = サイトの本文部分のフォントに関する指定

次にサイト内の主に本文部分のフォントの書体や太さ、サイズの指定です。
「font-weight: normal;」でフォントの太さを通常の太さにし、
「font-size: 12px;」でフォントサイズを12pxに指定し、
「line-height: 20px;」で行間の高さを20pxに指定しました。

「font-family: ‘Hiragino Kaku Gothic ProN’,Meiryo;」というのは書体の指定です。ここは基本的にPCに必ずインストールされているであろう書体を指定するのが無難です。インストールされていない特殊な書体を選んでもないものは表示してくれません。

text-align: center; = ブロック内の文字やブロックを中央揃えに指定

最後に「text-align: center;」で文字やブロックを中央揃えに指定します。

<body></body>タグに関する指定

次に、<body></body>タグに関する記述を行いましょう。
先ほどの記述の下に1行あけてハイライトされているコードを追記してください。

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(../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行あけてハイライトされているコードを追記してください。

main.css

/*-- 〜上部省略〜 --*/

body {
  background-image: url(../img/bg.png); /* 背景画像の指定 */
  background-repeat: repeat; /* 背景画像の繰り返し */
  background-position: center center; /* 背景画像の描画の開始位置 */
}

#container {
  width: 100%; /* 横幅 */
  min-width: 1040px; /* 横幅の下限 */
  _height: 100%; /* 古いブラウザの対策 */
  height: auto !important; /* 高さ */
  min-height: 100%; /* 高さの下限 */
  position: relative; /*ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定 */
  overflow-x: hidden; /* アイテムがブロックからはみ出した時の処理 */
}

前回も登場した<div id=”container”></div>タグの指定です。

width: 100%; = 横幅を100％に指定

<div id=”container”></div>タグは<body></body>タグのすぐ内側に記述されるので、
「width: 100%;」と指定することで横幅を<body></body>タグと同じブラウザ幅に指定することができます。

min-width: 1040px; = 横幅の最小値を1040pxに指定

「min-width: 1040px;」は、コンテンツの横幅の最小値の指定です。
もしここで指定した横幅よりもブラウザの横幅が小さければ、ブラウザに横スクロールが表示されるようになります。最小値を指定せずにブラウザを縮めてしまうとあるはずの横幅がないのでレイアウト崩れの原因になってしまうために指定しています。

_height: 100%;とheight: auto !important; = 高さを100%に（古いブラウザ対策）

「_height: 100%;」と「height: auto !important;」はブロックの高さの指定ですが、役割としては古いブラウザのレイアウト崩れ対策です。

現在ではあまりしなくなりましたが、古いブラウザにだけ適用される書き方をすることで新しいブラウザに影響を与えずにレイアウト崩れの調整を行っていました。これをCSSハックと言います。

以前は「_height」で使っている「_（アンダースコア・IE6用）」の他にも、「*（アスタリスク・IE6用）」を使ったりして状況や用途によって使い分けてきました。

ただ現在ではCSSハックをする必要もないほどブラウザが新しくなっており、不要といえば不要です。
・・・念のため、こういうのもあったよってことで。

min-height: 100%; = 高さを100%に（モダンブラウザ向け）

実際に機能しているのは「min-height: 100%;」で、この指定により高さの最小値を100％に保つことができ「最低でもブラウザの高さにする」ことができます。

position: relative; = ボックスの配置方法（基準位置）が相対位置か絶対位置かを指定

position: relative;は目に見えた変化があるわけではありません。それだけに現時点では理解するのが難しいプロパティです。ただ、とても重要な役割を担ってくれるものですので、今後の講義で改めて紹介します。

overflow-x: hidden; = アイテムがブロックの横にはみ出した時は非表示

overflow: hidden;はブロックの外にアイテムがはみ出した際に、アイテムのはみ出した部分を非表示にする指定です。縦の指定は「overflow-y」横の指定は「overflow-x」とあり、両方を指定する場合は「overflow」だけになります。

<header></header>タグから<footer></footer>タグに関する指定

次に、前回記述を行ったブロック要素の<header></header>タグから<footer></footer>タグまでに関する記述を追記します。先ほどの記述の下に1行あけてハイライトされているコードを追記してください。

main.css

/*-- 〜上部省略〜 --*/

#container {
  width: 100%; /* 横幅 */
  min-width: 1040px; /* 横幅の下限 */
  _height: 100%; /* 古いブラウザの対策 */
  height: auto !important; /* 高さ */
  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行あけてハイライトされているコードを追記してください。

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: 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; /* 横幅の下限 */
  _height: 100%; /* 古いブラウザの対策 */
  height: auto !important; /* 高さ */
  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; /*ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定 */
}

間違っていませんか？？半角と全角を間違えただけでもレイアウト崩れを起こす原因になります。
注意深く見直してみてください。

idとclassの書き方

ここからは、前回index.htmlに記述を行った、<div id=”container”></div>と<div class=”container”></div>のCSSでの記述方法について説明します。
前回、idとclassの違いについて簡単に説明しましたが、HTMLでの記述ルールがあるように、CSSにもidとclassのそれぞれの記述ルールがあります。

これはみなさんのmain.cssにもうすでに記述してある部分で説明します。

idの書き方

CSS

#container {
 width: 100%; /* 横幅 */
 min-width: 1040px; /* 横幅の下限 */
 _height: 100%; /* 古いブラウザの対策 */
 height: auto !important; /* 高さ */
 min-height: 100%; /* 高さの下限 */
 position: relative; /*ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定 */
 overflow-x: hidden; /* アイテムがブロックからはみ出した時の処理 */
}

<div id=”container”></div>など、idは「#◯◯」と、シャープを頭につけて指定を行います。id指定しているものは、同一ページ内で一度だけ使うもので、id名を重複させてはいけません。

classの書き方

CSS

.container {
 width: 1000px; /* 横幅 */
 margin: 0 auto; /* marginを使った中央揃えのテクニック */
 text-align: left; /* 中に置くブロックや文字の配置 */
 position: relative; /*ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定 */
}

<div class=”container”></div>など、classは「.◯◯」と、ピリオドを頭につけて指定を行います。classと指定しているものは、同一ページ内で複数回使う可能性があるもので、必要ならば、あらゆる場所で使用することができます。

idとclassの命名に関して

今回はidとclassの名前を「container」にしていますが、
以下のルールさえ守れば名前はなんでも構いません。

  1. 日本語を使わず半角英数字のみを使用。
  2. 記号を使うのなら「-」（ハイフン）もしくは「_」（アンダースコア）を使用。
  3. ①や□など機種依存文字は使用しない。
  4. スペースは使用しない（全角および半角）。
  5. 1文字目は数字を使用しない。

ブラウザに正しく認識されない場合がありますので、
idとclassを命名するときにはこの5点を必ず守りましょう。

画像アセット（Photoshopの画像の自動書き出し機能）

Webサイト制作はデザインとコーディングがつきものです。
PhotoshopやIllustratorなどでデザイン制作を行いますが、
制作したデザインデータはコーディング時にパーツごとに書き出しを行う必要があります。

通常であれば「スライス」という機能を使ったりパーツごとにPSDを分割して「Web用に書き出す」を行うんですが、ほとんどの場合ものすごい画像数になるので、とてつもない時間と労力がかかります・・・。

今回はそのパーツごとの書き出し作業を非常に楽にしてくれる「画像アセット」というPhotoshopの機能を使って実際に画像を書き出してみましょう。一度「画像アセット」を使うと、今までやってきたスライスなどが本当に無駄な作業に思えてきます。

PSDのダウンロード

まずはPSDファイルをダウンロードしておきましょう。
※IDとPASSは講義で伝えます。

http://webcre8tor.com/data/WebDesignExercise01.psd

画像アセットを使用すると、元のPSDデータと同じ場所に「ファイル名-assets」というフォルダが自動で生成されるので、自分で管理できる場所に置いておかなければいけません。
このPSDデータを、持参したUSBなど確実に管理できる場所に移動しておいてください。

Photoshopの基本設定

ウェブデザインBではPhotoshopの起動時に初期設定をしましたよね。
Photoshopを使用するときは設定を行いますので、Photoshopを起動してください。

教室のPCはシャットダウンするたびに毎回初期化されてしまって設定が消えてしまうために毎回起動後に以下の設定をしなければいけません。

この初期設定が終わったら、ダウンロード・移動したPSDファイルをダブルクリックして、Photoshopで開いてみましょう。

使い方その1 レイヤーパネルを開く

画像アセットはレイヤーパネルとレイヤーの操作だけで完結します。
まずはレイヤーパネルを開いてみましょう。

レイヤーパネルを開くと「header」とか「nav」とか、フォルダやファイルにすでに名前が付けられていますね。コーディングする予定のブロックの構成でそのまままとめてあります。 

実はPhotoshopを使う上で、レイヤーをフォルダに整理してどこに何があるかわかりやすくしておくことは、画像アセットを使う時だけじゃなく、コーディングを行う際にも非常に重要です。

Webサイト制作はデザイン・コーディング以外にもやることが山ほどあります。
このフォルダ整理の工程をサボらずやっておけば後の作業が本当に効率的で楽になります。

使い方その2 レイヤーに拡張子付きの名前をつける

次に書き出す対象のレイヤーに名前をつけます。
画像アセットはレイヤーの名前に「.jpg」「.png」「.gif」などの名前をつけることで自動で書き出しを行ってくれる機能です。

今回は<body></body>タグで指定した背景画像と<header></header>セクションで使用する画像の書き出しをおこないます。早速名前をつけてみましょう。

<body></body>の背景画像「bg.png」

レイヤーパネル内でフォルダにまとめられていない「bg」というレイヤーがありますね。
レイヤー名をダブルクリックして「bg」を「bg.png」に書き換えましょう。

変更前「bg」lesson08_assets01

変更後「bg.png」lesson08_assets02

<header></header>のロゴ画像「logo.png」
電話の画像「tel.png」メールの画像「mail.png」

今度は<header></header>のロゴとお問い合わせブロックの書き出しです。
先ほどから少しレベルアップして、それぞれ以下のように書き換えてください。

  • 「header」フォルダ内の「logo」レイヤーを「header/logo.png」に書き換える
  • 「header」フォルダ内の「contact」フォルダ内の「tel」フォルダを、
    「header/tel.png」に書き換える
  • 「header」フォルダ内の「contact」フォルダ内の「mail」フォルダを、
    「header/mail.png」に書き換える

変更前「logo」lesson08_assets03

変更後「header/logo.png」lesson08_assets04

変更前「tel」lesson08_assets05

変更後「header/tel.png」lesson08_assets06

変更前「mail」lesson08_assets07

変更後「header/mail.png」lesson08_assets08

それぞれ「header/」という文字がつきましたが、こうすることで自動で「header」というフォルダが生成され、そのフォルダ内に画像が書き出されます。

使い方その4 画像アセットを有効にする

レイヤー名・フォルダ名の書き換えは以上です。
次に画像アセットの設定を変更して、レイヤー名を命名・変更するたびに自動で書き出しを行ってくれるようにしましょう。

Photoshopの上部メニューから、
「ファイル > 生成 > 画像アセット」と移動してクリックしましょう。

lesson08_assets09

これで次回から、レイヤー名やフォルダ名を命名したり変更したりすれば、
その都度最新版の画像を書き出してくれるようになりました。

画像アセットの便利なところは、命名を変更されて書き出しが無効になった画像はその都度削除され、常に最新版での構成で書き出してくれるところです。

使い方その3 htmlフォルダにそのまま移動する

早速書き出した画像を確認してみましょう。
作業したPSDを上書き保存してPhotoshopを終了し、PSDがあるフォルダに「WebDesignExercise01-assets」というフォルダがあるかを確認します。

存在していればフォルダを開き、
ちゃんと「header」フォルダが生成されているか？
画像ファイル名は間違っていないか？
「header」など綴りは間違っていないか？
・・・などを確認してください。

レイヤー・フォルダの命名がちゃんとできていれば、フォルダごとに分けられて書き出しを行ってくれているはずです。書き出された画像フォルダを見て、フォルダ構成が正しければそのままhtmlフォルダの中のimgフォルダに移動してしまいましょう。

構成の確認

以下にフォルダ・ファイルの構成を明記しておきます。

lesson08_5

どうでしょうか？？できましたか？？

RELATED POSTS関連記事

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE