感謝のプログラミング 10000時間

一緒に、プログラミングを学ぼう。

グリッドシステムの基本を学ぶ

Bootstrap
Advertisements

Grid system。
聞きなれないこの言葉は、はてなキーワードによると以下のように定義されています。

レイアウトを行う際、画面上に架空の縦横線をガイドラインとして引き、そのブロックごとに文字や図版を配置し、無駄なくスッキリした画面を作る手法。

以下のサイトにもっと詳しい説明があります。
http://html5experts.jp/shumpei-shiraishi/1538/

Bootstrapは12列のグリッドからなります。
画面を縦に12列に区切って、そこに箱を置いていくイメージです。

イメージとしては、こんな感じで、縦に12個に区切った箱に色々な大きさ(最大12)のモノを置いていく感じ。
で、row(行)を足していきます。

列(columnタグ)は必ず、rowタグの中にネストされている必要があります。
Bootstrapのグリッドはどんな広さのデバイスでも、12カラムまでスケールアップできます。

イメージ図はこんな感じ(わかりづらいな・・・)
f:id:sho322:20140525134438j:plain

具体的な書き方ですが、詳細なサンプルは後で見るとして、以下のように書いていきます。
col-sm-8とかありますが、この後ろの数字はrowの中で計12が最大です。
書き方は以下のように、containerの中にrowがあって、rowの中にcol-XXを入れていきます。

<div class="container">
  <div class="row">
    <div class="col-sm-8">
      <!--この中に色々書いていく -->
    </div>

    <div class="col-sm-4">
      <!--この中に色々書いていく -->
    </div
  </div>
</div>

実際に見てみます。

f:id:sho322:20140525134447j:plain
これ、ブラウザを縮めてみてるんですけど、構成(箱の配置)はずれません。

これを表示するためのコードは以下のとおりです。

<!DOCTYPE html>
<html>
<head>
<title>BootStrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0" >
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen" >
</head>
<body>

<div class="container">
<header class="page-header">
<ul class="nav nav-pills pull-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Info</a></li>
<li><a href="#">Profile</a></li>
</ul>
<h3>Twitter</h3>
</header>

<div class="jumbotron">
<h1>これは私の最強のアプリです。</h1>
<p>Twitter Bootstrap is excellent front page programming tool!</p>
<p>
<a class="btn btn-success btn-lg" href="#">私達のアプリをダウンロードする</a>
<a class="btn btn-primary btn-lg" href="#">もっと別のアプリがほしい</a>
</p>
</div>

<div class="row">

<div class="col-md-4 hidden-xs">
<h2>Sixty Nine</h2>
<p>
「ボクはね、『自分が嫌になった』だけたい」
僕とアダマは顔を見合わせた。
自分が嫌になった、それは十七歳の少年にとって、
女高生を口説く時以外には、決して口に出してはいけない台詞である。
誰だってそのぐらいのことは思っているのだ。
</p>
</div>

<div class="col-md-4 hidden-xs">
<h2>すべての男は消耗品である。</h2>
<p>
要するに、輝くということは、
ただちょっと偶然に立ち話をしたような他人にも
元気を与えるということだ。
だから人間は輝いてないといけないのだが、
それは簡単ではない。
</p>
</div>

<div class="col-md-4 hidden-xs">
<h2>愛と幻想のファシズム</h2>
<p>
「幸福は金では買えないというのは嘘だ、金持ち達の心や社会が歪んでいるというのも嘘だ、貧しいけれど小さな幸福というのも嘘だ、貧しい人間には快楽も情報も与えられない」

「才能とは運命なんだよ、運命そのものなんだ」
</p>
</div>

</div>

<!-- 違う列幅のグリッドを作ってみる-->
<div class="row">
 <div class="col-sm-8">
  <h3>これは8列分のグリッドです</h3>
  <p>
   はてなブログは、だれでも簡単・無料で使える最新のブログサービスです。日々の生活から感じたこと、考えたことを書き残しましょう。
  </p>
 </div>
 <div class="col-sm-4">
  <h3>これは4列分のグリッドです</h3>
  <p>
    「はてなダイアリー」は、初心者も簡単にはじめられるブログ。すぐにブログを作成できて容量は無制限、デザインも豊富。作り方もしっかり解説、はじめてでも簡単！ケータイでももちろん利用できます。
  </p>
 </div>
</div>

<!-- ついでにもう一つ8列分のグリッドを作ってみる-->
<div class="row">
  <div class="col-sm-8">
    <h3>またもや8列分</h3>
    <p>上の8列のやつと横幅がうまいこと揃ってるはずだよ！長々と文字を書いていけば、8列分のところでうまいこと折り返されるはず！こうやってサンプルを見ると、グリッドシステムってわかりやすい。見えない箱に囲まれているみたいな。</p>
  </div>
  <div class="col-sm-4">
    <img class="img-responsive" src="img/test.jpg">
  </div>
</div>

</div>
</body>
</html>


これを表示すると、以下のようになって、たしかに最大12の固まりをブロックにして並べているのがわかります。

f:id:sho322:20140525134548j:plain


■imageファイルの大きさをレスポンシブに変更する方法
イメージファイルをレスポンシブにするには、img-responsiveというclass属性を追加します。

<img class="img-responsive" src="img/test.jpg">


＜参考＞

Bootstrap

Bootstrap

sho322



Related Posts Plugin for WordPress, Blogger...
コメントを書く