デザイン下手な僕にとって、Bootstrapの登場は衝撃なわけで。
Bootstrapは、ウェブ画面のレイアウト、ナビゲーション、ボタンなどのフォーム要素が予めカッコよく定義されたCSSの集合です。Twitterからスピンアウトしており、JavaScriptとの親和性も抜群です。プラグインも豊富。見た目のいいモックが手軽にできちゃう。
練習で公式のサンプル見つつ作ってみました。制作にかかった時間はたった10分。コンテンツに集中できます。
bootstrap.zipをダウンロードして展開。ファイル構成はこんな感じ。
/ |- index.html +-- css/ +-- img/ +-- js/
index.htmlを作っていきます。
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>株式会社２６次元ポケット</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="株式会社２６次元ポケットは、スゴイ会社です
。">
<meta name="author" content="株式会社２６次元ポケット">
<link href="/css/bootstrap.css" rel="stylesheet">
<style type="text/css">
body { padding-top: 60px; padding-bottom: 40px; }
</style>
<link href="/css/bootstrap-responsive.css" rel="stylesheet"> <!--[if It IE 9>
<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<div class="navbar navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">株式会社２６次元ポケット</a>
<div class="nav-collapse">
<ul class="nav">
<li><a href="#products">製品</a></li>
<li><a href="#services">サービス</a></li>
<li><a href="#support">サポート</a></li>
<li><a href="#access">アクセス</a></li>
<li><a href="#about">会社概要</a></li>
<li><a href="#contact">お問合わせ</a></li>
</ul>
</div>
</div><!--/.nav-collapse -->
</div>
</div>
<div class="container">
<div class="hero-unit">
<h1>５次元ファインダー新発売!</h1>
<p>新サービス「５次元ファインダー」は、４次元では不可能だったあんなこと>がこんなことを誰でも簡単に体験できるウェブサービスです。無料でお使いいただけます
。
</p>
<p><a class="btn btn-primary btn-large" href="#">もっと詳しく »</a></p>
</div>
<div class="row">
<div class="span4">
<h2>もしもしボックス</h2>
<p>もしもしボックスは、新しい箱型電話機です。この斬新なコンセプトは、>２２世紀始まって以来の衝撃です。</p>
<p><a class="btn" href="#">詳細 »</a></p>
</div>
<div class="span4">
<h2>８次元ポケット</h2>
<p>２２世紀９月に発売から２ヶ月。新しいポケットは従来の容量の４乗です>。しかも価格はかわりません。</p>
<p><a class="btn" href="#">詳細 »</a></p>
</div>
<div class="span4">
<h2>いつでもドア３</h2>
<p>３次元空間上の行き来にうんざりしていませんか？いつでもドア３は、プ>ラス１次元。過去と未来をスマートに移動できます。</p>
<p><a class="btn" href="#">詳細 »</a></p>
</div>
</div>
<footer>
<p>© 株式会社２６次元ポケット 2112</p>
</footer>
</div>
</body>
</html>
ポイントはこの辺になるかなあ、と。
- class="navbar navbar-fixed-top" ... 上部に固定のナビゲーション
- class="container" ... 1ペインの本体
- class="hero-unit" ... 上部トップ（5次元ファインダー）
- class="row" ... グリッドの行の始まりを指定。12列。
- class="span4" ... 12グリッド中の4つ分を使用することを指定。
- class="btn" ... ボタン（詳細）
- class="btn btn-primary btn-large" ... 大きくて優先的なボタン
グリッドデザインというのが素敵です。rowを指定してspanN（Nには1〜12）で12列あるセルの何個使うかを指定するのが基本的な使い方です。
グリッドデザインはウェブデザインが生まれてから長く使われてきましたが、ここまで簡単キレイにできると何か感慨深いものがあります。
ここからオリジナリティを出していくのは大変かもしれませんが、モックには今のところ最適では？ということで。
0 件のコメント:
コメントを投稿