FIKA.Blog

Bootstrapを使ったサイト製作

BootstrapとWordPressを利用してブログサイトを作りました。
コーディングからサイト公開までの流れを、何回かに分けて記事にしようと思います。
今回は第一回として、Bootstrapを使ったサイト制作のについて書きます。
※執筆時点で Bootstrap v4.1.1です。

    もくじ

  1. Bootstrapを取り入れる
  2. グリッドシステムを利用したレスポンシブデザイン
  3. フォントの修正

1.Bootstrapを取り入れる

Bootstrapはサイトのレイアウトや一部デザインを補助してくれる「CSSフレームワーク」です。
取り入れることによって、手軽にホームページを作ることができます。

公式ページ「Get started」の「Starter template」をコピーして、HTMLファイルとして保存し、言語を日本語に変えます。<html lang="ja">これだけでBootstrapの便利なコードを利用することができます。

サイト内にフレームワークを利用するためのサンプルコードがあります。
それをコピー&ペーストして、大体のレイアウトを仕上げました。

image

デザインを変更するには、あらかじめ用意されたCSSに上書きしていく形になります。
カスタマイズ用のCSSファイル(style.css)を作り、<head>内のBootstrapCSSのリンクの下に記載しました。

<link rel="stylesheet" type="text/css" href="css/custom.css">

後ほどWordPressに移管することを前提としているので、この段階では「型」を仕上げることを目的とします。
内容は後で作るとして、リンクや画像は仮のものを使いました。

<img src="gray.jpg" class="img-fluid" alt="#">
<a href="#">リンク</a></kbd>

2.グリッドシステムを利用したレスポンシブデザイン


images

Bootstrapのグリッドシステム(画面を12列のカラムで構成したもの)を利用すると、簡単にサイトをレスポンシブ化することができます。
全体を.container(コンテナ)で囲み、.row(ロー).col(カラム)のなかにコンテンツを配置するというのが基本的なルールです。

<div class="container">
    <div class="row">
      <div class="col">
        <p>A</p>
      </div>
      <div class="col">
        <p>B</p>
      </div>
    </div>
  </div><!-- //container -->

画面の大きさによって列数を変えるときは、「col-(大きさ)-(列数)」と表記します。

Extra small
576px未満
Small
576px以上
Medium
768px以上
Large
992px以上
Extra large
1200px以上
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-

今回はメインの記事を.col-sm-9、サイドバーを.col-sm-3で囲みました。PCサイズでは記事が9列、サイドバーが3列分になっています。画面がスモールサイズ(576px〜767px)以下になるとグリッドシステムが解除され、サイドバーがブログ記事の下に移ります。

image

3.フォントの修正

fontimage

デザイン面で気になるのが文字部分です。
全体に適用されるfont-familyを次のようにしました。

body {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

Mac優先でシンプルな組み合わせになっています。「-apple-system」、「BlinkMacSystemFont」の2つはMacのシステムフォント「San Francisco」が適用されます。
日本語はシンプルで読みやすい「ヒラギノ」、Windows標準の「メイリオ」です。

代わりにMacとWindows共通で使用できる「游ゴシック(YuGothic,”Yu Gothic”)を使うと、柔らかい印象になります。ただ「游ゴシック」はカーニングや文字幅にややクセがあるため、今回は「ヒラギノ」を選びました。

font

フォントファミリーのルール

-apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;

左から英語日本語、最後に総称フォント(今回はsans-serif: ゴシック体)の順になります。
日本語フォントを一番前に置くと、アルファベットにも日本語のフォントが適用されます。
半角スペースの入った書体はクオーテーション(‘)(“)で囲みます。

日本語と英語の大きさが気になる

fontsize

紙のデザインでは、日本語と英語で異なる書体や大きさを自由に組み合わせた「合成フォント」を作ることがあります。
ただそれをOSやブラウザによって表示が変わる、Web上で表現するのは難しいです。
そこで、一番目立つ<h1>タグのタイトルだけ調整することにしました。

<h1><span class="eng">Bootstrap</span><span class="jap">を使ったサイト製作</span></h1>

英語の方が小さく、字間が詰まって見えるのでfont-sizeletter-spacingを次のようにしました。

.jap{
  font-size: 92%;
  letter-spacing: 0.03em;
}
.eng{
  font-size: 102%;
  letter-spacing: 0.06em;
}

ここまでで大まかなサイトの「型」が出来上がりました。次回以降は、もう少し細かなコンテンツについて説明します。

参考書籍

Bootstrap4ファーストガイド―CSS設計の手間を大幅に削減!

Bootstrapの概要が一通り理解できるようになっています。ネット上である程度検索&解決できてしまいますが、まず書籍から入ると体系的に理解できると思います。ただ、バージョンによってコードの記述が違うので最新のものかどうかお確かめください。(2018.06時点でv4.1.1)
※書籍の中に「フォントの修正」に関する記載はありません。

« »
Scroll Up