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

WEBCRE8TOR.COM

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

前回は<html></html>タグや<body></body>タグ、そして<div id=”container”></div>などの主にページ内の外枠になるブロックや、<header></header>、<nav></nav>、<article></article>、<footer></footer>などそれぞれ役割を持った各ブロック、最後に<div class=”container”></div>というコンテンツ幅のブロックのmain.cssへの指定を行い、また、idとclassの記述ルールも解説しましたね。

今回は完成品のhtmlデータのPSDをダウンロードし、Photoshopの「画像アセット」という機能を使って、ページのパーツになる画像の書き出しを行います。また、<header></header>と<nav></nav>の内側にある要素に対しコーディングを行います。

画像アセット（Photoshopの画像の自動書き出し機能）<header></header>編

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

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

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

以下から詳しく解説していきます。

PSDのダウンロード

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

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

開いたら多分「書体がない」的なエラーが表示されるんですが無視して大丈夫です。
・・・WindowsではなくMacで作ったので。

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

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

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

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

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

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

準備が9割です。

使い方その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

画像アセット（Photoshopの画像の自動書き出し機能）<nav></nav>セクション編

引き続き「画像アセット」機能を使って、<nav></nav>セクションにあるページのグローバルナビゲーションになる画像の書き出しを行おうと思います。

レイヤーパネルを開く

今回は<nav></nav>の画像を書き出すので、レイヤーパネルの「nav」フォルダを開きましょう。 

レイヤーに拡張子付きの名前をつける

次に書き出す対象のレイヤーに名前をつけます。

<nav></nav>のナビゲーション画像「ul.png」

今回は<nav></nav>のナビゲーション画像を書き出します。headerフォルダと同じようにレイヤー・フォルダの名前を書き換えるんですが、その前にレイヤー・フォルダの移動を行います。

  • 「nav」フォルダ内の「パターン 1」レイヤーを「ul」フォルダの中に移動する

移動前lesson09_border_move01

ドラッグ＆ドロップlesson09_border_move02

移動後lesson09_ul01

移動ができたら「ul」フォルダを以下のように書き換えてください。

  • 「nav」フォルダ内の「ul」フォルダを「nav/ul.png」に書き換える

変更前「ul」lesson09_ul01

変更後「nav/ul.png」lesson09_ul02

今回は「nav/」という文字がつきました。この作業だけで「nav」というフォルダが自動的に生成され、そのフォルダ内に画像が書き出されます。

 htmlフォルダにそのまま移動する

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

確認後、フォルダ構成が正しければ、
そのまま「html」フォルダの中の「img」フォルダに「nav」フォルダごと移動してしまいましょう。

ここまでの構成の確認

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

lesson10_1_upd

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

index.html・main.cssへの記述（<header></header>セクション編）

ではindex.html・main.cssへの記述を行います。ひとまずテキストエディタを起動して「index.html」「main.css」へのコーディング準備を行ってください。

Visual Studio Codeの起動と日本語化。

Visual Studio Codeの左のエクスプローラーメニューの「html」フォルダから「index.html」「main.css」を開いて早速始めていきましょう。

index.htmlは第07回で行った記述が問題なく終わっていれば以下のようなコードになっているはずです。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
  <div id="container">
    <header>
      <div class="container">
      <!-- /.container --></div>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  <!-- / #container --></div>
</body>
</html>

間違いはないですか？？早速コーディングを始めていきます。

index.htmlの<div class=”container”></div>の内側にコードを記述

まず、<header></header>の中に記述している<div class=”container”></div>の開始タグと終了タグの間（内側）に、以下のハイライトされている12〜16行目のコードを行いましょう。

index.html

<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css">
<title>ウェブデザイン演習</title>
</head>
<body>
  <div id="container">
    <header>
      <div class="container">
        <h1><img src="img/header/logo.png" width="350" height="50" alt="ウェブデザイン演習" /></h1>
        <div class="contact">
          <p class="tel"><img src="img/header/tel.png" width="230" height="25" alt="086-000-0000" /></p>
          <p class="mail"><a href=""><img src="img/header/mail.png" width="230" height="15" alt="メールフォームでのお問い合わせ" /></a></p>
        <!-- /.contact --></div>
      <!-- /.container --></div>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  <!-- / #container --></div>
</body>
</html>

第07回でブラウザ幅の<header></header>の内側に、コンテンツ幅の<div class=”container”></div>を入れる記述を行いました。<div class=”container”></div>はコンテンツの中央揃えのために設置したブロックでwidth（横幅）を1,000pxに設定しており、このサイズがコンテンツ幅になっているんでしたね。

<header></header>に関してはHTMLへの記述はひとまず終わり。
index.htmlを保存（Ctrl + S）しておいてください。

main.cssの<header></header>に<div class=”container”></div>のコードを記述

さて次にmain.cssへの記述です。main.cssを開きましょう。記述が問題なく終わっていれば、main.cssの最後は<div class=”container”></div>への指定で終わっているはずです。

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; /*ボックスの配置方法（基準位置）が、相対位置か絶対位置かを指定 */
}

その続きから記述を行なっていきましょう。
前回記述した最後の行を改行しハイライトされている10〜14行目のコードを記述してください。

main.css

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

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

header .container {
  padding-top: 30px; /* .containerの内側上部の余白 */
  padding-bottom: 20px;/* .containerの内側下部の余白 */
  overflow: hidden; /* .containerからはみ出した部分の処理 */
}

まずは追記したプロパティの解説を行っていきます。

marginとpadding

前回の講義で少しだけ解説を行いましたが、marginやpaddingはボックスの外側と内側の余白の指定のためのプロパティです。marginは指定要素と周りの間の距離、paddingは指定要素の内側の距離です。

下に画像と一覧表を用意したので見てみましょう。

lesson09_1

margin-top ブロックの外側上部の余白
margin-bottom ブロックの外側下部の余白
margin-left ブロックの外側左部の余白
margin-right ブロックの外側右部の余白
padding-top ブロックの内側上部の余白
padding-bottom ブロックの内側下部の余白
padding-left ブロックの内側左部の余白
padding-right ブロックの内側右部の余白

この通り、marginやpaddingに「-top」や「-bottom」などと付け足すことにより、
どの向きの余白なのかを指定することができます。

今回の場合、<header></header>セクションの内側にある<div class=”container”></div>は、
内側上部の余白を30px、内側下部の余白を20pxとっていることになります。

なお、marginプロパティとpaddingプロパティは使用頻度がかなり高いです。むしろ指定を行わないことの方が珍しいかもしれません。

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

プロパティ・値の説明
プロパティ 指定の効果 値
overflow 親要素に収まり切らない要素の表示方法の指定 visible（初期値）・hidden・scroll・auto

こちらも前回の講義で少しだけ解説しましたが、overflowプロパティは要素の幅からはみ出た要素に対してはみ出た部分の処理を指定するもので、レイアウト上ブロックからはみ出た部分をどう処理してあげるかを決めます。例えばギャラリーなどの画像などが並んでいるレイアウトで重宝します。

以下の画像を見てください。

lesson09_2

同じサイズの画像を等間隔で並べたような状態ですが、この画像は全てサイズがバラバラのものです。実際の画像サイズで表示をしてみると以下の状態になります。

lesson09_3

サイズがバラバラだと見栄えも悪くなりますね・・・。
だからボックスのサイズにきちんと収まるような処理を行って、その上でトリミングをしています。
はみ出した部分（overflow）を隠して（hidden）しているわけです。

ただ、今回のoverflowの使い方は特別で、「はみ出た部分を隠す」のとはちょっと違います。
なぜoverflowを使っているのか・・・その理由は次の<h1></h1>タグのコードで使っているプロパティを問題なく使うため。

左側の<h1></h1>に関するコードを記述

ではロゴ部分のレイアウトを調整しましょう。
先ほど記述したコードの下の行を改行しハイライトされている9〜12行目のコードを記述してください。

main.css

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

header .container {
  padding-top: 30px; /* .containerの内側上部の余白 */
  padding-bottom: 20px;/* .containerの内側下部の余白 */
  overflow: hidden; /* .containerからはみ出した部分の処理 */
}
  
header h1 {
  float: left; /* h1を左寄せ */
  width: 350px; /* 横幅を350pxに指定 */
}

上記ではfloatプロパティが初登場しました。

float: left; = 左寄せ（回り込み）させる

プロパティ・値の説明
プロパティ 指定の効果 値
float 要素を親要素内のの左右どちらかの側に沿うように設置し、
テキストやインライン要素がその周りを回りこめるように定義		 none（初期値）・left・right

floatプロパティは文字通り、テキストやブロックを左や右に寄せるためのもの、正確には、「回り込ませるもの」になります。このプロパティは左や右に横並びのレイアウトを行うときに使います。

doc例えばこれは左の画像に対して「float: left;」を指定して、
このテキストの左側に回り込ませるようにしています。

回り込んでいるものの領域がなくなると、floatの役目も終わって回り込みがなくなりますね。

doc逆にこれが画像に「float: right;」を指定したパターンです。
右側に回り込んでますね。

floatプロパティはとても有効に使える方法なんですが注意も必要です。
回り込むものがないのにfloatをしてしまった場合、親要素の高さが保持できない事態に陥ります。どういう事かというと・・・。

lesson09_4

たとえば<header></header>内の<div class=”container”></div>の中で<h1></h1>を左寄せしたい場合、<h1></h1>に対してfloat: left;を指定します。ただ、それだけを指定してしまうと・・・

lesson09_5

floatを使って左側・右側に回り込みをさせると、<h1></h1>の親要素である<div class=”container”></div>は、高さの指定を行わない限り高さを保てなくなります。

結果<header></header>の下にある<nav></nav>にブロックが食い込んでしまい、最悪の場合、<h1></h1>がブロックを超えて<nav></nav>内に設置したメニューボタンに重なってしまうこともあります。

これを解決するには<h1></h1>のはみ出した部分の回り込みを解除する必要があります。
どう解決するのか・・・ここでさっきの「overflow」プロパティの出番です。
floatを指定した要素の親要素にoverflow: hidden;を指定するとはみ出した部分の回り込みが解除されます。

今回の場合<h1></h1>の親要素（包括している要素）である<div class=”container”></div>にoverflow: hidden;を指定すると回り込みが解除されます。これはものすごく使えるTipsなのでもう一度念押しに。

「floatを指定した親要素（包括要素）にoverflow: hidden;を指定すると回り込みが解除できる。」です。

ちなみに今日の講義でこれが一番重要です。

まとめ

marginとpadding、floatとoverflowの合わせ技を紹介しました。
これらは特に使用頻度が高いプロパティ・技術であるため覚えておくと役に立ちますよ。

右側の<p class=”tel”></p>と<p class=”mail”></p>に関するコードを記述

次に<header></header>で<h1></h1>とは逆に右寄せした電話とメールのお問い合わせをCSS装飾します。さっき使ったプロパティも出てくるので考えながら記述してみてください。

先程記述した<h1></h1>の指定の下を改行し、以下のハイライトされている8〜11行目・13〜16行目・18〜20行目・のコードを記述しましょう。

main.css

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

header h1 {
  float: left; /* h1を左寄せ */
  width: 350px; /* 横幅を350pxに指定 */
}
  
header .contact {
  float: right; /* .contactを右寄せ */
  width: 230px; /* 横幅を230pxに指定 */
}

header .tel,
header .mail {
  text-align: right; /* .telと.mailを右寄せ文字に */
}

header .tel {
  margin-bottom: 10px; /* .telの外側上部に10pxの余白を加える */
}

今回のindex.htmlとmain.cssへの記述は以上です。両方とも上書き保存（Ctrl + S）しておいてください。保存し終えたらindex.htmlをブラウザで開いてみましょう。さ、どうなっているかな？？

今後の講義で学びたいテクニック

さて、今後の講義でウェブサイトで実際に使われているテクニックで、
「これを学びたい」というものは何か？という内容のアンケートを取りたいと思います。

現在皆さんがコーディングを行っているウェブデザインはもうすぐ完成します。
ですので、次のコーディングのためのデザインを決めなければいけません。
せっかくですので少し踏み込んだ技術を取り入れて習得してみましょう。

実際の案件において、
「スマホ対応ってどうやってるの？」や「動画ってどうやって表示しているの？」とか、
「全画面のスライドショーってどうやって表示しているの？」などなど・・・
皆さんが知りたいと思うテクニックを教えてください。

こちらは課題提出の一つとしてカウントします。

提出条件として「今後の講義で学びたいテクニック」はいずれかを必ず選択するように。
この中になければ「その他の場合」と表示されている枠に入力してください。
もちろん、チェックを入れて、さらに入力枠にも記入するのは構いません。

    学籍番号（必須）

    氏名（必須）

    フリガナ (必須)

    メールアドレス（必須）

    今後の講義で学びたいテクニック (必須)


    アンケートの結果がとても楽しみです。

    RELATED POSTS関連記事

    WEBCRE8TOR.COM

    SEARCH

    PAGES

    CATEGORY

    ARCHIVE

    LINK

    CLOSE