デザイナーと繋がる!WebJoyクリエイターブログ WebJoyコミュ

2017年12月01日 CSS

スマホサイト構築に便利!Bootstrapの使い方まとめ その1

皆さんこんにちは!長崎のホームページ制作会社、合同会社WebJoyです。

Bootstrapで構築すると比較的簡単にスマホサイトを構築することができます。

これからホームページ作成をしようとお考えの方や、更にホームページを増やしていこうとお考えの方!効率よくホームページ作成をする方法をご存知でしょうか?

それはCSSの基本を身につけていれば誰でも活用することができる「Bootstrap」というものです。これを使用すれば、classを指定していくだけでスマホ対応サイトを簡単に構築することができます。

一体、「Bootstrap」とは何モノなのでしょうか?

※このブートストラップ、詳しく解説すると奥が深すぎるため、とても1記事にまとめることができません!そのため、複数回に分けて、詳しくブートストラップについて解説をしていきたいと考えております。

Bootstrap(ブートストラップ)とは

ホームページ関連のお仕事をしている方や、Web関連の知識が豊富な方は聞いたことがある名前だと思いますが、ブートストラップはCSSフレームワークの名称です。

もっと簡単に言うと、事前にスマホ対応サイトの設定をしているCSSファイル一式を配布し、リンクさせて指定のclassを挿入するだけで、スマホサイトを構築できる配布データの事です。

Bootstrapの使い方

Bootstrapを公式サイトよりダウンロードしましょう。

また、JavaScriptのライブラリであるjQueryも合わせてダウンロードしてください。では早速使用してみましょう。

ブートストラップの基本構成

ダウンロードしたファイルを解凍してください。

そして新たに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>Bootstrap Sample</title>
    <!-- BootstrapのCSS読み込み -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- BootstrapのJS読み込み -->
    <script src="js/bootstrap.min.js"></script>
  </head>
  <body>
    <h1>Hello, world!</h1>
  </body>
</html>

これだけでは当然以下のようにただの見出しのみ表示されるかと思います。

しかし、上記のコードにはそれぞれ意味があり、ここまでコードが記述できていれば後は、具体的なレイアウトの設定を行なうのみです。それでは、上記のコードの具体的な説明をしていきます。

<meta http-equiv="X-UA-Compatible" content="IE=edge">

こちらのタグは、IEの互換表示をオフにする設定です。なぜ互換表示をオフにする必要があるかというと、互換表示をすることでレイアウトが崩れる可能性があるからです。

<meta name="viewport" content="width=device-width, initial-scale=1">

こちらは、スマホ表示時にスマホ幅でのレイアウトを表示させる上で必要なタグです。これを入れなければPC上でブラウザ幅を縮めてスマホ化されても実際にスマホで閲覧するとPC版のレイアウトで表示されてしまいます。

<link href="css/bootstrap.min.css" rel="stylesheet">

こちらは、bootstrapで設定しているcssへのリンクです。bootstrapファイルの階層を確認し、リンク切れが起きないようにしましょう。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

こちらは、jqueryへのリンクです。

グリッドシステムを使おう

Bootstrapではグリッドシステムという、サイトページの横幅を12分割のガイドラインに分ける機能があります。

これはグリッドに合わせて表示したい項目を配置することで、あなたが作成したWebページを見る端末がスマートフォンだったり、パソコンだったりしてもレイアウトを組み替えやすくしてくれる機能です。

こちらが基本的な記述になります。

<div class="container">
  <div class="row">
    <div class="col-lg-2">カラム1コンテンツ</div>
    <div class="col-lg-8">カラム2コンテンツ</div>
    <div class="col-lg-2">カラム3コンテンツ</div>
  </div>
</div>

まず、<div class=”container”>でレスポンシブ表示させたいコンテンツを囲い、その中に<div class=”row”>で1行分囲います。その中に、必要なカラムの数だけ、<div class=”col-lg-n”>を入れます。nには任意の数字を12まで入れることができます。なぜ12までかというと、最大で12カラムまで作成することができるからです。

例えば、<div class=”col-lg-6″>とすると、12の半分が6のため幅50%のボックスができます。<div class=”col-sm-4″>とすると3分の1サイズのボックスができます。

なので上記のコードの例でいうと、まず一番左に6分の1のボックスができ、その次に3分の2のボックスができ、最後に6分の1のボックスが表示されます。

これは、文字として眺めるより、実際に上記のコードを貼り付けて試してみると仕組みを理解できるでしょう。

え、カラム分けがうまくならない?実はBootstrapはブラウザ幅毎に設定ができるんです!

もし、カラム分けがうまくならないかたは、ブラウザ幅を最大にしてください。よほど小さい画面でなければカラム分けされて表示されるのではないでしょうか?

実は、bootstrapは、ブラウザ幅毎に以下の4つのモードがあります。

col-lg-* : 1200px以上
col-md-* : 992px以上、1200px未満
col-sm-* : 768px以上、992px未満
col-xs-* : 768px以下

例えば、<div class=”col-lg-4 col-md-4 col-sm-6 col-xs-12″>と記述すると、PC版では3分の1サイズ、タブレット版では50%サイズ、スマホ版ではフル幅サイズでの表示にすることができます。

各カラムのマージン設定

このカラムに余白を設定したい時は<div class=”col-sm-offset-1″>のように途中にoffsetを設定をすることで余白を設定できます。

col-sm-offset-1のように設定すると、このdivの左側に12分の1サイズの空白が表示されます。

ブラウザ幅によっては非表示にしたい!

「スマホの時はこのコンテンツは表示させたくないな〜」と思うときもありますよね。

例えば、PC用画像とスマホ用画像をそれぞれ作成して、ブラウザ幅によってわけて表示させたい時とかですね。

こういった時は、hidden-xsをclassに追加させると、スマホ時には非表示になります。

<div class="col-md-8 col-lg-6 hidden-xs hidden-sm"></div>
<div class="col-sm-12 col-xs-12 hidden-md hidden-lg"></div>

このように設定をするとタブレット・スマホ時には2行目のコードが表示され、PC環境では1行目のコードが表示されるようになります。

Bootstrapをおすすめする理由

簡単にホームページを作成したいとお考えの方に、なぜBootstrapをオススメするかというと、「レスポンシブWebデザイン」に対応しているからです。

「レスポンシブWebデザイン」とは、上記の解説の通りパソコンやスマートフォン、タブレットなどインターネットを見る端末毎の表示サイズに合わせて、ホームページのレイアウトやデザインを調整する仕組みのことです。

実はこのレスポンシブWebデザイン、通常はそれぞれの端末に合わせてひとつひとつ細かい設定をする必要があるのです。ですが、このBootstrapには「レスポンシブWebデザイン」機能が組み込まれているので、変更する際にもclassを変更するだけなので管理がしやすいのが特徴です。

そのため、実はブートストラップはWordpressのテーマとしてもよく活用されています。

これが、簡単にBootstrapでホームページを作成することができるとおすすめしたい大きなポイントのひとつです。

Bootstrapを使用する際に気を付けたいこと

Bootstrapを使用する際に気を付けたいことがいくつかあります。

クラス名が同じ可能性がある

Bootstrapでは、クラス名=プログラム名毎にスタイルが適用される仕組みになっています。既存にあるデザインを変更する際に、クラス名が同じものだったりすると、Bootstrapを使用すると変更したくない部分まで、Bootstrap仕様になってしまっている場合があります。そんな時は、変更したくない部分がBootstrapスタイルのデザインに採用されていないかを確認することが必要です。

ファイルのサイズ

Bootstrapを使用してホームページを作成する際、サイトに使用するファイルサイズが大きくなってしまいます。従来使用であれば問題なく動作しますが、とにかく高速表示させたい場合はBootstrapを使用したサイトで良いのか?という点を再度確認してから使用することが必要です。

まとめ

Bootstrapを使用するにあたっては、まだ慣れない方であれば、丸々テンプレートをコピーペーストして、ホームページを作成してみましょう。そして、どんな風に表示されているのかを確認してみましょう。

実際に確認してみると、知識がなくてもここまでできてしまったのか?と衝撃を受けたのではないでしょうか?そこから更に、あなた好みのホームページにする為には、プラスしたり、マイナスしたりしながら完成させましょう。

スマホを意識したサイト構築が重要になってきた今、「Bootstrapを使ったことがない!」という方はぜひホームページを制作する際に一度使ってみて下さい!

次回以降、ブートストラップ機能を更に詳しく解説していきたいと思います!


WebJoyで使用しているサーバー情報

合同会社WebJoyでは、エックスサーバーを主に使用しています。その理由はWordpressを運営する上で重要なサーバースペックが高く、かかる費用も安いため個人でのご契約でもおすすめしています。会社経営をする前から約8年間お世話になっているサーバーです。ブログを始めたい方は是非ご契約ください!上記の画像をクリックすることでエックスサーバーの公式サイトに移動します。

この記事を書いた人

長崎のホームページ制作会社 合同会社WebJoy
代表社員 朝永祐太

長崎県にてホームページ制作を行っております。今の時代、Webを活用するためにはブログは必須だと感じ、最近ではブログ集客に力を注ぎ始めました。
実際に当ブログのアクセスを増加させることでよりよい提案ができればと考えております。
そして、近い将来、有益な情報配信を主とした企業を目指しております!

関連記事

2017年12月10日コレで完結!Bootstrapの使い方3
2017年12月07日まだまだ出来ることたくさん!Bootstrapの使い方まとめ その2
2017年01月01日CSSで四則計算!CSS calcの使い方

コメント(ブログサークルアカウントが必要です。)

  • Facebookページ
  • 公式twitterアカウント