Web Tips：モバイルサイト

表を横にスクロール可能なレスポンシブテーブルを実装する

スクリーンサイズが小さいスマートフォン画面で表組みする際は、はみ出した部分を横にスクロール可能なレスポンシブテーブルという手法を使います。JavaScriptで作った専用のライブラリもありますが、CSS設定だけで簡単に実装する方法を解説します。

スマートフォンサイトにアコーディオンメニューを実装する

メニューが開閉するアコーディオンメニューはスマートフォンサイトでよく見かけます。プラグインもたくさんありますが、それらを使わないでもシンプルなコードで実装できますので、基本的な作成方法を解説します。

Fluid Image 対応のフリックで動作するスライドショーを実装する

スマートフォンサイトでよく採用されているフリックで動作するスライドショーですが、レスポンシブWebデザインや端末の向きにかかわらず対応するため、画像がスクリーンサイズの100%に伸縮するよう実装してみます。

スマホページにタブ切り替えをプラグインを使わず実装する

表示内容を瞬時に切り替えるタブメニューは、限られた画面サイズの中に多くの情報を持たせることができ、ページ切り替え時のHTTPリクエストによるオーバーヘッドも削減できるため、スマホページには有効な手段となります。

スライドメニューのプラグインを使わない実装方法

メニューボタンをタップすると横からメニューが出てくるスライドメニューは、画面サイズの小さいスマートフォンに適したメニューです。スライドメニューをプラグインを使わないで実装する方法を解説します。

スマートフォンページにPCサイトへのリンクを設ける

Webサイトにアクセスしてきた端末をユーザーエージェントで自動振り分けしているサイトがありますが、スマートフォンページ内にクエリパラメータを使ったPCサイト閲覧のリンクを設ける方法を解説します。

WordPressプラグインでスマートフォンとPC用テーマを振り分ける

WordPressサイトでテーマを端末種別ごとに振り分けるには、プラグインを利用するのが最も簡単です。さまざまなプラグインがありますが、「Multi Device Switcher」を使う方法を紹介します。

スマートフォンとPCをユーザーエージェントで振り分ける

スマートフォン用にサイトを用意した場合、ユーザーからのアクセスをPCサイトとスマートフォンサイトに振り分けるにはユーザーエージェントで判別します。.htaccess、PHP、JavaScript それぞれでユーザーエージェントを判別し振り分ける方法を解説します。

スマートフォンを考慮したフォント指定の検討

Webページで使用するフォントはCSSでfont-familyプロパティに指定します。PCサイトの場合はWindowsとMac OSを対象にしますが、スマートフォンで閲覧することも考え、iOSとAndroidも含めた指定を検討してみました。

スマートフォン向けサイトのViewport設定まとめ

スマートフォンサイトの制作で重要になるのが、ブラウザの表示設定を行う Viewport(ビューポート)というmeta要素です。Viewportの設定次第でWebページの見た目とユーザーの使い勝手が変わるので、サイトの性質に合わせて適切に設定する必要があります。

Windowsで使えるiPhone/iPadシミュレータ「iBBDemo3」

iPhoneやiPadに搭載されているiOS用シミュレータとして、MacであればXcodeがありますが、Windowsの場合は「iBBDemo3」を使うことができます。また古いMac OSではXcodeをインストールできませんので、iBBDemo3 を代わりに使うことができます。

スマートフォン画面と外観を表示するツール「Mobilizer」

Mobilizerは、スマートフォン画面をPCで表示するための無料のアプリケーションソフトです。iPhoneやGalaxyの外観がそのまま表示されますので、プレゼンテーションなどに活躍します。

表示する画像や文字の切り替えをdisplay/visibilityプロパティで行う

PCサイトとスマホサイトでは画面サイズが違いますので、表示する画像や文字を切替えたいことがあります。この方法ではCSSプロパティの設定を変えるだけで、非常に簡単に切り替えができます。