[レスポンシブ]レスポンシブWebデザイン④
スマートフォン用のメインコンテンツとフッターの設定編。
設定前はこんな状態です。
メインコンテンツの設定(スマートフォン用)
①テキストと画面の空きがなく、ギリギリなので空きをつくります。
PC用を想定するならば全体の幅は一定なのでpaddingを設定すればいいのですが、レスポンシブデザインでは、そもそも全体幅が変わるので、コンテンツの幅を全体幅に対して何%にする、という設定をします。
また、折り返し部分にリンク文字が重なると誤操作をしかねないため、それを防ぐ、という意味合いもあります。
今回はコンテンツの横幅を90%にします。
左右の余白を均等にするために、marginの設定もお忘れなく。
main {
width: 90%;
margin: 0 auto;
}
②メインコンテンツのそれ以外の指定
- 画像とテキストの間隔調整・・・p要素とimg要素にmargin-bottom: 24px
- 見出し要素をセンター揃えにする
- テキストは左揃えにする
- 画像に影をつける
main {
width: 90%;
text-align: center;
margin: 0 auto;
}
main p {
text-align: left;
margin-bottom: 24px;
}
main img {
box-shadow: 0 0 12px #000;
margin-bottom: 24px;
}
こうなりました ↓↓
フッターの設定(スマートフォン用)
設定前の状態 ↓↓
- テキストを中央揃えに
- 背景色と文字色をつける
- 上下の余白をつける
footer {
text-align: center; ・・・1
background:#60A234; ・・・2
color: #FFF; ・・・2
padding: 24px 0; ・・・3
}
スマートフォン用のレイアウトの完成。
/* Fluid image */
img {
max-width: 100%;
}
/* font */
h1 {
font-size: 48px;
line-height:1;
}
h2 {
font-size: 36px;
line-height:1.3333;
}
h3 {
font-size: 24px;
line-height:1;
}
h4 {
font-size: 16px;
line-height:1.5;
}
h1, h2, h3, h4 {
margin-bottom: 24px;
}
header {
text-align: center;
padding-top: 24px;
}
header h1 {
margin-bottom: 24px;
}
header p {
color: #62240b;
}
nav {
margin-bottom: 24px;
background: #7D4934;
background: -moz-linear-gradient(top, rgba(81,24,8,0.71) 0%, rgba(91,25,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(81,24,8,0.71)), color-stop(100%,rgba(91,25,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* IE10+ */
background: linear-gradient(top, rgba(81,24,8,0.71) 0%,rgba(91,25,0,1) 100%); /* W3C */
}
nav ul {
overflow: hidden;
}
nav li{
width: 25%; /*画面の幅に対して設定する*/
float: left;
}
nav li a {
display: block;
color: #d8c2a4;
padding: 12px 0; /*上下12pxずつ設定すると、高さが24pxになる*/
}
nav li a:hover {
color: #FFF;
background: #7d4934;
}
main {
width: 90%;
text-align: center;
margin: 0 auto;
}
main p {
text-align: left;
margin-bottom: 24px;
}
main img {
box-shadow: 0 0 12px #000;
margin-bottom: 24px;
}
footer {
text-align: center;
background:#60A234;
color: #FFF;
padding: 24px 0;
}