2016年05月25日

サイトをレスポンシブデザインにした

ブログをMiddleman化してからやり残していたことに、「サイトのレスポンシブデザイン化」があった。
さすがにこれだけスマホが台頭してきた現代においてスマホ対応は必須なので、レスポンシブ化について調べてやってみました。

レスポンシブ化に必要なこと

調べてみると結構簡単だった。

  1. ビューポートの設定
  2. 画面が狭い場合のCSSを書く(ほぼコピペ)

これだけ。
ビューポートが何なのかはよくわかんないけど、単純に「表示領域」ってことらしい。
以下のコードをHTMLのHEAD内に定義しました。

HTML

<meta name="viewport" content="width=device-width,initial-scale=1">

Haml

%meta{ name: "viewport", content: "width=device-width, initial-scale=1" }

そしてCSSは

CSS

@media screen and ( max-width:500px ) { ここにスマホで見た時のデザインを書く }

こんな感じ。
スマホ版cssはPCのcssのほぼコピペしました。

興味がある方はブラウザの検証機能使って見てみてください。

導入10分!簡単!
(とりあえず見られるようにしただけなので、細かい修正はまた今度!)