Simple Journal – PC向けの HTML+CSS を作成

今回はPC向けのスタイルを作成してみました(画像をクリックでHTMLを表示します)。

Webブラウザの横幅を大きくすると、文字の大きさや余白の広さ、コメントのレイアウトなどが変わります。

 

トップページ

IndexPage for PC

投稿ページ

SinglePage for PC

 

もっと作り込んでもいいのですが、それはおいおいということで・・・(^ ^;

次回からWordPressテーマ用のテンプレートファイルの実装に入りたいと思います。

Simple Journal – スマートフォン向けの HTML+CSS を作成

今回はテーマのベースとなる HTML + CSS を作成してみました(画像をクリックでHTMLを表示します)。

今のところCSSはスマートフォン向けのみに対応。

 

トップページ

IndexPage

投稿ページ

HTML要素のスタイリングもひととおり完了しています(日本語ばかりになったときのスタイリングにはあまり自信がないかもしれません・・・)。

SinglePage

次回はPC向けのCSSも追記し、レスポンシブWEBデザインに対応しようと思います。

モックアップ作成 – レスポンシブ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デザイン対応のスタイルシートを書いていきます。