LogoMark.png

Webデザイン実習/2020/0602-0609

第5・6回 CSSによるレイアウト

Webデザイン実習/20202020.06.02 - 2020.06.09


6月9日は、前回の続きです。レイアウトを様々に変更する演習、HTMLとCSSの関係をしっかり理解しつつ、サンプルを完成させて下さい。

どうしてもうまくいかない場合は、以下、「ソースまるごとサンプル」をダウンロードして、中身を参考にして下さい。
fileLayoutVariations.zip




第5・6回目の展開と要件

第5・6回の完成イメージ

以下、JohnSmith さん(架空の受講生)の5・6回目の授業終了イメージです。ダミーデータのため、リンクは無効になっていますが、みなさんの完成ページでは、それぞれのリンク先で、HTMLのサンプルが確認できるようになっている必要があります。



以下、目次を見て演習の全体像を把握してから、順に説明を読み進めて下さい。



第5・6回 目次


1. CSSによるレイアウト

CSSによるレイアウト作業は、大きな箱の中に小さな箱を詰めていく作業 と考えるとイメージしやすいでしょう。例えば、container という「大きな箱」の中に、header や nav、#contents といった名前の「箱」を入れて、さらにその中に li や p といった「小さな箱」を詰め込んでいくことになります。

html_css.png

HTMLの要素タグ、すなわち個々の「箱」は、「入れ子」状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示されないので、ソースコードを書く際は、きちんとインデント(字下げ)を行なってわかりやすく書くことが必要です。


HTML5 Semantic

Webサイトのレイアウトには定番のスタイルがあって、似たものをまとめると数種類しかありません。はじめに、以下のイメージをご確認ください。
GoogleImage:HTML5 Semantic

テンプレートから個別ページへ

html_css_2.png

ワイヤーフレームが描けたら、それをもとに、index.html と style.css をページのテンプレート(ひな形)として作成します。実際のWebデザインでは、ここまでの作業に多くの時間をかけます。

gallery.html や links.html など、新しいページは、index.htmlを複製して、主たる記事の部分の部分だけを書き換える・・という単純な作業となります。




2. レイアウトサンプル

細かい理屈はあとまわしにして、とりあえず、CSSによるレイアウトを体験するための、最初のサンプルを紹介します。

2.1. index.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
  <title>Sample Site</title>
</head>
<body>
  <div id="container">
    <header>
      <h1>Sample Page</h1>
    </header>
    <nav>
      <ul>
        <li><a href="#">home</a></li>
        <li><a href="#">about</a></li>
        <li><a href="#">gallery</a></li>
        <li><a href="#">links</a></li>
      </ul>
    </nav>
    <main>
      <section>
        <article>
          article 01
        </article>
        <article>
          article 02
        </article>
      </section>
      <aside>
        aside
      </aside>
    </main>
    <footer>
      &copy; http://www.example.com
    </footer>
  </div>
</body>
</html>


2.2. style.css

* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

#container{
  width: 84%;
  max-width: 1280px;
  margin: 0 auto;
}

header {
   position:relative;
   height: 8rem;
   background: #333;
   box-shadow: 0 4px 0.3125rem rgba(0,0,0,.3);
 }

  header h1{
    position: absolute;
    top: 3rem;
    left: 3rem;
    font-size: 2rem;
    color: white;
 }

nav {
  padding: 1rem 3rem ;
  background: #333;
}
  nav ul{
    display: flex;
    flex-direction: row;
  }
  nav ul li{
    margin-right: 2rem;
  }
  nav ul li a {
    color: white;
  }

main{
  display: flex;
  flex-wrap:wrap;
  justify-content:space-between;
}
 
  section{
    flex: 3;
    padding: 3rem;
    background: #EEE;
  }

    article{
      min-height: 8rem;
      padding: 1rem;
      margin-bottom: 2rem;
      background: #FFF;
    }

  aside{
    flex: 1;
    padding: 3rem;
    background: #DDD;
  }

footer {
  padding: 2rem 3rem;
  text-align: center;
  background: #333;
  color: white;
}




3. 演習1

2. で準備したサンプルに最小限の修正を加えたものを、GitHubにリポジトリ css_sample_05 としてアップしてみましょう。

3.1. 必要最小限の変更を行う

HTML、CSS ともに、上記のサンプルを修正して(HTMLの基本構造は変えないことをお勧めします)、あなたのオリジナルサンプルにして下さい。

付記:ダミーテキストの利用について
イメージ確認用のダミーテキストには意味があってはいけません。以下のようなダミーテキスト生成ツールがありますので、利用して下さい。

3.2. GitHubPages に公開

3.3. 学科サイトにリンクを記載

いつものように、学科サイトの WebSample のページの CSSの見出しの下に、以下のような形でリンク公開して下さい。

**CSS
 :
-Layout Sample 1:https : //JohnSmith.github.io/css_sample_05/
~





はい、お疲れ様でした。ここで、一旦休憩して下さい。
この先、しばらく説明が続きます。第6節までは読むだけです。
意味不明な部分は読み飛ばして、第7節の演習の際に再確認して下さい。





4. セクションタグ

CSSによるレイアウトでは、HTML文書の骨格構造をしっかりと整理することが必要です。以下、文書構造に関わるセクションタグを紹介します。

div(division)

ページのレイアウトブロックにあたるもの、すなわちバックグラウンドの定義、幅の定義、左右にフロートしたりと、見た目をコントロールするための要素はすべてこれを使います。例えば、#wrapper #container、また、マージンやパディングを設定するためのブロックもdivを用います。

header

ページまたはセクションのヘッダ領域を定義。
ページタイトル、サブタイトル、ロゴなどを書くエリアです。

footer

ページまたはセクションのフッタ領域を定義。
コピーライト、関連リンク、サイト名などを書くエリアです。

nav(navigation)

ナビゲーションリンクの定義。サイト内リンクをグループ化します。
一般に以下のような書き方になります。

<nav>
    <ul>
        <li><a href="#">項目1</a></li>
        <li><a href="#">項目2</a></li>
        <li><a href="#">項目3</a></li>
    </ul>
</nav>


main

ドキュメントやアプリケーションのbody 要素(body)の主な内容を表します。ページ内のメインのコンテンツとなるセクションへ使用するもので、1ページ内に1つのみ使用が原則。また、article, aside, footer, header, nav要素の中に入れてはいけません。

article

独立した記事・コンテンツとして成立しうる内容をくくる要素です。ニュース記事やブログの投稿など、再利用・再配布可能なコンテンツを入れます。

記事のタイトルとして<h1>要素を含めることが推奨されています。

例えばWordPressの標準的なテーマでは、articleはひとつの投稿記事をくくるものとして使われていて、その内部にheaderやfooterも含まれています。

section

章や節や項のように、見出しとそれに関する内容を階層構造(アウトライン)的に持つ場合に、それらを定義するものです。

各セクションには<h1>要素を見出しとして含めることが推奨されています。


aside

サイドバーに置くものなど、メインコンテンツ外のセクションの定義。補足情報や広告などはこれでくくります。

補足:articleとsection

articleやsectionは、どちらが上位でどちらが下位・・というものではなく、ページの内容によって使い分けるもの・・例えばブログの投稿記事のようなものであればarticleでくくってひとつづつバラで扱えるようにする。また例えば論文のようなものなら章・節・項をsectionで階層化する・・・。という感じの理解でいいのではないかと思います。

5. レイアウトに関わるキーワード

5.1. ブロック要素とインライン要素

ページレイアウトの際には、ブロックとインラインというスタイルの違いを意識することが必要です*1。ここで言う「箱組み」に関わるのはブロックスタイルで、要素にブロックスタイルを定義して、幅や高さ、余白などを設定することで、思い通りのレイアウトが可能になります。

参考:ブロックとインライン

5.2. 余白と境界

箱詰め作業の際には、箱の大きさの把握が重要で、特に margin と padding という2種類の余白の意味の違いを正しく把握する必要があります。正確なレイアウトを行うために、以下のプロパティーを正しく理解して下さい

補足
余白を全角スペースや、<br>でつくるのはやめましょう。スペーシングに関することは、すべてCSSで実現するのが理想です。
また、日本語の環境では、全角スペースが要素と要素の隙間(終了タグと開始タグの間)に入ることで、レイアウトの邪魔をするというトラブルがよく発生します。ページ内に予期せぬ余白がある場合は、htmlのソースコード内に不要な全角スペースがないか確認して下さい。ソースコードのインデント(字下げ)には、TABや半角スペースで行って下さい。

5.3. ボックスモデル

boxModel.png

箱のサイズに関わるプロパティーがどのような関係になるか定義したものをボックスモデルといいます(右図)。
このモデルは box-sizing プロパティー(content-box と border-box)の設定によって変わるので注意が必要です。
詳細については、CSS/BoxModel をご覧下さい。



6. レイアウトの手法

6.1. 代表的な4つの手法

最初に代表的な4つの手法(CSSプロパティー)を概説します。実際には、Flexbox と Position だけで十分ですが、一応全体をざっくりお読み下さい。

6.2. Flexboxを用いたレイアウト

親要素(Flexコンテナ) に display: flex; を設定することで、子要素(Flexアイテム) の並び(縦・横)や順序(上下・左右)を制御する方法です。例えば、親要素に対して、display: flex; flex-direction: row; と書くと、子要素は横に並びます。
以下、メニューを横に並べる事例です。

BoxLayout.png

Flexboxの利用を前提に、ボックスの組み方を工夫すると、レイアウトの変更が簡単にできるようになります。右図のように、フレキシブルに組み方を変化させたい要素を、div で囲むとよいでしょう。
 
詳細については、CSS/Flexbox をご覧下さい。


6.3. positionを用いたレイアウト

通常の「箱詰め作業」では、要素同士が重なるような配置はできません。しかし、「絶対的にこの場所に表示したい」というケースもあります。そのような場合に使えるのが、positionというプロパティーです。これを使うと、任意のブロックを基準にして、その左上を原点とした座標で、配置したいブロックの位置を指定することができます。

詳細については、CSS/Position をご覧下さい。




以下、最初のサンプルを変形して、様々なレイアウトを実現する演習です。
ここからの演習には時間がかかることが予想されます。「最小限のCSSで綺麗なレイアウトにまとめる」のは結構大変です。2週間に渡って取り組む課題とお考えください。





7. 演習2,3,4

7.1. 演習の準備

この先の演習の方針について説明します。

付記:思い通りのレイアウトを実現するには・・


7.2. 演習2

header の中に nav があるパターン

#container { header { nav } , main { section, aside } , footer }


sample06.jpg

7.3. 演習3

main の中に 3つのブロックがあるパターン(3カラム)

#container { header, main { nav, section, aside } , footer }


sample07.jpg


7.4. 演習4

header, footer が画面幅100%になるパターン

header { nav } , main { section, aside } , footer


sample08.jpg

8. 追加の演習

時間に余裕のある方は、異なる構造のサンプル作りに挑戦して下さい。

新規に作成するフォルダ=リポジトリ の名称は、css_sample_XX の XX の部分の数字を上げていくとよいでしょう。

参考:シングルページ

9. 成果の確認

学科サイトの氏名/WebSample のページに以下ようになるはずです。

**CSS
 :
-Layout Sample 1:https : //JohnSmith.github.io/css_sample_05/
-Layout Sample 2 :https : //JohnSmith.github.io/css_sample_06/
-Layout Sample 3:https : //JohnSmith.github.io/css_sample_07/
-Layout Sample 4 :https : //JohnSmith.github.io/css_sample_08/
 :
-Layout Sample X :https : //JohnSmith.github.io/css_sample_XX/
~




以上で、第5・6回の授業は終了です。お疲れさまでした。

第7回 について

第7回(6/16)は レスポンシブデザイン を体験します。



PAGES

GUIDE

DATA


*1 以前はHTML要素自体にブロックレベル要素とインライン要素の区別がありましたが、HTML5では、この発想はなくなり、「デフォルトスタイルとしてのブロックとインラインがある」という考え方に変わりました。
添付ファイル: filesample06.jpg 63件 [詳細] filesample07.jpg 49件 [詳細] filesample08.jpg 48件 [詳細]
Last-modified: 2020-06-09 (火) 12:57:10