ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

    ウェブプログラミング講座

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テンプレートモンスター
ホームページテンプレート

Free Templates Online JP
無料ホームページテンプレート
Free Templates Online JP

株式会社ネットオン
採用Webマーケティング
indeed広告代理店

海外 SEO対策 トラッキングツール
海外 SEO対策
ランキングチェックツール

Rank Tracker

テクニック

HomeHTML&CSS講座 > スタイルシートスイッチャー

スタイルシートスイッチャー

投稿日:2007年9月4日   レベル:初心者    ソフトウェア:-

Step1:はじめに
各ユーザーが好きなカラースキームを選択できるサイトを作成したいと思いませんか?

このちょっとしたスクリプトを使用すれば、それが可能です。ユーザーは好きなカラースキームを自由に選ぶことができます。唯一の制限は、あなたがどれだけの種類を作成する気があるかです。

次の4つのスタイルシートがあるとしましょう。

blue.css
red.css
black.css
yellow.css


blue.cssが、デフォルトのカラースキームのスタイルシートです。

Step2:コード
次に、カラースキームがすべてのページに適用されるようにします。ここではセッションを使用します。セッションは、cookieと同様にブラウザに情報を保存しますが、cookieと異なるのは、コンピュータに留まらないことです。セッションはブラウザに保存され、ブラウザを閉じた時点で消去されます。

セッションを開始するには、次のコードを使用します。

<?php session_start(); ?>


このコードは、必ず他のどのタグ(doctypeを含む)よりも上に配置し、すべてのページに含める必要があります。

Step3:切り替え方法
コードの次の部分は、切り替えステートメントです。これによって、さまざまなスタイルシートに切り替えることができます。
<?php
if(isset($_GET['css'])){
switch ($_GET['css']) {

case 'red':
$stylesheet = '<link rel="stylesheet" type="text/css" href="red.css">';
$_SESSION['switchcss']=$stylesheet;
break;

case 'yellow':
$stylesheet = '<link rel="stylesheet" type="text/css" href="yellow.css">';
$_SESSION['switchcss']=$stylesheet;
break;

case 'black':
$stylesheet = '<link rel="stylesheet" type="text/css" href="black.css">';
$_SESSION['switchcss']=$stylesheet;
break;

// デフォルトのスタイルシート
default:
$stylesheet = '<link rel="stylesheet" type="text/css" href="blue.css">';
$_SESSION['switchcss']=$stylesheet;
}
}
?>


おわかりのように、次の3つのケースがあります。

case 'red'
case 'yellow'
case 'black'


それぞれに、次のコードが含まれています。


$stylesheet = '<link rel="stylesheet" type="text/css" href="">';


ただし、href="" (スタイルシートの場所)の値は、それぞれ異なります。

ただし、最後のものはdefaultという名前になっています。お察しのとおり、これがデフォルトのスタイルシートです。

コードの次の部分は、スタイルシートへの実際のリンクを配置する場所です。

<?php echo ($_SESSION['switchcss'])? $_SESSION['switchcss']: '<link href="blue.css" type="text/css" rel="stylesheet">';?>


このコードではSESSIONがエコーされます。これは、選択済したスタイルシートです。

コードの最後の部分は、リンクの場所です。

Select <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=red">[red]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=default">[blue]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=yellow">[yellow]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=black">[black]</a>


おわかりのとおり、各リンクの違いは、「?css=red/blue/yellow/black"」の部分のみです。

これらは、ここで使用しているケースの名前です。さらに追加したい場合は、ケースとリンクを新しいケース名で追加する必要があります。

では、コード全体を見てみましょう。

<?php session_start(); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Stylesheet Switch Test</title>


<?php
if(isset($_GET['css'])){
switch ($_GET['css']) {

case 'red':
$stylesheet = '<link rel="stylesheet" type="text/css" href="red.css">';
$_SESSION['switchcss']=$stylesheet;
break;

case 'yellow':
$stylesheet = '<link rel="stylesheet" type="text/css" href="yellow.css">';
$_SESSION['switchcss']=$stylesheet;
break;

case 'black':
$stylesheet = '<link rel="stylesheet" type="text/css" href="black.css">';
$_SESSION['switchcss']=$stylesheet;
break;

// デフォルトのスタイルシート
default:
$stylesheet = '<link rel="stylesheet" type="text/css" href="blue.css">';
$_SESSION['switchcss']=$stylesheet;
}
}
?>

<?php echo ($_SESSION['switchcss'])? $_SESSION['switchcss']: '<link href="blue.css" type="text/css" rel="stylesheet">';?>

</head>

<body>

<div id="something">
<div id="anotherthing">
Select <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=red">[red]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=default">[blue]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=yellow">[yellow]</a> | <a href="<?php echo $_SERVER['PHP_SELF']; ?>?css=black">[black]</a>
</div></div>

</body>
</html>


これで出来上がりです。ここをクリックすると、スタイルシートスイッチャーの実際の例を見ることができます。

引用:Web Design Library著者:Joseph Skidmore 翻訳:細島



スポンサードリンク

コメント

ランダム記事5件

2016年5月の人気記事ランキング