えいにっくのデザスク

えいにっくのデザスクグラフィック/WEBデザイナーのライフスタイル・デザイン情報ブログ

一から始める初心者の為のレスポンシブWEBデザインの具体的な作成方法!

Pocket

PCとスマホサイトが一つのファイルで管理できるレスポンシブデザイン。

かなり主流になってますよね。

 

今回仕事でレスポンシブサイトを作成する機会がありました。

初めてなんですけど。 現在boostrap等のフレームワークもたくさんありますが、今回は初めてという事もあり一から作成してみました。

 

それではレスポンシブデザインの作成方法についてご紹介していきます。

スポンサードリンク

 

レイアウト

まずはレイアウトを考えます。

CSSで幅を指定する際は全て%指定で記述していきます。

 

%意外のpx等で指定すると、ブラウザサイズが可変する際にレイアウトが変わってしまいます。

まずはこちらの図をご覧下さい。

 

responsive

 

これはPC〜タブレット端末を想定したレイアウトです。

 

 

次にスマホを想定したレイアウトです。

 

responsive2

 

PC〜タブレット端末の場合は横並びでブロックを組みますが、スマホの場合、基本的には縦並びになります。    

 

 

float:leftで組む

レスポンシブデザインでは「グリッドレイアウト」という言葉をよく耳にします。

全ての幅を100%とした際の各要素のブロックを%で計算して、余白まで含めたトータルの%値が100%になるようにします。

 

PC〜タブレットの場合だと先程の図で説明すると②と③、そして余白の2%を含めて合計100%です。

実際には綺麗に割り切れない事がほとんどなので78.23555333….%の様に電卓で表示される近似値まで指定してあげれば大丈夫です。

 

②〜⑦にはclass名をふって、全ての要素にfloat:leftとmargin-left:2%指定にします。

②、④、⑥にはmargin-left:noneを指定して、margin-leftを相殺して下さい。

 

スマホの場合はfloat:leftを解除すればOKです。 注意する点はPCとスマホはコンテンツ幅の指定が異なります。

PCはmax-width:960px等になりますが、スマホはwidth:100%等の指定になります。 メディアクエリの記述方法は今回は省略。  

 

 

 

まとめ

レスポンシブデザインはブロックをフロートさせて組んでいくデザインです。

デザインする時からグリッドを意識して作成しましょう。

なかなかとりかかりずらかったレスポンシブデザインですが、この記事が皆様の参考になれば幸いです。

 

[2017/07/03更新]

今はflexboxプロパティを使ったレイアウトが主流になりつつあります。

Pocket

スポンサードリンク