PHP と CSS を使用して Web ページのテキスト サイズを変更する_PHP チュートリアル

PHP と CSS を使用して Web ページのテキスト サイズを変更する - Web サイトをデザインするときは、1 つのことに留意してください。すべての訪問者が聡明な若者であるわけではなく、Web ブラウザーのさまざまな使用方法に必ずしも十分に精通しているわけではありません。

Web サイトをデザインするときは、次の点に留意してください。訪問者のすべてが元気な若者であるとは限らず、Web ブラウザーのさまざまな使用方法に必ずしも完全に精通しているわけではありません。賢いデザイナーはこれを理解しており、高齢者や障害のある人でも余分な労力を費やすことなく簡単かつ快適に Web サイトを使用できるように、さまざまな特別なアクセシビリティ機能を Web サイトのデザインに組み込むことがよくあります。

テキストサイザーは、あらゆるWebサイトに必要となる最も効果的なアクセシビリティ機能の1つです。つまり、Webページのテキストサイズを変更しやすくするために使用されるツールです。多くのブラウザにはすでにこの機能が搭載されていますが、Web ブラウザの初心者はこの機能の使い方を知らないため、Web サイトのデザイナーは各 Web ページに使いやすいボタンを配置してこの機能を実装することがよくあります。

このガイドでは、PHP と CSS を使用してこの機能を Web ページに追加する方法を説明します。このアクセシビリティをサイトに追加して、50 歳以上のユーザーが最大限に活用できるようにしてください。賞賛ポイントを獲得して読み続けてください。使い方を学ぶために。

注: このガイドは、Apache と PHP がインストールされていることを前提としています

どうやって動くの？

コードを記述する前に、時間をかけてテキスト サイズ設定機能がどのように機能するかを理解すると役に立ちます。サイトの各ページには、ユーザーがページのテキスト サイズ (小、中、大) を選択できる一連のコントロールが含まれており、各フォント サイズは、Web のレンダリングに使用されるテキストを保存する CSS スタイル シートに対応しています。ページのテキストのサイズ。

ユーザーが選択を行うと、PHP はユーザーが選択したフォント サイズをセッション変数に保存し、Web ページをリロードして、選択したフォント サイズをセッション変数から読み取り、対応するスタイル シートを動的に呼び出します。 - 小さいフォント サイズまたは大きいフォント サイズでページをレンダリングします。

プロセス

ステップ 1: Web ページを作成する

HTML ドキュメントの作成から開始し、最初にプレースホルダーのコンテンツを完成させます。リスト A は例です:

リストA:

文字サイズ: 小 | href="resize.php?s=medium">中 |

Loremipsum dolor sit amet,

Consectetradipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore

マグナ・アリクア

。

Ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex ea

commodoconsequat.

Duisauteirure dolor in reprehenderit in

voluptateveliteessecillumdoloreeufugiatnullapariatur.

Excepteursintoccaecatcupidatat non proident, sunt in culpa qui

Officiadeseruntmollitanim id estlaborum.

ページの上部にあるテキスト ハイパーリンクに特に注意してください。各ハイパーリンクは、resize.php という名前のスクリプト ファイルを指しており、選択したフォント サイズを URL GET メソッド経由で渡します。

このドキュメントを、.php 拡張子 (たとえば、index.php) を付けて Web サーバー ディレクトリに保存します。

ステップ 2: スタイルシートを作成する

次に、各テキスト サイズのスタイル シート ファイルを作成します: small.css、medium.css、large.css。これは small.css のファイルの内容です。

ボディ{

フォント: 10px

}

同様に、それぞれ17pxと25pxを使用してmedium.cssとlarge.cssを作成し、これらのスタイルシートファイルを前の手順で作成したWebページと同じディレクトリに保存できます。

ステップ 3: テキスト サイズ変更メカニズムを作成する

上で紹介したように、Web ページは、事前定義されたセッション変数を探すことで、どのスタイル シート ファイルを読み込むかを「知る」ことができます。セッション変数は、スクリプト ファイル、resize.php によって制御されます (リスト B を参照)。 . Web ページの上部にあるテキスト サイズを変更するボタンがアクティブになります。これは、resize.php の内容です。

リストB

// セッションを開始します

// 選択したサイズをセッションにインポートします

session_start();

$_SESSION['textsize'] = $_GET['s'];

header("場所: " . $_SERVER['HTTP_REFERER']);

?>

これは非常に簡単で、ユーザーが新しいテキスト サイズを選択すると、resize.php は GET メソッドを通じてフォント サイズの値を取得し、それをセッション変数 $_SESSION['textsize'] に格納し、ブラウザをリダイレクトします。先ほど開いたページへ。 [次へ]

もちろん、ここにはまだ欠けているコンポーネントがあります。インテリジェンスにより、Web ページはユーザーが現在選択しているテキスト サイズを自動的に検出し、対応するスタイル シートをロードできます。この機能を追加するには、Web ページ ファイルのindex.php を開き、次のステートメントをファイルの先頭に追加します (リスト C を参照):

リストC

// セッションを開始します

// 変数をインポートします

session_start();

// このページのデフォルトのテキストサイズを設定します

if (!isset($_SESSION['textsi

http://www.bkjia.com/PHPjc/767404.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/767404.html技術記事 PHP と CSS を使用して Web ページのテキスト サイズを変更する Web サイトをデザインするときは、訪問者全員が聡明な若者であるとは限らず、必ずしも Web ブラウジングに完全に精通しているわけではないということを念頭に置いてください。