マンガでなれる?WEBデザイナー講座

第2話 Bootstrapで骨組みのHTMLを作ろう!

第2話  Bootstrapで骨組みのHTMLを作ろう! | マンガでなれる?Webデザイナー講座

mika

今回はBootstrap公式サイトからダウンロードしてHTMLサイトを作成する手順を紹介します。

yoko

いよいよ、本題のコーディングに入るわけですね!

1.公式サイトからBootstrapファイル一式をダウンロードする

mika

下記のサイトからBootstrapファイルをダウンロードします。 今回は後でSassからデザインをカスタマイズしたいので「Download Sass」をクリックします。

http://getbootstrap.com/getting-started/

2.ダウンロードしたフォルダを解凍後、「assets」ファイルの中に「index.html」を作成する

mika

私はコーディングの時には「Brackets」(無料オープンソースコードエディター)のソフトを使用しています。

(慣れているエディタソフトで編集してください。)

「stylesheets」ファイルの中に「style.scss」という名前でファイル作成します。
これがBootstrapのCSSを上書きできるSCSSになります。
ただしコンパイルしないとSCSSからCSSが作成できません。
Sassの基本設定は次回説明します。


「assets」ファイルの中に「index.html」を作成する
「stylesheets」ファイルの中に「style.scss」という名前でファイル作成 「Brackets」 http://brackets.io/
yoko

コンパイル???
なんかプログラム言語な感じですねっ!! プログラム知識のないデザイナーでも使えるのでしょうか?

mika

SassもLessも初歩的なCSSを書くだけでスタイル変更ができます。そのため初心者でもCSSが自分で書ける人はSass,Lessは使えると思います。

Bootstrapの場合はあらかじめSass,Lessが用意されていますのでBootstrapの作法に従って元からあるCSSスタイルをカスタマイズすれば初心者でも扱えるとは思います。

yoko

ほっ、安心しました。

3.作成した「index.html」にBootstrapサイトの雛形HTMLを作成する

サンプル雛形HTML
<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        サンプルページ
    </title>
    <link href="stylesheets/style.css" rel="stylesheet">
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>


<body>



    <!-- SCRIPTS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="javascripts/bootstrap.js"></script>

</body>

</html>
    
mika

Bootstrap3ではjQueryを必要とします。
jQueryにはバージョン1.x系をダウンロードします。
ダウンロードしたjQueryは「javascripts」フォルダへ入れます。

サンプルではIE8に対応させるためのソースも記載しています。
( <!--[if lt IE 9]>の箇所)

‥これでBootstrapでサイトを作る準備が整いました。

jQuery入手先→ http://jquery.com/download/

mika

前回のデザインを見て必要なBootstrapのコンポーネント(Webパーツ)を公式サイトからコピペしましょう。



前回の講座のデザインカンプ画像

1.header(ヘッダー)のHTMLを入手する

mika

NavbarBrand imageのソースをコピー&ペーストします。
(赤文字の所は変更追記したHTMLです)

http://getbootstrap.com/components/#navbar-brand-image


<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="image/logo.png">
      </a>
    </div>
  </div>
</nav>

2.トップ画像のHTMLを入手する

mika

Jumbotronのソースをコピー&ペーストします。
(赤文字の所は変更追記したHTMLです)

マークアップでheaderを追加します。 文章はデザインカンプの物に変更します。ここでは前回と文章は変更して「サイトのキャッチコピーが入ります」にしました。

サイトのタイトルや文章は中央寄せにしたいのでtext-centerのclassを追加します。

http://getbootstrap.com/components/#jumbotron


<header class="jumbotron text-center">
  <h1>Single Page</h1>
  <p>サイトのキャッチコピーが入りますサイトのキャッチコピーが入りますサイトのキャッチコピーが入りますサイトのキャッチコピーが入ります</p>
  <p><a class="btn btn-primary btn-lg" href="#" role="button">Get Started Now!!</a></p>
    </header>
yoko

画像やテキストを左寄せや右寄せにするためのclassはありますか?

mika

Bootstrapのclassにはテキストの左寄せ(text-left)右寄せ(text-right)があらかじめ用意されています。

公式サイトの下記のページが参考になります。

http://getbootstrap.com/css/#type-alignment

3.「Concept」の見出しのHTMLを入手する

mika

Page headerのソースをコピー&ペーストします。
(赤文字の所は変更追記したHTMLです)

small(小見出し)は今回のデザインでは必要ではないので削除します。
Bootstrapではコンテンツはcontainerrowで囲みます。
(※containerがないと幅100%に表示されます)

http://getbootstrap.com/components/#page-header


<div class="container">
    <div class="row">
<div class="page-header">
  <h1 class="text-center">Concept</h1>
</div>
    </div>
</div>

4.画像が3列に並ぶようにサムネイルのHTMLを入手する

mika

ThumbnailsのHTMLは下記から入手します。
(赤文字の所は変更追記したHTMLです)

ボタンとthumbnailは今回のデザインには必要ないのでソースを削除します。
文章も画像も中央寄せにしたいのでtext-centerのclassを追加します。
また、スマホでは1カラム表示、 PCでは3カラム表示にしたいので col-xs-12、col-md-4のclassを追加します。

http://getbootstrap.com/components/#thumbnails


<div class="col-xs-12 col-md-4 text-center">
    <img src="image/photo02.png" alt="...">
    <div class="caption">
        <h3>Heading</h3>
        <p>サイトのコンセプト文章が入ります。</p>
    </div>
</div>

<div class="col-xs-12 col-md-4 text-center">
    <img src="image/photo03.png" alt="...">
    <div class="caption">
        <h3>Heading</h3>
        <p>サイトのコンセプト文章が入ります。</p>
    </div>
</div>

<div class="col-xs-12 col-md-4 text-center">
    <img src="image/photo04.png" alt="...">
    <div class="caption">
        <h3>Heading</h3>
        <p>サイトのコンセプト文章が入ります。</p>
    </div>
</div>

5.footer(フッター)のHTMLを入手する

mika

footerは 「Examples」「Sticky footer」のソースを参考にコピー&ペーストします。
これでfooterが追加されました。

http://getbootstrap.com/getting-started/#examples


       <footer class="footer">
      <div class="container">
        <p class="text-muted">copyright © sample</p>
      </div>
    </footer>
mika

これでHTMLでレイアウトは完成しました!!

Bootstrapは元からレスポンシブ仕様なのでHTMLコーディングするだけでPC・タブレット・スマホにデバイス幅が対応します。

私はデバイス毎のグリットレイアウトの表示を 「Adobe Edge InspectCC」で確認しています。

「Brackets」「Edge Inspect extension for Brackets and Edge Code」プラグインを入れる事によって「Adobe Edge InspectCC」が使用できます。


▼Adobe Edge InspectCCの入手先
https://creative.adobe.com/ja/products/inspect

▼詳しい使い方は下記のサイトで紹介されているので参考にしてください。

マルチデバイス対応のウェブ開発を効率化する「Adobe Edge Inspect」の使い方
http://codezine.jp/article/detail/7131
mika

デザインカンプ通りにデザインを調節、色付けするために 次回はSassでデザインカスタマイズする方法を紹介します。

今回のサンプルHTMLは下記ボタンから「サンプル.ZIPをダウンロードする」、「JSFiddleでコードを確認する」で確認してください。


yoko

Sassかぁ〜。難しそうだけど、頑張ります!


Twitterでシェアよろしくお願いします

Twitterでフォローする