<< CSS3:押し応えのあるユニークな3Dボタン | main |

レスポンシブ対応:ホームページの基本

HTML・CSS 2015.08.01 Saturday Femto

今流行りの、レスポンシブ対応のホームページを作ることにしました。もう一度基本から確かめるために、HTMLからの設定を書いていきます。

HTML側に下記のように記述します。BOX3とBOX4は横に並ぶ設定です。

レスポンシブ対応:ホームページの基本
<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>サンプル</title>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="style.css">
</head>

<body>

  <div class="box1">
    BOX1
  </div>

  <div class="box2">
    BOX2
  </div>

  <div class="boxA">
    <div class="box3">
      BOX3
    </div>

    <div class="box4">
      BOX4
    </div>
  </div>

  <div class="box5">
    BOX5
  </div>

</body>

6行目は「ビューポート」と言って、スマートフォンやタブレットなどのデバイスに合わせてホームページを表示するためのものなので必須です。

次に、CSS側に下記のように記述します。

@charset "UTF-8";

body	{font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}

@media (min-width: 768px) {

.boxA:after	{content: "";
	display: block;
	clear: both}

.box3	{float: left;
	width: 70%}

.box4	{float: left;
	width: 30%}

}

5行目は「ブレイクポイント」と言って、ブラウザ画面の大きさによって横並びを解除するための指定です。

7行目は、floatしたBOX3とBOX4がBOX5に入り込まないようにするためのコードです。ちなみに、ウィンドウのサイズが小さくなると、すべてのボックスが縦並びになります。

See the Pen LVMxEo by Femto (@femtoworks) on CodePen.




→PR
JUGEMテーマ:web制作
comments(0) | trackbacks(0) | ▲PAGE TOP

コメント

コメントする










この記事のトラックバックURL

http://femto.looseworks.com/trackback/55

トラックバック

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
<< May 2019 >>

OTHERS

LINKS





qrcode
RECENT COMMENT