スマホ時代に最適化したHTML5・CSS3のコーディング技術6選

  • LINEで送る

HTMLとCSSの最適なコーディングは年々変化します。例えば、2015年8月頃にInternet ExplorerのシェアをChromeが抜き去りました。また2017年4月でWindows Vistaのサポートが終了し、今後はWindows7が使っているIE11以降に対応を集中することが求められます。今まで使ってきたコーディングも、時代に合わせて変更していかなくてはいけません。本記事では、2016年の状況に最適化させたコーディングをご紹介します。

1. meta keywordsは検索順位に無関係

『meta keywords』は、これまでサイトのコンテンツ内容を示すものとして多くのサイトで指定されてきました。

以下のコードはその一例です。

▼ある高校のホームページのコード

<meta name=”Keywords” content=”◯◯高校”>

▼あるテレビ番組のホームページのコード

<meta name=”keywords” content=”××,番組名,BS××,ニュース”>

▼ あるアイドルユニットのホームぺージのコード

<meta name=”keywords” content=”ユニット名(カタカナ), ユニット名(ひらがな),ユニット名(半角英語),ユニット名(全角英語),ユニット名(全角英語), 名前1, 名前2, 名前3, 名前4, 名前5, 名前6, 名前7, 名前8, 名前9, 名前10, 名前1(ひらがな), 名前2(ひらがな), 名前3(ひらがな), 名前4(ひらがな), 名前5(ひらがな), 名前6(ひらがな), 名前7(ひらがな), 名前8(ひらがな), 名前9(ひらがな), 名前10(ひらがな)”>

しかし、現在は『meta keywords』はSEO上意味が無くなってしまっています。

GoogleやYahooは『meta keywords』を見ていない

2009年9月21日に、Googleは検索順位の決定方法に関して『metakey words』を用いていないことを発表しました。Yahoo!もGoogleの検索エンジンを使っているので、Yahoo!の検索順位にも『meta keywords』は影響しません。マイクロソフトが運営しているBingも、2015年10月4日に『meta keywords』は使っていないと発表しました。

▼Googleが『meta keywords』を検索順位決定に使っていないと公表

meta keywords の代替として、リッチスニペットを設定するのも手です。

『user-scale=no』はiOS 10では機能しない

ホームページのコンテンツの拡大や縮小をさせないために、『meta』タグの『viewport』を次のように指定する方法があります。

<meta name=”viewport”
content=”width=device-width,
initial-scale=1,
maximum-scale=1,
user-scalable=no” / >

しかしながら、『user-scale=no』はiOS10からは無視されるようになったため、コンテンツの拡大と縮小をさせないようにすることはできません。

『user-scale=no』を指定したテストページを試してみてください。下に示す画像の左側はiOS9、右側はiOS10です。表示されているページには『user-scale=no』が指定してありますが、iOS10では拡大できるようになっています。

『meta』の『viewport』のうち、『width』や『initial-scale』はきちんと機能しています。従って、ユーザーが自分で拡大できるということを踏まえてサイトを作る必要があります。

▼『user-scale=no』を省略した『viewport』の例

<meta name=”viewport” content=”width=device-width, initial-scale=1″/>

高解像度画面に対応させる時、画像は2倍サイズで十分か?

現在販売されているスマートフォンの多くは、デバイスピクセル比が2以上の高解像度対応になっています。

デバイスピクセル比とは画像の1ピクセルを、デバイスの何ピクセルで表示させるかを示した値です。例えば、デバイスピクセル比が2の画面であれば、「1ピクセル×1ピクセル」の画像を「1ドット×1ドット」の合計4ドットで表示します。

デバイスピクセル比が2の画面に鮮明な画像を表示させるために、これまでは表示させるサイズの2倍のピクセルで画像を作成し、2分の1にして表示させる手法が用いられていました。

▼九州大学のホームページです。ロゴが表示の2倍サイズで作られています。

これまではそれでよかったのですが、現在はデバイスピクセル比が3や4のスマートフォンが販売されており、2倍サイズの画像ではボケてしまうようになりました。

▼デバイスピクセル比が3以上のスマートフォン

これらのスマートフォンでボケさせずに画像を表示させるには、画像のサイズを表示の3倍、4倍で作る必要があります。

あらゆるデバイスピクセル比に対応できるレスポンシブイメージ

『レスポンシブイメージ』はHTML5.1にて実装された機能で、HTMLのコードのみでデバイスに最適な画像を表示させることができます。

下のコードは、デバイスピクセル比ごとに用意した画像を、端末のデバイスピクセル比に応じて表示し分けるHTMLコードです。

<img srcset=”@1x.png 1x,
@2x.png 2x,
@3x.png 3x,
@4x.png 4x”
sizes=”100px”>

これならCSSやJavaScriptへの記述が不要です。

『clearfix』を見直そう

『float』を使った時に回り込みの解除を行うのが『clearfix』ですが、コードの記述方法がブラウザの進化とともに短くなってきています。

▼IE6以上のブラウザ用として2011年に発表された『micro clearfix』の記述

.cf:before,
.cf:after {
content: ” “;
display: table;
}.cf:after {
clear: both;
}

.cf {
*zoom: 1;
}

▼IE7以上のブラウザ用とした『clearfix』の記述

.clearfix:after {
content: “”;
display: block; /* または display:table; */
clear: both;
}

参考記事:The very latest new new way to do “clearfix”

『clearfix』は、『overflow』を用いてさらに短くコーディングすることもできます。

.clearfix {
overflow: hidden;
}

参考記事:floatを解除する手法のclearfix と 次世代のレイアウトの話|Web Design KOJIKA17

ボックスレイアウトは『float』ではなく『Flexbox』を用いよう

ボックスレイアウトにはこれまで『float』がよく用いられていましたが、問題点がいくつかあります。九州大学のホームページを例に見てみましょう。

『float』の問題点

問題点1:『clearfix』が多くなる

以下の画像を見てください。赤い囲みには全て『clearfix』が指定されています。

問題点2:縦方向レイアウトが煩雑になる

『float』は要素の右または左に回り込ませるための機能なので、縦方向に要素を配置すると『margin-top』などを使ってレイアウトを調整する必要があります。

問題点3:横並び要素の高さが揃わない

下のようなカード型の要素を並べたい場合、高さを揃えるにはJavaScriptで強制的に揃える必要があります。

以上の問題点を、『Flexbox』なら解消できます。

『Flexbox』を用いたボックス配置の優れた点

『Flexbox』は『float』を用いた時よりも簡単にコーディング可能です。

コードが短くなる

『Flexbox』は『clearfix』の指定が不要なのでコードが短いです。

.selector {
display: flex;
}

縦方向レイアウトが可能になる

『Flexbox』には縦方向(垂直軸方向)のレイアウト機能が付いています。『align-items』プロパティで縦方向レイアウト(上寄せ・中央寄せ・下寄せなど)を指定できます。

横並び要素の高さがデフォルトで揃う

『Flexbox』は要素を横並びにするとデフォルトで高さが揃います。

『Flexbox』についてより詳しく知りたい方は「Webデザイナー初心者でも始められるFlexbox入門」をご覧ください。

ベンダープレフィックス問題は『Autoprefixer』で解決

ベンダープレフィックスはブラウザ別にデザインを指定するためにCSSに付与する接頭辞(『-webkit-』や『-moz-』など)です。最近は各ブラウザのCSS3への対応が進んでおり、ベンダープレフィックスが不要のプロパティは増えていますが、まだ全てのプロパティが対応しているわけではありません。

▼CSSでフォントの「角丸」を指示する『border-radius』の記述例

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

『Autoprefixer』を使うと、適切なベンダープレフィックスを自動付与できます。

『Autoprefixer』を使ってベンダープレフィックスの指定を効率化

『Autoprefixer』はベンダープレフィックスを指定したブラウザに合わせて自動付与してくれるPostCSSツールです。サイト制作者はベンダープレフィックスの指定に悩む必要が無くなり、また記述量も減らせます。

『Autoprefixer』は、『Gulp』のようなビルドツールと一緒に使うと効率的です。『Autoprefixer』の使い方についてより詳しく知りたい方は「Webデザイナー初心者でも始められるFlexbox入門」の3ページ目をご覧ください。

時代に合わせて自身も進化しよう

コーディング術はどんどん進化しており、より簡単に、便利になっていきます。新しい知識と技術を学べばより優れたデザインをより短時間で作れるようになります。技術の進化に合わせて、自身も積極的に進化していきましょう!

↓ 次ページに続く ↓



気になるカテゴリから人気記事をチェック!
[カメラ] [ガジェット] [キッチン] [スマホ] [パソコン] [映像・オーディオ] [生活家電] [美容・健康] [美容家電]  
  • LINEで送る