今後益々スマホからの流入は増えていくと予想されます。そのため、サイトをスマホ対応しておくことは非常に重要です。特に、2015年4月21日からスマホへの対応状況が検索順位に影響されるようになるということで、自サイトをレスポンシブウェブデザインにしようという方も多いのではないでしょうか。
しかし、いきなりレスポンシブウェブデザインにチャレンジするというのは敷居が高いです。そこでおすすめしたいのが、CSSフレームワークを使う方法です。
今回ご紹介するのは、FoundationというCSSフレームワークですが、Foundationはクラスを追加するだけで簡単にレスポンシブ対応のサイトが作れるようになる、枠組みとなるファイル群です。
用意されているファイルを読み込んで要素にクラスを追加することで、クラスに対応したスタイルが適用されるようになるという仕組みです。
簡単ではありますが、そんなFoundationの使い方について解説したいと思います。
ステップ1. Foundationのダウンロード
まずは、Foundationを公式サイトからダウンロードしましょう。公式サイトにアクセスして、[Download Foundation]ボタンをクリックします。現時点(2015/4/18)では、Foundation5が最新版になります。
遷移したページで[Download Everything]をクリックすると、Foundationのファイルがダウンロードされます。
下の方にある「Customize Foundation」では、テーマカラーなどをカスタマイズした状態でダウンロードすることもできます。
ステップ2. ファイルの設置
ダウンロードしたファイルを解凍して、「css」と「js」フォルダをサーバーにアップロードします。
HTMLの<head>～</head>内に以下を追加します。
<link rel="stylesheet" href="css/foundation5/normalize.css"> <link rel="stylesheet" href="css/foundation5/foundation.min.css"> <script src="js/respond.min.js"></script> <script src="js/vendor/custom.modernizr.js"></script> <script src="js/vendor/jquery.js"></script> <script src="js/foundation/foundation.orbit.js"></script>
続いて、</body>の直前に以下を追加します。
<script src="js/foundation.min.js"></script> <script> $(document).foundation(); </script>
これでFoundationを利用する準備が整いました。
ステップ3. HTMLのコーディング
ファイルの設置ができたらコーディングしていくわけですが、まず覚えておかなければいけないのが、Foundationは横のカラム(列)が12分割されている(ファイルをダウンロードする際にカスタマイズしていたらこの限りではありません)という点です。
この12分割されたカラムの中で、何列分の領域を使用するか指定することで、レイアウトを作成していきます。
「large」と「small」というクラスが用意されていて、ざっくりいうとPC表示は「large-カラム数」、スマホは「small-カラム数」というクラスで、各要素の横幅を調整していきます。この時、カラム数の合計が「12」になるように指定します。
例えば、PCの時は3つの要素を横に並べてスマホでは横並びを解除する、といった場合は以下のようにクラスを指定します。PCの時は各要素の横幅が12分の4(3分割)、スマホの時は各要素の横幅が12分の12(横いっぱい)になるという意味になります。
<div class="row"> <div class="large-4 small-12 columns"> </div> <div class="large-4 small-12 columns"> </div> <div class="large-4 small-12 columns"> </div> </div>
全体を「row」で包括し、各要素には「columns」を付与してあげます。これはおまじないだと思って、毎回指定してあげましょう。「row」と「columns」のセットは入れ子にすることも可能です。
少しややこしく感じるかもしれませんが、要はlargeとsmallの数字の合計が12になるように指定してあげる、と覚えておけばOKです。
上記の指定を各要素で繰り返していくことによって、レイアウトを決定していきます。
リストの横並び
リストを横並びで配置したい場合は、inline-listクラスを指定します。
<ul class="inline-list"> <li><a href="index.html">ホーム</a></li> <li><a href="service.html">サービス</a></li> <li><a href="shop.html">店舗情報</a></li> <li><a href="company.html">会社概要</a></li> <li><a href="joboffer.html">求人情報</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul>
よくあるナビゲーションメニューのように、横いっぱいの中に均等にリストを配置したい場合は、block-gridクラスを使います。
<ul class="large-block-grid-6 small-block-grid-1"> <li><a href="index.html">ホーム</a></li> <li><a href="service.html">サービス</a></li> <li><a href="shop.html">店舗情報</a></li> <li><a href="company.html">会社概要</a></li> <li><a href="joboffer.html">求人情報</a></li> <li><a href="contact.html">お問い合わせ</a></li> </ul>
こちらは、6つのメニューを横に並べている例です。メニューの数に応じて、large-block-grid-6の数字を変更してください。スマホの時は1つのメニューが横いっぱいに広がり縦に並びます。
パンくずリスト
パンくずリストを設置したい場合は、breadcrumbsクラスを追加します。
<ul class="breadcrumbs"> <li><a href="#">Home</a></li> <li><a href="#">Features</a></li> <li class="unavailable"><a href="#">Gene Splicing</a></li> <li class="current"><a href="#">Cloning</a></li> </ul> <!-- 以下でもOK --> <nav class="breadcrumbs"><a href="#">Home</a> <a href="#">Features</a> <a class="unavailable" href="#">Gene Splicing</a> <a class="current" href="#">Cloning</a> </nav>
ulとnavの両方に対応しています。
ボタン
ボタンは、要素にbuttonクラスをつけるだけでOKです。
<a href="#" class="button">Button</a>
パネル
要素に背景色と枠をつけて目立たせたい時は、panelクラスを追加します。
<div class="panel"> <h5>This is a regular panel.</h5> <p>It has an easy to override visual style, and is appropriately subdued.</p> </div>
デフォルトでは背景色がグレーですが、calloutクラスを追加するとブルーになります。また、radiusクラスを追加することで、角丸にすることも可能です。
<div class="panel callout radius"> <h5>This is a callout panel.</h5> <p>It's a little ostentatious, but useful for important content.</p> </div>
スライドショー
スライドショーを設置する場合、全体を包括する要素にdata-orbit属性を追加し、その中に各スライド画像をマークアップします。
<ul class="example-orbit" data-orbit> <li> <img src="../assets/img/examples/satelite-orbit.jpg" alt="slide 1"> <div class="orbit-caption"> Caption One. </div> </li> <li class="active"> <img src="../assets/img/examples/andromeda-orbit.jpg" alt="slide 2"> <div class="orbit-caption"> Caption Two. </div> </li> <li> <img src="../assets/img/examples/launch-orbit.jpg" alt="slide 3"> <div class="orbit-caption"> Caption Three. </div> </li> </ul>
スライド画像をマークアップしたら、スライドショーを動かすために</body>の直前に以下を追加してあげます。
$(document).foundation({
orbit: {
animation: 'slide', // Sets the type of animation used for transitioning between slides, can also be 'fade'
timer_speed: 10000, // Sets the amount of time in milliseconds before transitioning a slide
pause_on_hover: true, // Pauses on the current slide while hovering
resume_on_mouseout: false, // If pause on hover is set to true, this setting resumes playback after mousing out of slide
next_on_click: true, // Advance to next slide on click
animation_speed: 500, // Sets the amount of time in milliseconds the transition between slides will last
stack_on_small: false,
navigation_arrows: true,
slide_number: true,
slide_number_text: 'of',
container_class: 'orbit-container',
stack_on_small_class: 'orbit-stack-on-small',
next_class: 'orbit-next', // Class name given to the next button
prev_class: 'orbit-prev', // Class name given to the previous button
timer_container_class: 'orbit-timer', // Class name given to the timer
timer_paused_class: 'paused', // Class name given to the paused button
timer_progress_class: 'orbit-progress', // Class name given to the progress bar
slides_container_class: 'orbit-slides-container', // Class name given to the slide container
preloader_class: 'preloader', // Class given to the perloader
slide_selector: 'li', // Default is '*' which selects all children under the container
bullets_container_class: 'orbit-bullets',
bullets_active_class: 'active', // Class name given to the active bullet
slide_number_class: 'orbit-slide-number', // Class name given to the slide number
caption_class: 'orbit-caption', // Class name given to the caption
active_slide_class: 'active', // Class name given to the active slide
orbit_transition_class: 'orbit-transitioning',
bullets: true, // Does the slider have bullets visible?
circular: true, // Does the slider should go to the first slide after showing the last?
timer: true, // Does the slider have a timer active? Setting to false disables the timer.
variable_height: false, // Does the slider have variable height content?
swipe: true,
before_slide_change: noop, // Execute a function before the slide changes
after_slide_change: noop // Execute a function after the slide changes
}
});
標準でスライドショーまで準備されているというのはありがたいですね。
ここまで、よく使いそうなものを紹介させていただきました。その他については、Foundationのドキュメントに掲載されているので、一度目を通してみてください。英語のドキュメントですが、わかりやすくまとめられています。
スクロール追尾型の上部固定ナビゲーション
まずナビゲーションを設置するのに必要なコードが以下になります。
<nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"></li> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <section class="top-bar-section"> <ul> <li><a href="#">Menu01</a></li> <li><a href="#">Menu02</a></li> <li><a href="#">Menu03</a></li> </ul> </section> </nav>
top-barでナビゲーションの領域を指定し、data-topbar属性を一緒に入れます。
nameにはサイト名やロゴなどを入れて、toggle-topbarのところにはメニューボタンが表示されます。
ナビゲーションをヘッダーに固定して、スクロールに追尾させる場合は、以下のようにナビゲーション全体をfixedで内包します。
<div class="contain-to-grid fixed"> <nav class="top-bar" data-topbar> <ul class="title-area"> <li class="name"></li> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <section class="top-bar-section"> <ul> <li><a href="#">Menu01</a></li> <li><a href="#">Menu02</a></li> <li><a href="#">Menu03</a></li> </ul> </section> </nav> </div>
fixedと一緒にcontain-to-gridを指定することで、横幅を自動で調整してくれます。
スクロールの途中からナビゲーションが追尾するようにするには、fixedの代わりにstickyを指定します。
<div class="contain-to-grid sticky"> <nav class="top-bar" data-topbar data-options="sticky_on: medium"> <ul class="title-area"> <li class="name"></li> <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li> </ul> <section class="top-bar-section"> <ul> <li><a href="#">Menu01</a></li> <li><a href="#">Menu02</a></li> <li><a href="#">Menu03</a></li> </ul> </section> </nav> </div>
「data-options=”sticky_on: medium”」を追加すると、small・medium・largeの中から固定ナビゲーションのサイズを指定することができます。サイズの指定が必要ない場合は、この属性は削除してください。
IE8以下に対応させる方法
Foundation5は、Internet Explorer 8(IE8)以下のバージョンに対応していません。そのため、Foundation5を使って作成したサイトを、IE8で表示させるとガッタガタになっています。
IE8以下にも対応させたい場合は、Foundation3を利用します。IE8以下ではFoundation3を読み込ませ、IE9以上ではFoundation5を読み込ませるようにします。
Foundation3はこちらからダウンロードできます。ファイルをダウンロードしたら、「stylesheets」フォルダ内にあるfoundation.min.cssとapp.cssをサーバーにアップします。
ファイルをサーバーに設置したら、<head>～</head>内に以下を記述しましょう。
<!--[if lt IE 9]> <link rel="stylesheet" href="css/foundation3/foundation.min.css" /> <link rel="stylesheet" href="css/foundation3/app.css" /> <![endif]--> <!--[if gt IE 8]><!--> <link rel="stylesheet" href="css/foundation5/normalize.css" /> <link rel="stylesheet" href="css/foundation5/foundation.min.css" /> <!--<![endif]-->
ファイルパスは、適宜変更してください。
上記を記述することで、IE8以下ではFoundation3が、IE9以上ではFoundation5が読み込まれるようになります。
あとがき
この記事を書いている時点で、すでにGoogleのアルゴリズム変更まで期間がありませんが、CSSフレームワークを活用すれば、1日かからずにスマホ対応させることも可能だと思います。
Googleのアルゴリズム関係なくスマホ対応は大事なことなので、これを機にFoundationを活用して、レスポンシブなWEBサイト制作にチャレンジしてみてはいかがでしょうか。