くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[レスポンシブ]レスポンシブWebデザイン④

スマートフォン用のメインコンテンツとフッターの設定編。

設定前はこんな状態です。

f:id:pleasure10501:20150523215131p:plain

 

メインコンテンツの設定(スマートフォン用)

①テキストと画面の空きがなく、ギリギリなので空きをつくります。

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;
}

 

こうなりました ↓↓

f:id:pleasure10501:20150523221245p:plain

 

フッターの設定(スマートフォン用)

設定前の状態 ↓↓

f:id:pleasure10501:20150523221603p:plain

  1. テキストを中央揃えに
  2. 背景色と文字色をつける
  3. 上下の余白をつける

 

footer {
    text-align: center;    ・・・1
    background:#60A234; ・・・2
    color: #FFF;  ・・・2
    padding: 24px 0; ・・・3
}

 

スマートフォン用のレイアウトの完成。

f:id:pleasure10501:20150523222155p:plain  /* 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;
}

広告を非表示にする