スポンサー


    ウェブデザイン基礎講座

    フォトショップ講座

    HTML&CSS講座

    グラフィック講座

    Flash講座

    3D講座

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

    サイトメンテナンス講座

    サイト紹介

    スペシャルリンク

サイト内検索

 メールマガジン

テクニック

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月の人気記事ランキング