フラットデザイン ⇔ リッチデザイン
フラットデザインが今流行っている理由
データが軽くなる。
見やすい。
フラットデザインの色の傾向
色の彩度が抑え目。（グレーに近い。）⇒ 目に優しい。
最近は、分からないぐらいのドロップシャドウなどを付けて奥行き（立体感）を少し加味する傾向がある。
レスポンシブWebデザイン
モバイルファースト ⇒ スマートフォンサイズを初めに作り、それを基にPCサイトなどを作っていく。
レスポンシブデザインを実現させるには
Fulid Grid（流体グリッド）
Flexible Images（伸縮画像）
Media Queries（メディアクエリ）※クエリは『お問い合わせ』といった意味。
Fulid Gridの例
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width"><!--見てる機械の幅に指定。指定しないとブラウザの幅。スマホ画面の幅とブラウザの幅が違う。-->
</head>
<body>
<div id="header">header</div>
<div id="content">content</div>
<div id="side">sidebar</div>
<div id="footer">footer</div>
</body>
</html>
style.css
body {
padding: 1em;
}
#header, #content, #side, #footer {
padding: 1em 0;
background: #ccc;
text-align: center;
margin-bottom: 1em;
}
#content {
float: left;
width: 67%;
}
#side {
float: right;
width: 31%;
}
#footer {
clear:both;
}
Flexible imagesの例
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ</title>
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width"><!--見てる機械の幅に指定。指定しないとブラウザの幅。スマホ画面の幅とブラウザの幅が違う。-->
</head>
<body>
<div id="header">header</div>
<div id="content">
<img src="img/sora.jpg"><br>content</div>
<div id="side">sidebar</div>
<div id="footer">footer</div>
</body>
</html>
style.css
body {
padding: 1em;
}
#header, #content, #side, #footer {
padding: 1em 0;
background: #ccc;
text-align: center;
margin-bottom: 1em;
}
#content {
}
#side {
}
#footer {
clear: both;
}
/*画像を縦横の比率を保ったまま伸び縮み。*/
img {
max-width: 100%;
height: auto; /* htmlでwidthとheightを指定してる場合に記述。heightを指定してない場合は書く必要ない。*/
Media Queriesの例
index.html
<!doctype html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レスポンシブ</title>
<link rel="stylesheet" href="css/style-sp.css" media="screen and (max-width: 760px)">
<link rel="stylesheet" href="css/style-pc.css" media="screen and (min-width: 761px)">
<meta name="viewport" content="width=device-width"><!--見てる機械の幅に指定。指定しないとブラウザの幅。スマホ画面の幅とブラウザの幅が違う。-->
</head>
<body>
<div id="header">header</div>
<div id="content">
<img src="img/sora.jpg"><br>content</div>
<div id="side">sidebar</div>
<div id="footer">footer</div>
</body>
</html>
style-sp.css
body {
padding: 1em;
}
#header, #content, #side, #footer {
padding: 1em 0;
background: #ccc;
text-align: center;
margin-bottom: 1em;
}
#content {
}
#side {
}
#footer {
clear: both;
}
/*画像を縦横の比率を保ったまま伸び縮み。*/
img {
max-width: 100%;
height: auto; /* htmlでwidthとheightを指定してる場合に記述。heightを指定してない場合は書く必要ない。*/
}
style-pc.css
body {
padding: 1em;
}
#header, #content, #side, #footer {
padding: 1em 0;
background: #ccc;
text-align: center;
margin-bottom: 1em;
}
#content {
float: left;
width: 67%;
}
#side {
float: right;
width: 31%;
}
#footer {
clear: both;
}
/*画像を縦横の比率を保ったまま伸び縮み。*/
img {
max-width: 100%;
height: auto; /* htmlでwidthとheightを指定してる場合に記述。heightを指定してない場合は書く必要ない。*/
}
画面サイズ
スマホ 480px～750px
タブレット 1000px～
PC 1000～2000px
Bootstrap
ブレークポイント 768px
Bootstrapとは？
cssが苦手な人のために作られたもの。cssがあらかじめ用意されているので、それにあわせてhtmlに手を加えていく感じ。
下記サイトでBootstrapをダウンロードできます。
⇩
