トップページ -> コンピュータ実習 -> JavaScript による Web プログラミング -> スタイルスイッチの例
[サイトマップへ], [サイト内検索へ],

スタイルスイッチの例

サイト構成 連絡先,業績など コンピュータ実習 データの扱い コンピュータ設定 教材(公開) サポートページ

この Web ページでは,

MITSUE-LINKS JavaScript Library を用いて次のことを行う.


準備

◆ MITSUE-LINKS JavaScript Library を入手

http://www.mitsue.co.jp/service/produce/mjl.html

◆ JavaScript に関する Web ブラウザの設定


スタイルスイッチを使って文字サイズを変える例

◆まず、切り替え用のスタイルシートを作る

◆HTMLファイルの例

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <link rel="alternate stylesheet" type="text/css" href="style/textS.css" title="textS" />
        <link rel="stylesheet"           type="text/css" href="style/textM.css" title="textM" />
        <link rel="alternate stylesheet" type="text/css" href="style/textL.css" title="textL" />

        <title>
            スタイルスイッチの例
        </title>

        <script type="text/javascript" src="./mjl/mjl.js"></script>
        <script type="text/javascript" src="./mjl/run.js"></script>

        <style>
* {
        margin: 0px;
        padding: 0px;
}
#resize-buttons {
        height: 40px;
}
#resize-buttons ul {
        list-style-position: outside;
        padding-top: 5px;
}
#resize-buttons ul li {
        list-style-type: none;
        list-style-position: outside;
        float: left;
        display: inline;
}
#resize-buttons ul li a {
        width: 32px;
        height: 32px;
        align: center; 
        margin: 8px;
        padding: 8px;
        border: 1px solid #bbbbbb;
        text-align: center;
        font-weight: bold;
}
#resize-buttons ul li a:hover {
        color: #FFFFFF;
        background-color: #000000;
}
#resize-buttons ul li a.resize-button-textS {
        font-size: small;
}
#resize-buttons ul li a.resize-button-textM {
        font-size: medium;
}
#resize-buttons ul li a.resize-button-textL {
        font-size: x-large;
}
        </style>
    </head>

    <body>
      <h1>スタイルスイッチャ</h1>
      
      <div id="resize-buttons">
        <ul class="styleSwitcher">
            <li> 文字サイズの変更: 
              <a href="#textS" class="resize-button-textS" title="文字サイズを「小」に変更する">小</a></li>
            <li> <a href="#textM" class="resize-button-textM" title="文字サイズを「中」に変更する">中</a></li>
            <li> <a href="#textL" class="resize-button-textL" title="文字サイズを「大」に変更する">大</a></li>
        </ul> 
    </body>
</html>


スタイルスイッチを使って色を変える例

◆まず、切り替え用のスタイルシートを作る

◆HTMLファイルの例

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
    <head>

        <meta http-equiv="Content-Type" content="text/html; initial-scale=1.0; charset=Shift_JIS" />
        <meta http-equiv="Content-Style-Type" content="text/css" />
        <meta http-equiv="Content-Script-Type" content="text/javascript" />
        <meta http-equiv="MSThemeCompatible" CONTENT="yes" />

        <link rel="stylesheet" type="text/css" href="style/black.css" title="Black" />
        <link rel="alternate stylesheet" type="text/css" href="style/red.css" title="Red" />

        <title>
            スタイルスイッチャ
        </title>

        <script type="text/javascript" src="mjl/mjl.js"></script>
        <script type="text/javascript" src="mjl/run.js"></script>
    </head>

    <body>
        <h1>スタイルスイッチャ</h1>
            
        <ul class="styleSwitcher">
          <li><a href="#Black">黒くする</a></li>
          <li><a href="#Red">赤くする</a></li>
        </ul>
          
    </body>
</html>