ウェブデザイン演習 第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の記述ルールも解説しましたね。

今回は<header></header>と<nav></nav>の内側にある要素に対し、
コーディングを行っていこうと思います。

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

画像アセットで<nav></nav>の画像を書き出す

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

Photoshopの基本設定

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

初期設定が終わったらPSDファイルをダブルクリックしてPhotoshopで開いてみましょう。

レイヤーパネルを開く

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

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

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

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

今回は<nav></nav>のナビゲーション画像を書き出します。

前回と同じようにレイヤー・フォルダの名前を書き換えるんですが、
その前にレイヤー・フォルダの移動を行います。

  • 「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

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

コーディングの準備

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

手順は以下。

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

以上です。

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

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>

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

<header></header>セクションのHTML・CSSコーディング

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

まず、<header></header>の中に記述している<div class=”container”></div>の中に、以下のハイライトされているコードの記述を行いましょう。

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>

上のコードでは、ブラウザ幅の<header></header>の内側に、
コンテンツ幅の<div class=”container”></div>を入れています。

<div class=”container”></div>はコンテンツの中央寄せのために設置したブロックで、
width(横幅)を1000pxに設定しており、このサイズがコンテンツ幅になっています。

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

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

さて次にmain.cssへの記述です。
前々回行ったmain.cssの記述が問題なく終わっていれば、
main.cssの最後は<div class=”container”></div>への指定で終わっているはずです。

main.cssをDreamweaverで開いていれば、main.cssというタブに切り替え、
<div class=”container”></div>の指定の下を改行し、
ハイライトされているコードを記述してください。

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

こちらも前回の講義で少しだけ解説しましたが、
overflowプロパティは要素の幅からはみ出た要素に対してはみ出た部分の処理を指定するものです。

overflowプロパティはレイアウト上、ブロックからはみ出た部分をどう処理してあげるかを決めます。例えばギャラリーなどの画像などが並んでいるレイアウトで重宝します。

たとえば、以下の画像を見てください。

lesson09_2

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

lesson09_3

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

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

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

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

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プロパティは文字通り左や右に寄せるためのもの。

正確には「回り込ませるもの」になります。
左や右に横並びのレイアウトを行うときにこのプロパティを使います。

doc

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

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

doc

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

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

lesson09_4

たとえばheader内の.containerにh1を左寄せしたい。
こういった場合何も指定しなければ・・・

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;を指定すると回り込みを解除してくれるんです。

繰り返します。

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

これはものすごく使えるTipsなので是非覚えておいてください。
ちなみに今日の講義でこれが一番重要です。

width

前回の講義で簡単に解説しましたが、widthプロパティ要素の横幅を指定するものです。
main.cssでは、<h1></h1>に対して「width: 350px;」と指定していますが、300pxに指定すれば300pxに、400pxに指定すれば400pxになります。

まとめ

marginpaddingoverflowfloatの合わせ技、widthを紹介しました。
これらはコーディングを行う全箇所で使います

思いっきり重要なので覚えておくと役に立つかも?

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

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

記述した<h1></h1>の指定の下を改行し、以下のハイライトされているコードを記述しましょう。

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の余白を加える */
}
カンマ( , )を使って複数指定

header .telとheader .mailの間にカンマ(,)を打っているのは全く同じプロパティを適用する時の省略した書き方です。
このようにカンマを使えば複数指定をすることができ、何度も同じ記述をしなくていいというメリットがあります。

文字の右寄せ、左寄せなどのプロパティ「text-align」

text-alignは文字の向きです。
左向きならleft右向きならright中央揃えならcenterになります。

フォントの指定「font」

fontは文字サイズや行の高さ、そしてフォントを指定するプロパティです。
なおここでは「font」のみになっていますが、実はいくつかのプロパティが合体になったものです。

CSS

p {
/* 合体して指定 */
  font: normal 14px/24px 'Hiragino Kaku Gothic ProN', Meiryo , sans-serif;

/* それぞれ別に指定 */
  font-weight: normal; /* フォントの太さ */
  font-size: 14px; /* フォントの大きさ */
  line-height: 24px; /* 行の高さ */
  font-family:'Hiragino Kaku Gothic ProN', Meiryo , sans-serif; /* フォントの種類 */
}
  • font-weight:フォントの太さ(値:normal・bold・lighterなど)
  • font-size:フォントの大きさ(値:◯◯px・◯◯em・◯◯%など)
  • line-height:行の高さ(値:◯◯px・◯◯em・◯◯%など)
  • font-family:フォントの種類(カンマで区切ることで複数指定が可能)

font-familyプロパティはそれ自体に細かく指定できますが、基本的には上の「’Hiragino Kaku Gothic ProN’ , Meiryo , sans-serif」でWindowsもMacも対応していると思います。

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

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

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

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

提出期限は、今回の講義終了後から本日の23:59まで。
それの間に提出されたものは課題提出の一つとしてカウントします。

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

学籍番号(必須)
氏名(必須)
フリガナ (必須)
メールアドレス
今後の講義で学びたいテクニック (必須)

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

WEBCRE8TOR.COM

SEARCH

PAGES

CATEGORY

ARCHIVE

LINK

CLOSE