スマートフォン専用サイト制作応用第1回

スマートフォン専用サイト制作応用編

今回からjQueryを用いたスマートフォンサイトの制作を進めていく。今回は事前準備として、htmlとcssの記述を行なう。
f:id:ys_nim_9:20141201194401p:plain

html記述

htmlは特に目新しいテクニックはない。jQueryでタブ切り替えやアコーディオンパネルと言った、スマートフォンの小さな画面を有効活用するための準備をしておく。

head部

今回はスマートフォン専用サイトなので、cssは単一となる。faviconはandroid用に準備しておく

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no, email=no">
<link rel="apple-touch-icon" href="./touch-icon.png">
<link rel="shortcut icon" href="./favicon.ico" type="image/vnd.microsoft.icon">
<link rel="stylesheet" href="./shared/css/style.css" media="all">

body部

後でjQueryを当てられるよう、予めidやclass指定をしておく。currentという文字列が入ったclassは全てjQueryで処理するためのものである。

  <header id="globalHeader">
    <h1><img src="./shared/images/logo.png" alt="株式会社ネットスマート" width="118"></h1>
  </header>
  <div id="body">
    <div id="slide">
      <div><img src="./shared/images/img_keyvisual_01.jpg" alt="よりスマートなインターネットライフを。"></div>
    </div>
    <div class="alert">
      <ul>
        <li><a href="#">メンテナンスのお知らせ</a></li>
      </ul>
    </div>
    <section id="pickup">
      <h2>サービスピックアップ</h2>
      <ul class="tab">
        <li class="current"><a href="#cms">CMS</a></li>
        <li><a href="#seo">SEO</a></li>
        <li><a href="#social">ソーシャル</a></li>
      </ul>
      <div class="tabContents current" id="cms">
        <div class="round">
          <p><a href="#"><img src="./shared/images/img_pickup_cms.jpg" width="190" alt="CMS"></a></p>
        </div>
        <p class="text">低価格&amp;高機能なCMS導入。<br>充実の管理画面でサイト運用を効率的に。</p>
      </div>
      <div class="tabContents" id="seo">
        <div class="round">
          <p><a href="#"><img src="./shared/images/img_pickup_seo.jpg" width="190" alt="SEO"></a></p>
        </div>
        <p class="text">検索ワードを短期間で上位表示。<br>スマートフォンサイトにも対応します。</p>
      </div>
      <div class="tabContents" id="social">
        <div class="round">
          <p><a href="#"><img src="./shared/images/img_pickup_social.jpg" width="190" alt="ソーシャル"></a></p>
        </div>
        <p class="text">Facebookページ作成からソーシャルメディアマーケティングまで幅広く支援致します。</p>
      </div>
    </section>
    <div class="indexBoxes">
      <ul>
        <li><a href="#">サービス紹介</a></li>
        <li><a href="#">実績紹介</a></li>
        <li><a href="#">会社概要</a></li>
        <li><a href="#">採用情報</a></li>
      </ul>
    </div>
    <section class="seminar">
      <h2><span>セミナー</span></h2>
      <ul class="informationLink">
        <li><a href="#"><span class="date">2013年4月1日</span>テキストテキストテキストテキストテキスト</a></li>
        <li><a href="#"><span class="date">2013年4月1日</span>テキストテキストテキストテキストテキスト</a></li>
        <li><a href="#"><span class="date">2013年4月1日</span>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</a></li>
        <li><a href="#"><span class="date">2013年4月1日</span>テキストテキストテキストテキストテキスト</a></li>
        <li><a href="#"><span class="date">2013年4月1日</span>テキストテキストテキストテキストテキスト</a></li>
      </ul>
    </section>
    <section class="information">
      <h2><span>お知らせ</span></h2>
      <ul class="informationLink">
        <li><a href="#"><span class="date">2013年3月18日</span>採用情報を更新しました</a></li>
        <li><a href="#"><span class="date">2013年3月11日</span>実績紹介を更新しました</a></li>
        <li><a href="#"><span class="date">2013年3月1日</span>サービスが紹介されました</a></li>
        <li><a href="#"><span class="date">2013年2月25日</span>社内ブログを開設しました</a></li>
      </ul>
    </section>
  </div>
  <footer id="globalFooter">
    <nav>
      <ul>
        <li><a href="#">サイトマップ</a></li>
        <li><a href="#">プライバシーポリシー</a></li>
        <li><a href="#">サイトのご利用について</a></li>
        <li><a href="#">免責事項</a></li>
      </ul>
    </nav>
    <p id="copyright"><small>&copy;2013 Net Smart Co., Ltd. All rights Reserved.</small></p>
  </footer>

css記述

cssリセットはこちらを利用させていただいた。以下、部位ごとに見ていく。

全般、header部

fontではショートハンドを用いた記述をしている。font-sizeとline-heightをスラッシュで区切り、font-familyを一緒に記述できる。

body {
  color: #333;
  font: 14px/1.3 "Hiragino Kaku Gothic ProN", Helvetica,sans-serif;
  -webkit-text-size-adjust: 100%;
}
a {
  color: #333;
  text-decoration: none;
}
/*Header*/
#globalHeader {
  background: #efefef;
  background-image: linear-gradient(to bottom, #dddddd, #ffffff);
  border-bottom: 1px solid #ccc;
  padding: 10px 5px;
}
#globalHeader h1 {
  float: left;
  line-height: 0;
  padding: 5px 0 0 5px;
}
#globalHeader h1 img {
  vertical-align: top;
}
#slide img {
  height: auto;
  vertical-align: top;
  width: 100%;
}

Alert部

backgroundもショートハンドを使っている。パス、repeat、positionが書ける。positinは100%が右端を示し、50%が縦の中央を示す。

/* Alert */
div.alert {
  background: #dddddd;
  padding: 10px;
}
div.alert ul {
  background: #ffffff;
  border: 1px solid #ababab;
  border-radius: 5px;
}
div.alert ul li {
  list-style: none;
}
div.alert ul li a {
  background: url(../images/icon_alert.png) no-repeat 10px 10px;
  display: block;
  padding: 12px 20px 12px 40px;
}

pickup部

ボックスレベル要素を横並びさせる方法として、floatとdisplay:inline-block;があったが、第3の手段としてdisplay:tabl;がある。これはdisplay: table-cell;と組み合わせることで、htmlのtableタグのように横並びに要素をならべることができる。

#pickup {
  background: url(../images/bg_pickup.jpg) no-repeat 0 0;
  background-size: 100% auto;
  color: #fff;
  padding: 5px;
}
#pickup h2 {
  color: #fff;
  font-size: 14px;
  padding: 10px 5px;
}
#pickup ul.tab {
  display: table;
  width: 100%;
}
#pickup ul.tab li {
  display: table-cell;
  width: 33%;
}
#pickup ul.tab li a {
  background: #aaa;
  background-image: linear-gradient(to bottom, #eeedf2, #717171 4%, #2b2b2b 74%);
  border: 1px solid #444444;
  border-bottom: none;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
  box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.2);
  color: #fff;
  display: block;
  font-weight: bold;
  margin: 0 2px;
  padding: 10px 0;
  text-align: center;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 1), 1px 1px 1px rgba(0, 0, 0, 1);
}
#pickup ul.tab li.current a {
  background: #fff;
  background-image: linear-gradient(to bottom, #e9e9e9 0%, #ffffff 29%);
  color: #000;
  text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.2), 1px 1px 1px rgba(0, 0, 0, 0.2);
}
#pickup div.tabContents {
  display: none;
  padding: 0 3px;
}
#pickup div.tabContents.current {
  display: block;
}
#pickup div.round {
  background-image: linear-gradient(to bottom, #fff 14%, #dfdddd 100%);
  border: 1px solid #fff;
  border-radius: 5px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  padding: 10px;
  text-align: center;
}
#pickup div.round a {
  background: url(../images/icon_arrow_black_large.png) no-repeat 100% 50%;
  display: block;
}
#pickup div.tabContents p.text {
  margin: 10px;
}

indexBoxes部

androidはfont-weight:bold;が効かない。text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);を併記し、文字が目立つようにする。この際、iPhoneではfont-weightとtext-shadowの両方が効く点に注意する。

div.indexBoxes {
  margin: 0 0 20px 0;
}
div.indexBoxes ul {
  border-bottom: 1px solid #ccc;
}
div.indexBoxes ul li,
section.seminar h2,
section.information h2 {
  background-image: linear-gradient(to bottom, #ffffff, #efefef);
  border-top: 1px solid #ccc;
}
div.indexBoxes ul li a,
section.seminar h2 span,
section.information h2 span {
  background: url(../images/icon_arrow_black.png) no-repeat 100% 50%;
  display: block;
  font-size: 16px;
  font-weight: bold;
  line-hegiht: 1;
  padding: 12px 10px;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.3);
}
section.seminar h2 span,
section.information h2 span {
  background-image: none;
}

informationLink部

ul.informationLink li a span.dateではspanで日付をくくり、1度右にずらしてからmargin-leftの-9emで左に引っ張っている。

ul.informationLink li {
  border-top: 1px solid #ccc;
  list-style: none;
}
ul.informationLink li a {
  background: url(../images/icon_arrow_gray.png) no-repeat 100% 50%;
  display: block;
  margin: 0;
  padding: 12px 30px 12px 9em;
}
ul.informationLink li a span.date {
  color: #777;
  display: block;
  float: left;
  margin-left: -9em;
  padding-left: 10px;
  width: 8em;
}
section.information {
  border-bottom: 1px solid #ccc;
  margin: 0 0 20px 0;
}

footer部

#globalFooter nav ul liではbox-sizing: border-box;を利用し、widthを百分率指定していてもborderを容易に入れられるようにした。

#globalFooter nav ul {
  background: #eaeaea;
}
#globalFooter nav ul li {
  border: 1px solid #ccc;
  border-bottom: none;
  box-sizing: border-box;
  float: left;
  text-align: center;
  width: 50%;
}
#globalFooter nav ul li a {
  display: block;
  padding: 10px 0;
}
#globalFooter nav ul li:last-child(odd) {
  border-left: none;
  clear: left;
}
#globalFooter nav ul li:nth-child(even) {
  border-right: none;
  margin-left: -1px;
}
#globalFooter p#copyright {
  background: #2f2f2f;
  color: #fff;
  padding: 15px 0;
  text-align: center;
}

float解除

今回はclearfixを用いてfloat解除した。

#globalHeader:after,
#globalFooter nav ul:after {
  content: ""; 
  display: block; 
  clear: both;
}

device-pixel-ratioによる画像差し替え

高解像度のデバイスで閲覧されている場合、別画像に差し替える。

@media only screen and (-webkit-min-device-pixel-ratio:2){
  div.alert ul li a {
    background-image:url(../images/icon_alert_2x.png);
    background-size: 21px 21px;
  }
  #pickup div.round a {
    background-image: url(../images/icon_arrow_black_large_2x.png);
    background-size: 11px 17px;
  }
  div.indexBoxes ul li a {
    background-image: url(../images/icon_arrow_black_2x.png);
    background-size: 18px 13px;
  }
  ul.informationLink li a {
    background-image: url(../images/icon_arrow_gray_2x.png);
    background-size: 18px 13px;
  }
}

今回はここまでとする。

考え、感じる、Web制作。

Web制作の学習や情報についての記事が中心です。

スマートフォン専用サイト制作応用第1回

スマートフォン専用サイト制作応用編

html記述

head部

body部

css記述

全般、header部

Alert部

pickup部

indexBoxes部

informationLink部

footer部

float解除

device-pixel-ratioによる画像差し替え

スマートフォン専用サイト制作 応用編

html記述

head部

body部

css記述

全般、header部

Alert部

pickup部

indexBoxes部

informationLink部

footer部

float解除

device-pixel-ratioによる画像差し替え

スマートフォン専用サイト制作応用編