LogoMark.png

Webデザイン演習/2021/0518

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

Webデザイン演習/20212020.05.18

AGENDA


CONTENTS




はじめに

CSSの学習について

GitHub、学科サイトで公開する情報について

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


2.2. style.css


2.3. 動作確認

以下のように見えるはずです。
SampleSite

3. 演習

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/
~




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 をご覧下さい。




次週は、初期サンプルを変形して、様々なレイアウトを実現する演習を行います。





APPENDIX

成果の確認

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

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




PAGES

GUIDE

DATA


*1 以前はHTML要素自体にブロックレベル要素とインライン要素の区別がありましたが、HTML5では、この発想はなくなり、「デフォルトスタイルとしてのブロックとインラインがある」という考え方に変わりました。
Last-modified: 2021-05-18 (火) 13:20:35