カテゴリー: ホームページ作成浜松Tips

特定のページでのみ外部JavaScriptフィイルを読み込ませたい、 と言う要請は、 WordPressなどではfunctions.phpを用いて実装するのは最早お馴染みの手法である様に、 割と頻繁に受けるものです。

初めてのJavaScript 第3版

稼働中システムの追加要請

処が諸事情に因り、例えば企業などでは一旦導入したシステムは使い続けるのが通常ですから、 往往にして融通の効かない古い独自のCMS上で此れを実現しなければならない場面があります。 具体的には各々ページに読み込みファイルが書き込んであって、一括管理できない、 と言う形式の上ではなかなか実装が難儀だったりする訳です。 その様なCMSのシステム上でソースを読んで一括管理できそうなファイルを見付けて、 例えばPHPに於いては $_SERVER など環境変数で場合分けしようとしても ヘッダー部分にのみ反映されるファイルだったりすることもあるでしょう。

手元の事例では幾ら新規に必要な外部JavaScriptファイルの読み込みに成功しても、 機能しないのに首を捻って、更に突っ込んで見てみると、 其のJavaScriptファイルはjQueryを必要としているのに、 当のjQueryファイルがフッター部分での読み込みになっていたりします。 必要なjQueryが読み込まれていないのですから機能する筈もありません。 しかもそのjQueryファイルを読み込むのは各ファイルにインクルードの旨、直書きされる、拡張子 .html のHTMLファイルで .htaccess を書き換えて拡張子の制限を広げたりするのも要らぬオーバーヘッドが発生しそうですし、 全読み込み元ファイルをPHPファイルなどにするのも工数が嵩みますし、 成る可くなら他に影響を与えたくないための当初取ろうとした手法であれば、本末転倒です。 するとフッターファイル内で場合分け操作ができない状況も鑑みねばなりません。

現在一般的なレスポンシブWebデザインでは、 基本的にパソコン画面と同様のHTMLソースをスマホ画面でも表示させます。 其の際、スタイルシートを駆使しますが、 一般的に縦長画面で閲覧されるスマホ画面では工夫が必要になります。

画面縦長変化に於ける工夫

パソコン画面で横に広く表示させていたコンテンツも スマホ画面では縦長にならざるを得ないため、 例えば横に並列して並べていたコンテンツを故意にカラム落ちさせ、 縦表示させるテクニックはごくごく基本的な手法です。

CSS設計完全ガイド～詳細解説＋実践的モジュール集

処がコンテンツによっては其の基本的な手法が適切でない場合もあります。 其の様なケースではスマホ画面の場合にはタブ切り替えは屡々採用されるテクニックです。 ネットで検索しても有用な情報が多く見付けられます。 例えばQiitaにも2017年8月6日付けで以下の情報が寄せられています。

jQueryとCSSでシンプルなタブ切り替え

記載されるコードは散見される同様な情報が上手くまとめられたように、 簡便さに加え汎用性も考慮され書かれています。 基本的には切り替えボタン用のタブを構成するタグと、切り替えられるコンテンツを表示させるタグが同数用意され、 初期に表示される以外のコンテンツを含むタグには非表示属性、 display: none; がスタイルシートで付与されており、 クリックされたタブと同じ、先頭から数えた数のコンテンツタグ以外に非表示属性が与えられるように jQuery で処理される、当該機能の定番的な構成が取られています。

TABLEタグの場合

レスポンシブWebデザインで扱い難い表組み（tableタグ）データ

処でレスポンシブWebデザインで扱い難いデータに表組み（tableタグ）があります。 一般的にパソコンの広い画面では一覧性に富み、 表組みも全体を表示させられる余裕がありますが…

スマートフォンに於けるWebサイト表示では PC表示に比べて一般的に表示領域が狭くなります。 スマートフォンでは縦に構えて閲覧される場合が多ければ特に横幅は制限が生じるものです。 此の為、一覧性が劣れば工夫が表示にも必要になります。

問題点の検出と本記事の目論見

スマホでリンク先リストをカテゴリ毎にタブ表示する

これから学ぶHTML/CSS

例えば図に見られる様にリンクリストをカテゴリ毎にまとめ 上部にタブを設え該当するリンクリストのタブがタップされた場合に リンクリストの表示を切り替えるのはしばしば見られる手法でしょう。 図ではデフォルトでオレンジ色のリンクリストAがアクティブとなって表示されており、 他の緑色のリンクリストB、薄紫色のリンクリストCは非表示となっています。

処で、其々のリンクリストカテゴリ内のリンクが増えれば、 此れ又、縦に長くなってスクロール必須の一覧性の劣る事態が生じますから、 下の図の如く其々のリンクリスト下部に示した様な其々のカテゴリに応じた ページングを表示するのも良く用いられる処でしょう。

リンクリスト上のタブをタップすればリンクリストの表示が切り替わる

此れを何も考えず其々のリンクリスト上のページングリンクをタップすると どのカテゴリのリンクリスト上あったとしても 新しく開かれるページはデフォルト状態であり、 上の図で言えばリンクリストB上のページング、リンクリストC上のページングから遷移して開かれるページでは リンクリストAが表示されてしまうでしょう。 閲覧者の身になればリンクリストB上のページングから遷移したページでは 開かれるタブはリンクリストBでなければ困惑してしまいます。 此れではユーザービリティ上、大きな問題を抱えていると言わざるを得ません。

其処で此の問題を解決する為に…

デザイン上、問題ないレベルのレイアウトを安易に実現出来るため屡々採られる一部を幅広に取るモデルがあります。

Webページの一部分だけ幅広にするデザインモデルに於いて幅広のメイン画像部分を画像スライダーにするデザインモデル

画像スライダー導入で発生する問題

中でも図示した様にメイン画像の部分を幅広にするだけでなく 其の画像が次々に切り替わる所謂画像スライダーを実現したいと言う要請は決して少なくはないようです。

しかし此の要請の実現に於いては問題が発生します。 画像スライダー部分をページ全体を規定する一定の幅より広く取ると ブラウザの表示時、デスクトップパソコンなどで充分画面サイズが広ければ問題ないのですが 一般にノートPCなどの小さな画面では横幅が収まり切らず横スクロールが発生し、 ちょっとしたことで画面が左右に動き扱い難いだけでなく 此の様なデザインを良しとする向きには許容範囲を超える横スクロールバーが表示されてしまいます。

処で解決のために画像スライダー部分をレスポンシブ対応にすると ブラウザの横表示が狭い場合には横幅はきっちり収まるのですが 縦幅も応じて小さくなってしまい、 他のコンテンツ部分と著しい差が生まれてしまいます。 此の時画像だけならまだしもメイン画像部分には惹句などが記されることも多く 其れ等の文字は極めて読み難い状態が招かれざるを得ません。

問題解決の基本方針

此の問題を解決するためにメイン画像部分を背景画像、即ちスタイルシートで background-images に指定する方法が考えられるでしょう。 此の手法を取れば画像を常に一定のサイズで表示されるにも関わらず 幅広の部分の横幅がブラウザサイズを超えても ブラウザサイズがページ全体を規定する一定の幅以上であれば横スクロールは発生しません。