YouTubeに代表されるiFrame埋め込みのレスポンシブ対応2024年版

標題について結論から言えば、比較的新しいCSSプロパティの「aspect-ratio」を使うものです。以下、従来多く採用されていた手法から此処に至る状況などを記します。2024年版とは口幅ったいですが、環境の変化などから生じた比較的新しい手法を、備忘録的に書き残した時期が今年2024年ということでご容赦願いたく思います。

レスポンシブとは?

表示される縦横の寸法が定まっていれば、本来此の記事に記す如き厄介な手法を使う必要もありません。では、YouTubeなどをホームページに埋め込む際に、何故、標題に記す処のレスポンシブ対応などが必要になるのでしょうか。

近年のホームページに於いてはネットの雄Googleの後押しも有ってか、「レスポンシブ」なる手法が採用されるケースが多く見られます。「レスポンシブ」とは一々「レスポンシブWEBデザイン」と言うのが面倒で、最初の部分を取って称するもので、英語の「responsive」が反応する、とか、敏感な、とか言う意味の形容詞で有る如く、反応するWEBデザインです。では、何に反応するかと言えばブラウザの幅に反応するのであって、幅に応じて姿形を変えるデザインを意味しています。斯く言う本サイトもレスポンシブを採用しています。

以前、ホームページはパソコンで見るものと相場が決まっていた時期には此の様な面倒な処置も必要有りませんでしたが、世の中にスマホが普及するに連れ、一般にスマホでもホームページが多く閲覧される様になり、状況の移り変わる過渡期、端境期に於いてはWordPressにもPCとスマホで表示のテーマを分けるプラグインなども有りました。詰まり現在のホームページでは基本横長画面のPC用と縦長画面のスマホ用に最適化した、最低二つの表示様式を用意しなければならなくなりました。

投稿日:
カテゴリー: CSS

特定のページのときのみ外部JavaScriptファイルをJavaScriptファイルから読み込む

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

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

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

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

投稿日:
カテゴリー: javascript

スマホ画面でのみタブで表組みの縦列を切り替えるJavaScript

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

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

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

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

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

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

TABLEタグの場合

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

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

投稿日:
カテゴリー: javascript

CSSのみでフォントは不透過でその背景色のみを乗算でそのまた背景の画像に重ねる

仕上がりイメージは斯うです。

最終出力結果

仕上がりイメージ

先ずは最下層に背景画像があります。 上の例では神社の写真が其れに当たります。 其の上に帯がのり、其の上、左方に白のアイコン、右方に白のフォント文字が乗ります。 アイコンとフォント文字を包含した帯は元は紺色ですが、 乗算で其のまた背景画像に重ねられており、 唯に単色の不透過色の場合とは異なる深みを感じさせるイメージを醸し出しています。 此れを皆、CSSのみで実現したく試行錯誤しました。

初手

参考のために唯に単色の不透過の紺色の帯の場合を下に貼り置きましょう。 随分イメージが異なるのがはっきりします。

投稿日:
カテゴリー: CSS

EdgeでFlexboxの高さ指定の単位にパーセントが使えない問題

Webデザインとレスポンシブの現況

CSS3 から追加されたプロパティ Flexbox は其のレイアウトの柔軟さ故に現在主流の レスポンシブ (Webデザイン)と相性が良く、 行列のグリッド配置を扱わねばならない場合、 Floatプロパティに代わり頻繁に用いられるようになりました。 端末幅に応じて横5つ並びのアイテムが 4つ、3つと減じても見た目に違和感は抱かれない塩梅となっています。

処でレスポンシブに於いてはプロパティの値の単位に 百分率も頻繁に用いられる処です。 従来PCでの閲覧に限られて考えられていたデザインに於いては サイズは固定で主に単位としてピクセルが用いられていましたが、 閲覧者の環境に応じて多くのサイズが考えられるデバイスの 横幅にピタリと合わせる為には其れでは間に合わず パーセンテージの採用されるに至りました。

また主流の座からは滑り落ちたものの Microsoft社製のブラウザもまだまだ残念ながら健在です。 世の中のデファクトスタンダードにも総意とも言える標準にも従わぬ、 Windows独占時代の残滓の如き路線たるオレオレ詐欺ならぬオレオレ仕様から 忌み嫌われたブラウザはインターネットエクスプローラ(IE)から今では Edge(エッジ)へと装いを改められていますが、其の中身はどうでしょうか。

今回、Edgeに特有に発生するFlexboxプロパティで パーセンテージを単位に使った場合に問題が発生するのを端無くも発見しましたので 本記事に共有するものです。

投稿日:
カテゴリー: CSS

タブ表示したカテゴリ毎のリンクリストでリンク先でも同カテゴリを表示する

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

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

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

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

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

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

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

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

投稿日:
カテゴリー: javascript

jQueryによるaタグリンクアドレスへのディレクトリ挿入処理

スマートフォン閲覧用のWebサイト制作にあたって、 「/sp/」などと命名したディレクトリを立て、 ルート「/」のPC版と一対一で対応させた上でスマートフォンからのアクセスの場合には スマートフォン専用ページを表示させるのは以前は一般的な手法でした。 現在ではレスポンシブWebデザインが主流となり余り見られなくなった手法ではありますが、 当該手法を採用したWebサイトのメンテナンスに於いては PC版との整合性を取る必要に迫られる事案もあります。

スマートフォンによるアクセスへの配慮

例えばブログシステムに於いて一般の利用者が記事投稿する際に 内部リンクを記載すればPC版にリンク先を求めるのは当然でしょう。 すると然るべきリダイレクトが施されていない場合には スマートフォンで当該サイトを訪れた閲覧者はPC版リンクを踏みますから 折角用意したスマートフォンページは表示されはせず、 一般的に横幅の広い、従って小さな文字のページの閲覧を強いられる格好になってしまいます。

其処で問題のあるリンクに於いては スマホ版での巡回に支障をきたさない様に配慮し、 PC版のリンクアドレスをリンク時に改変して「/sp/」を先頭に挿入したい要請があります。 本記事では此の実現にjQueryを用いて解決を図りたく思います。

投稿日:
カテゴリー: jQuery

WordPressにJavaScript背景画像スライダーVegasを導入する

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

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

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

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

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

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

問題解決の基本方針

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

投稿日:
カテゴリー: javascript

テーブルタグのレスポンシブ対応とiPhoneのフォント指定無効問題

スタイルシートで確りフォントサイズの指定をしているのに iPhoneに限って其の折角の指定が無効になっている場合が多々あります。 確認の為にPCブラウザのエミュレータで見て見ても問題ないのにiPhoneでは想定外のフォントサイズで表示されている事例としては Portraitモード、即ち縦位置で見ている画面をLandscapeモード、即ち横位置にすると 文字サイズがは大きくなる現象は割と知られているのではないでしょうか。 此れはスマホに於けるユーザービリティを考慮して スマホのブラウザでのみ有効な -webkit-text-size-adjust なる属性が用意され効いているのに起因するのも周知されている処だと思います。

しかし例えば自前のブログでは屡々振り仮名を持ちいるのですが 此の時利用する ruby タグで囲った部分には此の属性は効かないようで タグ内に記入した文字は横位置でも縦位置と同じフォントサイズであれば 横位置では思わぬ不揃いの文章表示となってしまうのでした。 此れなどは以下のリンク、サイト ヒビヅレの2011年5月24日の記事などに代表される情報を参照すれば bodyタグ、若しくはフォントサイズを指定する箇所の大枠部分に -webkit-text-size-adjust: 100%; を効かせてやれば解決するのでした。

投稿日:
カテゴリー: CSS

CSSのみでスマホのときだけ電話番号をタップ発信させる方法

商売上のホームページではヘッダーやフッター、及び必要コンテンツ内に 電話番号を表示するのは閲覧者に連絡を取って貰いたいならば欠かせません。 表示させるだけならばHTML上で記述すれば済む話です。 しかし最近ではスマートフォンが充分普及し個人個人が所有するようになり ホームページの閲覧も多くがスマートフォンからのものを配慮する必要があるようになりました。

スマートフォンは携帯電話ですから出来得るならば 電話番号の表示をタップしたと同時に通話発信して欲しいものであるのは言わずもがな、 此の事情を配慮して電話番号とおぼしきテキスト表示には スマートフォンに依っては自動でタップ即発信機能を持たせた機種も多くあります。

ところでデザイン上の配慮などで画像で電話番号を表示させたい要請も多くあります。 此の時画像をタップして通話発信させるには例えば以下のようなリンクを張る必要があります。

<a href="tel:0123456789"> <img src="/images/0123456789.png" alt="0123456789" /> </a>

此のHTMLコードはもちろん スマホでもPC画面上でも適用されますので 機能して欲しくないPCに依る閲覧時にもクリックで電話発信しようとして 警告ダイアログを閲覧者に拝ませる羽目になります。 此の事態は出来るならば避けたいものです。

投稿日:
カテゴリー: CSS