[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
(1)
まずは
Alternative Style: Working With Alternate Style Sheetsから
JavaScriptスクリプト「styleswitcher.js」をダウンロードする。
※念のためここにもアップしときます。
この中で
「有効日数」とかの設定も出来るはず。
(2)
これをhead内で呼び出し。
スクリプトで利用するスタイルシートも呼び出し。
<head>内に
<link rel="stylesheet" type="text/css" href="style.css" title="standard">
<link rel="alternate stylesheet" type="text/css" href="style1.css" title="alternate1">
<link rel="alternate stylesheet" type="text/css" href="style2.css" title="alternate2">
<script type="text/javascript" src="styleswitcher.js">
★フォルダに入れてる場合は「contents_css/」とか「js/」を忘れずに。
★変更するフォントのスタイルシートをrel=”alternate stylesheet”で
呼び出すことがポイント。
title=は処理を判断する時の名前というかんじ。
(3)
HTML内には下記のタグを記入
<a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">小</a>
<a href="#" onclick="setActiveStyleSheet('standard'); return false;">中</a>
<a href="#" onclick="setActiveStyleSheet('alternate2'); return false;">大</a>
★style.css内で#contentsと指定しているので
<div id="contents">内がサイズ変更される。
つまりサイズ変更したいコンテンツをここに入れる。
divの名前がcontentsではない場合は、style.css内の#contentsも変更する。
(4)
cssファイルを3つ作成する。もちろんサイズ変更可能。
●style.cssには
#contents{font-size:100%;}
●style1.cssには
#contents{font-size:80%;}
●style2.cssには
#contents{font-size:120%;}
これで完成！！
画像にポインタを当てると別の画像に切り替わるJavaScript。
(1)
<head>～</head>タグ内に
<meta http-equiv="Content-Script-Type" content="text/javascript">
を追加する。
(2)
画像を貼り付ける。
<img src="top.jpg">
(3)
このタグに名前をつける。
<img name="over" src="top.jpg">
(4)
onMouseOverを使って
マウスを乗せた時の動作（マウスを乗せると画像が切り替わる）スクリプトを追加する。
<img name="over" src="top.jpg" onMouseOver="document.over.src='top_on.jpg';">
「ドキュメント内のoverってやつのsrcをこれに替えろ」みたいな。
(5)
必要ならマウスが「離れた時の動作」を
onMouseOutを使って追加する。
<img name="over" src="top.jpg" onMouseOver="document.over.src='top_on.jpg';"
onMouseOut="document.over.src='top.jpg';">
-------------------------
その他
onClick ・・・ クリックされた時。
onDblClick ・・・ ダブルクリックされた時。
onKeyPress ・・・ キーボードが押された時。
ul,liに対して
「float:left;」
を指定してあげることで
横並びになる。
「list-style-type: none;」も忘れずに。
--------------
cssを直接書き込む場合はこう↓
<ul style="list-style:none">
<li style="float:left">＜項目１＞</li>
<li style="float:left">＜項目２＞</li>
<li style="float:left">＜項目３＞</li>
</ul>
--------------
こんなことも出来ちゃう。
それぞれの文字を枠で囲んで
さらに隣との間隔を空ける。
float: left;
width: 8em;
margin-right: 5px;
padding: 2px;
border: 1px #ffb366 solid;
background-color: #fffdee;
text-align: center;
英語サイトを作る場合は
charsetを
utf-8
ではなく
iso-8859-1
にしとけばいいのかな？
utf-8で社内統一でーす。
とりあえず自分の作ったutf-8の英語サイトが
文字化けしているかどうかを調べるには
そのページの表示エンコードを
英語圏のものに変えてみれば
チェックできるのではないでしょうか。
（例えば西ヨーロッパ言語（ISO）とか）
違うかしらね？
------------------
★摂氏の表示は
↓
°C
★英語サイトでダブルクォーテーションを使用する場合は
キーボードにある「"」でいいのではないでしょうか。
（これと同じことですよ。）
↓
"
★一応こんなのがあるんですけどね↓
‘□’
‘ ’ シングルクオート (左、右)
“□”
“ ” ダブルクオート (左、右)
一重引用符、シングルクォーテーションマーク ( ‘ ’ )
二重引用符、ダブルクォーテーションマーク ( “ ” )
英国では一重引用符、米国では二重引用符を用いることが多い。
---------------------
コロン ( : )
セミコロン ( ; )
アポストロフィー( ' )
アスタリスク / 星印( * )
斜線、スラッシュ ( / )
逆斜線、バックスラッシュ( \ )
疑問符 / クエスチョンマーク( ? )
感嘆符 / エクスクラメーションマーク( ! )
感嘆修辞疑問符 / インテロバング(?!)
プライム (Prime) ( ′ )、ダブルプライム ( ″ )
※英数字の右肩に付ける記号で数学などで用いられる（AとA′など）。
日本ではダッシュ、ツーダッシュと呼んでいるが、
これでは—（ダッシュ）と区別が付かない。
