PHP と CSS を使用して Web ページのテキスト サイズを変更する - Web サイトをデザインするときは、訪問者のすべてが聡明な若者であるわけではなく、Web ブラウザーのさまざまな使用方法に必ずしも完全に精通しているわけではないということを念頭に置いてください。
Web サイトをデザインするときは、訪問者のすべてが聡明な若者であるとは限らず、Web ブラウザーのさまざまな使用方法に必ずしも十分に精通しているわけではないということを念頭に置いてください。賢いデザイナーはこれを理解しており、高齢者や障害のある人でも余分な労力を費やすことなく簡単かつ快適に Web サイトを使用できるように、さまざまな特別なアクセシビリティ機能を Web サイトのデザインに組み込むことがよくあります。
テキストサイザーは、ウェブサイトに必要な最も効果的なアクセシビリティ機能の 1 つです。つまり、ウェブページのテキストサイズを変更して、読みやすくするために通常使用されます。多くのブラウザにはすでにこの機能が搭載されていますが、Web ブラウザの初心者はこの機能の使い方を知らないため、Web サイトの設計者は各 Web ページに使いやすいボタンを配置してこの機能を実装することがよくあります。
このガイドでは、PHP と CSS を使用してこの機能的なテキストサイザーを Web ページに追加する方法を説明します。このアクセシビリティを Web サイトに追加して、Kudos ポイント 50 以上のユーザーから最大限に活用してください。読み続けてください。使い方を学びましょう。
注: このガイドは、Apache と PHP がすでにインストールされていることを前提としています
。
コードを記述する前に、時間をかけてテキスト サイズ設定機能がどのように機能するかを理解すると役に立ちます。サイトの各ページには、ユーザーがページのテキスト サイズ (小、中、大) を選択できる一連のコントロールが含まれており、各フォント サイズは、Web のレンダリングに使用されるテキストを保存する CSS スタイル シートに対応しています。ページのテキストのサイズ。
ユーザーが選択を行うと、PHP はユーザーが選択したフォント サイズをセッション変数に保存し、Web ページをリロードして、選択したフォント サイズをセッション変数から読み取り、対応するスタイル シートを動的に呼び出して更新します。小さいフォント サイズまたは大きいフォント サイズでページを再レンダリングします。
プロセス
の最初のステップ: Web ページの作成は、
HTML ドキュメントの作成から始まります。次に、リスト A の例を示します。
リスト A:
medium
">中 大
consecteturadipisicingelit、sed do eiusmodtemporincididuntutlabre et dolore
マグナ・アリクア。
Ad 最小限のベニアム、キスノストルッドの励起、ウラムコラボリス、西ウタリクイプ、エクスア
コモドコンセクワット。
Duisauteirure の悲しみを代表する
voluptateveliteessecillumdoloreeufugiatnullapariatur。
例外は、故意ではなく、責任を負うものではありません
オフィシエイトモリタニム ID ESTLABORUM。
ページの上部にあるテキスト ハイパーリンクに特に注意してください。各ハイパーリンクは、resize.php というスクリプト ファイルを指しており、URL GET メソッドを介して選択したフォント サイズを渡します。
このドキュメントを、.php 拡張子 (たとえば、index.php) を付けて Web サーバー ディレクトリに保存します。
ステップ 2: スタイル シートを作成する
次に、各テキスト サイズのスタイル シート ファイル (small.css、medium.css、large.css) を作成します。これは、small.css のファイルの内容です
。
フォント: 10px
同様
に、それぞれ 17 ピクセルと 25 ピクセルを使用して、medium.css とlarge.css を作成し、これらのスタイル シート ファイルを前の手順で作成した Web ページと同じディレクトリに保存できます。
ステップ 3: テキスト サイズ変更メカニズムを作成する
上で紹介したように、Web ページは、事前定義されたセッション変数を検索することによって、どのスタイル シート ファイルを読み込むかを「知る」ことができます。セッション変数は、スクリプト ファイル assign.php によって制御されます (リスト B を参照)。 )、このファイルは、ユーザーが Web ページの上部にあるテキスト サイズを変更するボタンをクリックするとアクティブになります。これは、resize.php の内容です。
List B
// セッションを開始します。
// 選択したサイズをセッションにインポートします
セッション開始();
$_SESSION['textsize'] = $_GET['s'];
header("場所: " . $_SERVER['HTTP_REFERER']);
?>
これは非常に簡単です。ユーザーが新しいテキスト サイズを選択すると、resize.php は GET メソッドを通じてフォント サイズの値を取得し、それをセッション変数 $_SESSION['textsize'] に保存し、ブラウザーをリセットします。最初に開いたページに戻ります。
もちろん、ここにはまだ欠けているコンポーネントがあります。Web ページは、ユーザーが現在選択しているテキスト サイズを自動的に検出し、対応するスタイル シートをロードする機能を備えています。この機能を追加するには、Web ページ ファイルのindex.php を開いて追加します。ファイルの先頭に次のステートメントを追加します (リスト C を参照)。
リスト C
// セッションを開始します。
//変数をインポートする
セッション開始();
// このページのデフォルトのテキスト サイズを設定します
if (!isset($_SESSION['textsize'])) {
$_SESSION['テキストサイズ'] = '中';
}
?>
次のように、 ... 要素の間にスタイルシート リンクを追加する必要もあります。
type="テキスト/css">
これはリスト D です。完全なindex.php ファイルは次のようになります。
リスト D:
// セッションを開始します。
//変数をインポートする
セッション開始();
// このページのデフォルトのテキスト サイズを設定します
if (!isset($_SESSION['textsize'])) {
$_SESSION['テキストサイズ'] = '中';
}
?>
type="テキスト/css">
文字サイズ: 小 | href="resize.php?s=medium">中 |
ロレミプサム・ドール・シット・アメット、
consecteturadipisicingelit、sed do eiusmodtemporincididuntutlabre et dolore
マグナ・アリクア。
Ad 最小限のベニアム、キスノストルッドの励起、ウラムコラボリス、西ウタリクイプ、エクス EA
コモドコンセクワット。
Duisauteirure の悲しみを代表する
voluptateveliteessecillumdoloreeufugiatnullapariatur。
例外は、故意ではなく、責任を負うものではありません
オフィシエイトモリタニム ID ESTLABORUM。
これがどのように機能するかを理解するのは非常に簡単です。Web ページがロードされると、現在のセッションが再開され、$_SESSION['textsize'] 変数が現在選択されているフォント サイズと一致するかどうかが確認され、対応するスタイル シートが動的にロードされます。これにより、Web ページが正しいサイズで自動的に再レンダリングされます。 PHP と CSS を組み合わせて使用することは、JavaScript を使用して CSS スタイル シートを動的に変更する従来の方法とは若干異なります。JavaScript 方法と比較して、PHP 方法の利点は、クライアントのサポートに依存する必要がないことです。特定のブラウザ専用の作品を作成することについて心配する必要はありません。おそらく、次回 Web サイトをデザインするときにこのアプローチがうまく機能することがわかるでしょう。コーディングを楽しんでください。