CSSのレイアウト例　その3 固定+リキッドレイアウト

投稿日：2016年9月10日

本日は固定レイアウト+リキッドレイアウトについて。

リキッドレイアウトとはブラウザの幅に合わせて表示を変える方法でして、スマホが一般的となった現在では非常によく使われています。

今回解説するのは例えばサイトバーなどは固定で、メインのカラムがリキッドレイアウトのケースです。

例によってサイトが具体的にどうなっているかを知りたい方は「プロとして恥ずかしくない　新・CSSデザインの大原則」を買いましょう。

基本的な構成はこのエントリーで紹介したカラムレイアウトと同じです。

<div id="contents">
    <div class="contents_innner">
        <article id="main">
            <!-- リキッドレイアウト -->
        </article>
　　　   <div id="side">
            <!-- 固定カラムレイアウト -->
        </div>
    </div>
</div>

</article>

</div>

header,footer, #contents{
   /** 縮小した時につぶれないように最小幅設定をする必要あり**/
   min-width:700px;
}

[ class*="_innner"]{
  width:980px;
  max-width:1500px;
  margin.:0 auto;   
}

[class *=_innner]{
  /** 固定の横幅をやめ100%にする **/
  width:100%;    
}

/** 通常通り100%をとると固定カラムのスペースがなくなるため **/
/** ネガティブマージンでわざと右によせる **/
#main{
  float:left;
  width:100%;
  margin-right:-300px;
  padding-right:350px;
  box-sizing:border-box;/** このプロパティを与えることでwidthがpaddingを含めて100%になる **/
}

.img{
  text-align:center;
}

.img img{
  max-width:100%; /** 通常だとウィンドウ幅を狭くすると画像が飛び出るので最大幅を設定しておく **/
  height:auto;    /** このプロパティで縦横費を維持できる**/
}

header,footer, #contents{

/** 縮小した時につぶれないように最小幅設定をする必要あり**/

min-width:700px;

}

[ class*="_innner"]{

width:980px;

max-width:1500px;

margin.:0 auto;

}

[class *=_innner]{

/** 固定の横幅をやめ100%にする **/

width:100%;

}

/** 通常通り100%をとると固定カラムのスペースがなくなるため **/

/** ネガティブマージンでわざと右によせる **/

#main{

float:left;

width:100%;

margin-right:-300px;

padding-right:350px;

box-sizing:border-box;/** このプロパティを与えることでwidthがpaddingを含めて100%になる **/

}

.img{

text-align:center;

}

.img img{

max-width:100%; /** 通常だとウィンドウ幅を狭くすると画像が飛び出るので最大幅を設定しておく **/

height:auto; /** このプロパティで縦横費を維持できる**/

}

CSSのレイアウト例 その3 固定+リキッドレイアウト

CSSのレイアウト例　その3 固定+リキッドレイアウト