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

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

WBOY

リリース： 2016-07-13 10:30:07

オリジナル

1120 人が閲覧しました

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