自分のブログサイトをWordpressで作成してはや数ヶ月。ブログ自体は更新していたものの、WordPressサイトの作り方、ということで記事にまとめたのを最後に、ブログ自体のレイアウトなど中身の更新はしていませんでした。

そんな中、9月に入って以降仕事でウェブサイトを作ったり編集したりということが多くなり、まさしく趣味が実益を兼ね始めました。おかげさまで自分の知識と技術が飛躍的に上がったので、せっかくなので取得した技術を自分のサイトにも反映させよう、と思い最近になっていろいろとサイトをいじっていました。仕事でがっつり編集をやらせてもらったおかげで、レスポンブ対応やBootstrapを使用したグリッドシステム、マウスホバーによるズームイン・アウトなど、ブログ運営だけやっていたら得られていなかった知識を得ることが出来ました。

そんな中から、今回はグリッドシステムについて説明して行きたいと思います。仕事で作ったレイアウトにプラスαで色んなエフェクトを突っ込んだこのグリッド。

 

レイアウトというより、写真のおかげで見栄えがよくなっている気がしますが、”今風”の色んなサイトのレイアウトがどんな構成で出来ているのか、今回の勉強である程度分かってきたような気がします。グリッドレイアウトを導入する手っ取り早い方法はBootstrapというフレームワークをサイトに導入すること。そもそもフレームワークってなんじゃい、って自分がBootstrapを知ったのは実際にレスポンシブなサイトを仕事で作ったからですが、知ってしまえば仕組みは簡単。Bootstrapのグリッドレイアウトは多くのサイトで解説されているので今回は割愛しますが、備忘録も兼ねて導入方法だけは書いておきます。

もくじ

1. Bootstrapの導入
2. グリッドレイアウトの作成
3. CSS紹介
4. CSS基礎編：各種装飾設定　※別ページ
   1. CSS応用編: ホバーエフェクト　※別ページ
   2. jQuery練習: スクロールエフェクト　※別ページ

Bootstrapの導入

導入にもいくつかの方法がありますが、自分の場合はファイルをダウンロードしてサーバーに配置して読み込ませることにしました。まずはこちらのサイトから最新版パッケージをダウンロード：

Bootstrap
http://getbootstrap.com

パッケージをダウンロードしたら、サーバーにアップロードします。自分の場合はCyberduckを使って使用中のWordpressの親テーマフォルダにアップロードしました。

上から3番目がアップロードしたフォルダです。次にこのフォルダ内のファイルを呼び出せるようにheader.phpのheadタグ内に下記のように追記します。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/bootstrap/css/bootstrap.min.css">

href内はフォルダの場所を指しているので運営しているサイトによって異なるかと思います。さて、これでグリッド表示の準備が出来たので早速グリッド表示のコンテンツを作成していきます。

グリッドレイアウトの作成

今回は上のように日本の文化を紹介するようなページのコンテンツという前提で作成しました。クリックすると対応したページに飛ぶ前提ですが、今回はリンクは#で設定しています。Bootstrapを応用したタグの構成は調べればすぐに分かりますがざっくり説明するとcontainerクラスで全体を囲い、その中にrowクラスを入れ子にし、さらにその中にカラムと呼ばれる12列に分かれたグリッドにコンテンツを割り振っていく形になります。このカラムを分ける際のクラスの設定がBootstrapを使ったレスポンシブ対応の”肝”かと思います。カラムは画面の大きさによって可変するようになっており、今回は画面の大きさによって下のように変形するように設定しました。

Small ／ 画面幅 小（576px以上 768px未満）

Medium ／ 画面幅 中 （768px以上 992px未満）

large ／ 画面幅 大 （992px以上 1200px未満）

カラム、つまり列の設定を行えば画面の幅に応じて表示の方法を変えることが出来ます。今回作成したグリッドを簡略化した下のグリッドで説明していきます。コンテンツは入れていませんがレスポンシブ対応するので画面の幅に応じてレイアウトが変わります。

縦長、真四角、横長、のシンプルなグリッド

 

コード

<div class="container" style="margin-bottom: 24px">
  <div class="row">
    <div class="blog-post col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-a" style="background-color: #ffffff"></div>
    </div>
    <div class="blog-post col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-b" style="background-color: #bfbfbf"></div>
    </div>
    <div class="blog-post col-md-4 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-c" style="background-color: #7f7f7f"></div>
    </div>
    <div class="blog-post col-md-8 col-sm-6 col-xs-12" style="margin-bottom: 0px">
      <div class="sample-d" style="background-color: #3f3f3f"></div>
    </div>
  </div>
</div>

色別に振り分けたクラス名

sample-asample-bsample-csample-d

書かれているコード群の中で、カラムの設定を行っているのはcol-xx-yyという名前のクラスです。xxの部分が画面の大きさを指しており、yyの部分の数字が12分割になっているカラムの何割を占めるかを指しています。例えば一つ目のコンテンツ（sample-a）は、画面幅　小では12/12、画面幅　中では6/12、画面幅　大では4/12となっています。上の画像と比較すると分かりやすいかと思います。

CSS紹介

今回は色々と試した中で、画面幅　大で表示されているような縦が長いコンテンツと小さいコンテンツが混ざった場合のレイアウトを考えた場合どのような設定になるのかを検証してみました。試行錯誤の結果うまく配置できたので、この設定に用いたCSSを紹介していきます。まずはこの二つ：

.blog-post {
    padding: 0px;
    float: left;
}

.container .row {
    display: block;
}

.rowのdisplayはデフォルトではflexになっていますが、これだと2列目のコンテンツがうまく回り込まず、上のグリッドの例でいうとsample-aコンテンツの下に回ってしまいます。これでも良い場合もありますが、今回は回り込ませたいので.rowのdisplayをblockに変更（子テーマで上書き）します。displayをblockにしただけだとコンテンツが全て縦一列に並んでしまうので、それを避けるためにコンテンツごとにfloat:leftのプロパティを与えています。これにより横に並びつつ、空いたスペースにうまく回り込んでくれます。

高さ設定

次に、コンテンツのサイズの設定です。幅は各種colクラスで設定されておりますが高さが未設定なので、まずは高さを設定します。モバイルやタブレットで見てもサイズが可変するようにうまく設定するにはpxで設定するよりも%などで設定した方がよいだろうと色々と検索してみると、やはりやり方がありました。高さはこの時点では0なので、colで幅を設定した要素の子要素にpadding-top=**%として任意の数値を入れます。padding-topは

という計算式で成り立っているので、高さを設定するには親要素の横幅に対して何%の高さにしたいかを設定すればよいということになります。上の式を組み替えると分かりやすくなるかもしれません：

とりあえず、PCの画面での表示ではsample-a項目が幅に対して2倍の高さ、sample-b、sample-c項目が1:1の比率、sample-d項目は幅に対して1/2の高さです。これを設定するには、colクラスの子要素に対して下記のように数値を入れました：

.sample-b, .sample-c {
    padding-top: 100%;
}

.sample-a {
    padding-top: 200%;
 } 

.sample-d {
    padding-top: 50%;
 }

レスポンシブ設定

ここまでの設定でPC表示は問題ないのですが、このままだとタブレットやスマホの表示でレイアウトが崩れます。それを防ぐために、画面幅に応じてレイアウトが変わるようにCSSに追記します。BootstrapのV4では

• col-mdがタブレットなど画面幅768px以上の端末
• col-smがファブレットなど画面幅576px以上の端末
• col-xsがスマートフォンなど画面幅576px未満の端末

というように定義されているようです。今回のグリッドは上記3種類で異なる表示がされるように設定しておりますが、幅は勝手に可変するのでここでは高さを調整します。col-xsで高さ50%の細長いコンテンツが縦一列に並ぶよう、画面幅最大575pxまでは高さ50%、col-smでは真四角のコンテンツが2 x 2のレイアウトで表示されるよう、幅と高さが同じになるよう画面幅最大767pxまでは高さ100%になるよう設定します。書いたコードは以下の通りです：

@media screen and (max-width:767px) {
.sample-d, .sample-b, .sample-a, .sample-c {
    padding-top: 100%;
 }
}

@media screen and (max-width:575px) {
.sample-a, .sample-d, .sample-b, .sample-c {
    padding-top: 50%;
 }
}

ここまで設定できれば、グリッドレイアウトでコンテンツを用意する準備が出来ました。別記事にて、今回組み込んだコンテンツのコードなど備忘録を兼ねて紹介していきたいと思います。