LogoMark.png

Webデザイン基礎B/2020/1026

第7回 CSS入門 その2

Webデザイン基礎B/2020|造形短期大学部|2020.10.26遠隔
情報共有シート特設サイト

AGENDA


以下、LIVE動画をご覧下さい。記事に沿って解説しています。





本日のメニュー


はじめに

html_css.png

今回は、CSSによるページのレイアウトについて学びます。CSSによるレイアウト作業は、大きな箱の中に小さな箱を詰めていく作業と考えるとイメージしやすいでしょう。一般的には、container という外箱の中に、header 、navといった名前の内箱を順に詰め込んでいくことになります。

箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示されないので、ソースコードを書く際は、きちんとインデントをとってわかりやすく書くことをお勧めします。



1. CSSによるページレイアウト

boxModel.png

1.1. ボックスモデルを理解する

箱組みをする際には、どこにどのような余白をつくるかが非常に重要です。以下のプロパティーについての理解が必要です。


1.2. ユニバーサルセレクタによる余白のリセット

ブラウザにはデフォルトCSSというものがあって、特に指定のない要素には自動的に margin, padding また line-height が適用されます。これは、デザイナーが精密な位置調整を行う場合に邪魔になるので、すべての要素に対して「余白のリセット」を行った上で、後に各々に余白の定義をするのが一般的です。
 ユニバーサルセレクタ( * )を使うと、すべての要素に一斉制御が可能になります。CSSの先頭で、以下のような記述をするとよいでしょう。

* {
    margin: 0;
    padding: 0;
}

この例では、すべての要素に対して余白をゼロにリセットしています。

SampleSite では、以前の授業で、この部分をコメントアウトしているので、この段階で復活させましょう。

1.3. レイアウトに必須の手法

とりあえず、以下の2つの手法で大半のレイアウトは可能になります。


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

サンプルでは、メニュー部分と、main の中を左右に分ける部分で、すでにこれが適用されています。確認するだけでOKです。

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

詳しくは、CSS/Flexboxをご覧下さい。


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

サンプルでは、H1 のページタイトル部分に、すでにこれが適用されています。その他で使うとすれば、ロゴを配置する場合などです。

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

2. 演習|レイアウトの変更

みなさんのお手元にあるSampleSite の中の style.css をエディタで開いて、ページのレイアウトの変更をお試しください。

SampleSite は、あくまでも練習用のものです。ここでは、動作を体験することが目的なので、細部にこだわった作りこみは不要です。

2.1. Flexbox の機能の確認

2.2. Position の機能の確認




付記:画像・動画が縮まらない問題

前回の演習で、article の中に、img や iframe で画像・動画を配置していました。その際、img の一般的な書き方として、タグの属性として、 width(幅)を直接指定していましたが、この方法で、画像を表示すると、ウィンドウ幅を縮めた際に、画像が「突っ張り棒」の状態になって、画像のあるブロックの幅が縮まらず、結果として、コンテナの外にはみ出すという問題が生じます。

これを解消するには、画像や動画の幅を、親要素に対してフレキシブルに拡大縮小するように、CSSで調整する必要があります。

画像の幅をフレキシブルに

img タグの width の記述を削除するとともに CSSで幅を制御します。

YouTube動画の埋め込み

この問題は、多くの人を悩ませているようで、Webで検索すると様々な方法が解説されていますが、一般に以下のようにするとうまくいくようです。

以上、以下に全体を反映したサンプルを掲載しています。

3. 本日の成果をGitHub にアップロード


第7回目は、以上をもって終了とします。お疲れ様でした。
第8回は、レスポンシブデザインについて学びます。





PAGES

GUIDE

DATA

Last-modified: 2020-10-26 (月) 11:56:29