WEBの勉強~HTML5/CSS3~
こんにちは!! メグルです!!
今日は、昨日の続きです。
専用サイトのデバイスによる振り分け方。
javasqript
ボタンでスマホサイトはこちら
メディアクエリ
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">header</div>
<div id="main">main</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>
</body>
</html>
@charset "utf-8";
body {
width: 960px;
margin-top: 0px;
margin-left: auto;
margin-right: auto;
}
#header {
background-color: #AAAAAA;
margin-top: 20px;
clear: both;
text-align: center;
height: 50px;
}
#main {
background-color: #AAAAAA;
width: 640px;
margin-top: 20px;
margin-bottom: 20px;
float: left;
text-align: center;
height: 50px;
}
#sidebar {
background-color: #AAAAAA;
float: right;
width: 300px;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
height: 50px;
}
#footer {
background-color: #aaa;
margin-top: 20px;
margin-right: 0px;
margin-left: 0px;
text-align: center;
height: 50px;
clear: both;
}
・Fluid Grid 流体
・Flexible Image
・Media Queries
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="header">header</div>
<div id="main">main</div>
<div id="sidebar">sidebar</div>
<div id="footer">footer</div>
</body>
</html>
@charset "utf-8";
body {
padding: 1em;
color: #fff;
}
#header, #main, #sidebar, #footer {
padding: 1em 0;
background-color: #AAAAAA;
text-align: center;
}
#header, #footer {
}
#header, #main, #sidebar {
margin-bottom: 1em;
}
#header {
margin-bottom: 1em;
padding: 1em 0;
text-align: center;
}
#main {
width: 66.67%;
float: left;
}
#sidebar {
float: right;
width: 31.25%;
}
#footer {
clear: both;
}
960pxを100%として、
640pxは、640を960で割る。
66.66666になる。
300pxは31,25と割り切れる。
このように絶対値で指定するのではなく、デバイスによって、pxは違うけど、%で表せば同じになる。
・Fluid Gridは相対値で表すということ。
1emとは、親要素の文字の幅。
文字は大きさを指定していないと、16pxです。
img {
max-width: 100%;
}
eri
画像も%で指定する。
これが、フレキシブルイメージです。
それから、このサイトの幅は、見てるデバイスの幅にします!!ということをheadに書かなければいけない。
<meta name="viewport" content="width=device-width">
このサイトの幅は、見てるデバイスの幅に合わせます!!ということ!!
これだけだと不安なので、したのを付け足す。
<meta name="viewport" content="width=device-width, initiai-scale=1.0">
これはただ、小さくすのではなくて、○○pxになったらレイアウトを○○のように変更できますよ!というやり方。
firefoxの設定→開発ツールから、レスポンシブデザインビュー。
次に、media queries
iphone6の750pxを境に変える。少し余裕を持たせて770px
<link href="style_s.css" rel="stylesheet" type="text/css" media="screen and (max-width: 770px)">
上が、スマホ用のスタイル
下が、パソコン用のスタイル
<link href="style_l.css" rel="stylesheet" type="text/css" media="screen and (min-width: 771px)">
そして、もう一つ振り分ける方法があります。
一つのスタイルシートで書く方法です。
@media screen and (min-width:771px){
#main {
width: 66.67%;
float: left;
}
#sidebar {
float: right;
width: 31.25%;
}
}
771px以上の時に表示させたい時は、
@media screen and (min-width:771px){
}
で囲う。
770と771の切り替える部分のをブレイクポイントというらしいです。
このブレイクポイントは流行で年々変化してて行くものである。
明日は、Sassをやるんですが、
・Ruby
・Koala
Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.
をインストールしておく必要がある。
自分で何かを調べておきましょう。
Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語
- 作者: 平澤隆,森田壮
- 出版社/メーカー: インプレスジャパン
- 発売日: 2013/09/13
- メディア: 単行本(ソフトカバー)
- この商品を含むブログ (1件) を見る