リキッドレイアウト

　リキッドレイアウトとは、ウィンドウサイズに合わせて幅を可変させるレイアウトです。
リキッドレイアウトは、幅や高さをパーセントなど相対値を使って指定します。
レスポンシブWEBデザインは、あらゆる画面サイズにレイアウトを適応させることが条件です。
そのため、フル可変のリキッドレイアウトはレスポンシブWEBデザインに欠かせません。

完成イメージ

　

↓

基本コード

　ヘッダー、メインコンテンツ、ナビゲーションのレイアウトをリキッドレイアウトにします。
レイアウト幅は、pxではなく%で指定します。

css

・「#container」で最大幅を指定します。
・「max-width: 769px;」で最大幅を指定。
・中央に寄せるため、「margin: 0 auto;」を指定します。

	#container{
		max-width: 769px;
		width:100%;
		margin: 0 auto;
		padding: 1em;
	}

	#main {
		float: left;
		width: 70%;
		padding: 1em;
		min-height: 500px;
		background: #ccc;
	}

	nav {
		float: right;
		width: 30%;
		padding: 1em;
		background: #ffa300;
		min-height: 500px;
	}

index.html

　htmlを記述します。

  <div id="container">
    <header>
      <h1>ヘッダー</h1>
    </header>

    <div id="main">
      メインコンテンツ
    </div><!-- end container -->

    <nav>
      <h2>ナビ</h2>
    </nav>

  </div><!-- end container -->

画像やビデオをフレキシブルにするには？

　画像やビデオをリキッドレイアウトに対応させます。
・幅を100%にします。
・高さはautoにします。

画像をフレキシブルにする方法

　画面が縮小すると、画像も縮小します。
完成イメージ

↓

 img {
    max-width: 100%;
    height: auto;
 }

      <img src="/images/イスとテーブル.jpg" />

YoutubeやVimeoをフレキシブルにする方法

・高さを調整するため、iframeをdivタグで囲みます。
・divタグは「position: relative;」で、相対位置に配置します。
・iframeタグは「position: absolute;」で、絶対位置に配置します。
・iframeタグの縦横幅は100%を指定します。
完成イメージ

↓

        .video-container {
          position: relative;
          padding-bottom: 56.25%;
          padding-top: 30px;
          height: 0;
          overflow: hidden;
        }

        .video-container iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }

            <div class="video-container">
               <iframe src="http://www.youtube.com/embed/00000" frameborder="0" allowfullscreen></iframe>
            </div>

            <div class="video-container">
               <iframe src="http://player.vimeo.com/video/00000?color=00000" width="500" height="213" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> <p><a href="http://vimeo.com/50779179">X ON A MAP</a> from <a href="http://vimeo.com/jeffdesom">Jeff Desom</a> on <a href="http://vimeo.com">Vimeo</a>.</p>
            </div>