読者です 読者をやめる 読者になる 読者になる

デザイン レスポンシブに関してなど

html/css関連

フラットデザイン ⇔ リッチデザイン

フラットデザインが今流行っている理由

データが軽くなる。

見やすい。

フラットデザインの色の傾向

色の彩度が抑え目。(グレーに近い。)⇒ 目に優しい。

最近は、分からないぐらいのドロップシャドウなどを付けて奥行き(立体感)を少し加味する傾向がある。

 

 レスポンシブ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 {
  clearboth;
}
/*画像を縦横の比率を保ったまま伸び縮み。*/
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 {
  clearboth;
}
/*画像を縦横の比率を保ったまま伸び縮み。*/
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 {
  clearboth;
}
/*画像を縦横の比率を保ったまま伸び縮み。*/
img {
  max-width: 100%;
  height: auto;  /* htmlでwidthとheightを指定してる場合に記述。heightを指定してない場合は書く必要ない。*/
}

 

画面サイズ

スマホ 480px~750px

タブレット 1000px~

PC 1000~2000px

Bootstrap

ブレークポイント 768px

Bootstrapとは?

cssが苦手な人のために作られたもの。cssがあらかじめ用意されているので、それにあわせてhtmlに手を加えていく感じ。

 下記サイトでBootstrapをダウンロードできます。

  ⇩

Bootstrap 

 

広告を非表示にする