webの勉強!!初心者!脱出マニュアル!!

webの勉強を、初心者から脱出するためのメモを残していきます

WEBの勉強~HTML5/CSS3~

こんにちは!!  メグルです!!

 

今日は、昨日の続きです。

 

This is the web. | Brad Frost

 

専用サイトのデバイスによる振り分け方。

php

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;
}

 

 

f:id:meglez1:20150129105812p:plain

 

960pxを100%として、

640pxは、640を960で割る。

66.66666になる。

300pxは31,25と割り切れる。

 

このように絶対値で指定するのではなく、デバイスによって、pxは違うけど、%で表せば同じになる。

 

・Fluid Gridは相対値で表すということ。

1emとは、親要素の文字の幅。

 

文字は大きさを指定していないと、16pxです。

 

 

img {
max-width: 100%;
}

 

f:id:meglez1:20150129111125p:plain

f:id:meglez1:20150129111137p:plaineri

画像も%で指定する。

これが、フレキシブルイメージです。

それから、このサイトの幅は、見てるデバイスの幅にします!!ということをheadに書かなければいけない。

 

<meta name="viewport" content="width=device-width">

このサイトの幅は、見てるデバイスの幅に合わせます!!ということ!!

これだけだと不安なので、したのを付け足す。

<meta name="viewport" content="width=device-width, initiai-scale=1.0">

 

これはただ、小さくすのではなくて、○○pxになったらレイアウトを○○のように変更できますよ!というやり方。

firefoxの設定→開発ツールから、レスポンシブデザインビュー。

 

次に、media queries

 

f:id:meglez1:20150129113012p:plain

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

オブジェクト指向スクリプト言語 Ruby

Ruby - Wikipedia

 

RubyInstaller for Windows

 

・Koala


Koala - a gui application for LESS, Sass, Compass and CoffeeScript compilation.

をインストールしておく必要がある。

 

自分で何かを調べておきましょう。

 

 

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語

Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語