投稿日： ｜ 最終更新日:
グリッド・システムの基本コード
レスポンシブデザインのホームページを制作します。今回は、その中核であるグリッドシステムの基本を紹介したいと思います。
グリッド・システムの基本
米国カリフォルニア州の制作会社 ZURB,Incが提供する「Foundation」の「The Grid」をベースに紹介します。また、前回紹介したグリッド・システムの条件を網羅します。
参考書籍
以下の書籍を参考にグリッドシステムを制作します。
完成イメージ
さまざまな幅のグリッドが並びます。
↓
ブラウザの幅が小さくなると、横一列のカラムが、縦一列に並びます。
コード
index.html
<!--[if lt IE 7]><!--> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"> <![endif]-->
<!--[if IE 7]><!--> <html class="no-js lt-ie9 lt-ie8" lang="ja"> <![endif]-->
<!--[if IE 8]><!--> <html class="no-js lt-ie9" lang="ja"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->
<head>
<!-- モバイル・ファーストで定義した IE6-8 以外のブラウザ用 -->
<!--[if (gt IE 8) | (IEMobile 7)]><!-->
<link href="style.css' ; ?>" rel="stylesheet" type="text/css" />
<!--<![endif]-->
<!-- IE6-8 向けのデスクトップ用 -->
<!--[if (lt IE 9) & (!IEMobile 7)]><!-->
<link href="desktop.css' ; ?>" rel="stylesheet" type="text/css" />
<![endif]-->
</head>
<body>
<div class="row">
<div class="one cols"><p>1</p></div>
<div class="one cols"><p>1</p></div>
<div class="one cols"><p>1</p></div>
<div class="one cols"><p>1</p></div>
<div class="one cols"><p>1</p></div>
<div class="one cols"><p>1</p></div>
<div class="one cols"><p>1</p></div>
<div class="one cols"><p>1</p></div>
<div class="one cols"><p>1</p></div>
<div class="one cols"><p>1</p></div>
<div class="one cols"><p>1</p></div>
<div class="one cols"><p>1</p></div>
</div>
<div class="row">
<div class="two cols"><p>2</p></div>
<div class="two cols"><p>2</p></div>
<div class="two cols"><p>2</p></div>
<div class="two cols"><p>2</p></div>
<div class="two cols"><p>2</p></div>
<div class="two cols"><p>2</p></div>
</div>
<div class="row">
<div class="three cols"><p>3</p></div>
<div class="three cols"><p>3</p></div>
<div class="three cols"><p>3</p></div>
<div class="three cols"><p>3</p></div>
</div>
<div class="row">
<div class="four cols"><p>4</p></div>
<div class="four cols"><p>4</p></div>
<div class="four cols"><p>4</p></div>
</div>
<div class="row">
<div class="five cols"><p>5</p></div>
<div class="seven cols"><p>7</p></div>
</div>
<div class="row">
<div class="six cols"><p>6</p></div>
<div class="six cols"><p>6</p></div>
</div>
<div class="row">
<div class="four cols"><p>4</p></div>
<div class="eight cols"><p>8</p></div>
</div>
<div class="row">
<div class="three cols"><p>3</p></div>
<div class="nine cols"><p>9</p></div>
</div>
<div class="row">
<div class="two cols"><p>2</p></div>
<div class="ten cols"><p>10</p></div>
</div>
<div class="row">
<div class="one cols"><p>1</p></div>
<div class="eleven cols"><p>11</p></div>
</div>
<div class="row">
<div class="four cols"><p>4</p></div>
<div class="four cols"><p>4</p></div>
</div>
<div class="row">
<div class="four cols"><p>4</p></div>
<div class="four cols end"><p>4</p></div>
</div>
</div>
</body>
</html>
style.css
@charset "utf-8";
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #000;
}
p {
padding: 0 0 30px;
/*background: #eee;*/
background: #B6E1FF;
}
.row {
width: 1140px;
max-width: 100%;
min-width: 768px;
margin: 0 auto;
background: #ddd;
}
.row .row {
width: auto;
max-width: none;
min-width: 0;
margin: 0 -1.2%;
}
.cols {
float: left;
min-height: 1px;
padding: 0 1.2%;
position: relative;
background: #fff;
}
[class*="clos"] + [class*="clos"]:last-child { float: right; }
[class*="clos"] + [class*="clos"].end { float: left; }
.row .one { width: 8.33%; }
.row .two { width: 16.66%; }
.row .three { width: 25%; }
.row .four { width: 33.33%; }
.row .five { width: 41.66%; }
.row .six { width: 50%; }
.row .seven { width: 58.33%; }
.row .eight { width: 66.66%; }
.row .nine { width: 75%; }
.row .ten { width: 83.33%; }
.row .eleven { width: 91.66%; }
.row .twelve { width: 100%; }
@media screen and (max-width: 767px) {
.row {
width: auto;
min-width: 0;
margin-left: 0;
margin-right: 0;
}
.cols {
float: none;
width: auto !important;
height: 50px;
}
[class*="clos"] + [class*="clos"]:last-child { float: none; }
[class*="clos"] + [class*="clos"].end { float: none; }
}
desktop.css
.lt-ie8 .row {
min-width: 1140px;
}
.lt-ie8 .row .one { width: 5.886%; } /* 8.33 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .two { width: 14.2161%; } /* 16.66 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .three { width: 22.5561%; } /* 25 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .four { width: 30.8861%; } /* 33.33 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .five { width: 39.2161%; } /* 41.66 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .six { width: 47.5561%; } /* 50 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .seven { width: 55.8861%; } /* 58.33 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .eight { width: 64.2161%; } /* 66.66 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .nine { width: 72.5561%; } /* 75 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .ten { width: 80.8861%; } /* 83.33 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .eleven { width: 89.2161%; } /* 91.66 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .twelve { width: 97.5561%; } /* 100 - (1.2 × 2) - 50/1140 */
解説
index.html
htmlを記述します。
htmlタグ
<!--[if lt IE 7]><!--> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="ja"> <![endif]--> <!--[if IE 7]><!--> <html class="no-js lt-ie9 lt-ie8" lang="ja"> <![endif]--> <!--[if IE 8]><!--> <html class="no-js lt-ie9" lang="ja"> <![endif]--> <!--[if gt IE 8]><!--> <html class="no-js" lang="ja"> <!--<![endif]-->
・コンディショナル・コメントで、htmlタグのclass属性を分岐します。
[if lt IE 7] IE7未満 ：no-js、lt-ie9、lt-ie8、lt-ie7のクラス名を使用。
[if IE 7] IE7の場合 ：no-js、lt-ie9、lt-ie8のクラス名を使用。
[if IE 8] IE8の場合 ：no-js、lt-ie9のクラス名を使用。
[if gt IE 8] IE8より大きい場合 ：no-jsのクラス名を使用。
スタイルシート
<head> <!-- モバイル・ファーストで定義した IE6-8 以外のブラウザ用 --> <!--[if (gt IE 8) | (IEMobile 7)]><!--> <link href="style.css' ; ?>" rel="stylesheet" type="text/css" /> <!--<![endif]--> <!-- IE6-8 向けのデスクトップ用 --> <!--[if (lt IE 9) & (!IEMobile 7)]><!--> <link href="desktop.css' ; ?>" rel="stylesheet" type="text/css" /> <![endif]--> </head>
・ブラウザのバージョンごと、使用するcssファイルを分けます。
[if (gt IE 8) | (IEMobile 7)] IE8より大きい場合か、モバイルの場合：「style.css」を使用。
[if (gt IE 8) | (IEMobile 7)] ie6～ie8の場合：「desktop.css」を使用。
※前回の記事に詳細が記載しております。
style.css
ie８よりバージョンが上のブラウザのcssを記述します。
box-sizing
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
ボックスモデルを「border-box」に変更します。widthで指定した幅が、paddingとborderの幅に関係なく保持されます。指定すれば、ガッターサイズの変更がシンプルになります。
「-moz-box-sizing」は、firefoxのための記述です。
「-webkit-box-sizing」は、iOS4以下・Android2.3以下のための記述です。
IE6、IE7ではサポートされていません。たとえば、以下のようなボックスがあるとします。
例）
■border:2px
■padding:20px
□width:400px
・「border-box」に指定しない場合
実際のコンテンツの幅:400-(20+2)×2 = 356px
・「border-box」に指定した場合
実際のコンテンツの幅:400px
.row
.row {
width: 1140px;
max-width: 100%;
min-width: 768px;
margin: 0 auto;
background: #ddd;
}
基本となる幅を1140pxにします。それ以下の表示は「max-width:100%」を指定します。「min-width: 768px;」を使って768以下は横幅が可変しないように指定します。
.row .row
.row .row {
width: auto;
max-width: none;
min-width: 0;
margin: 0 -1.2%;
}
入れ子にした行のスタイルを記述します。
入れ子にする場合は、両脇のガッターが不要ですので、「margin: 0 -1.2%;」を指定します。
.cols
.cols {
float: left;
min-height: 1px;
padding: 0 1.2%;
position: relative;
background: #fff;
}
列のスタイルを記述します。colsとカラム数（one、Two、threeなど）の組み合わせの「class=”two cols”」を各グリッドに指定します。そして、カラム共通のfloatとpaddingを指定します。「position:relative」は、PUSHとPULLを実現するためで、表示順が調整できるようになります。43行目のendクラスを指定するのは、カラム数が少ない場合に右寄せをリセットするためです。
行の最後のカラム
<div class="row">
<div class="four cols"><p>4</p></div>
<div class="four cols"><p>4</p></div>
</div>
<div class="row">
<div class="four cols"><p>4</p></div>
<div class="four cols end"><p>4</p></div>
</div>
[class*="clos"] + [class*="clos"]:last-child { float: right; }
[class*="clos"] + [class*="clos"].end { float: left; }
CSSの属性セレクタと隣接兄弟セレクタを使います。行の最後の行を右寄せにします。ブラウザごとの小数点以下単位の扱いが違うため、差を調整する役割です。
endクラスを指定しない場合
カラムが左につめられないままです。
endクラスを指定した場合
カラムが左につめられます。
カラム幅指定
.row .one { width: 8.33%; }
.row .two { width: 16.66%; }
.row .three { width: 25%; }
…（省略）…
各グリッドのサイズを指定します。
1カラムの幅 = 100% ÷ 12 = 8.33%
2カラムの幅 = 100% ÷ 6 = 16.66%
3カラムの幅 = 100% ÷ 4 = 25%
以下省略
メディアクエリ
@media screen and (max-width: 767px) {
.row {
width: auto;
min-width: 0;
margin-left: 0;
margin-right: 0;
}
.cols {
float: none;
width: auto !important;
height: 50px;
}
[class*="clos"] + [class*="clos"]:last-child { float: none; }
[class*="clos"] + [class*="clos"].end { float: none; }
}
767px以下では全て1カラムにします。
@media screen and (max-width: 767px)
767px以下の表示に対してスタイルシートを適用します。
.row
rowクラスは行をコントロールします。
1カラム表示の場合は、画面の最大幅を使用します。
そのために、widthにauto指定します。
最小幅（min-width）とmarginを0にリセットします。
.cols
colsクラスは列をコントロールします。
floatをリセットします。
1カラム表示の場合は、画面の最大幅を使用します。
そのために、widthにauto指定します。
「!important」は、幅を優先的にautoに指定します。
「.row .one」「.row .two」などのスタイルがrowクラスのみの幅指定より優先度が高いためです。
72～73行目
最後の行にきたカラムのfloatをnoneにリセットします。
desktop.css
IE7向けは幅を固定
.lt-ie8 .row {
min-width: 1140px;
}
そもそもIE7はデスクトップ向けブラウザであるため、可変グリッドは不要です。IE7では、横幅を「min-width: 1140px;」と固定します。
IE7向けcss
.lt-ie8 .row .one { width: 5.886%; } /* 8.33 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .two { width: 14.2161%; } /* 16.66 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .three { width: 22.5561%; } /* 25 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .four { width: 30.8861%; } /* 33.33 - (1.2 × 2) - 50/1140 */
.lt-ie8 .row .five { width: 39.2161%; } /* 41.66 - (1.2 × 2) - 50/1140 */
IE7では、box-sizingがサポートされていません。カラム幅の指定をやり直します。
①幅から、ガッターサイズ（padding）と調整値を引きます。
②そして、小数点以下の数値の扱いがブラウザごとことなるため調整値を引きます。
例）.row .oneの場合
①ガッターサイズを引く：8.33%-(1.2×2)=5.93%
②調整値を引く：5.93%-50÷1140px=5.886%
調整値につきましては、こちらのサイトで紹介されています。
→レスポンシブなデザインにするなら知っておきたい。各ブラウザの小数点以下のピクセル値の扱い
- Python 114
- 制作 54
- RaspberryPi 41
- Django 40
- WordPress 40
- Linux 27
- VPS 22
- JavaScript 21
- PHP 20
- HTML・CSS 19
- AWS 16
- 仮想環境 15
- レスポンシブデザイン 13
- マイコン 11
- WEB全般 11
- 動画製作 9
- Webサービス 8
- 統合開発環境 8
- 機械学習 8
- PyCharm 7
- jQuery 7
- AfterEffects 7
- 起業・設立 7
- Django REST framework 6
- C# 6
- デザイン 6
- SEO 6
- pydata 6
- Visual Studio 5
- 数学 5
- 携帯サイト 5
- heroku 5
- Mac 5
- illustrator 5
- node.js 5
- Anaconda 5
- Nginx 4
- Jupyter Notebook 4
- インフラ 4
- Google Colaboratory 4
- symfony 4
- Webスクレイピング 3
- photoshop 3
- Go言語 3
- PC 3
- ツール 3
- Docker 3
- facebook 3
- 作業効率化 3
- データベース 3
- Cloud9 3
- コマンド 2
- micro:bit 2
- Kali Linux 2
- Webサーバー 2
- MariaDB 2
- ドローン 2
- コンテナ 2
- DaVinci Resolve 2
- ネットワーク 2
- Java 2
- movie 2
- PCDJ 2
- 音楽 2
- XSERVER 2
- Ansible 1
- Vue.js 1
- JSON 1
- Bootstrap 1
- バージョン管理システム 1
- SSL 1
- S3 1
- ムームードメイン 1
- ネットワーク 1
- アニメーション 1
- D3.js 1
- Rhino 1
- アニメ 1
- git 1
- windows 1
- アクセス解析 1
- スマートフォン 1
- アフィリエイトノウハウ 1
- 知識 1
- TypeScript 1
- 役立つ本・書籍 1
- データサイエンス 1
- ESP32 1
- AI 1
- ownCloud 1
- ＡＰＩ 1