サイトマップ

スマホサイトを作る時に気をつける事は？

会員ログイン 新規会員登録Q&Aサイトマップ
検索
ログイン

スマホサイトを作る時に気をつける事は？

ホームページ

2015.12.17

コメント（0）

お気に入りに追加

★0

スマホサイトを作る時に気をつける事は？
関連キーワード： ホームページ　自分で更新 ダメサイト　処方箋
スマホやタブレットの画面サイズはメーカーや機種によって様々です。また、スマホ・タブレットともに縦横どちらの向きでもWEBサイトを閲覧する事が可能です。 そのため、PCでのサイト構築と同様にコンテンツの横幅をpxで設定しているとどうしても画面をはみ出してしまいます。そのままでもページを拡大・縮小する事で見れなくは無いですが、それでは閲覧者に優しいWEBサイトとは言えません。

１余白や横幅は％で設定しましょう

スタイルシートの「width」プロパティは、「px」「auto」以外にも「%」での設定が可能です。 「float」の設定された箇所の親要素の横幅を100%として、それに対する%数を設定する事で、コンテンツの横幅を常に一定の割合で表示させる事が可能です。 サイトによってはサイドにバナーやナビコンテンツを設置しているケースや、横並びの画像を幾つも表示させているケースもあるでしょう。 こういった場合は、スマホでは表示させないか、大量にコンテンツが並んでいなければ「float」を切って縦に並べる方法も良いでしょう。

PCでの横幅設定をそのまま適用しているとスマホでの見た目が大変な事に・・・
widthを％で指定していると、ご覧の通り、スマホやタブレットでもスッキリした見た目に！

PCでの横幅設定をそのまま適用していると、左の画像の通りスマホでの見た目が崩れてしまいます。
しかしwidthを％で指定していると、ご覧の通り、スマホやタブレットでもスッキリした見た目に！

画像のサイズを可変にして、コンテンツをはみ出さない様に

せっかく枠の幅を％で設定しても画像のサイズがその横幅より広いと、画像がコンテンツの幅をはみ出し、見た目が悲惨な事になってしまいます。 この様な場合は、画像を扱うに「max-width:100%;」の設定しておきましょう。
このスタイルを設定する事で、画像の横幅が外側のタグを超えないようになります。スマホなどの狭いページ幅の場合では、％で横幅を設定したタグの横幅も短くなりますが、上記のスタイルを設定する事で、画像が親要素をはみ出さなくなり、親要素の横幅に合わせて自動でサイズが調整されます。

テキストの改行位置にご用心

コンテンツの横幅が変動するという事は、当然テキストの横幅にも同じ事が言えます。 よくあるケースとしては、句点のある位置ででテキストの改行を行うという場合です。PCでサイト見た場合ではは横幅が十分にあるため、適当な位置で改行しても大きな問題にはなりません。しかし、スマホやタブレットでは横幅が変動する分、一行辺りのテキスト量も当然少なくなります。場合によってはページの右端から折り返した直後に句点での改行が来てしまいます。スマホでの閲覧性を確保したいのなら、句点の位置での改行は控えた方が良いかも知れません。
お気に入りに追加

14-river

WEB制作会社でフロントエンドエンジニアを務める。

このカテゴリ注目のキーワード

SEO対策 CVRアップ ブランディング 制作業者　選び方 名誉毀損 通販　売上げアップ ホームページ　自分で更新 CMS導入 集客数アップ ダメサイト　処方箋 スモールビジネス サロン系 個人事業主 無料

あなたにおススメの記事

この記事へのコメント

コメント（0）

※利用規約に違反するコメントを確認された場合はご報告ください

ログインしてコメントを書く
まだコメントはありません。

このカテゴリの新着記事

今すぐどうにかしたい方へおススメ
パソコンが重すぎて仕事にならない今すぐ何とかしたい！誹謗中傷検索順位がズドンと落ちた！
アクセス数ランキング
  • ALL
  • PCトラブル
  • ネットトラブル
  • パソコンスキル
  • ホームページ
コメント数ランキング
  • ALL
  • PCトラブル
  • ネットトラブル
  • パソコンスキル
  • ホームページ
注目のキーワード ネット炎上 ネットトラブル 突然落ちる PC高速化 データ復元 セキュリティ対策 ウィンドウズ10
注目のキーワードをもっと見る
パソコントラブル解決マルウェア対策ネットトラブル解決誹謗中傷対策パソコンのスキルアップ楽しみ方・活用法ホームページWEB活用ノウハウ
pagetop