カテゴリー
未分類

レスポンシブ ブレイクポイント設定とFlexboxでカラム変化

レスポンシブ web デザインをするにあたって、避けても通れるブレイクポイント。でも、ユーザーフレンドリーなサイトデザインにしようと思ったら やるに越したことはない♪ただ、こうデバイスサイズが色々あっては何かに合わせて決めることは、ほぼ不可能。だから、自分の見やすさ優先で決めますブレイクポイント!!まずは、デモ動画

そして動画前半の「メルマガ」は、まぐまぐ!に発行申請用サンプルとして提出したもの。以下転載。

weblog~ノンジャンルで進行形

↓登録・解除↓
http://www.mag2.com/m/0001652559.html

レスポンシブな web デザイン ☆彡

前回は、フレックスボックスで
グリグリ動くページに♪

だけど

このままだとカラム変化は
コンテンツ次第

↓ こう見せたい ↓

スマホは、1カラム
タブレットは、2カラム
PC は、2カラムのセンタリング

↑ こう見せたい ↑

デザイン方法は、色々ある
今回は、ブレイクポイント設定で!

html は、こんな感じ
メルマガ用サンプルなんで、色々省略

<html>
<style>
#flexbox{
display: flex;
flex-flow: row wrap;
}
#header,#contents,#navi,#footer{
width:100%;}

@media(min-width:500px){
#contents{width:60%;}
#navi{width:40%;}
}
@media(min-width:700px){
#flexbox{
width:700px;
margin: 0 auto;
}
}
</style>
<div id="flexbox">
<div id="header">Header</div>
<div id="contents">This is flexbox.</div>
<div id="navi">navi navi</div>
<div id="footer">Footer</div>
</div>
</html>

↓スタイルシートの説明開始↓

ここでは
スマホ<タブレット<PC で大別

ブレイクポイント(<)は
500px,700px と定義

モバイルファーストの原則から
まずは、スマホのスタイルをデザイン

スマホは、500px 未満
各要素を横幅いっぱいに

タブレットは、500px 以上
contents を横幅 60%
navi を横幅 40%

PC は、700px 以上
flexbox の横幅を 700px で固定
左右にマージンをオートで入れセンタリング

で、
共通項目を始めに書き出す

#flexbox{
display: flex;
flex-flow: row wrap;
}

div#flexbox の
表示方法(display)は flex
グリグリ動かすよ♪

並び順(flex-flow)は
横(row)で折り返す(wrap)

#header,#contents,#navi,#footer{
width:100%;}

div#flexbox の全入れ子は
とりあえず横幅(width) 100%

@media(min-width:500px){
#contents{width:60%;}
#navi{width:40%;}
}

横幅の最小値(min-width)500px で
メディアクエリ

つまり 500px 以上で
下記スタイルに上書きされるってこと

#contents 横幅(width) 60%
#navi 横幅(width) 40%

@media(min-width:700px){
#flexbox{
width:700px;
margin: 0 auto;
}
}

横幅の最小値(min-width)700px で
メディアクエリ 基本スタイルを↓上書き↓

div#flexbox
横幅(width)700px 固定
マージン(margin)
上下 0 左右オート(auto)

:::::::::::::::::::

とまぁ、こんな感じ

でも
テキストだけだと分かりづらい。。

なので

上記 html をメモ帳にコピペ
ファイル名を test.html 等で保存

ダブルクリック → ブラウザ表示

ブラウザの横幅をグリグリ動かして
遊んでみてね♪

:::::::::::::::::::

編集後記

「グリグリ」といえば

その昔
「グディグディ♪グディグディ♪」

って、
洋楽が流行ってた

ワカル!

そんなあなたは、同世代(笑)

発行責任者:webloger
問い合わせ:このメルマガに返信でok!

↓登録・解除↓
http://www.mag2.com/m/0001652559.html

転載ここまで

参考ページ:Mostly fluid-Web Fundamentals

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください