(10) 12/10の授業内容:CGI[2]補足

CSSを切り替える

以下は、選んだ色によって占いを行うものである。ここでいずれかの色を選んだ上で「占う」ボタンを押すと、占い結果が表示されるが、その際に背景の色を選んだ色と同じ色にしたいというようなことを考えてみる。

背景色はbody要素に対してCSSのbackground-colorプロパティを指定することで任意の色にすることができる。CSSによるスタイルの指定にはいくつかの方法があるが、ここでは<head></head>内に記載する方法を示す。

入力フォーム

<form method="POST" action="./color.rb">
<p>占いです。今の気分を表す色を選んでね。</p>
<p>
<input type="radio" name="color" value="red">赤
<input type="radio" name="color" value="blue">青
<input type="radio" name="color" value="green">緑
</p>
<p>
<input type="submit" name="ok" value="占う">
<input type="reset" name="ng" value="やめておく">
</p>
</form>

使用しているのはラジオボタンである。ラジオボタンはいずれか1つしか選択することができないようにするため、name属性を3つともcolorに指定している。選択した色をvalue、colorをkeyとしてcolor.rbに引き渡される。

CGIスクリプト（color.rb)

#!/usr/bin/env ruby

require 'cgi'
c = CGI.new("html4")
print "Content-type: text/html; charset=EUC-JP\n\n"

select = c["color"]

print "<html>\n"
print "<head>\n"
print "<title>診断結果</title>\n"
print "<meta http-equiv=\"Content-Style-Type\" content=\"text/css\">\n"
print "<style type=\"text/css\">\n"
print "<!--\n"

if select == "red"
  print "body {background-color: #ff0000}\n"
  uranai = "元気いっぱいですね"
elsif select == "blue"
  print "body {background-color: #0000ff}\n"
  uranai = "落ち込んでいますね"
elsif select == "green"
  print "body {background-color: #00ff00}\n"
  uranai = "目が疲れていますね"
end

print "-->\n"
print "</style>\n"
print "</head>\n"
print "<body>\n"

print "<h1>診断結果</h1>\n"

print "<p>あなたが選んだのは#{select}です。#{uranai}。</p>\n"

print "</body>\n"
print "</html>\n"

CSSを使用する場合、<head></head>内に
<meta http-equiv="Content-Style-Type" content="text/css">
と書く必要がある。

Rubyプログラムの中に書くため、print""をつけ、""内で使用されている"はバックスラッシュをつけて
print "<meta http-equiv=\"Content-Style-Type\" content=\"text/css\">\n"
となる。

CSSのスタイル自体は

<style type="text/css">
<!--
  body {background-color: #ff0000}
-->
</style>

で指定されている。color.rbではbody {background-color: #ff0000}の部分をif文でくくり、条件に応じて色を変更している。

詳細は情報リテラシーIIのCSSのページを参照のこと。

外部CSSファイルを呼び出す

CSSによるデザインの指定を行う場合、上述の通り<head></head>内に具体的に書いてもよいが、別にファイルを作成しておいても良い。この場合拡張子がcssのテキストファイルを作成しておき、<head></head>内には<style></style>で具体的に指定するかわりに

として呼び出すこともできる。これにより、hoge.cssに記載したスタイルが呼び出したhtmlファイルに適用される。

CSSファイルのサンプル（2007.css; このページで使用しているCSS）

CSSのプロパティの詳細についてはGoogle等で「CSS　プロパティ」をキーワードにして検索してみること。

前のページに戻る