CSSチュートリアル

CSSホーム CSSの紹介 CSS構文 CSSセレクター CSSハウツー CSSコメント CSSの色 CSSの背景 CSSボーダー CSSマージン CSSパディング CSSの高さ/幅 CSSボックスモデル CSSの概要 CSSテキスト CSSフォント CSSアイコン CSSリンク CSSリスト CSSテーブル CSSディスプレイ CSSの最大幅 CSSの位置 CSSZ-index CSSオーバーフロー CSSフロート CSSインラインブロック CSS整列 CSSコンビネータ CSS疑似クラス CSS疑似要素 CSSの不透明度 CSSナビゲーションバー CSSドロップダウン CSS画像ギャラリー CSS画像スプライト CSS AttrSelectors CSSフォーム CSSカウンター CSSWebサイトのレイアウト CSSユニット CSSの特異性 CSS!重要 CSS数学関数

CSS Advanced

CSSの丸みを帯びたコーナー CSSボーダー画像 CSSの背景 CSSの色 CSSカラーキーワード CSSグラデーション CSSシャドウ CSSテキスト効果 CSSWebフォント CSS2D変換 CSS3D変換 CSSトランジション CSSアニメーション CSSツールチップ CSSスタイルの画像 CSS画像反射 CSSオブジェクト適合 CSSオブジェクトの位置 CSSマスキング CSSボタン CSSページ付け CSSの複数の列 CSSユーザーインターフェイス CSS変数 CSSボックスのサイズ設定 CSSメディアクエリ CSSMQの例 CSSFlexbox

CSSレスポンシブ

RWDイントロ RWDビューポート RWDグリッドビュー RWDメディアクエリ RWD画像 RWDビデオ RWDフレームワーク RWDテンプレート

CSSグリッド

グリッドイントロ グリッドコンテナ グリッドアイテム

CSS SASS

SASSチュートリアル

CSSの

CSSテンプレート CSSの例 cssクイズ CSS演習 CSS証明書

CSSリファレンス

CSSリファレンス CSSセレクター CSS関数 CSSリファレンスオーラル CSSWebセーフフォント CSSアニメーション可能 CSSユニット CSSPX-EMコンバーター CSSの色 CSSの色の値 CSSのデフォルト値 CSSブラウザのサポート

レスポンシブウェブデザイン-グリッドビュー


グリッドビューとは何ですか?

多くのWebページはグリッドビューに基づいています。つまり、ページは次の列に分割されています。


グリッドビューを使用すると、Webページをデザインするときに非常に役立ちます。ページに要素を配置しやすくなります。


レスポンシブグリッドビューには多くの場合12列あり、全幅は100%で、ブラウザウィンドウのサイズを変更すると縮小および拡大します。

例:レスポンシブグリッドビュー



レスポンシブグリッドビューの構築

レスポンシブグリッドビューの作成を始めましょう。

まず、すべてのHTML要素のbox-sizingプロパティがに設定され ていることを確認しますborder-boxこれにより、要素の幅と高さの合計にパディングと境界線が含まれるようになります。

CSSに次のコードを追加します。

* {
  box-sizing: border-box;
}

box-sizingプロパティの詳細については、 CSSボックスのサイズ設定の章をご覧ください。

次の例は、2つの列を持つ単純なレスポンシブWebページを示しています。

25%
75%

.menu {
  width: 25%;
  float: left;
}
.main {
  width: 75%;
  float: left;
}

上記の例は、Webページに2つの列しかない場合は問題ありません。

ただし、Webページをより細かく制御するために、12列のレスポンシブグリッドビューを使用する必要があります。

まず、1つの列のパーセンテージを計算する必要があります:100%/ 12列= 8.33%。

次に、12列ごとに1つのクラスを作成しclass="col-"、セクションがまたがる列の数を定義する数値を作成します。

CSS:

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

 これらの列はすべて左にフローティングで、15pxのパディングが必要です。

CSS:

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

各行はでラップする必要があり<div>ます。行内の列の数は、常に合計で12になる必要があります。

HTML:

<div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

行内の列はすべて左に浮いているため、ページのフローから除外され、他の要素は列が存在しないかのように配置されます。これを防ぐために、フローをクリアするスタイルを追加します。

CSS:

.row::after {
  content: "";
  clear: both;
  display: table;
}

また、見栄えを良くするために、いくつかのスタイルと色を追加したいと思います。

html {
  font-family: "Lucida Sans", sans-serif;
}

.header {
  background-color: #9933cc;
  color: #ffffff;
  padding: 15px;
}

.menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.menu li {
  padding: 8px;
  margin-bottom: 7px;
  background-color :#33b5e5;
  color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
}

.menu li:hover {
  background-color: #0099cc;
}

ブラウザウィンドウのサイズを非常に小さい幅に変更すると、例のWebページの見栄えが悪くなることに注意してください。次の章では、それを修正する方法を学びます。