モックアップ作成 – レスポンシブWebデザインの下準備

今日は Sass の mixin(ミックスイン)という機能を使って、現在作成中のモックアップをレスポンシブWebデザイン対応にさせる準備をしたいと思います。

レスポンシブWebデザインとは

レスポンシブWebデザインというのは、ある単一のHTMLファイルに対し、それを表示する機器(デバイス)の種類やサイズに応じた「最適化されたデザイン」を出力する手法のことです。

一般的には CSS3 の Media Queries(メディアクエリ)を使って画面のサイズ(スクリーンサイズ)に応じたスタイルを定義することで、いろいろなデバイスに対応させることになります。

以下はメディアクエリの記述の一例です。

Sassのmixin(ミックスイン)とは

mixin(ミックスイン)というのは、スタイルシートのプロパティやセレクタをまとめてワンセットにして定義しておくことで、それらを簡単にインクルード(読み込む)することができるSassの機能です。

例えば、次のようなmixinを定義したとき、

SCSSファイルに以下のように記述してコンパイルすると・・・・

次のようなCSSが出力されます。

よく使うスタイルシートの記述は、あらかじめmixinで定義しておくと書く手間を大幅に省くことができて便利です。

レスポンシブWebデザイン用のmixinを定義する

それでは早速、レスポンシブWebデザイン対応のためのメディアクエリの記述をmixinに定義したいと思います。

先日作ったモックアップ用のフォルダ内の「_sass」フォルダの下に _mixin.scss ファイルを追加します。

mixin for responsive web design.

_mixin.scss では以下のようにmixinを定義します。

なお、先頭に「_(アンダーバー)」が付くSCSSファイルは partial(パーシャル)と呼ばれます。

partial はコンパイルしてもCSSファイルには変換されないため、記述した内容を出力するには「_(アンダーバー)」の付かないメインのSCSSファイルから読み込む必要があります。

今回の場合は style.scss から読み込むようにしています(記述方法は以下)。

 

このmixinを使うには、SCSSファイルに次のような記述を追加します。

これをコンパイルすると、以下のようなスタイルシートが出力されます。

次回からはこのmixinを使って、レスポンシブWebデザイン対応のスタイルシートを書いていきます。

モックアップ作成 – ブラウザ標準のスタイルをリセット

スタイルシートを作り込むにあたり、まずは各ブラウザのデフォルトスタイルをリセットします。

ブラウザのデフォルトスタイルとは

各ブラウザ(IE、FireFox、Chrome、safari等)は、HTMLのタグ毎にデフォルトスタイルというものをそれぞれ独自に持っており、同じHTMLファイルをブラウザで表示してもその見た目はブラウザごとに異なってしまいます。

例えば先日作った single.html を Safari で表示すると以下のようになりますが、

on Safari

同じファイルを IE11 で表示すると次のようになってしまいます。

on IE10

一見変化がないように見えるかもしれませんが

  • フォントや文字の大きさ
  • 行間の幅
  • 字間の幅
  • ウィンドウ内の余白
  • フォーム(ボタンやテキストボックス)のスタイル

などはブラウザによって微妙に違うので、スタイルシートで細かくデザインを作り込むうえではかなり悩ましいことになります。

これを極力回避するため、スタイルシートを記述していく際には事前にリセット用のスタイルシートを読み込み、ブラウザ間の差異を一旦リセットしておく必要があるというわけです。

Compassでリセット用のスタイルシートを書く

このリセット用スタイルシートについてはネット上に様々な書式のものが公開されています(以下はその一例)。

ただ今回は、せっかく Sass & Compass を導入しているので、Compassで提供されているリセット用CSSを使うことにしようと思います。

というわけで早速、style.scss を以下のように編集します。

import compass/reset

「@import “compass/reset”;」をSCSSファイルに記述することで、Compassが提供しているリセット用スタイルシートを挿入することができます。

Sublime Text3で「Command + b」キーをクリックして style.scss から style.css を生成します。

開くと以下のような記述が追加されています。

なお、上記のコードのうち「/*」と「*/」で囲まれたコメント部分にはこれから作るWordPressテーマの基本情報を書くことになっています。どんなことを書くかについては、後日詳しく説明する予定です。

このスタイルシートを読み込んでいる single.html をブラウザで開くと・・・

reseted html on Safari

また、IE11で開いた場合は・・・

reseted html on IE11

こんな感じにブラウザの独自スタイル(文字の大きさ、余白など)がリセットされているのがわかります。

 

次回はさらに Sass & Compass を使ってスタイルシートを記述していこうと思います。

Sublime Text3 + Sass & Compass でスタイルシートを編集する

前回はサイトの共通分のHTMLコーディングをおこないました。

今後はこのHTMLに対してスタイルシートを適用していくことでIllustrator で作ったデザインに近づけていく予定ですが、その下準備として、まずは Sublime Text3 を使ったスタイルシートの編集環境(Sass & Compass の利用環境)をつくってみたいと思います。

Sass および Compass について

Sass(Syntactically Awesome Style Sheets)とは、スタイルシートを効率良く記述するために開発されたメタ言語のこと。
長くなりがちなスタイルシートの記述を圧縮できたり、関数などを使用してよりわかりやすく、管理しやすいスタイルシートが書けるようになるという便利な代物です。

そして Compass というのは、Sass をさらに使いやすくするための拡張機能のことです。

※ Sass & Compass については以下のページを参考になるかと思います。

Sass および Compass をインストールして Sublime Text3 から使えるようにする

そんなわけで、以下のページを参考にしてSublime Text3 を使った Sass & Compass の利用環境をつくります。

 

モックアップ用HTMLのフォルダ構成

以上の手順で Sass & Compass を Sublime Text3 経由で使えるようになりました。

これによりモックアップ用HTMLのフォルダ構成(および Sass & Compass の設定ファイル config.rb)は以下のようになっています。

Sublime Text3 + Sass & Compass

 

agito-labs フォルダの下に _sass フォルダを作り、その中に style.scss という名前のSCSSファイルを格納。

これを Sublime Text3 経由でコンパイルすると、agito-labs フォルダの直下に style.css という名前のスタイルシートファイルが生成される仕組みにしています。

 

次回以降はこの環境を使ってスタイルシートを記述していこうと思います。