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プロパティの設定を変えるだけで、非常に簡単に切り替えができます。

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥49,500

サービス詳細ページ >>

申し込みフォーム >>

特集記事

  • WordPress Image

    WordPress の基礎から応用まで
    Webサイト制作ツールとして圧倒的な人気を誇るWordPress。利用するにあたって必要な知識を体系的にまとめた記事です。
  • jQuery Mobile Image

    jQuery Mobile を基本から覚える
    スマホサイト制作に最適なフレームワークの利用方法を解説。DEMOページ・サンプルコードで動作を確認できます。

スポンサーリンク

ページの先頭へ