読者です 読者をやめる 読者になる 読者になる

水菜巻のメモ的ななにか。

主にLinuxやAndroid、Web関連について書いています。自作アプリや趣味のことも書くかもしれません。The雑食ブログ。

レスポンシブデザインをかじってみた

f:id:miz7maki:20150301013843p:plain

前回から日数が経ってしまいましたが、今回は今つくりなおしているWebサイトについて書いてみます。


最近はWordPressなどのCMS(コンテンツマネージメントシステム)がWebサイト運営の主流になっています。
確かにCMSを使うとブログやWebサイトの管理は簡単、デザインテンプレートなんかも色々な方が有志で作って公開してくれていて自分でWebデザインする必要がないです。
プラグインを利用すればセキュリティやSEOなど、機能面の拡張だって簡単にできてしまいます。

しかし!
一度は触ったことのあるWordPressですが、いちからWebサイト構築するのも結構勉強になるんじゃないかと思うんですよね!
特に最近だとPCとスマートデバイス両方に対応できるWebサイト作り、レスポンシブデザインの知識って身につけておきたいので、いろんなサイトを参考に自分なりにやてみることにしました!

レスポンシブデザインをかじってみた

レスポンシブデザインの手法としてメジャーなものとしては、”メディアクエリ”を利用する方法があります。
メディアクエリとは画面サイズや向きによってCSSを切り替えることができる機能です。CSSのバージョン3から実装されました。

例えば、PCやスマートデバイスからの閲覧を想定した場合、おおまかにPC・タブレット・スマートフォンの3つにCSSを分けるとします。
それぞれの画面サイズの閾値を決めてあげ、そこを超えるとCSSが自動で切り替わるようになります。
今回は以下のように設定しています。

画面サイズ

 769px以上・・・style.css(PC)
 641~768px・・・table.css(タブレット)
 640px以下・・・smart.css(スマートフォン)

HTMLヘッダでCSSファイルの振り分けをする場合は以下のように記述します。

<link rel="stylesheet" media="screen and (min-width: 769px)" type="text/css" href="./css/style.css" />
<link rel="stylesheet" media="screen and (max-width: 768px)" type="text/css" href="./css/tablet.css" />
<link rel="stylesheet" media="screen and (max-width: 640px)" type="text/css" href="./css/smart.css" />


あとは各CSSファイルをいじっていくだけです。
こんな感じになります。

http://andorange.sakura.ne.jp/

ウィンドウサイズを伸ばしたり縮めたりすると表示されるデザインが自動で切り替わります。便利ですね!

メディアクエリを利用したレスポンシブデザインの良いところはデバイスごとにページを作成する必要がないので、先にデザインさえ決めてしまえば、あとはPC、タブレット、スマートフォン兼用の一つのファイルに手を加えていけばOKです!

ある程度はできてきてはいるのですが、今までに何度か大きくデザインを変更しています。
というのはブログ主が結構な面倒くさがり屋なので、ちゃんとしたモックアップ作ってないんですよねw
ノートに思いついたデザインを殴り書きくらいしかしてないです。

趣味程度なのでこれでもいいのですが、できれば先にちゃんとしたモックアップ、ワイヤーフレームは作っておきたいですね!
近いうちにそっち系のお役立ちツールもご紹介しようと思います!

それでは!ヾ( ´ー`)ノ

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)

HTML5&CSS3デザインブック (ステップバイステップ形式でマスターできる)