Subscribed unsubscribe Subscribe Subscribe

レスポンシブデザインとDOMツリーについて考えてみる

WEBサービスを作るにあたって重要なのはまずUI/UXです。
それはユーザーにダイレクトに認知される部分だからです。
サーバーサイドのソースももちろん重要ですが、一番重要なのはユーザーがサービスを使って得る満足度です。

どれだけいいソースが書けても、ユーザーが得る満足度が低いと無駄だと考えます。
サーバーサイドエンジニアはUI/UXができないと単なるシステム開発者になってしまいます。

そこでまずはレスポンシブデザインとDOMツリーについて考えてみます。

まずはレスポンシブデザインの前提としてのviewportです。
こちらが適用できていないとGoogleのモバイルフレンドリーチェックではNGになります

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

以下、代表的な内容を記載していきます。

bodyタグ

width: 100%;

body直下のdiv

background-image: url(https://XXXXXXXXX.jpg);
text-align: center;

※body直下のdivの背景を画像にしているサイトはとても多いです
※また、画像の上の文字をセンタリングしておきます

body直下のdivの子div

width: 960px;
margin: 0 auto;
position: relative;

※よく使われるのはcontainerというクラス名です
スマホの場合はwidth: 100%;にします
※marginはautoだけでも構いません

ちなみにpositionプロパティは以下があります

f:id:keiwt:20150316230006p:plain

header

width:100%

※これでheaderはcontainerの幅に収まります ※The

element represents a group of introductory or navigational aids.
※ header element is intended to usually contain the section's heading (an h1–h6 element or an hgroup element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos.
※headerはほとんどのサイトではロゴやログインボタン等を配置したり、h1が置いてあったりします。

header内のロゴ

background-size: contain;
background-image: url(https://XXXXXXX.png);

※The background-size property specifies the size of the background images.
f:id:keiwt:20150318213837p:plain ※background-sizeは100%でも、containでも構いません。
※ただ、background-sizeを指定しない場合はautoになり、画像サイズが親要素より大きい場合は画像の左上から親要素の大きさ分が表示されます

header内の文言

font-size: .6rem;

※こちらは親要素の60%の大きさという意味です

h1

font-size: X.Xrem;
letter-spacing: -Xpx;
text-shadow: Xpx Xpx Xpx rgba(0,0,0,0);

※h1はheaderと明示的に分けるためにheader内ではない方がいいです ※考えるべきはフォントの大きさ、文字間の間隔、テキストの影です。
※text-shadowは以下を参考にしてください f:id:keiwt:20150318220301p:plain

h1以下に文字列や画像を配置する

pタグを使用します

ボタン

form input[type="submit"]:hover{background:#XXXXXX}

※ボタンの上にカーソルを当てた時に色を変えます

各情報を区切るdiv

background: rgba(XXX,XXX,XXX,XXX);
padding: Xrem Yrem Zrem;

※背景の色を変えることで情報の境目を明確にします
※heightは指定してもいいと思います
※The padding clears an area around the content (inside the border) of an element
※例は上にXrem,左右にYrem,下にZremという意味です
f:id:keiwt:20150318222543p:plain

各情報を区切るdivの子div

width: 960px;
margin: auto;
padding: Xrem Yrem Zrem Orem;
text-align:center;

スマホの場合はwidth: 100%;にする
※margin,paddingを適宜調整します

画像をcontainer内に表示する

divにクラスを紐付けて
↓
background-size: contain;
background-image: url(https://XXXXXXX.png);

※background-size: 100%でも構いません;

input['text']を横に並べる

一番右の要素に
↓
width:auto;