【備忘録】スマホサイトのコーディング例
スマホサイトのコーディングを会社で勉強しているので、備忘録としてまとめておきます。
※本ページは広告・アフィリエイトプログラムにより収益を得ています。
目次
1.viewportを指定する
スマホサイトを制作する際、一番最初に指定するものがviewportです。
そもそもviewportというものは、スマホの仮想的なウィンドウサイズのことで、デフォルトでは980pxが指定されています。このままでは文字などが小さくなり非常に見づらいです。見やすくするためにHEAD内に以下を指定します。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
これで見やすい文字サイズになりました。詳しい解説はiPhone生活や、viewportとはの解説を見るといいと思います。
2.apple-touch-iconを指定する
apple-touch-iconをHEAD内に指定することで、スマートフォンでサイトをホーム画面に追加した時のアイコンを変更することが出来ます。これだけでも一気にスマホサイトっぽくなりますね。
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
iOSの場合、自動的に光沢も付くので、もし必要なければ relの部分に「-precomposed」を追加すると消えます。
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon.png">
iOSでは「apple-touch-icon.png」という名前でルートディレクトリに入れておくと勝手に認識してくれますが、Androidの場合はlink要素での指定が必要になります。なので、管理しやすい場所に置いてlink指定すれば問題ないです。
引用元：スマートフォンのホーム画面設定でアイコンを指定する「apple-touch-icon」の書き方と注意点 | Cappee Design
調べてみたところ、上記のように書かれてあるので、Androidのための指定みたいです…。
3.paddingやborderを幅に含める
ここから実際にコーディングに入っていきます。
通常はボックスにpaddingやborderを入れると、その分だけ幅が広がってしまいます。そのせいでカラムの計算が面倒になったり、幅いっぱいに広げることができなくなります。
そこで使うのがbox-sizing:border-box;です。これは、paddingやborderを幅に含めて計算してくれる超便利なCSSです。ただし、IE8以上対応なのでPCサイトに使うにはまだ早そうです。ちなみにIE6はブラウザのバグで元からpaddingやborderを幅に含めます。
改善前
<div id="box01">
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</div>
#box01 {
width:250px;
height:250px;
padding:10px;
background-color:#65ab31;
border:5px solid #618e34;
}
改善後
<div id="box02">
サンプルサンプルサンプルサンプルサンプルサンプルサンプルサンプル
</div>
#box01 {
width:250px;
height:250px;
padding:10px;
background-color:#65ab31;
border:5px solid #618e34;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
box-sizing:border-box;が追加されました。-webkit-がついてるやつはAndroid用で、-moz-はFirefox用です。
これで便利な時が、paddingやborderを指定しているときにwidth:100%;を指定しても横スクロールが発生しないことです。スマホサイトではボタンなどを横幅いっぱいに広げることが多いので、divやsectionなどに指定するといいと思います。
4.メニューを3つ横並びにする
スマホサイトでメニューを作るときに困るのが、「3列の横並びメニュー」ですね。PCサイトならこんな感じで組むと思います。
<nav id="nav01">
<ul class="clearfix">
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li class="last"><a href="#">menu3</a></li>
</ul>
</nav>
/* リセット */
nav,ul,li {
margin:0;
padding:0;
list-style-type:none;
}
/* floatナビゲーション */
#nav01 ul {
width:302px;
margin:0 auto;
}
#nav01 ul li {
float:left;
width:100px;
border-right:1px solid #ffffff;
}
#nav01 ul li.last {
border-right:none;
}
#nav01 ul li a {
display:block;
padding:0.5em 0;
color:#ffffff;
text-align:center;
text-decoration:none;
background-color:#65ab31;
}
#nav01 ul li a:hover {
background-color:#618e34;
}
/* clearfix */
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
.clearfix {
min-height: 1px;
}
* html .clearfix {
height: 1px;
/*¥*//*/
height: auto;
overflow: hidden;
/**/
}
幅をpxで固定して、floatで横並びにすると思います。スマホの場合、画面を縦に持ったときと横に持ったときで横幅が変化するので、幅指定を絶対指定で行うと押しづらくなってしまいます。（サイトによっては絶対指定がいい場合もあります。）
また、PCに比べて画面が小さいので横幅いっぱいに広がった方が押しやすいです。
ナビゲーションを横に3つ並べるので、100%を3つで割ると…33.333…%となり、綺麗に割ることが出来ません。綺麗に3等分が出来ないと右側にわずかな隙間が発生してしまいます。
そこで使用するのが、display:table;、display:table-cell;です。これを使用すると、要素をテーブルのように扱うことができます。テーブルのようにできるメリットは以下の3つです。
- 1.幅を自動で均等にしてくれる
- 2.vartical-align:で縦方向の位置調整ができる;
- 3.カラム落ちの心配がない
display:table;で組むときは、以下のようにコーディングします。
<nav id="nav02">
<ul>
<li><a href="#">menu1</a></li>
<li><a href="#">menu2</a></li>
<li><a href="#">menu3</a></li>
</ul>
</nav>
/* リセット */
html,body,nav,ul,li {
margin:0;
padding:0;
list-style-type:none;
}
/* display:table;ナビゲーション */
#nav02 ul {
display:table;
table-layout:fixed;
width:100%;
}
#nav02 ul li {
display:table-cell;
border-right:1px solid #ffffff;
}
#nav02 ul li a {
display:block;
padding:0.5em 0;
color:#ffffff;
text-align:center;
text-decoration:none;
background-color:#65ab31;
}
#nav02 ul li a:hover {
background-color:#618e34;
}
横並びする要素（ここでは「li」）にdipslay:table-cell;を指定し、横並びの要素を内包している要素（ここでは「ul」）にdisplay-table:cell;、table-layout:fixed;、width:100%;を指定します。
floatの場合だと、カラム落ちを防ぐためにfloatを解除する必要がありますが、display:table:ではテーブルとして扱うことでfloat解除の必要がなくなります。
PCでもIE8から対応しています。IE7以下を切り捨てるのはまだまだ先の話になりそうですね…。。
5.リンクに矢印を付ける
スマホサイトによくある一行リンクに矢印のついたレイアウトを画像を使わずにHTMLとCSSで作成します。
パターン1
<ul id="list1">
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
<li><a href="#">リンク4</a></li>
<li><a href="#">リンク5</a></li>
</ul>
#list1 {
border-top:1px solid #cccccc;
}
#list1 li {
border-bottom:1px solid #cccccc;
}
#list1 li a {
position:relative;
display:block;
padding:10px;
color:#65ab31;
text-decoration:none;
}
#list1 li a:before { /* 矢印 */
position:absolute;
top:50%;
right:10px;
content:""; /* 空の要素を作成 */
width:0;
height:0;
margin-top:-3px; /* 位置を中心に調整 */
border-width:5px;
border-style:solid;
border-color:transparent;
border-left-color:#65ab31; /* 矢印の色 */
}
パターン1はオーソドックスな三角の矢印です。HTMLは特に変わったところはないのですが、CSSに色々入っています…。一つ一つ確認してみましょう！
#list1 li a {
position:relative;
display:block;
padding:10px;
color:#65ab31;
text-decoration:none;
}
リンク部分を見ていきましょう。
一番上の「position:relative;」は、矢印のアイコンを配置する時にリンクを基準点にするために指定しています。
2行目の「display:block;」は、リンクをブロック要素に変えて押しやすくしています。
その下の「padding」「color」「text-decoration」は、見た目の調整のために指定しています。サイトに合わせて適宜変更して下さい。
#list1 li a:before { /* 矢印 */
position:absolute;
top:50%;
right:10px;
content:""; /* 空の要素を作成 */
width:0;
height:0;
margin-top:-3px; /* 位置を中心に調整 */
border-width:5px;
border-style:solid;
border-color:transparent;
border-left-color:#65ab31; /* 矢印の色 */
}
続いて矢印部分を見ていきましょう。矢印部分は疑似要素を使って作っています。なので、PCサイトで利用するときはIE7以下を切り捨てなければなりません。
まず始めに#listのリンクの後ろに「content:””;」で空の要素を作成します。そこに「border」を付けて、矢印部分を作成していきます。borderは左側にだけ色を付けて、残りは透明（transparent）を指定します。左のボーダーの色が矢印の色になります。
このままではボックスの左側に線が付いただけの状態です。ここからどのようにして矢印を作っていくかをサンプルを使って説明します。
要素に幅と高さを指定して、それぞれ線の色を別々に指定すると以下のようになります。
この幅と高さを0にすることで以下のようになります。
幅と高さを0にすることで、上下左右に4つの三角が出来ました。この三角の左側を使って矢印を作っていきます。
最後に矢印の位置調整を行います。「position:absolute;」で矢印を絶対配置にします。「top:50%;」と「right:10px;」で位置を調整するのですが、topを50%にしても上下中央揃えにすることは出来ません。調整用に矢印の高さの半分だけネガティブマージンを指定します。
これでパターン1の矢印が完成です！
パターン2
<ul id="list2">
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
<li><a href="#">リンク4</a></li>
<li><a href="#">リンク5</a></li>
</ul>
#list2 {
border-top:1px solid #cccccc;
}
#list2 li {
border-bottom:1px solid #cccccc;
}
#list2 li a {
position:relative;
display:block;
padding:10px;
color:#65ab31;
text-decoration:none;
}
#list2 li a:before { /* 矢印 */
position:absolute;
top:50%;
right:10px;
content:""; /* 空の要素を作成 */
width:0;
height:0;
margin-top:-3px; /* 位置を中心に調整 */
border-width:5px;
border-style:solid;
border-color:transparent;
border-left-color:#65ab31; /* 矢印の色 */
}
#list2 li a:after { /* 矢印隠し */
position:absolute;
top:50%;
right:12px;
content:""; /* 空の要素を作成 */
width:0;
height:0;
margin-top:-3px; /* 位置を中心に調整 */
border-width:5px;
border-style:solid;
border-color:transparent;
border-left-color:#ffffff; /* 矢印の色 */
}
パターン2の矢印は細い線の矢印です。太さもCSSで調整することが出来ます。
HTMLやCSSはほとんど変わりません。「#list2 li a:after」が追加されているだけです。
#list2 li a:after { /* 矢印隠し */
position:absolute;
top:50%;
right:12px;
content:""; /* 空の要素を作成 */
width:0;
height:0;
margin-top:-3px; /* 位置を中心に調整 */
border-width:5px;
border-style:solid;
border-color:transparent;
border-left-color:#ffffff; /* 矢印の色 */
}
まず「#list2 li a:after」を使って、「#list2 li a:before」と同じサイズの矢印を作成します。「border-left」を背景と同じ色に指定し、矢印の位置をbeforeと比べて2px左に移動します。この移動幅が線の太さになります。
細い線に見える仕組みは、2つの矢印を少しずらして重ねているだけです。サンプルとして「:after」の矢印の色を黒にして重ねてみました。
黒い矢印がオレンジ色の矢印に重なって一部が見えなくなっています。この状態から黒い矢印の色を背景と同じ白にすると…？
このように細い線の矢印になります。そうです。背景と同じ色の矢印で隠しているだけなんです。なので、:hoverなどで背景色を変更をするときは、「#list2 li a:hover:after」に対して背景色と同じ色を指定します。
これでパターン2の矢印が完成です！
パターン3
<ul id="list3">
<li><a href="#">リンク1</a></li>
<li><a href="#">リンク2</a></li>
<li><a href="#">リンク3</a></li>
<li><a href="#">リンク4</a></li>
<li><a href="#">リンク5</a></li>
</ul>
#list3 {
border-top:1px solid #cccccc;
}
#list3 li {
border-bottom:1px solid #cccccc;
}
#list3 li a {
position:relative;
display:block;
padding:10px;
color:#65ab31;
text-decoration:none;
}
#list3 li a:before { /* 矢印 */
position:absolute;
top:50%;
right:17px;
content:""; /* 空の要素を作成 */
width:0;
height:0;
margin-top:-5px; /* 位置を中心に調整 */
border-width:5px;
border-style:solid;
border-color:transparent;
border-left-color:#ffffff; /* 矢印の色 */
}
#list3 li a:after { /* 矢印背景 */
position:absolute;
top:50%;
right:15px;
content:""; /* 空の要素を作成 */
width:20px;
height:20px;
margin-top:-10px; /* 位置を中心に調整 */
background-color:#65ab31;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%; /* 角丸 */
z-index:-1; /* 矢印よりも後ろにする */
}
パターン3は丸い背景が付いてる矢印です。パターン2では:afterを使って隠すための矢印を作りましたが、今回は背景を作ります。
矢印の位置は背景があるので、若干変更しています。矢印背景では、空要素を作成し幅、高さ、背景色を指定します。
CSS3の「border-radius」を指定して角丸にします。50%と指定することで綺麗な丸になります。（Androidは仕様で若干ギザギザになってしまいます…。）
最後に「z-index」を指定し、矢印よりも後ろに要素を持ってくることでパターン3の完成です。
6. 最後に
スマホサイトの制作は今後どんどん増えていくと思います。今回学習してきたことを使うことで、スマホサイトのコーディングを少しでも楽に出来るようにしたいです。
また新しくわからないことが出てきたら、都度このブログに書いて誰かに共有出来たらいいなと思います。
