レスポンシブ 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
転載ここまで
コメントを残す