実技 WEBデザイン実習④

By 実技 WEBデザイン実習

-本日のアジェンダ-

1限目
実技 WEBデザイン実習④
marginの相殺について

2限目
実技 WEBデザイン実習④
ファイルパネルについて

3限目
実技 WEBデザイン実習④
課題制作

4限目
実技 WEBデザイン実習④
課題制作

5限目
実技 WEBデザイン実習④
課題制作

本日のテーマ

DreamweaverでCSSを記述しましょう

marginの相殺

ある条件下でmarginが効かない事があります。

  • ケース1: 親と最初の子の上マージン
  • ケース2: 親と最後の子の下マージン
  • ケース3: 兄弟要素の下と上のマージン
  • ケース4: 空の要素

【回避方法】
①margin-topを使わない（縦方向はmargin-bottomのみを使う）
②paddingを使う

上下中央に配置

コンテンツを上下中央に配置するのは、左右中央よりとっても難しいです。
しかし、flexboxを使う事により、楽に指定ができます。

親要素に①display:flex;②align-items: center;を指定　→ 子要素が横並びになり、その上下が中央で揃う

viewportの記述

「viewport」とは、「表示領域」のことです。スマホでサイトを見ると、980pxに収まるように縮小されて表示されます。文字が小さく表示され読みにくいです。
下記のmetaソースを入れることによって、各デバイスの画面幅でサイトを表示できるようになります。

▼HTMLのhead内

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

viewportのあり・なしの違い

PC以外のデバイスで見てみてください。

なし（縮小されて全体が表示されます。）
http://deau0100.html.xdomain.jp/test-viewport/normal.html

あり（等倍で表示されます。）
http://deau0100.html.xdomain.jp/test-viewport/viewport.html

レスポンシブWebデザイン

PC、タブレット、スマートフォンなど、各画面幅に柔軟に対応して、どの画面サイズでも見やすいように表示することです。

可能な限り幅を%かvwで指定しましょう。

％・・・親要素を基準とした相対
vw・・・viewport width。画面幅を基準とした相対
pxではなく、相対単位にする事により、どんな画面幅にも対応できるようになります。

サイト幅をwidthからmax-widthに変更しましょう。

max-width:960px;は「最大値960px」の意味で、画面をどんなに大きくしても961px以上にはなりません。

demoの変更点

width:960px; → max-width:960px;
700px → 70%
220px  → 25%

ブレイクポイント

レスポンシブWebデザインでは、画面サイズのある地点を境目にデザインを切り替えます。その地点をブレイクポイントと呼びます。

サイトの作りによってブレイクポイントを決めましょう。ただし、ブラウザ間で誤差があるので余裕を持って大きい数値にしましょう。また、8の倍数にするのがおすすめです。（800px,560px,480pxなど）

メディアクエリ

ある画面幅の範囲で、通常とは異なるcssのスタイルを適用させる手法です。

【記述方法①】link要素として指定する場合
cssファイルを複数用意し、ある画面幅の時は異なるcssファイルを効かせる事ができます。

下記の例は画面幅が480px以下の時、style-sp.cssが適用されます。

▼HTML headの中

<link rel="stylesheet" href="style-sp.css" media="screen and (max-width:480px)">

【記述方法②】スタイルシートに指定する場合

１つのcssファイルに直接記述することもできます。

下記の例は画面幅1280px以下の時、bodyに別のスタイルが適用されます。

body{
	background:#ccc;
}
@media only screen and (max-width: 1280px){
	body {
		background:#999;
	}
}

レスポンシブWebデザイン見本

@media only screen and (max-width: 800px) {
    #content-wrap {
        flex-direction: column;
    }
}
@media only screen and (max-width: 800px) {
    #content-wrap main {
        width: 100%;
        margin-bottom: 30px;
    }
}
@media only screen and (max-width: 800px) {
    #content-wrap aside {
        width: 100%;
    }
}
@media only screen and (max-width: 800px) {
    #header-wrap header {
        flex-direction: column;
    }
}


@media only screen and (max-width: 800px) {
	#header-wrap header ul {
		flex-wrap: wrap;
	}
	
}


@media only screen and (max-width: 800px) {
	#header-wrap header ul li {
		width: 31.333%;
		margin-left: 0;
		background:red;
		text-align: center;
		margin: 1%;
		border-radius: 5px;
	}
}
@media only screen and (max-width: 800px) {
    #content-wrap main {
        width: 90%;
		margin: 0 auto;
        margin-bottom: 30px;
		padding: 5%;
    }
}


@media only screen and (max-width: 800px) {
    #content-wrap aside {
         width: 90%;
		margin: 0 auto;
		padding: 5%;
    }
}