メールでのお問い合わせはこちら、お問い合わせフォーム

狭い表をフルスクリーンにする

[ 2014年12月24日 ]

タブレットをターゲットとするサイト等を制作する場合、普段のPC用サイトでは気にならない事が、問題になったりします。

画面サイズの制限が厳しいため、ナビゲーション等を無くして本文コンテンツをフルスクリーン化したくなることがあったりします。
その理由は様々。
a.文字などを大きくして見やすくしたい(内容の拡大)
b.スクロールを減らして見通しをよくしたい(表示領域の拡大)


以下はフルスクリーン化のサンプルです。
(IEの場合、IE11以降が必要です)

フルスクリーンサンプルを見る


表示切替1ボタンではフルスクリーンにした際にスタイル等は変更していません。
上で言えばb.の用途で使うのに適しています。
表示切替2ボタンではフルスクリーンにした際にスタイル等を変更して文字を大きくしています。
(ついでに背景色も変えています)
この場合はa.の用途で使うのに適していますが、元に戻す処理が必要となるためESCや表示切替1ボタンでフルスクリーンから戻ると、変わりっぱなしになるので、使いどころに注意が必要でしょう。