レスポンシブレイアウトの対応

下記のソースコードをHTMLファイルなどのヘッダー部分に記述します。
利用者がアクセス時に使用した機器の画面サイズなどの情報を取得して、表示の最適化をします。

htmlの設定

<meta name="viewport"content="width=device-width,initial-scale=1.0">

「メディアクエリ」を使い、適用されるCSSの内容を、画面サイズによってPCとスマホで異なる表示やレイアウトができるようになります。

@media screen and (min-width: 401px)　{ } /*画面幅が401ピクセル以上の場合*/ 
@media screen and (max-width: 400px)　{ } /*画面幅が400ピクセル以下の場合*/

｛　　｝には、実行するｃｓｓを書きます。例）　表示エリアを切り替える場合は「.right { display: none; }　.bottom { display:inline ;}」、
画像の横幅をスマホの横幅一杯に表示させたい場合は「.img1 { width:100% ;}」の様に指定します。

リキッドレイアウトに対してソリッドレイアウトがありますが、ソリッドレイアウトでは要素のサイズがpxなどで固定となり、表示サイズの大小により見やすいレイアウトになりません。
（画面幅に余白が出来たり、画面幅からはみ出して横スクロールバーが出てくる場合があります。）
リキッドレイアウトでは要素サイズを%などの相対指定で、ブラウザの画面幅に対して流動的に変化して、画面幅にあったレイアウト表示になります。固定幅レイアウトは指定しない。％指定

ブロック要素やインライン要素では実現できないレイアウト（横並びレイアウト）が簡単に出来ます。

cssの設定

.l-blk{ display : inline-block ; width:200px ; background-color : #ccf ; margin : 3px ; padding : 20px ; }

htmlの設定

<div class="mg">
  <div class="l-blk">Nav1</div>
  <div class="l-blk">Nav2</div>
  <div class="l-blk">Nav3</div>
  <div class="l-blk">Nav4</div>
  <div class="l-blk">Nav5</div>
  <div class="l-blk">Nav6</div>
</div>

表示サンプル

フレックスボックスレイアウト（Flexible Box Layout）は、ブロック要素を簡単に縦・横並びにすることができます。
フレックスボックスレイアウトが一次元の操作で、行か列のいずれかの方向にしかレイアウト出来ないモデルに対して、次項に説明するグリッドレイアウトが行と列の二次元を同時に出来るモデルと対照的で異なります。

cssの設定

.flexcon { display : flex ; flex-direction : row ; flex-wrap: wrap ; }
.flexitm { width:200px ; margin : 3px ; background-color : #ccf ; padding : 20px ; }

htmlの設定

<div class="flexcon">
  <div class="flexitm">item1<br>item11</div>
  <div class="flexitm">item2</div>
  <div class="flexitm">item3</div>
  <div class="flexitm">item4</div>
  <div class="flexitm">item5</div>
  <div class="flexitm">item6</div>
</div>

表示サンプル

CSS Grid Layout（グリッドレイアウト）は、2次元レイアウト を、HTML/CSS を使って簡単・自由に操作できる、CSSの新しい機能です。 格子状のマス目のグリッドに好きな順番に配置したり結合したりすることで、様々なレイアウトが可能になります。（２次元配置で縦横自由に配置）

グリッドの位置とサイズを指定したレイアウトする。

cssの設定

.container {
  display : grid ;
  grid-template-areas :
    "header header header"
    "nav main sidebar"
    "footer footer footer";
  grid-template-rows : 50px auto 50px ;
  grid-template-columns : 200px auto 200px ;
  column-gap : 3px ;
  row-gap : 3px ;
} 
.header { grid-area : header ; } 
.main { grid-area : main ; } 
.nav { grid-area : nav ; } 
.sidebar {  grid-area : sidebar ; } 
.footer { grid-area : footer ; }
@media screen and (max-width : 600px) {
  .container { grid-template-areas :
      "header"
      "main"
      "sidebar"
      "nav"
      "footer";
    grid-template-rows : 50px auto 80px 80px 50px ;
    grid-template-columns : auto ;
  }
}
.item { background-color :#ccf ; padding : 20px ; }

htmlの設定

<div class="container">
  <header class="header item">header</header>
  <main class="main item">main<br>・<br>・<br>・<br>・<br>・<br>・</main>
  <nav class="nav item">nav</nav>
  <aside class="sidebar item">sidebar</aside>
  <footer class="footer item">footer</footer>
</div>

表示サンプル

横並びのグリッドの数を画面サイズに合わせるレイアウト

cssの設定

.container9 { /*横並びのグリッドの数を画面サイズに合わせる*/
  display: grid;
    grid-template-columns: repeat(auto-fill, 200px);
  column-gap: 3px;
  row-gap: 3px;
 justify-content: center; /* グリッド全体を中央に寄せる設定 */
}
.item { background-color:#ccf; padding:20px;}

htmlの設定

<div class="container9">
  <div class="item">item1<br>item11</div> 
  <div class="item">item2</div> 
  <div class="item">item3</div> 
  <div class="item">item4</div> 
  <div class="item">item5</div> 
  <div class="item">item6</div> 
  <div class="item">item7</div> 
  <div class="item">item8</div> 
</div>

表示サンプル