Stinger3から乗り換えずにStinger5のメリットを取り入れよう

レスポンシブデザインの魅力

ブログデザインの骨格でもあるテーマ。このブログは開設当初からStinger3を使用していますが、Stinger5がリリースされたことで乗り換えようか迷っています。

Stinger5の特徴の1つはレスポンシブデザイン。

レスポンシブデザインとは、Webデザインの手法の一つで、様々な種類の機器や画面サイズに単一のファイルで対応すること。

——e-Words

通常は、それぞれのデバイスに最適化するよう複数のHTMLファイルやCSSファイルを用意します。最近ではタブレットやスマートフォンの機種が増えてきたので、それぞれのデバイスに合わせてファイルを容易するのは大変。そこで登場するのがレスポンシブデザイン。ファイル1つに画面サイズ別に記述することで、管理がとても簡単になるのです。

Stinger3の場合、CSSは2つあり、モバイルとパソコンで分かれていますが、Stinger5だとCSS1つでまとめられています。

Stinger3にレスポンシブデザインを取り入れてみよう

レスポンシブデザインはCSSに条件を記載するだけで簡単に採用することができます。振り分けにはMedia Queriesというものが使われています。

構造についてはこちらの記事が参考になります。

Stinger5カスタマイズ！どこがどのデバイスに対応？「style.css」徹底分析！

最新版のStinger5はどのデバイスから見ても見た目が自動で最適化される…

記述はシンプル。以下のコードにMax widthやMin widthの大きさを指定すると、その記述下の領域のスタイルが適用されます。

@media only screen and (max-width: ◯◯◯ px)
@media only screen and (min-width: ◯◯◯ px)

このブログの場合、記事下の人気記事の表示をスマートフォンのサイズ別で調整しています。

例えばiPhone4sや5の場合、人気記事は2つ並びになっています。

こちらはiPhone6での表示。記事が3つ並ぶように調整しました。

そしてこちらがiPhone6 Plus。記事数3つは変わりませんが、余白ができないよう記事のサムネイルの大きさを大きくしました。

smart.cssの表記で、通常のデザインの他以下の2つのコードで調整しています。

@media only screen and (min-width:367px) and (max-width:410px)
@media only screen and (min-width:411px) and (max-width:415px)

iPhone5のDevice Widthは320px、iPhone6は375px、iPhone6 Plusは414pxなので、それぞれ表示がわかれるようにしました。

レイアウトのずれで気になったところは今のところここぐらいなので、今後も主要デバイスに合わせて色々と調整していきたいと思います。もしブログで特定のスマホユーザーが多ければ、そちらを優先してデザインレイアウトを考えていくことをおすすめします。

ひとこと

長期的に考えれば、全部レスポンシブを採用した方がいいんだけど、とりあえず応急処置。

合わせてこちらもどうぞ：

スマートフォンのためのUIデザイン ユーザー体験に大切なルールとパターン

posted with カエレバ

池田 拓司 ソフトバンククリエイティブ 2013-03-30

Amazon

楽天市場