ウェブデザイナー、
子育てとフリーランス

ブログをレスポンシブにリニューアル 覚書

AD

このブログ「Webデザイナーとして働くワーキングマザーの日記」をデザインはそのままに、レスポンシブに修正してみました。
ちょっと時間ができたので、勉強ついでに。
単純なレイアウトなので特に苦労もありませんでしたが、その作業の覚書です。

ブレークポイント

ブレークポイントは、480pxと768pxの2段階で設定。
スマートフォン:480pxまで
タブレット:768pxまで
PC:768px以上

手順

1.HTML4からHTML5へ修正

以前のエントリー「HTML5へのリニューアル 覚書」を参考に、HTMLのマークアップを修正。

2.viewport

HTMLのheader内にviewportを追記。

[html]
<meta name="viewport" content="width=device-width, initial-scale=1">
[/html]

width=device-width:横幅はデバイスのサイズ
initial-scale=1:倍率は1

3.メディアクエリ

CSS側でメディアクエリを設定。
まずスマートフォン用のCSSを記述(モバイルファースト)。
その次にタブレット、最後にPC用という順に記述することで、モバイルではPC用などの余分なCSSを読み込まなくてもよくなる。

[html]
@media only screen and (min-width: 481px){
}
[/html]

4.IE8以下への対応

Respond.jsを読み込む。
参照:https://github.com/scottjehl/Respond

検証

Firefoxの新機能「レスポンシブデザインビュー」が便利。
ツールバーより、ツール>Web開発>レスポンシブデザインビューを選択。
プラグイン無しで、各大きさに自動的にリサイズしてくれる。

参考

Web Designing (ウェブデザイニング) 2012年 10月号 [雑誌]

最後に

以前、下記の記事を拝見して、レスポンシブのコーディングはちゃんと勉強してからお請けしないといけないなと思いました。
参照:ゆめいろデザインさん「1年間、レスポンシブWEBデザインのウェブサイト案件を制作してみて思ったこと
今回は自分のブログで、スマートフォン用にと言っても単にメニューをカラム落ちさせただけなので、なーんのトラブルもなくできましたが、 やっぱりクライアントワークとなると違うだろうなと。
デザインもCSS3で表現するとか、色んなJsと組み合わせてみるとか、実際に自分でやってつまずいてようやく気付くこともあるのかなあと。

単純な疑問なんですが、レスポンシブのデザインをする場合って、最初のデザインカンプはPC用で作って、スマフォやタブレット用はコーディングベースで確認するんですかね?
全てのサイズのデザインをjpgでFIXしてからコーディング、ってのもなかなか難しかったりするんじゃないかなあと思ったりしています。

フリーランス Webデザイナー 大阪 kunugi design

kunugi design

大阪府在住、フリーランスのWebデザイナー kunugi designと申します。
Webデザイン歴20数年。読書・映画・音楽・お笑い好き。趣味はミシンで服作り。2人の女児を育てる母親です。

https://kunugi-design.jp

AD

“ブログをレスポンシブにリニューアル 覚書” への2件のフィードバック

  1. テスト より:

    コメントのテスト

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Trackback

同じカテゴリーの記事

美容院・美容室のWebデザイン まとめ

CSS Nite in Kobe, vol.53

CSS Nite in Kobe「XDで作るワイヤーフレーム」セミナーに行きました

kunugi design 2度目のリニューアル

Blog Design Archiveに掲載して頂きました

pick up

自分で作った服を着る

Webデザイン

未経験でWebデザイナーになること

フリーランス 二人目の保活

保育園の保護者会会長になった話

tag

archive