Next ホームページの 作 成 技 術 2012/02/25 制 作 編 集 : 庄 司 たけし この 資 料 は ホームページ 作 成 のための 諸 技 術 についてまとめたものである 資 料 1と 資 料 2は HTML の 基 礎 についての 復 習 用 資 料 3と 資 料 4は スタイルシートについてまとめたもの 資 料 5 ~ 資 料 7は Javascript について 例 題 を 示 しながら 解 説 している 資 料 8~ 資 料 10 は Perl によ る 自 作 CGI を 作 るのに 必 要 な 事 柄 を 解 説 し 最 後 に 簡 単 な 掲 示 板 の 作 成 例 を 示 している この 資 料 の Web 版 は 次 の URL に 掲 載 してある http://home.e02.itscom.net/shouji/raku/kouza/doc/index.html == 目 次 == 資 料 1: HTML 文 書 の 作 成... 1 1.HTML 文 書 の 作 成 ツール... 1 2.HTML はテキスト 形 式 で 文 書 構 造 を 書 き 表 したもの... 1 3.HTML はハイパーテキスト... 1 4. 日 本 語 文 字 コード... 1 5.HTML タグは ブロックタグ と 行 内 タグ に 分 類 される... 1 6.テーブルを 利 用 した 配 置 のデザイン... 2 7.フレームを 利 用 したページ... 2 8.HTML の W3C 標 準 への 準 拠 の 程 度 はブラウザによって 異 なる... 2 9.レンタルサーバーについて... 2 資 料 2: HTML 文 書 についての 補 足... 3 1. メモ 帳 を HTML 文 書 編 集 に 使 うときの 問 題... 3 2.Web サイトで 使 えるファイル 名... 3 3. 文 書 構 造 を 理 解 し 易 くするため 適 宜 改 行 とインデントを 行 う... 3 4.ソース 文 で 改 行 しても 表 示 上 は 改 行 されない... 3 5.HTML 文 書 における 特 殊 記 号... 3 6.color, bgcolor 属 性 などでの 色 の 指 定... 4 7.width, height 属 性 などでの 長 さ の 指 定... 4 8. 同 一 ページ 内 の 特 定 箇 所 にリンクを 張 るには... 4 9. 他 のページ 内 の 特 定 箇 所 にリンクを 張 るには... 4 10. 画 像 の 扱 い 方... 4 11. 画 像 ファイルについて... 4 資 料 3: CSS を 使 った 文 書 の 修 飾... 5 1.HTML は 文 書 の 構 造 CSS は 文 書 の 修 飾... 5 2.<body> タグで 文 書 全 体 のスタイルを 設 定 してみる... 5 3. 文 書 内 の 特 定 の 要 素 にスタイルを 設 定 してみる... 5 - i -
4.スタイルシートの3 種 類 の 設 定 方 法... 5 5.スタイルを 設 定 するためだけの <span> という 行 内 タグがある... 5 6.スタイル 設 定 の 対 象 を セレクタ という... 5 7. 要 素 セレクタ... 6 8. 複 数 セレクタ... 6 9. 子 孫 セレクタ... 6 10. 子 供 セレクタ... 6 11.クラススタイル... 6 12.ID スタイル... 6 13. 疑 似 クラス... 6 14. 疑 似 要 素... 6 15.スタイルの 継 承... 7 16.スタイルの 宣 言 がぶつかったときの 処 理... 7 17.スタイルの 値 として 色 長 さ URL を 指 定 するには... 7 18.コメントを 付 けるには... 7 19.CSS に 対 するブラウザの 対 応 状 況 は 異 なる... 7 資 料 4: 主 な CSS のプロパティ... 8 1. 文 字 色 背 景... 8 2.フォント... 8 3.テキスト... 9 4. 幅 高 さ... 10 5. 余 白 (マージン パディング)... 10 6. 枠 線 (ボーダー)... 11 7. 表 示 配 置... 12 8.テーブル... 13 9.リスト... 14 10.カーソル... 15 11. 入 力 補 助... 15 資 料 5: Javascript の 基 礎 知 識... 16 1.Javascript はプログラム 言 語... 16 2.Javascript の 組 み 込 み 方... 16 3.Javascript の 書 き 方... 16 4.Javascript のデバッグ... 16 5.オブジェクト... 17 6.プロパティ... 17 7.メソッド... 17 8.イベントハンドラー... 17 9.Javascript 疑 似 URL... 18 10. 変 数... 18 11. 配 列... 18 12. 関 数... 18 13. 変 数 配 列 関 数 の 使 い 方 の 注 意 事 項... 19 資 料 6: Javascript を 使 った 表 示 例... 20 例 題 1. 画 像 の 入 れ 替 え... 20 - ii -
例 題 2. 画 像 のロールオーバー... 21 例 題 3. 画 像 のスライドショウ(1)... 22 例 題 4. 画 像 のスライドショウ(2)... 25 例 題 5.フレームの 操 作... 27 例 題 6.ウィンドウの 操 作 (1)... 31 例 題 7.ウィンドウの 操 作 (2)... 33 例 題 8.DOM を 使 ったスタイルの 操 作... 36 資 料 7: Javascript についての 解 説... 39 1.ビルトイン 関 数... 39 parseint( 文 字 列 ), parsefloat( 文 字 列 )... 39 escape( 文 字 列 ), unescape( 文 字 列 )... 39 Number(), String()... 39 2.ビルトインオブジェクト... 39 Array オブジェクト... 40 Date オブジェクト... 40 Math オブジェクト... 41 String オブジェクト... 42 3.ナビゲータオブジェクト... 43 window オブジェクト... 43 navigator オブジェクト... 44 screen オブジェクト... 44 frame オブジェクト... 45 document オブジェクト... 45 location オブジェクト... 46 history オブジェクト... 46 image オブジェクト... 46 link, area オブジェクト... 46 anchor オブジェクト... 46 form オブジェクト... 47 form 内 の 要 素 オブジェクト... 47 4.DOM について... 48 資 料 8: Perl/CGI の 基 礎... 51 1.CGI とは... 51 2.サーバーの 選 び 方... 51 3.デバッグ 環 境 の 整 備... 51 4. 自 作 CGI のデバッグ... 52 5.CGI スクリプトの 出 力 原 理... 52 資 料 9: Perl の 書 式... 54 1. 文 字 列 に 関 する 書 式... 54 qq() と q()... 54 ヒアドキュメント... 54 2.いろいろな 演 算 子... 54 文 字 列 結 合 演 算 子... 54 比 較 演 算 子... 55 - iii -
論 理 演 算 子... 55 3. 変 数 の 扱 い 方... 55 変 数 関 数... 55 ハッシュ( 連 想 配 列 )... 56 環 境 変 数 用 の %ENV... 56 4. 処 理 の 制 御... 56 if 文 条 件 演 算 子... 56 for ループ ループ 制 御... 57 while ループ until ループ... 57 foreach ループ... 57 5.サブルーチン... 57 サブルーチン... 57 変 数 のスコープ... 58 6. 正 規 表 現... 58 正 規 表 現 とは... 58 置 換 演 算 子 s///... 60 変 換 演 算 子 tr///... 60 7.ファイルを 扱 う... 60 ファイルを 開 く 閉 じる... 60 ファイルの 入 出 力... 61 ファイルのロック... 62 ファイルテスト 演 算 子... 62 ファイルのパーミッション... 62 8. 主 な 関 数... 63 数 学 処 理 関 数... 63 時 間 処 理... 64 変 換 処 理... 64 文 字 処 理... 64 配 列 処 理... 65 連 想 配 列 処 理... 65 ディレクトリ 処 理... 66 I/O 処 理... 66 制 御 処 理... 66 宣 言 定 義 処 理... 67 資 料 10: CGI/Perl の 使 用 例... 68 1. 環 境 変 数 の 表 示... 68 2.フォームデータの 扱 い 方... 69 フォームから 送 信 されるデータの 形 式... 69 GET と POST の 違 い... 70 フォームデータの 解 読... 70 3.フォームを 使 った 表 示 例... 71 4. 外 部 CGI を 作 る... 73 5. 簡 単 な 掲 示 板 を 作 る... 74 - iv -
Top Back Next 資 料 1: HTML 文 書 の 作 成 1.HTML 文 書 の 作 成 ツール Homepage Builder, Golive, Dreamweaver などの 統 合 ソフト または テキストエディタ+FFFTP などのフリーソフト テキストエディタを 使 う 場 合 Windows の メモ 帳 には 注 意 すべきことがある( 資 料 2-1 参 照 ) フリーソフトのテキストエディタをインストールしてみよう 2.HTMLはテキスト 形 式 で 文 書 構 造 を 書 き 表 したもの HTML とは HyperText Markup Language の 略 Markup Language とは タグを 使 ってテキスト 形 式 で 文 書 構 造 を 記 述 する 言 語 画 像 音 楽 などのバイナリファイルは 外 部 ファイルとしておいて タ グを 使 ってこれらを 読 み 込 んで 利 用 する 画 像 ファイルは<img>タグで 外 部 ファイルを 読 み 込 んで 利 用 する 例 ) <img src="img/photo1.jpg" alt=""> 音 楽 動 画 ファイルは<embed>タグで 外 部 ファイルを 読 み 込 んで 利 用 する 例 1) <embed src="bg1.mp3" hidden="true"> 例 2) <embed src="movie1.wmv" type="v" width="320" height="285"> 3.HTMLはハイパーテキスト HTML のもう 一 つの 特 徴 はハイパーテキスト これは 文 書 内 のある 箇 所 から 他 の 文 書 などへリンクを 張 ってジャンプできるようにした 文 書 またはその 仕 組 みのこと 同 一 サイト 内 でのリンクは 相 対 アドレスで 他 サイトへは http:// から 絶 対 アドレスで 指 定 する 例 1) <a href="../index.html">トップページへ</a> 例 2) <a href="http://homepage3.nifty.com/mics/">mics-hp</a> 設 問 ) リンクの 色 を 変 えるには? リンク 先 のページを 別 ウィンドウで 開 くには? 4. 日 本 語 文 字 コード HTML 文 書 で 使 われる 日 本 語 の 文 字 コードは Shift_JIS, EUC-JP, UTF-8 など(メールでは ISO-2022-JP または UTF-8) どの 文 字 コードを 使 っているかを 示 すため ヘッダー 部 の 冒 頭 に 次 のように 書 いておく この 記 述 が 無 ければ ブラウザは 自 動 判 別 するが 間 違 った 判 別 をして 文 字 化 けを 起 こすこともある <meta http-equiv="content-type" content="text/html; charset=shift_jis"> ブラウザで 表 示 中 HTML の ソース を 見 る 方 法 を 覚 える 5.HTMLタグは ブロックタグ と 行 内 タグ に 分 類 される ブロックタグとは 文 章 の 一 塊 を 示 すもので 多 くのタグでは 上 下 に 空 行 が 付 く <h1> ~ <h6> <p> <div> <hr> <ol> <ul> <table> など 行 内 タグ(インラインタグ)とは ブロック 内 の 文 章 の 修 飾 などに 使 われるもの <br> <b> <i> <u> <font> <a> <img> など - 1 -
6.テーブルを 利 用 した 配 置 のデザイン <table> タグは 本 来 表 を 作 るためのものだが border="0" として 使 って 画 面 をうまくレイアウト するのによく 用 いられている <table> 関 連 のタグ 属 性 などの 使 い 方 を 復 習 しておこう 次 のような 画 面 を HTML タグを 使 って 書 いてみよう #2 #1 #3 #4 7.フレームを 利 用 したページ メニュー 用 frame を 使 うと 他 のページへのリンクが 容 易 になるなどのメリットがあるが 次 のようなデメ リットが 生 じる 1. メニュー 用 frame の 存 在 で 主 画 面 の 大 きさが 制 約 される 2. 親 frame には 本 文 などの 情 報 が 書 かれていないため 検 索 されにくい 従 って 本 格 的 な 営 業 用 のホームページでは 敬 遠 される 傾 向 にある 上 述 の 理 由 により フレーム 構 成 のトップページを 使 うのは 避 けた 方 が 無 難 であろう 8.HTMLのW3C 標 準 への 準 拠 の 程 度 はブラウザによって 異 なる ブラウザの 表 示 モードには 互 換 モード と 標 準 モード がある 1. 互 換 モード: 従 来 のブラウザでの 表 示 方 法 に 従 うモード 2. 標 準 モード: W3C の 標 準 仕 様 に 準 拠 して 表 示 するモード 表 示 モードを 指 定 するには 文 書 の 冒 頭 で 文 書 型 定 義 の 宣 言 を 行 う(DOCTYPE 宣 言 ) 標 準 モードを 指 定 するには 次 のように 宣 言 する <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 互 換 モードを 指 定 するには 次 のように 宣 言 する( 何 も 宣 言 しなければ 互 換 モードと 見 做 される) <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Internet Explorer の 場 合 互 換 モード と 標 準 モード では<table>などがかなり 異 なる 表 示 になる 更 に IE7 までは 標 準 モード を 指 定 しても いくつかのタグや 属 性 が IE 独 自 の 方 法 で 表 示 されてい た IE8 の 標 準 モード になって 漸 く W3C 標 準 通 りの 表 示 になったといえる 9.レンタルサーバーについて 無 料 のサーバーには 何 かと 制 約 が 多 いことに 注 意 1. 広 告 の 有 無 2. 無 料 でレンタルできる 容 量 は? 3. アップロードできるファイルの 種 類 に 制 約 がないか? 4. アップロードできるファイルの 大 きさに 制 約 がないか? 5. カウンターや 掲 示 板 を 利 用 できるか? 6. 自 作 cgi が 使 えるか? などなど 自 分 のプロバイダが 無 料 ホームページ 開 設 のサービスをしていれば それを 使 うのが 無 難 < 以 上 > - 2 -
Top Back Next 資 料 2: HTML 文 書 についての 補 足 1. メモ 帳 をHTML 文 書 編 集 に 使 うときの 問 題 空 白 タブ 記 号 改 行 記 号 などが 表 示 されない 全 角 の 空 白 が 間 違 いを 犯 しやすい Shift_JIS 以 外 の 日 本 語 文 字 コードでは 文 字 化 けを 起 こすことがある MacOS や Unix での 改 行 記 号 は Windows と 異 なるため HTML ソースに 書 かれている 改 行 記 号 が 半 角 の 空 白 で 表 示 されて 改 行 されないことがある このような 問 題 があるため ソースの 表 示 に 以 前 の IE では メモ 帳 が 使 われていたが IE8 からは 内 臓 のビューワーが 使 われるようになった HTML 文 書 作 成 に メモ 帳 を 使 う 場 合 は 上 記 の 問 題 に 注 意 を 要 す 問 題 回 避 のために メモ 帳 を 使 わず ソフト 開 発 用 のフリーソフトを 使 うのが 望 ましい ブラウザでのソース 表 示 を 内 臓 のビューワ ーではなく テキストエディタで 表 示 するようにしておけば 表 示 を 確 認 しながらソースを 容 易 に 修 正 で きる 2.Webサイトで 使 えるファイル 名 1. 半 角 の 英 数 字 を 使 うこと 全 角 の 日 本 語 文 字 半 角 のカタカナは 使 わないこと また + = & や 空 白 を ファイル 名 や 拡 張 子 に 使 うことはできない 2. HTML 文 書 の 拡 張 子 は html または htm とする ホームページのトップページは index.html または index.htm とする 3. 文 書 構 造 を 理 解 し 易 くするため 適 宜 改 行 とインデントを 行 う インデントには タブ 記 号 または 半 角 の 空 白 しか 使 えない 全 角 の 空 白 を 使 わないこと 全 角 の 空 白 は 日 本 語 の 漢 字 を 書 いたことになる 4.ソース 文 で 改 行 しても 表 示 上 は 改 行 されない 上 述 の 文 書 構 造 を 分 かりやすく 書 く 方 法 に 関 連 して ソースで 改 行 しても 表 示 上 改 行 は 行 われない 文 章 の 中 にある 連 続 する 空 白 や 改 行 記 号 タブ 記 号 などは 1 個 の 空 白 として 表 示 される <p> ~ </p> <div> ~ </div> などのブロックタグを 使 って 文 章 の 塊 を 一 つのブロックとして 定 義 するか ブロック 内 では 改 行 させたい 箇 所 に <br> タグを 書 く 5.HTML 文 書 における 特 殊 記 号 タグには < > " という 記 号 が 使 われているので これらの 記 号 を 文 字 として 書 くと タグと 読 み 間 違 えることが 起 き 得 る そのため そのまま 書 くことが 禁 止 されている これらの 記 号 を 表 示 させるに は 次 のように 書 かねばならない 表 示 したい 文 字 書 き 方 由 来 < < less than > > greater than " " quotation & & ampersand また 半 角 の 空 白 を 文 字 として 表 示 するには (no-break space)とする - 3 -
6.color, bgcolor 属 性 などでの 色 の 指 定 1. カラーネームによる 指 定 (red, blue など) 2. カラーコードによる RGB 値 で 指 定 (red は#ff0000, blue は#0000ff) 7.width, height 属 性 などでの 長 さ の 指 定 1. 画 面 の 最 小 単 位 であるピクセル 値 で 指 定 する(width="400") 2. 基 準 の 値 に 対 する 割 合 をパーセント 値 で 指 定 する(width="90%") 8. 同 一 ページ 内 の 特 定 箇 所 にリンクを 張 るには 1. リンク 元 では <a href="#n1"> 関 連 個 所 へ</a> と 書 き リンク 先 には <a name="n1"> と 書 くか <p id="n1"> ~ </p> などと 書 く name 属 性 id 属 性 の 値 は 同 一 ページで 一 意 であること( 重 複 してはいけない) 2. 同 一 ページの 先 頭 にジャンプさせるには <a href="#">ページ 先 頭 へ</a> 9. 他 のページ 内 の 特 定 箇 所 にリンクを 張 るには リンク 元 では <a href="page1.html#n1"> 関 連 個 所 へ</a> と 書 き リンク 先 ページ 内 の 特 定 箇 所 には <a name="n1"> と 書 くか <p id="n1"> ~ </p> などと 書 く 10. 画 像 の 扱 い 方 1. W3C の 仕 様 で <img> タグの 必 須 属 性 は src 属 性 と alt 属 性 alt 属 性 で 代 替 文 字 列 を 指 定 し たくなければ alt="" と 書 く 2. <img> タグは 行 内 タグに 分 類 され 文 章 の 中 に 画 像 を 挿 入 し 特 に 属 性 を 指 定 しない 場 合 は 周 囲 の 文 字 と 画 像 の 下 端 を 揃 えて 表 示 される 3. align 属 性 の 値 に top, bottom, middle, absmiddle の 何 れかを 指 定 して 周 囲 の 文 字 と 画 像 の 縦 位 置 関 係 を 指 定 できる 4. align 属 性 の 値 に left, right の 何 れかを 指 定 して 画 像 の 右 側 や 左 側 に 文 章 を 回 り 込 ませて 配 置 することができる <br clear="left"> とすれば align="left" の 指 定 が 解 除 される 5. width 属 性 height 属 性 で 画 像 の 大 きさをピクセル 値 で 指 定 して 拡 大 縮 小 することができる 表 示 できる 領 域 に 対 する 比 率 を% 値 で 指 定 することもできる 6. border 属 性 で 画 像 の 枠 線 の 太 さを 指 定 できる 画 像 にリンクを 張 ったとき 枠 線 にリンクの 色 が 付 いてしまう これを 嫌 うには border="0" と 設 定 する 11. 画 像 ファイルについて 代 表 的 なものは jpg ファイルと gif ファイル jpg ファイルはフルカラーに 対 応 しておりデジカメ 写 真 な どに 使 われる gif ファイルは 256 色 以 下 の 画 像 ファイルで イラストやボタン 画 像 などへの 使 用 に 適 し ている 画 像 の 背 景 を 透 過 表 示 にする 透 過 GIF 複 数 画 像 を 1 つのファイルに 収 録 したアニメーション GIF などがある < 以 上 > - 4 -
Top Back Next 資 料 3: CSSを 使 った 文 書 の 修 飾 1.HTMLは 文 書 の 構 造 CSSは 文 書 の 修 飾 CSS(Cascading Style Sheet)で 細 かく 文 書 の 体 裁 を 整 えることができる 2.<body> タグで 文 書 全 体 のスタイルを 設 定 してみる <body style="margin-top: 40px; margin-bottom: 40px"> ~ </body> この 例 では 画 面 の 上 下 のマージンを 設 定 している スタイルの 設 定 は "プロパティ: 値 " が 基 本 複 数 のスタイルはセミコロン ; でつなぐ 3. 文 書 内 の 特 定 の 要 素 にスタイルを 設 定 してみる <b style="color: red; font-size: 14pt"> 赤 い 太 字 </b> 赤 い 太 字 4.スタイルシートの3 種 類 の 設 定 方 法 1) style 属 性 を 使 って 特 定 のタグ( 要 素 )に 設 定 する 方 法 上 に 示 した 例 参 照 2) ヘッダー 部 で 内 部 スタイルシート を 定 義 する 方 法 <style type="text/css"> body {margin-top: 40px; margin-bottom: 40px;} b {color: red; font-size: 14pt;} </style> 内 部 スタイルシートは この 文 書 に 限 定 してスタイルの 定 義 を 行 うもの 3) ヘッダー 部 で 外 部 スタイルシート のファイルを 読 み 込 んで 使 う 方 法 <link href="sample.css" rel="stylesheet" type="text/css"> 外 部 ファイルは css という 拡 張 子 を 使 い 内 容 は 次 のように 書 く body {margin-top: 40px; margin-bottom: 40px;} b {color: red; font-size: 14pt;} 外 部 スタイルシートを 使 えば 複 数 のページに 同 じスタイルを 設 定 できる 5.スタイルを 設 定 するためだけの <span> という 行 内 タグがある 例 ) <span style="font-size: 14pt;"> ~ </span> 6.スタイル 設 定 の 対 象 を セレクタ という セレクタの 主 なものは 次 の 通 り 要 素 セレクタ( 要 素 スタイル) 複 数 セレクタ(グループ 化 ) 子 孫 セレクタ 子 供 セレクタ - 5 -
クラスセレクタ(クラススタイル) 一 意 セレクタ(IDスタイル) 疑 似 クラス 疑 似 要 素 7. 要 素 セレクタ ページ 内 で 使 われる 要 素 のスタイルを 一 括 して 設 定 する 4 項 で 示 した body, b の 例 参 照 8. 複 数 セレクタ 例 ) p, table {font-size: 12pt;} 複 数 の 対 象 に 同 じスタイルを 設 定 している 9. 子 孫 セレクタ 例 ) p b {color: red;} 10. 子 供 セレクタ p 要 素 の 子 要 素 または 孫 要 素 などとなる b 要 素 のスタイルを 設 定 している 例 ) p>b {color: red;} p 要 素 の 子 要 素 となる b 要 素 のスタイルを 設 定 している 孫 要 素 には 適 用 されない 11.クラススタイル.s1 {color: red;} などと 設 定 しておいて <b class="s1"> ~ </b> などとする スタイルを s1 というクラスとして 定 義 し それを 任 意 の 要 素 に 適 用 できるようにする.s1 {color: red;} と.s2 {font-size: 12pt;} という2つのクラスが 定 義 されているとき class="s1 s2" として 複 数 のクラスを 同 時 に 適 用 できる 子 孫 セレクタなどと 組 み 合 わせて 使 用 することもできる.s2 b {color: red;} とすれば class="s2" と 記 述 した 要 素 の 子 孫 にあたる b 要 素 に このスタイルが 適 用 されることになる p.s1 {color: red;} とすれば p 要 素 の 子 孫 要 素 の 内 class="s1" と 記 述 した 要 素 にのみ このスタイ ルが 適 用 される p.s1 {color: red;} という 書 き 方 即 ち p と.s1 をくっ 付 けた 書 き 方 もある この 場 合 は class="s1" と 記 述 した p 要 素 に 対 してのみ このスタイルが 適 用 される 12.IDスタイル #n1 {font-size: 16pt;} などと 設 定 して <h1 id="n1"> ~ </h1> として 使 う id 名 は 一 意 であること クラススタイルと 同 様 に 子 孫 セレクタなどと 組 み 合 わせて 使 用 することもでき る id 名 および 上 述 のクラス 名 に 使 える 文 字 は アルファベット 数 字 ハイフンのみ 最 初 の 文 字 はア ルファベットであること 13. 疑 似 クラス よく 使 われるのは リンクに 関 する :link, :visited, :hover, :active の 4 種 類 a:hover {color: red;} でリンク 文 字 の 上 にマウスを 移 すと 文 字 色 が 赤 に 変 わる 14. 疑 似 要 素 よく 使 われるのは :first-letter(ブロック 要 素 の 先 頭 一 文 字 目 )と :first-line(ブロック 要 素 の 一 行 目 ) p:first-letter {color: red;} で p 要 素 の 最 初 の 一 文 字 目 が 赤 になる - 6 -
15.スタイルの 継 承 親 要 素 に 設 定 した font-size は その 要 素 配 下 の 子 要 素 などにも 適 用 される これをスタイルの 継 承 (inherit)という 但 し p 要 素 に 設 定 した border プロパティなどは 子 要 素 に 継 承 されない 親 のスタイルを 強 制 的 に 継 承 させるためのキーワード inherit があり 子 のスタイルに "border: inherit;" というように 設 定 すれば 継 承 される 16.スタイルの 宣 言 がぶつかったときの 処 理 詳 細 に 設 定 された 方 のスタイルが 優 先 される 詳 細 度 の 低 い 方 から 並 べると 次 の 通 り 1. html タグの 属 性 ( <p align="center"> ~ </p> ) 優 先 順 位 が 最 も 低 い 2. 要 素 セレクタ( p {text-align: right;} ) 3. クラススタイル(.s1 {text-align: left;} ) 4. IDスタイル( #n1 {text-align: center;} ) 5. style 属 性 による 設 定 ( <p style="text-align: left"> ) 優 先 順 位 が 最 も 高 い 同 じ 詳 細 度 でぶつかったときは 後 に 書 かれた 方 が 優 先 されれる ブラウザのユーザー( 閲 覧 者 )の 設 定 するスタイルシートも 含 め どのスタイルを 優 先 選 択 するかを 決 める 処 理 を カスケーディング 処 理 という 17.スタイルの 値 として 色 長 さ URLを 指 定 するには 色 は カラーネーム 又 は 次 に 示 すような RGB 値 での 指 定 による 1. #に 続 けて 2 桁 の 16 進 数 3 つで 指 定 (#008000 で 緑 ) 2. #に 続 けて 1 桁 の 16 進 数 3 つで 指 定 (#08f は#0088ff と 同 じ) 3. rgb 関 数 を 用 い 0~255 の 10 進 数 を 3 つ 列 挙 (rgb(0,128,0)は#008000 と 同 じ) 4. rgb 関 数 を 用 い 0%~100%の% 値 を 3 つ 列 挙 (rgb(0%,50%,0%)は#008000 と 同 じ) 長 さを 指 定 するには 1. 絶 対 的 単 位 による(mm, in, pt など 1pt は 1/72in) 2. 相 対 的 単 位 による( 画 面 の 最 小 単 位 px 小 文 字 x の 高 さ em など) 3. 基 準 の 値 に 対 する 割 合 で 指 定 ( 数 値 またはパーセント) URL を 指 定 するには url("ファイルの URL") というような 書 き 方 をする 例 えば h2 {background-image: url("img/bg1.gif");} 尚 引 用 符 " " の 中 に 空 白 文 字 が 無 ければ 引 用 符 を 省 略 しても 構 わない 18.コメントを 付 けるには html では <!-- ~ --> css では /* ~ */ 19.CSSに 対 するブラウザの 対 応 状 況 は 異 なる CSS の W3C 仕 様 に 対 して Internet Explorer, FireFox, Opera などの 対 応 の 仕 方 は 大 まかには 準 拠 しているものの 細 部 はかなり 異 なる 場 合 がある また IE の 場 合 は 多 くの 独 自 仕 様 を 採 用 してき た 経 緯 があるため 互 換 モードと 標 準 モードとでは かなり 異 なる 表 示 になることがある これらの 問 題 があるため 使 用 した CSS が 他 の 環 境 でどのように 表 示 されるのかを 確 認 しながら ペ ージの 作 成 を 進 めるのが 望 ましい また IE 独 自 仕 様 のプロパティを 使 う 場 合 他 のブラウザでは 機 能 しないことに 留 意 すること < 以 上 > - 7 -
Top Back Next 資 料 4: 主 なCSSのプロパティ 1. 文 字 色 背 景 color, background-color ( 文 字 色 背 景 色 ) カラーネームまたはカラーコードで 指 定 する background-color を 指 定 しない 場 合 のデフォルトは body を 除 き transparent( 透 明 色 ) background-image ( 背 景 画 像 ) 画 像 ファイルの URL で 指 定 する background-repeat ( 背 景 画 像 の 繰 り 返 し) 背 景 画 像 の 敷 き 詰 め 方 を 指 定 する 縦 横 すべて 敷 き 詰 めるには repeat(デフォルト) 横 方 向 だけ なら repeat-x 縦 方 向 だけなら repeat-y 敷 き 詰 めないなら no-repeat を 指 定 する background-attachment ( 背 景 画 像 のスクロール) background-repeat: no-repeat; と 設 定 して 使 う デフォルトは scroll で 背 景 画 像 は 画 面 と 共 にスクロールされる fixed と 指 定 すれば 背 景 画 像 は 固 定 され 画 面 と 共 にスクロールしない background-position ( 背 景 画 像 の 位 置 ) background-repeat: no-repeat; と 設 定 して 使 う 水 平 方 向 の 位 置 を left center right の 何 れかで 指 定 し 垂 直 方 向 の 位 置 を top center bottom の 何 れかで 指 定 する 水 平 位 置 と 垂 直 位 置 は 半 角 スペースで 区 切 って 指 定 する 一 方 だけを 設 定 した 場 合 は 他 方 は center に 設 定 される また left 40px top 20px; などと 指 定 すれば 左 端 から 40px 上 端 から 20px の 距 離 だけ 離 して 表 示 させることもできる background ( 背 景 画 像 をまとめて 設 定 ) 上 述 した background に 関 する -color, -image, -repeat, -attachment, -position の 値 をま とめて 設 定 できる 指 定 の 順 序 は 問 われない また 必 要 のない 指 定 は 省 略 可 能 で 省 略 された 値 についてはデフォルトの 設 定 が 適 用 される 2.フォント font-style (フォントの 書 体 ) normal がデフォルトで 標 準 フォント italic でイタリック 体 oblique で 斜 体 フォント イタリック 体 は 手 書 き 文 字 を 元 にした 書 体 オブリーク 体 は 標 準 文 字 を 斜 めに 傾 けた 書 体 のことで 異 なる 書 体 日 本 語 フォントでは italic と oblique での 表 示 は 同 じになる font-variant (スモールキャピタル) 英 字 の 小 文 字 を スモールキャピタル( 小 文 字 サイズの 大 文 字 )で 表 示 するには small-caps と 指 定 する 例 えば <span style="font-variant: small-caps">abcabc</span> というソース は ABCABC と 表 示 される font-weight (フォントの 太 さ) 標 準 の 太 さを 指 定 するには normal(デフォルト) 太 字 を 指 定 するには bold 細 字 なら light を 指 定 する 更 に 細 かい 指 定 方 法 が 決 められてはいるが 通 常 使 われるフォントでは いろいろな 太 さのフォントが 用 意 されているわけではなく normal か bold の 何 れかにしかならない - 8 -
font-size (フォントのサイズ) xx-small x-small small medium large x-large xx-large の 7 段 階 があり medium が 標 準 サイズ 1 段 階 上 がると 1.2 倍 のサイズになる また smaller larger を 指 定 す ると 大 きさが 1 段 階 上 下 する px や em や ex などの 単 位 を 付 けた 数 値 で 指 定 することもできる この 場 合 は ブラウザの 表 示 文 字 サイズ を 中 から 大 などに 変 更 しても 表 示 文 字 の 大 きさは 変 更 されず 画 面 のデザインがく ずれることがなくなる font-family (フォントの 種 類 ) フォントの 種 類 を 表 すキーワードで 指 定 する 方 法 として serif( 明 朝 系 フォント) sans-serif(ゴシ ック 系 フォント) monospace( 等 幅 フォント)などがある "Century Gothic"などと 具 体 的 なフ ォント 名 で 指 定 することもできる フォント 名 にスペースが 含 まれている 場 合 は 引 用 符 ' か " で 囲 むこと 複 数 の 候 補 を 指 定 する 時 はコンマ, で 区 切 って 並 べる 指 定 したフォントで 表 示 できないと きは ブラウザに 設 定 されているデフォルトのフォントが 使 われる font (フォントの 設 定 をまとめて 指 定 ) font-style, font-variant, font-weight, font-size, line-height, font-family を この 順 序 でまと めて 指 定 できる font-style, font-variant, font-weight の 指 定 順 序 は 入 れ 替 えても 構 わない font-size と font-family は 省 略 不 可 line-height は font-size の 後 にスラッシュ / を 付 けて 数 値 を 指 定 する 省 略 されたプロパティの 値 は 親 要 素 から 継 承 される 値 ではなく すべてデフォルトが 指 定 された 事 になる 3.テキスト line-height ( 行 の 高 さ) 行 の 高 さを 設 定 するのに 使 う デフォルトは normal 14pt, 10px などと 数 値 で 指 定 するか 通 常 の 行 間 隔 に 対 する 倍 数 で 1.5 または 150%などと 指 定 する text-align ( 行 揃 え 位 置 ) 行 内 要 素 の 配 置 を 指 定 するのに 使 う 左 揃 えには left 中 央 揃 えには center 右 揃 えには right と 指 定 する IE の 互 換 モード では このプロパティが 設 定 された 要 素 内 にあるブロック 要 素 の 配 置 にも 作 用 してしまう 場 合 があるので 注 意 を 要 す vertical-align ( 縦 方 向 の 揃 え 位 置 ) 縦 方 向 の 揃 え 位 置 を 指 定 するのに 使 う 画 像 と 文 字 を 同 じ 行 に 配 置 する 場 合 デフォルトでは 画 像 の 下 端 と 文 字 のベースラインが 揃 う この 縦 位 置 関 係 を 変 更 する 場 合 などに 使 う デフォルトは baseline 上 端 揃 えには top 中 央 揃 えには middle 下 端 揃 えには bottom と 指 定 する また 上 付 き 文 字 にするには super 下 付 き 文 字 にするには sub と 指 定 する このプロパティを 適 用 でき るのは 行 内 要 素 とテーブルセルのみ 行 内 要 素 には 上 述 した 全 ての 値 を 使 えるが テーブルセル には top, middle, bottom 以 外 は 使 えない text-decoration ( 下 線 上 線 打 ち 消 し 線 ) 下 線 上 線 打 ち 消 し 線 を 付 けたりするのに 使 う デフォルトは 装 飾 なしで none 下 線 を 付 けるに は underline 上 線 を 付 けるには overline 取 り 消 し 線 を 付 けるには line-through と 指 定 する 同 時 に 複 数 の 値 を 指 定 するには 値 を 任 意 の 順 序 でスペースで 区 切 って 記 述 する text-indent ( 一 行 目 のインデント) mm, px, pt などの 値 で 指 定 する 親 要 素 の 領 域 の 幅 に 対 する 割 合 % 値 で 指 定 することもできる イ ンデントには 負 の 値 を 指 定 することもできる - 9 -
text-transform ( 英 文 字 の 変 換 ) テキストの 中 の 英 文 字 を 変 換 して 表 示 するのに 使 う デフォルトは none 単 語 の 頭 を 大 文 字 に 変 換 には capitalize 全 ての 文 字 を 大 文 字 に 変 換 するには uppercase 全 ての 文 字 を 小 文 字 に 変 換 するには lowercase と 指 定 する white-space ( 連 続 スペース タブ 改 行 の 表 示 ) デフォルトの normal では 連 続 する 半 角 スペース タブ 改 行 が 半 角 スペース1 個 として 表 示 さ れる pre と 指 定 すると これらはソースに 書 かれているようにそのまま 表 示 される nowrap と 指 定 すると 連 続 する 半 角 スペース タブ 改 行 の 扱 いは normal と 同 じだが 表 示 範 囲 をはみ 出 しても 自 動 改 行 は 行 われない letter-spacing ( 文 字 の 間 隔 ) 文 字 の 間 隔 を 指 定 するのに 使 用 う デフォルトは 標 準 の 文 字 間 隔 で normal 間 隔 の 値 は mm, px, pt などの 値 で 指 定 する word-spacing ( 単 語 の 間 隔 ) 単 語 の 間 隔 を 指 定 するのに 使 用 う デフォルトは 標 準 の 単 語 間 隔 で normal 間 隔 の 値 は mm, px, pt などの 値 で 指 定 する 4. 幅 高 さ width, height ( 幅 高 さ) HTML タグで width 属 性 height 属 性 を 持 つ 要 素 に 対 して これらのプロパティを 適 用 することが できる <div> や <p> などのタグにこれらのプロパティを 設 定 すれば ボックス と 呼 ばれる 四 角 形 を 表 示 域 とすることができる px などの 単 位 をつけた 数 値 で 指 定 するか 親 要 素 の 幅 高 さに 対 する 割 合 を%で 指 定 する auto と 指 定 すれば 自 動 調 整 される(デフォルト) ボックス 内 に 内 容 を 表 示 しきれないときは 高 さ 方 向 にはみ 出 して 表 示 される 但 し IE の 互 換 モ ード では height: auto; として 処 理 される max-width, max-height ( 幅 高 さの 最 大 値 ) 領 域 などの 幅 高 さの 最 大 値 を 指 定 することで これらの 要 素 の 幅 高 さを 一 定 範 囲 内 に 収 めること ができる 横 幅 は 設 定 された 値 で 表 示 されるが 高 さは 必 要 最 小 限 に 抑 えられる 内 容 を 表 示 しき れないときは 高 さ 方 向 にはみ 出 して 表 示 される IE の 互 換 モード は このプロパティに 非 対 応 min-width, min-height ( 幅 高 さの 最 小 値 ) 領 域 などの 幅 高 さの 最 小 値 を 指 定 することで これらの 要 素 の 幅 高 さを 一 定 範 囲 内 に 収 めること ができる 横 幅 は 表 示 できる 領 域 があれば 設 定 値 より 広 げられる 高 さは 内 容 を 表 示 するのに 設 定 値 以 下 で 良 くても 設 定 値 で 表 示 される 内 容 を 表 示 するのに 高 さが 設 定 値 以 上 必 要 であれば 広 げて 表 示 される IE の 互 換 モード は このプロパティに 非 対 応 5. 余 白 (マージン パディング) マージンは 対 象 領 域 の 外 側 パディングは 対 象 領 域 の 内 側 の 余 白 上 下 左 右 を 一 括 して 設 定 できるプ ロパティと 上 下 左 右 夫 々を 個 別 に 設 定 できるプロパティが 用 意 されている margin (マージンの 一 括 設 定 ) 例 えば margin: 10px; とすれば 周 囲 のマージンを 一 括 して 同 じ 値 に 設 定 できる また margin: 10px 20px; とすれば 上 下 に 10px 左 右 に 20px のマージンを 設 定 できる 即 ち - 10 -
1つの 値 を 指 定 した 場 合 は [ 上 下 左 右 ] を 同 じ 値 に 指 定 したことになる 2つの 値 を 指 定 した 場 合 は [ 上 下 ] と [ 左 右 ] の 順 に 指 定 したことになる 3つの 値 を 指 定 した 場 合 は [ 上 ] [ 左 右 ] [ 下 ] の 順 に 指 定 したことになる 4つの 値 を 指 定 した 場 合 は [ 上 ] [ 右 ] [ 下 ] [ 左 ] の 順 に 指 定 したことになる 自 動 調 整 にまかせるときは auto と 指 定 する margin-top, etc. ( 上 下 左 右 夫 々のマージン) 上 のマージンは margin-top 右 のマージンは margin-right 下 のマージンは margin-bottom 左 のマージンは margin-left で 設 定 できる padding (パディングの 一 括 設 定 ) margin の 設 定 と 同 様 に 1つの 値 を 指 定 した 場 合 は [ 上 下 左 右 ] を 同 じ 値 に 指 定 したことになる 2つの 値 を 指 定 した 場 合 は [ 上 下 ] と [ 左 右 ] の 順 に 指 定 したことになる 3つの 値 を 指 定 した 場 合 は [ 上 ] [ 左 右 ] [ 下 ] の 順 に 指 定 したことになる 4つの 値 を 指 定 した 場 合 は [ 上 ] [ 右 ] [ 下 ] [ 左 ] の 順 に 指 定 したことになる padding-top, etc. ( 上 下 左 右 夫 々のパディング) 上 のパディングは padding-top 右 のパディングは padding-right 下 のパディングは padding-bottom 左 のパディングは padding-left で 設 定 できる 6. 枠 線 (ボーダー) 対 象 とする 要 素 を 取 り 囲 む 枠 線 のスタイル 太 さ 色 の 夫 々を 設 定 するプロパティと それらを 一 括 して 設 定 できるプロパティがある また 枠 線 の 上 下 左 右 を 個 別 に 設 定 するためのプロパティも 用 意 されて いる border-style ( 上 下 左 右 の 枠 線 のスタイルを 一 括 設 定 ) ボーダーのスタイルとして 設 定 できる 値 は solid( 一 本 線 ) double( 二 本 線 ) dashed( 波 線 ) dotted( 点 線 ) などのほか 立 体 的 な 線 として ridge( 立 体 的 に 隆 起 した 線 ) groove( 立 体 的 に 窪 んだ 線 ) 更 に 光 を 当 てたような 立 体 として inset( 右 下 から 光 を 当 てた 窪 んだような 立 体 ) outset( 左 上 から 光 を 当 てた 隆 起 したような 立 体 )などがある ボーダーを 非 表 示 とするには none(セルのボーダーが 重 なる 場 合 は 他 の 値 が 優 先 される)または hidden(セルのボーダーが 重 なる 場 合 は hidden が 優 先 される)と 設 定 する 設 定 の 方 法 は margin と 同 様 に 1つの 値 を 指 定 した 場 合 は [ 上 下 左 右 ] を 同 じ 値 に 指 定 したことになる 2つの 値 を 指 定 した 場 合 は [ 上 下 ] と [ 左 右 ] の 順 に 指 定 したことになる 3つの 値 を 指 定 した 場 合 は [ 上 ] [ 左 右 ] [ 下 ] の 順 に 指 定 したことになる 4つの 値 を 指 定 した 場 合 は [ 上 ] [ 右 ] [ 下 ] [ 左 ] の 順 に 指 定 したことになる border-top-style, etc. ( 上 下 左 右 の 枠 線 のスタイルを 個 別 に 設 定 ) 上 のボーダーは border-top-style 右 のボーダーは border-right-style 下 のボーダーは border-bottom-style 左 のボーダーは border-left-style で 設 定 できる border-width ( 上 下 左 右 の 枠 線 の 太 さを 一 括 設 定 ) ボーダーの 太 さは thin( 細 い 線 ) medium( 中 間 の 線 デフォルト) thick( 太 い 線 )のほか 12pt, 16px などと 数 値 で 設 定 できる 設 定 の 方 法 は margin と 同 様 に - 11 -
1つの 値 を 指 定 した 場 合 は [ 上 下 左 右 ] を 同 じ 値 に 指 定 したことになる 2つの 値 を 指 定 した 場 合 は [ 上 下 ] と [ 左 右 ] の 順 に 指 定 したことになる 3つの 値 を 指 定 した 場 合 は [ 上 ] [ 左 右 ] [ 下 ] の 順 に 指 定 したことになる 4つの 値 を 指 定 した 場 合 は [ 上 ] [ 右 ] [ 下 ] [ 左 ] の 順 に 指 定 したことになる border-top-width, etc. ( 上 下 左 右 の 枠 線 の 太 さを 個 別 に 設 定 ) 上 のボーダーは border-top-width 右 のボーダーは border-right-width 下 のボーダーは border-bottom-width 左 のボーダーは border-left-width で 設 定 できる border-color ( 上 下 左 右 の 枠 線 の 色 を 一 括 設 定 ) ボーダーの 色 は カラーネームまたはカラーコードで 設 定 する 設 定 の 方 法 は margin と 同 様 に 1つの 値 を 指 定 した 場 合 は [ 上 下 左 右 ] を 同 じ 値 に 指 定 したことになる 2つの 値 を 指 定 した 場 合 は [ 上 下 ] と [ 左 右 ] の 順 に 指 定 したことになる 3つの 値 を 指 定 した 場 合 は [ 上 ] [ 左 右 ] [ 下 ] の 順 に 指 定 したことになる 4つの 値 を 指 定 した 場 合 は [ 上 ] [ 右 ] [ 下 ] [ 左 ] の 順 に 指 定 したことになる border-top-color, etc. ( 上 下 左 右 の 枠 線 の 色 を 個 別 に 設 定 ) 上 のボーダーは border-top-color 右 のボーダーは border-right-color 下 のボーダーは border-bottom-color 左 のボーダーは border-left-color で 設 定 できる border ( 上 下 左 右 の 枠 線 を 一 括 設 定 ) 例 えば border: solid 1px black; などと 上 下 左 右 の 枠 線 を 同 じ style, width, color に 一 括 し て 設 定 できる style, width, color の 順 序 を 変 えても 問 題 なく どれを 省 略 しても 構 わない border-top, etc. ( 上 下 左 右 の 枠 線 を 個 別 に 設 定 ) 枠 線 の 位 置 毎 に style, width, color をまとめて 設 定 することのできるプロパティもある 上 のボーダーは border-top 右 のボーダーは border-right 下 のボーダーは border-bottom 左 のボーダーは border-left で 設 定 できる 7. 表 示 配 置 overflow (ボックスから はみ 出 た 部 分 の 表 示 方 法 ) ボックスの 範 囲 内 に 内 容 が 入 りきらない 場 合 に はみ 出 た 部 分 の 表 示 方 法 を 指 定 するのに 使 う デフォルトの 値 は visible で ボックスからはみ 出 して 表 示 される hidden を 指 定 すると はみ 出 た 部 分 は 表 示 されない scroll と 指 定 すると 入 りきらない 内 容 はスクロールして 見 られるようにな る auto を 指 定 すると ブラウザに 依 存 ( 一 般 的 にはスクロールして 見 られるようになる) position (ボックスの 配 置 方 法 ) ボックスの 配 置 方 法 を 指 定 するのに 使 用 する 実 際 の 表 示 位 置 の 指 定 には top bottom left right を 併 用 して 基 準 位 置 からの 距 離 を 設 定 する 必 要 がある relative は 相 対 位 置 の 指 定 通 常 の 表 示 開 始 位 置 が 基 準 位 置 となり ここからの 距 離 を top, left で 指 定 する absolute は 絶 対 位 置 の 指 定 表 示 できる 領 域 ( 通 常 は 全 画 面 )が 基 準 となり この 領 域 の 上 左 右 下 からの 距 離 を top, left, right, bottom で 指 定 する fixed を 指 定 すると 表 示 位 置 が 固 定 されスクロールしても 位 置 が 動 かなくなる top, left, right, bottom で 表 示 位 置 を 指 定 する 但 し IE の 互 換 モード は これに 非 対 応 - 12 -
top, bottom, left, right ( 基 準 位 置 からの 距 離 ) position プロパティで 設 定 した 基 準 位 置 からの 距 離 を 指 定 するのに 使 う 基 準 位 置 からの 内 側 方 向 への 距 離 を 指 定 する right: 10px; と 指 定 すれば 右 端 から 内 側 方 向 に 10px だけ 離 れた 箇 所 に 指 定 した 要 素 の 右 端 がくることになる z-index ( 複 数 要 素 の 重 なりの 順 番 ) position プロパティで 表 示 される 複 数 の 要 素 が 重 なり 合 った 時 に それらの 重 なる 順 番 を 指 定 する デフォルトは auto で 記 述 順 に 上 にくる この z-index プロパティの 値 を 整 数 で 指 定 すれば 重 な りの 順 番 を 任 意 に 変 更 できる 0 を 基 準 として 値 が 大 きいものほど 前 面 に 表 示 されるようになる float ( 回 り 込 みの 設 定 ) 画 像 やブロック 要 素 を 左 または 右 に 寄 せて 配 置 するのに 使 う 後 に 続 く 内 容 は その 反 対 側 に 回 り 込 む 左 側 に 配 置 するには left 右 側 に 配 置 するには right と 指 定 する 回 り 込 みを 解 除 するには <br clear="left"> などと 記 述 するか 次 に 述 べる clear プロパティを 使 う clear ( 回 り 込 みの 解 除 ) float プロパティで 左 側 または 右 側 に 配 置 した 要 素 に 対 する 回 り 込 みを 解 除 するのに 使 う 左 側 配 置 の 解 除 には left 右 側 配 置 の 解 除 には right と 指 定 する both と 指 定 すれば 両 方 の 要 素 に 対 する 解 除 となる display ( 要 素 の 表 示 形 式 ) インライン 要 素 の <img> などに display: block; と 指 定 すると ブロック 要 素 として 表 示 される 又 ブロック 要 素 の <h1> などに display: inline; と 指 定 すると インライン 要 素 として 表 示 され る visibility ( 要 素 の 表 示 非 表 示 ) 要 素 の 表 示 非 表 示 を 指 定 するのに 使 う デフォルトは visible で 要 素 を 表 示 する 非 表 示 にする には hidden を 指 定 する 非 表 示 にしても 対 象 箇 所 が 非 表 示 になるだけで その 箇 所 を 詰 めて 表 示 されるわけではない テーブルの 行 や 列 に collapse を 指 定 すると その 部 分 が 詰 められて 表 示 される clip ( 画 像 などの 切 り 抜 き) 画 像 やボックスを 切 り 抜 き 表 示 するのに 使 う このプロパティは position プロパティで absolute か fixed が 指 定 されている 場 合 にのみ 有 効 で 値 として rect( 上, 右, 下, 左 ) 関 数 を 指 定 する 例 えば 幅 130px 高 さ 100px の 画 像 があり その 左 端 から 10px ~ 120px まで 上 端 から 5px ~ 95px までを 切 り 抜 き 幅 110px 高 さ 90px の 画 像 にして 表 示 するには 次 のように 指 定 する img.sample { clip: rect(5px, 120px, 95px, 10px); position: absolute; } 尚 この 表 示 方 法 では 切 り 抜 かれなかった 部 分 は 非 表 示 となるだけで 詰 められて 表 示 されるわ けではない また IE7 以 前 では 引 数 をコンマ 区 切 りではなく スペース 区 切 りにする 必 要 がある 8.テーブル <table> タグに 設 定 してテーブル 全 体 の 表 示 方 法 を 設 定 するプロパティが 用 意 されている table-layout ( 列 幅 のレイアウト 方 法 ) テーブルの 列 幅 レイアウトを 自 動 にするか 固 定 にするかの 設 定 に 使 う デフォルトの auto の 場 合 は テーブル 全 体 が 読 み 込 まれてから 各 列 の 幅 を 決 定 して 表 示 を 開 始 するが fixed を 指 定 する と 最 初 の 一 行 を 読 み 込 んだ 時 点 で 各 列 の 幅 を 決 定 して 表 示 を 開 始 するため 表 示 が 速 くなる fixed は 一 行 目 で 列 幅 を 割 り 付 けておいて 使 うのが 普 通 - 13 -
border-collapse (セル 枠 線 を 重 ねて 表 示 ) 隣 接 するセルのボーダーを 重 ねて 表 示 するには collapse と 指 定 する デフォルトは separate で 間 隔 をあけて 表 示 される border-spacing (セル 枠 線 の 間 隔 ) table タグの cellspacing 属 性 に 対 応 するもので 隣 接 するセルのボーダーとボーダーの 間 隔 を 指 定 するのに 使 う IE7 までは 非 対 応 値 は mm, px, pt などの 単 位 を 付 けた 数 値 で 指 定 する 値 を1つ 指 定 した 場 合 は [ 上 下 左 右 ] の 間 隔 が 指 定 された 値 になる 値 を2つ 指 定 した 場 合 は 記 述 した 順 に [ 左 右 ] [ 上 下 ] の 間 隔 が 指 定 された 値 になる empty-cells ( 空 白 セルの 枠 線 表 示 ) テーブルの 空 白 セルのボーダーを 表 示 するには show 表 示 しないなら hide と 指 定 する caption-side (キャプションの 位 置 ) キャプションの 表 示 位 置 指 定 に 使 う デフォルトは top で テーブルの 上 側 に 表 示 される 下 側 に 表 示 するには bottom 左 側 に 表 示 するには left 右 側 に 表 示 するには right と 指 定 する 9.リスト <ul>, <ol>, <li> タグに 設 定 してリストの 表 示 形 式 を 設 定 するプロパティが 用 意 されている list-style-type (リスト 先 頭 のマーカー 文 字 ) リストの 先 頭 に 表 示 するマーカー 文 字 の 種 類 を 指 定 するのに 使 用 う 設 定 できる 値 と その 設 定 によ る 表 示 を 次 に 示 す (マークの 形 は 設 定 してあるフォントの 種 類 やブラウザによって 異 なる) disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha none 黒 丸 ( 番 号 なしリストの 初 期 値 ) 白 丸 四 角 数 字 123 ( 番 号 付 きリストの 初 期 値 ) 小 文 字 ローマ 数 字 ⅰⅱⅲ 大 文 字 ローマ 数 字 ⅠⅡⅢ 小 文 字 アルファベット abc 大 文 字 アルファベット ABC なし list-style-image (リスト 先 頭 に 表 示 する 画 像 ) リストの 先 頭 に 表 示 するマーカーに 画 像 ファイルを 指 定 するのに 使 う 設 定 する 値 は 画 像 ファイル の URL で list-style-image: url(img/img-1.gif); などとする list-style-position (リスト 先 頭 のマーカーの 表 示 位 置 ) リストの 先 頭 に 表 示 するマーカーの 表 示 位 置 を 指 定 するのに 使 う デフォルトは outside で マー カーはリスト 文 を 表 示 する 領 域 の 外 側 に 表 示 される inside と 指 定 すると マーカーはリスト 文 を 表 示 する 領 域 の 内 部 に 表 示 される list-style (マーカーに 関 する 指 定 をまとめて 設 定 ) リストの 先 頭 に 表 示 するマーカーの -type, -image, -position に 関 するスタイルをまとめて 設 定 す るのに 使 う list-style-type, list-style-image, list-style-position の 値 のうち 指 定 する 値 を 任 意 の 順 序 でスペースで 区 切 って 記 述 する list-style-type と list-style-image の 値 を 同 時 に 指 定 した 場 合 には list-style-image の 値 が 優 先 される - 14 -
10.カーソル cursor (マウスの 形 状 の 設 定 ) マウスカーソルの 形 状 を 指 定 するのに 使 う 以 下 に 設 定 できる 値 を 示 す 使 用 しているブラウザの 種 類 やバージョンによっては 非 対 応 のものもある auto default pointer crosshair move text wait help n-resize s-resize e-resize w-resize ne-resize nw-resize se-resize sw-resize ブラウザが 自 動 的 に 選 択 したカーソル 矢 印 型 など 利 用 環 境 の 標 準 カーソル リンクカーソル 十 字 カーソル 移 動 カーソル 文 字 を 範 囲 指 定 できることを 示 す 処 理 待 ちの 状 態 であることを 示 す ヘルプを 利 用 できる 事 を 示 す 北 ( 上 ) 方 向 にリサイズ 可 能 でありことを 示 す 南 ( 下 ) 方 向 にリサイズ 可 能 である 事 を 示 す 東 ( 右 ) 方 向 にリサイズ 可 能 である 事 を 示 す 西 ( 左 ) 方 向 にリサイズ 可 能 である 事 を 示 す 北 東 ( 右 上 ) 方 向 にリサイズ 可 能 である 事 を 示 す 北 西 ( 左 上 ) 方 向 にリサイズ 可 能 である 事 を 示 す 南 東 ( 右 下 ) 方 向 にリサイズ 可 能 である 事 を 示 す 南 西 ( 左 下 ) 方 向 にリサイズ 可 能 である 事 を 示 す --- 以 下 ブラウザにより 対 応 が 異 なる --- progress hand all-scroll col-resize row-resize no-drop not-allowed vertical-text 処 理 が 進 行 中 である 事 を 示 す 指 型 カーソル ( 古 い IE でのリンクカーソル) 上 下 左 右 にスクロール 可 能 であることを 示 す 左 右 にリサイズ 可 能 であることを 示 す 上 下 にリサイズ 可 能 であることを 示 す 対 象 がドロップできない 領 域 にあることを 示 す 要 求 されたアクションが 動 作 できない 事 を 示 す 縦 書 の 文 章 を 範 囲 指 定 可 能 である 事 を 示 す 11. 入 力 補 助 ime-mode ( 日 本 語 入 力 システムの 切 り 替 え 設 定 ) このプロパティは IE 独 自 仕 様 のもので IE 以 外 の 殆 どのブラウザは 非 対 応 テキスト 入 力 時 の IME の 状 態 を 指 定 するのに 使 う IME とは Input Method Editor の 略 で 日 本 語 入 力 システムのこと デフォルトは auto で 何 も 指 定 されていない 状 態 active で 初 期 値 が 日 本 語 入 力 モードになり inactive で 初 期 値 が 英 数 字 入 力 モードになる disabled と 設 定 すると 英 数 字 入 力 モードにな り ユーザーの 操 作 によるモード 変 更 はできなくなる < 以 上 > - 15 -
Top Back Next 資 料 5: Javascriptの 基 礎 知 識 1.Javascriptはプログラム 言 語 Javascript は 画 面 に 動 き のあるページを 作 るためのプログラム 言 語 ユーザーとブラウザ 間 のローカルな 処 理 なので 限 界 はあるものの ユーザーからの 働 きかけ に 反 応 する 画 面 を 作 るなど Web ページ 制 作 に 不 可 欠 な 技 術 となっている 2.Javascriptの 組 み 込 み 方 html 文 書 内 に Javascript 文 を 記 述 するには 下 に 示 すような 書 き 方 をする <script type="text/javascript"> スクリプト 文 </script> Javascript の 外 部 ファイルを 読 み 込 むには ヘッダー 部 で 次 のように 記 述 する 外 部 ファイルの 拡 張 子 は js とすること <script src="sample.js" type="text/javascript"></script> 3.Javascriptの 書 き 方 命 令 は ; で 区 切 りる 大 文 字 と 小 文 字 が 区 別 される 間 違 うと 動 作 しない 変 数 や 関 数 に 名 前 を 付 ける 場 合 使 える 文 字 はアルファベット 数 字 アンダースコア _ だけ 1 文 字 目 は アルファベットかアンダースコアでなければならない 文 字 列 はダブルクォート またはシングルクォートで 囲 む 文 字 列 の 途 中 で 改 行 することはできない // という 記 号 以 降 行 末 までがコメントとして 扱 われる 複 数 行 に 亘 ってコメントを 付 ける 場 合 に 便 利 な /* と */ で 囲 む 書 き 方 もある <head> ~ </head> の 中 でも <body> ~ </body> の 中 でも どこに 書 いても 構 わない が 関 数 はそれを 使 う 前 に 定 義 しておかねばならない 尚 Javascript は 一 箇 所 にまとめて 書 く 必 要 はなく 複 数 個 所 に 分 散 して 書 くことができる 4.Javascriptのデバッグ html 文 書 の 作 成 ツールには Javascript のデバッグ 機 能 を 備 えたものもあるが 必 ずしも 特 別 なツ ールは 不 要 ブラウザにデバッグ 機 能 が 備 わっているので この 機 能 を 使 うことができる IE の 場 合 インターネットオプション を 選 んで 詳 細 設 定 のタブをクリックすると リストの 中 ほどに スクリプトエ ラー 毎 に 通 知 を 表 示 する という 項 目 がある ここにチェックを 入 れておけば Javascript の 誤 りを 指 摘 するメッセージが 出 るようになる 上 述 の 設 定 をしていなければ 実 際 には 誤 りがあっても それが 見 付 からずにすんでしまう つまり Web ページは 正 常 に 表 示 されるが 意 図 していた 機 能 が 働 いていないという 状 況 になる これを 防 ぐ には 実 際 に 動 かしてテストしてみるしかない - 16 -
5.オブジェクト 文 書 の 情 報 を 扱 う 際 に 文 書 全 体 に 関 するもの 画 像 に 関 するもの リンクに 関 するもの といった 具 合 に 夫 々をモデル 化 し 情 報 管 理 の 単 位 にしたものが オブジェクト オブジェクトは 階 層 構 造 になっており 最 上 位 に window その 下 に document その 下 に image, link, form などのオブジェクトがある この 階 層 構 造 は ブラウザの 中 に 文 書 が 表 示 され その 中 に 画 像 リンク フォームなどの 種 々の 要 素 が 存 在 する 形 に 対 応 している 文 書 内 の 要 素 は 複 数 存 在 する ため 各 要 素 は images, links, forms といった 配 列 の 要 素 になっている 即 ち 画 像 は 文 書 に 現 れる 順 に images[0], images[1], となり 最 初 の 画 像 を 特 定 するには window.document.images[0] というように 階 層 に 従 って 書 き 表 す 最 上 位 の window は 通 常 省 略 して document.images[0] と 書 く 6.プロパティ 各 オブジェクトは html タグの 属 性 に 対 応 するいろいろな プロパティ をもっている 例 えば document は <body> タグの 属 性 text, bgcolor, link, vlink, alink に 対 応 する fgcolor, bgcolor, linkcolor, vlinkcolor, alinkcolor というプロパティ 更 に <title> タグに 対 応 する title プロパティ その 文 書 の URL を 表 す URL プロパティなどをもっている var iro = document.bgcolor; とすれば 現 在 の 背 景 色 が 変 数 iro に 読 み 出 される var は 変 数 で あることを 示 すキーワード また document.bgcolor = "yellow"; などとすれば 背 景 色 を 変 更 で きる 7.メソッド オブジェクトにいろいろな 動 作 を 行 なわせる 方 法 が 用 意 されており これを メソッド と 呼 ぶ 例 えば document オブジェクトには write(" 文 字 列 ")というメソッドがあり これは 表 示 している 画 面 に " 文 字 列 "を 書 き 込 む という 動 作 を 実 行 するもの document オブジェクトに 組 み 込 まれている 関 数 と 考 えればよい 具 体 例 を 示 す <script type="text/javascript"> var t1=document.title; document.write("このページのタイトルは " + t1 + " です "); </script> この 例 にある + 記 号 は 文 字 列 連 結 子 と 呼 ばれるもので 文 字 列 を 結 合 するのに 使 う この 例 では 次 のような 文 字 列 が 出 力 される "このページのタイトルは 資 料 5: Javascript の 基 礎 知 識 です " 8.イベントハンドラー オブジェクトがクリックされたというような 出 来 事 (イベント)を 捕 らえて プログラムで 扱 えるようにしてい るのが イベントハンドラー と 呼 ばれるもの html タグの 属 性 の 一 つとして 使 えるようになっている 種 類 は onload, onunload, onclick, onmouseover, onmouseout, onmousemove, onfocus, onblur, onsubmit, onchange など 多 数 のものがあり 使 い 方 の1 例 を 次 に 示 す <input type="button" value="test" onclick="document.bgcolor='red'"> この 例 では TEST というボタンをクリックしたときに 画 面 の 背 景 色 が 赤 色 になる onclick の 属 性 値 として "document.bgcolor='red'" と Javascript をダブルクォートで 囲 んで 記 述 しているため bgcolor プロパティの 値 を 'red' とシングルクォートで 囲 んでいる このようにして <input> や <img> タグにイベントハンドラーを 記 述 して Javascript を 走 らせることができる - 17 -
9.Javascript 疑 似 URL <a> タグで Javascript にリンクを 張 ったようにして Javascript を 走 らせることもできる 次 に 一 例 を 示 す <a href="javascript:document.bgcolor='red'"> 背 景 を 赤 くします</a> このように 通 常 はリンク 先 の URL を 書 く 箇 所 に javascript: というキーワードを 付 けてスクリプトを 書 く この 書 き 方 を Javascript 疑 似 URL と 呼 ぶ 10. 変 数 変 数 の 宣 言 は var 変 数 名 ; と 記 述 する var とは variable を 略 した 言 葉 例 えば var sample; と 宣 言 すれば 未 だ 値 を 持 っていない 変 数 が 生 成 される 変 数 の 宣 言 と 同 時 に 値 を 代 入 するには var sample="hellow"; のように 記 述 する 変 数 には 数 値 文 字 列 オブジェクトなど 何 でも 代 入 でき 代 入 したときにその 変 数 のデータ 型 が 決 まる 尚 var という 記 述 を 省 略 しても 変 数 と 見 做 される ので この 記 述 を 省 略 しても 支 障 はないが 変 数 であることを 示 すために 付 けるようにするのが 望 まし い 11. 配 列 配 列 とは 複 数 の 変 数 のひとかたまり 配 列 の 宣 言 は var wkday = new Array(7); のように 行 なう この 宣 言 で wkday[0] wkday[1] wkday[2] wkday[3] wkday[4] wkday[5] wkday[6] の7つの 要 素 を 持 つ 配 列 が 生 成 される 気 をつけなくてならないのは 配 列 の 要 素 を 指 定 する 添 え 字 が 0 から 始 まること 宣 言 での new Array(7) の 7 は 要 素 の 個 数 を 指 定 しており 夫 々の 要 素 を 指 定 するには 0 から 始 まる7つの 数 字 となる この 宣 言 では 夫 々の 要 素 は 未 だ 値 を 持 っていない 宣 言 と 同 時 に 夫 々の 要 素 に 値 を 代 入 するには var wkday = new Array(" 日 ", " 月 ", " 火 ", " 水 ", " 木 ", " 金 ", " 土 "); などとする この 記 述 で var wkday=new Array(7); と 宣 言 し wkday[0]=" 日 "; wkday[6]=" 土 "; と 代 入 したことになる 尚 var a1=new Array(); と 配 列 の 個 数 を 付 けないで 宣 言 した 場 合 は 値 が 代 入 さ れた 時 点 で 自 動 的 に 個 数 が 調 整 される 従 って a1[0]=2; a1[10]=5; などと とびとびに 代 入 し ても 構 わないが メモリの 無 駄 使 いとなる 12. 関 数 ある 処 理 をまとめて 書 いておき それを 呼 び 出 して 使 う 方 法 がある これが 関 数 と 呼 ばれるもので function というキーワードを 付 ける 他 の 言 語 では 関 数 とサブルーチンを 使 い 分 ける 場 合 があるが function 関 数 名 ( 引 数 ) { 処 理 ; } Javascript にはサブルーチンというものは 無 く function とい う 関 数 しかない 書 式 を 左 に 示 す 関 数 に 渡 す 値 を 引 数 (ひきすう)と 言 う 引 数 が2つ 以 上 ある 場 合 は コンマ, で 区 切 って 並 べる function chcol(fg, bg){ document.fgcolor=fg; document.bgcolor=bg; } 左 に 示 したのは 画 面 の 文 字 色 背 景 色 を 同 時 に 変 更 する 関 数 この 関 数 の 使 い 方 の 一 例 を 下 に 示 す <input type="button" value="test" onclick="chcol('white','black')"> - 18 -
function kakunin() { var ret=confirm(" 実 行 していいですか?"); return ret; } 左 に 示 した 関 数 は ボタンをクリックするなどの 動 作 を 行 ったとき " 実 行 していいですか?"と いうメッセージをポップアップ 表 示 して OK ボタンを 押 したら true を キャンセル ボタン を 押 したら false を 返 すようにしたもの この 例 にある confirm( ) というのは window オブジェクトのメソッドの 一 つなので var ret=window.confirm(" 実 行 していいですか?"); と 書 いても 構 わないが 通 常 window は 付 け ずに 他 のプログラム 言 語 での 組 み 込 み 関 数 のような 書 き 方 をする この 命 令 は 問 い 合 わせ 画 面 に 設 定 された 文 字 列 を 表 示 し OK と キャンセル ボタンのどちらが 押 されるかで 戻 り 値 として true または false を 返 す この 例 では この 戻 り 値 が 変 数 ret に 代 入 され return ret; で ret の 値 を この 関 数 kakunin()の 戻 り 値 にしている この 関 数 の 使 い 方 の 一 例 を 示 す <a href="#" onclick="return kakunin()">ページ 先 頭 へ</a> この 例 では kakunin() 関 数 の 戻 り 値 が cnclick イベントハンドラーに 返 される イベントハンドラーに false が 返 されると イベントハンドラーはそれ 以 後 の 動 作 をすべて 無 効 にする 従 って OK ボタン が 押 されればページ 先 頭 にジャンプするが キャンセル ボタンが 押 されればジャンプするという 本 来 の 動 作 が 無 効 となる 13. 変 数 配 列 関 数 の 使 い 方 の 注 意 事 項 1. 関 数 は ヘッダー 部 に 書 くか 外 部 ファイルに 書 いて 読 み 込 んで 使 うようにする 2. 関 数 の 内 部 で 使 った 変 数 や 配 列 は ローカル 変 数 となり 関 数 の 外 部 からは 参 照 できない 3. 関 数 の 外 部 で 使 った 変 数 や 配 列 は グローバル 変 数 となり どこからでも 参 照 できる 4. 関 数 に 渡 した 引 数 が 関 数 内 部 で 加 工 されても 外 部 には 影 響 を 与 えない 5. 関 数 の 戻 り 値 は return 文 で 返 される 戻 り 値 が 不 要 の 場 合 にも 単 に return; と 書 いて 処 理 を 打 ち 切 ることができる < 以 上 > - 19 -
Top Back Next 資 料 6: Javascriptを 使 った 表 示 例 Javascript の 文 法 やオブジェクトなどについて 使 用 例 を 示 しながら 解 説 する 実 用 的 な 題 材 を 取 り 上 げ できるだけ 単 純 なスクリプトで いくつかの 使 用 例 を 示 す 夫 々の 例 題 では 新 しく 出 てきた 用 語 書 式 オ ブジェクト プロパティなどについて かなり 詳 しく 解 説 しているので 一 つの 例 題 を 理 解 してから 次 に 進 む というように 例 題 1から 順 に 読 み 進 めていただきたい 耳 慣 れない 言 葉 が 多 く 出 てくるので 先 を 急 がずに 読 むことをお 勧 めする 例 題 1. 画 像 の 入 れ 替 え 1 例 として js-s1.html (http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s1.html) について 説 明 する たくさんある 写 真 などを 掲 載 したいとき それらをどのように 見 せるか いろいろな 方 法 があるが この 例 題 では 同 じ 大 きさの 画 像 を 用 意 して それらを 縮 小 してサムネイル 画 像 ( 小 さな 画 像 )を 表 示 しておき クリックしたサムネイル 画 像 を 元 の 大 きさの 画 像 として 表 示 するようにしている 5. <style type="text/css"> 6..p1 img {width:96px; height:63px; cursor:pointer;} 7. </style> 8. <script type="text/javascript"> 9. function chng(src) { 10. document.img1.src = src; 11. } 12. </script> 15. <p><img src="img/dog1.jpg" alt="" name="img1"></p> 16. <p class="p1"> 17. <img src="img/dog1.jpg" alt="" onclick="chng(this.src)"> 18. <img src="img/dog2.jpg" alt="" onclick="chng(this.src)"> 19. <img src="img/dog3.jpg" alt="" onclick="chng(this.src)"> 20. <img src="img/dog4.jpg" alt="" onclick="chng(this.src)"> 21. <img src="img/dog5.jpg" alt="" onclick="chng(this.src)"> 22. <img src="img/dog6.jpg" alt="" onclick="chng(this.src)"> 23. </p> dog1.jpg~dog6.jpg の6 つの 画 像 を 使 用 し それら のサイズは 全 て 640x420 従 って 15 行 目 で 表 示 される 画 像 の 大 きさは このサイズ で 表 示 される 17~22 行 目 で 表 示 される 画 像 の 大 きさは 6 行 目 で 設 定 されたスタイルシートが 適 用 され 96x63 の 大 きさとな る また これらの 画 像 の 上 にマ ウスを 移 すと スタイルシート での 設 定 により マウスの 形 がリンクカーソルの 形 に 変 化 する 9~11 行 目 の 関 数 chng(src) は 15 行 目 で 表 示 される 画 像 のソースを 引 数 として 受 け 取 った src に 設 定 する 関 数 この 関 数 を 17~22 行 目 で onclick="chng(this.src)" として 呼 び 出 している この 関 数 の 引 数 で 使 われている this 演 算 子 は 対 象 としているオブジェクト を 指 す 演 算 子 この 場 合 は img タグで 表 示 される 画 像 のことで this.src はその 画 像 の src 属 性 の 値 を 指 す 従 って 17 行 目 の 場 合 は onclick="chng('img/dog1.jpg')" と 書 き 換 えても 同 じ 結 果 が 得 られる 前 のページで 使 われている 夫 々の 画 像 を images[0], images[1], と images 配 列 の 要 素 とし て 扱 うことができることを 説 明 した この 例 では 15 行 目 の 画 像 が 0 番 目 なので images[0]となるが 配 置 の 修 正 などで 順 番 が 変 わり 0 番 目 ではなくなるかもしれない そのような 不 便 を 避 けるため 画 像 に 名 前 を 付 けておき その 名 前 で 配 列 の 要 素 を 特 定 する 方 法 がある 即 ち 15 行 目 にある name="img1" と 設 定 した 画 像 を document.images["img1"] として 特 定 できる 更 に 簡 略 化 して document.img1 としてもよい 10 行 目 はこの 簡 略 化 した 書 き 方 を 使 っている - 20 -
例 題 2. 画 像 のロールオーバー 1 例 として js-s2.html (http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s2.html) について 説 明 する リンクの 張 ってある 画 像 の 上 にマウスを 移 したとき 画 像 を 入 れ 替 えるということがよく 行 われる これを 画 像 のロールオーバーと 言 う この 例 では 入 れ 替 えに 使 う 画 像 のファイル 名 などに 規 則 性 を 持 たせるこ とを 前 提 として ロールオーバー 用 の 関 数 を 作 り それを 外 部 ファイル に 書 いておき それを 読 み 込 ん で 使 っている 5. <script src="rollover.js" type="text/javascript"></script> 6. <style type="text/css"> 7. img { border:0; } 8. a { color:blue; font-weight:bold; text-decoration:none; } 9. a:hover { color:red; } 10. </style> 11. </head> 12. <body> 13. <p><a href="../../../index.html" 14. onmouseover="over(1)" onmouseout="out()"> 15. <img src="img/p1.gif" alt="" name="img1"> 16. トップページ</a></p> 17. <p><a href="doc-menu.html" 18. onmouseover="over(2)" onmouseout="out()"> 19. <img src="img/p2.gif" alt="" name="img2"> 20. ホームページの 作 成 技 術 </a></p> 21. </body> 左 に js-s2.html を 示 す 下 に 示 す 外 部 ファイル rollover.js を 5 行 目 で 読 み 込 んでいる name="img1" と 設 定 してある 画 像 に 張 られた リンクの 上 にマウスを 移 すと その 画 像 名 に 対 応 する 番 号 1 を 引 数 とし て over(n) 関 数 を 呼 び 出 す マウスを 画 像 から 離 すと out() 関 数 を 呼 び 出 して 元 の 画 像 に 戻 す リンクに 使 う 画 像 と 文 字 列 に 対 して 7~9 行 目 でスタイルを 設 定 しているが これについては 資 料 3 4を 参 照 していただきたい 1. /* 画 像 のロールオーバー 用 関 数 */ 2. var imgname, imgn; // グローバル 変 数 3. function over(n) { 4. imgname = "img" + n; 5. imgn = document.images[imgname].src; 6. var len = imgn.length; 7. var imgr= imgn.substring(0, len-4) + "a" 8. + imgn.substring(len-4, len); 9. document.images[imgname].src = imgr; 10. } 11. function out() { 12. document.images[imgname].src = imgn; 13. } 左 に rollover.js を 示 す この 外 部 ファ イル を 使 うための 前 提 条 件 は 1) リンクにマウスを 移 すと p-1.gif は p-1a.gif に p-2.gif は p-2a.gif にと いうように "a"という 文 字 の 付 いた 画 像 に 入 れ 替 わる 2) 対 となる 画 像 は 同 じディレクトリに 入 れておく 3) name 属 性 で 設 定 する 画 像 の 名 前 は "img"の 後 ろに 番 号 を 付 け "img1", "img2", とする 4) over(n) 関 数 の 引 数 は この 番 号 と する これらのことを 前 提 に この 外 部 ファイル を 作 っている 最 初 のリンクから over(n) 関 数 が 呼 び 出 されたときは 引 数 n には 画 像 名 name="img1"に 対 応 する 番 号 1 が 入 っている over(n) 関 数 の 中 では 最 初 に imgname ="img" + n;という 文 字 列 結 合 が 行 われる 引 数 の n は 1 という 数 値 であるが この 式 では"1"という 文 字 列 に 自 動 的 に 型 変 換 されて - 21 -
結 合 される この 結 合 により グローバル 変 数 imgname には 画 像 名 "img1"が 保 存 される 次 に 5 行 目 の imgn = document.images[imgname].src; が 実 行 されて グローバル 変 数 imgn にその 画 像 のソース"img/p1.gif"が 保 存 される imgname には"img1"という 文 字 列 が 保 存 されている ので 例 題 1での document.img1 にならって document.imgname として 良 いかというと そうでは ない 例 題 1 での img1 は 画 像 に 付 けられた 一 意 の 名 前 を 使 って その 画 像 オブジェクトを 表 していた のであり imgname は 文 字 列 が 代 入 された 変 数 で オブジェクトが 代 入 されているわけではない 6~8 行 目 で imgn に 代 入 されている 文 字 列 "img/p1.gif"を "img/p1a.gif"という 文 字 列 に 加 工 して 9 行 目 でその 文 字 列 を 使 って 画 像 の 入 れ 替 えを 行 っている 最 初 に 文 字 列 の 基 本 的 な 扱 い 方 を 説 明 する 文 字 列 は 文 字 を 並 べたもの 'J', 'a', 'v', 'a', 's', 'c', 'r', 'i', 'p', 't' という 10 個 の 文 字 で"Javascript"という 文 字 列 が 出 来 ており この 文 字 列 の 長 さ は 10 となる また 文 字 位 置 は 0 から 数 え 最 初 の'J' は 0 番 目 の 文 字 となる 1バイト 文 字 2バイト 文 字 を 区 別 する 必 要 はなく " 勉 強 しましょう"という 文 字 列 の 長 さ は 7 で 3 番 目 の 文 字 は'ま'となる 文 字 列 の 操 作 は String オブジェクトのプロパティ メソッドとしてまと められている 通 常 は 文 字 列 をそのままオブジェクトと 見 做 して String オブジェクトのプロパティとメソッ ドを 使 うことができる 6 行 目 にある length は 文 字 列 の 長 さを 返 すプロパティ len = imgn.length; で imgn が"img/p1.gif" なら 10 が len に 代 入 される 7,8 行 目 にある substring(m, n)は m 番 目 から n-1 番 目 までの 文 字 を 切 り 出 すメソッド imgn.substring(0, len-4)は 文 字 列 imgn の 0 番 目 から len-4-1(この 場 合 5) 番 目 まで の 文 字 を 切 り 出 した 結 果 "img/p1"を 返 す imgn.substring(len-4, len)は len-4 番 目 から len-1 番 目 までの 文 字 を 切 り 出 した 結 果 ".gif" を 返 す 従 って "img/p1" + "a" + ".gif" で 結 合 された "img/p1a.gif"という 文 字 列 が 変 数 imgr に 代 入 される この imgr を 使 って 9 行 目 で 画 像 のソース をセットして 画 像 の 入 れ 替 えを 行 っている out() 関 数 は 画 像 からマウスが 離 れたときに 呼 び 出 され over(n) 関 数 が 保 存 していたグローバル 変 数 imgname と imgn の 値 を 使 って 画 像 を 元 に 戻 す そのため 引 数 を 必 要 としていない 上 に 示 したスクリプトでは <a > ~ </a> の 中 に 画 像 以 外 に 文 字 列 が 書 かれているので a タグの 中 に onmouseover, onmouseout を 書 いたが 画 像 のみの 場 合 は img タグの 中 に 書 いても 同 じ 結 果 が 得 られる この 場 合 には 例 題 1に 出 てきた this 演 算 子 を 使 って 次 のように 書 くこともできる 11. <p><a href="../../../index.html"> 12. <img src="img/p1.gif" alt="" 13. onmouseover="this.src='img/p1a.gif' " 14. onmouseout="this.src='img/p1.gif' "></a></p> 15. <p><a href="../../index.html"> 16. <img src="img/p2.gif" alt="" 17. onmouseover="this.src='img/p2a.gif' " 18. onmouseout="this.src='img/p2.gif' "></a></p> このスクリプトでは 関 数 を 使 ってい ない わりに 単 純 明 快 なスクリプトと なっているが onmouseover, onmouseout に 対 する 記 述 がやや こしい これに 対 して 上 で 示 した 関 数 を 使 う 方 法 では 画 像 ファイルの 名 前 の 付 け 方 などに 決 められた 規 則 は あるが html 文 書 では 簡 単 なスクリプトで 済 ませることができる 上 に 外 部 ファイル としているため ど のページでもこの 外 部 ファイルを 利 用 できるというメリットがある 例 題 3. 画 像 のスライドショウ(1) 1 例 として js-s3.html (http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s3.html) について 説 明 する 例 題 1で サムネイル 画 像 をクリックしたときに 画 像 の 入 れ 替 えが 行 われるようにした 例 を 示 したが この - 22 -
例 では それに 加 えて スライドショウ 形 式 での 表 示 も 行 えるようにしている 5. <style type="text/css"> 6..p1 img {width:64px; height:42px; cursor:pointer;} 7. </style> 8. <script type="text/javascript"> 9. var timer, num=1; 10. function pic(n) { 11. num = n; 12. document.img1.src = "img/dog" + num + ".jpg"; 13. } 14. function set() { 15. stop(); 16. timer = setinterval("show()", 2000); 17. show(); 18. } 19. function show() { 20. if (num < 6) num++; else num=1; 21. pic(num); 22. } 23. function stop() { if (timer) clearinterval(timer); } 24. </script> 25. </head> 26. <body onunload="stop()"> 27. <p><img src="img/dog1.jpg" alt="" name="img1"></p> 28. <p class="p1"> 29. <img src="img/dog1.jpg" alt="" onclick="pic(1)"> 30. <img src="img/dog2.jpg" alt="" onclick="pic(2)"> 31. <img src="img/dog3.jpg" alt="" onclick="pic(3)"> 32. <img src="img/dog4.jpg" alt="" onclick="pic(4)"> 33. <img src="img/dog5.jpg" alt="" onclick="pic(5)"> 34. <img src="img/dog6.jpg" alt="" onclick="pic(6)"> 35. <input type="button" value=" 開 始 " onclick="set()"> 36. <input type="button" value=" 停 止 " onclick="stop()"> 37. </p> この 例 の 16 行 目 で setinterval が 使 われているが show() 関 数 を 2000 ミリ 秒 ごとに 呼 び 出 す タイマ ー を グローバル 変 数 timer にセットしている この timer を clearinterval メソッドでリセットすると setinterval メソッドで 開 始 された 繰 り 返 し 動 作 が 停 止 する では このスクリプトの 動 作 を 追 いかけてみよう 下 に 表 示 されている 最 初 のサムネイル 画 像 をクリックす ると 画 像 ファイル 名 dog1.jpg に 対 応 する 番 号 1 を 引 数 として 関 数 pic(n)が 呼 び 出 され pic(n)は 11 行 目 でこの 引 数 1 をグローバル 変 数 num に 記 憶 させる 次 の 12 行 目 で img1 と 名 付 けられた 27 行 目 にある <img> 要 素 のソースを 書 き 換 え 画 像 の 入 れ 替 えを 行 っている スライドショウを 開 始 すると 関 数 set()が 呼 び 出 される この 中 で 先 ず stop() 関 数 を 呼 び 出 し 若 しスラ イドショウを 実 行 中 であれば スライドショウを 停 止 させる 次 いで 前 述 したように setinterval で show() - 23 -
関 数 を 2000 ミリ 秒 ごとに 呼 び 出 すタイマーを timer にセットする この 処 理 だけでは 2000 ミリ 秒 経 過 し ないと 画 像 の 入 れ 替 えが 行 われないので ボタンを 押 した 瞬 間 に 次 の 画 像 を 表 示 させるため show() 関 数 を 呼 び 出 して set() 関 数 での 処 理 を 完 了 する 関 数 show()の 20 行 目 に if (num < 6) num++; else num=1; という 記 述 があるが この 記 述 は 若 し num の 値 が 6 より 小 さければ num++の 演 算 を 行 い そうでなければ num=1 の 演 算 を 行 う ということ を 書 いた if 文 と 呼 ばれるもの num++という 演 算 における ++ はインク インクレメント デクレメント 演 算 子 b = a++ b に a を 代 入 してから a の 値 を 1 増 やす b = ++a a の 値 を 1 増 やしてから b に 代 入 する b = a-- b = --a b に a を 代 入 してから a の 値 を 1 減 らす a の 値 を 1 減 らしてから b に 代 入 する if 文 の 一 般 的 な 書 き 方 は 次 のようになる レメント 演 算 子 と 呼 ばれ num の 値 を 1 増 やす 演 算 が 行 われる また -- はデクレ メント 演 算 子 と 呼 ばれ 1 を 減 らす 演 算 が 行 われる 使 い 方 は 左 の 表 にまとめてあるように b = a++ という 演 算 は b = a が 行 われ た 後 に a = a+1 が 行 われる if ( 条 件 式 ) { 条 件 式 が 真 のときに 行 う 処 理 1} else { 条 件 式 が 偽 のときに 行 う 処 理 2} いろいろな 条 件 で 処 理 を 分 岐 するには if ( 条 件 式 1) { 処 理 1} ese if ( 条 件 式 2) { 処 理 2} else if ( 条 件 式 3) { 処 理 3} else { 処 理 4} 偽 のときの 処 理 が 無 ければ else 以 降 は 不 要 処 理 が1つの 式 しか 無 いときは { } を 省 略 してもよ い 比 較 演 算 子 a == b a と b が 等 しいときに 真 a!= b a と b が 等 しくないときに 真 a > b a が b よりも 大 きいときに 真 a >= b a が b 以 上 のときに 真 a < b a が b よりも 小 さいときに 真 a <= b a が b 以 下 のときに 真 20 行 目 の if 文 での 条 件 式 num < 6 に 使 われている < は 比 較 演 算 子 と 呼 ばれるものの1つで < の 左 辺 と 右 辺 を 比 較 して 左 辺 が 小 さければ 真 を そうでな ければ 偽 を 返 す いろいろな 比 較 演 算 子 があり 左 の 表 にまとめてある 比 較 する 値 が 数 値 文 字 列 論 理 値 の 何 れでも 構 わな い 文 字 列 を 比 較 する 場 合 の 大 小 関 係 は "a" < "b" の 関 係 即 ち 文 字 列 を 昇 順 で 並 べ 替 えたときの 順 序 で 判 定 される 関 数 stop()は 停 止 ボタンを 押 したとき およびこの 画 面 が 閉 じられるときに 呼 び 出 される ここで 前 述 した clearinteval(timer)が 行 われるが その 条 件 として if (timer)と 記 述 されている 変 数 timer は set() 関 数 の 中 で 設 定 されるが それまでは 未 定 義 (undefined) 未 定 義 の 変 数 を 引 数 として clearinteval(timer) を 行 うとエラーとなる 従 って 開 始 ボタンを 押 した 後 にしか clearinteval(timer)を 行 ってはいけない if (timer)の 条 件 は timer が 未 定 義 かどうかの 真 偽 判 定 で このエラーを 防 ぐためのもの 真 偽 を 表 すのに true, false という 論 理 値 があるが 条 件 式 での 真 偽 の 判 定 は 論 理 値 に 限 らず あらゆる 値 に 対 して 行 うことができる 数 字 に 対 しては 0 は 偽 0 以 外 は 真 文 字 列 に 対 しては "" で 表 される 空 文 字 ( 長 さ 0 の 文 字 列 )は 偽 それ 以 外 は 真 変 数 に 何 の 値 も 代 入 されていなければ 未 定 義 を 表 す undefined となり 偽 何 も 入 っていないことを 示 す 特 別 な 値 null は 偽 - 24 -
例 題 4. 画 像 のスライドショウ(2) 1 例 として js-s4.html (http://home.e02.itscom.net/shouji/raku/kouza/doc/js-s4.html) について 説 明 する この 例 題 では スライドショウの 表 示 停 止 再 開 表 示 間 隔 の 変 更 などを 行 えるようにしている 例 題 3 では setinterval を 使 っていたので この 例 題 では settimeout を 使 う 関 数 の 再 帰 呼 び 出 し の 方 法 を 示 す また 最 初 の 画 面 には1つの 画 像 しか 表 示 されず 他 の 画 像 は 表 示 されないため 画 像 の 先 読 み を 行 っている 高 速 なインターネット 環 境 では 画 像 の 先 読 み はそれほど 必 要 ではないかもしれな いが 大 きな 画 像 ファイルを 多 数 使 う 場 合 は 画 像 をスムースに 入 れ 替 えるのに 有 効 であろう 5. <script type="text/javascript"> 6. var p1 = new Array(6); 7. function go() { 8. for (var n=0; n<6; n++) { 9. p1[n] = new Image(); 10. p1[n].src = "img/dog" + (n+1) + ".jpg"; 11. } 12. show(); 13. } 14. var timer, run, pos=0, sec=3; 15. function show() { 16. document.images[0].src = p1[pos++].src; 17. document.forms[0].elements[0].value = pos + "/6"; 18. if (pos == 6) pos=0; 19. window.status = sec + " 秒 間 隔 で 表 示 しています"; 20. run = true; 21. timer = settimeout("show()", sec * 1000); 22. } 23. function stop() { 24. cleartimeout(timer); 25. window.status = "スライドショウを 停 止 中 "; 26. run = false; 27. } 28. function restart() { 29. cleartimeout(timer); 30. show(); 31. } 32. function interval(n) { 33. var n1 = sec + n; 34. if (n1 < 1 n1 > 5) return; 35. sec = n1; 36. if ( run ) restart(); 37. } 38. </script> 39. </head> 40. <body onload="go()" onunload="cleartimeout(timer)"> 41. <p><img src="img/dog1.jpg" alt=""></p> 画 面 が 開 かれる 前 に body タグに 書 か れている onload="go()"で 関 数 go()が 走 り 出 し 画 像 の 先 読 み を 行 い 関 数 show()を 起 動 してから 画 面 の 表 示 が 行 われる 関 数 show()の 中 で settimeout メソッドが 使 われている 21 行 目 の 記 述 は 変 数 sec の 初 期 値 を 3 とし ているから show() 関 数 を 3000 ミリ 秒 後 に 呼 び 出 すタイマー を 変 数 timer にセッ トするという 意 味 即 ち 3000 ミリ 秒 後 に 自 分 を 再 び 呼 び 出 せ と 命 令 したことにな る 自 分 が 自 分 を 呼 び 出 すことを 再 帰 呼 び 出 し という 関 数 stop()はスライド ショウを 停 止 させるた めのもので 24 行 目 に window オブジェ クトのメソッド cleartimeout が 使 われている 24 行 目 の 命 令 で 引 数 の timer がリセットされ 関 数 show() の 再 帰 呼 び 出 しが 停 止 する ことになる - 25 -
42. <form> 写 真 43. <input type="text" value="1/6" size="5"> 44. <input type="button" value=" 停 止 " onclick="stop()"> 45. <input type="button" value=" 再 開 " onclick="restart()"> 46. <input type="button" value=" 早 く " onclick="interval(-1)"> 47. <input type="button" value=" 遅 く " onclick="interval(1)"> 48. </form> 関 数 restart()は スライドショウを 再 開 させるためのもの timer をリセットし 関 数 show()を 再 び 動 かし 始 める この 関 数 を 呼 び 出 す 再 開 ボタンを 連 続 して 押 せば 経 過 時 間 を 待 たずに 画 像 を 次 々に 入 れ 替 えることができる 関 数 interval(n)は スライドショウの 間 隔 を 変 更 するためのもの 間 隔 は 変 数 sec で 決 まるので この 値 を 1~5 の 範 囲 で 変 更 できるようにしている また スライドショウを 実 行 中 に 呼 び 出 されたとき 次 の 画 像 を 直 ちに 表 示 するため 関 数 restart()を 起 動 している 関 数 go()について 詳 しく 説 明 する この 関 数 では 画 像 ファイルのパス 名 に 規 則 性 があることから for ループを 使 っている for ループは ある 決 められた 回 数 だけ 繰 り 返 すのに 使 われる for ループの 書 式 は 次 の 通 り for ( 初 期 値 ; 条 件 式 ; 増 減 式 ) { 処 理 } 8~11 行 目 にある for (var n=0; n<6; n++) { } では 初 期 値 は n が 0 増 減 式 の n++によって ループを 一 回 りするたびに n に 1 を 加 えていき n が 6 になったときに 条 件 式 n < 6 を 満 たさなくなるた め ループから 抜 け 出 す 従 って このループは n が 0 から 5 まで 6 回 繰 り 返 されて ループを 終 了 する for ループの 中 で 画 像 の 先 読 み の 処 理 が 行 われる 9 行 目 に p1[n] = new Image()という 記 述 があ る Image()とは 画 像 のプロパティやメソッドを 定 義 しているオブジェクトで new 演 算 子 を 付 けることで 新 しい 画 像 オブジェクトが 生 成 され そのオブジェクトが p1[n] に 代 入 されることになる 10 行 目 に 書 い てある p1[n].src = "img/dog" + (n+1) + ".jpg"で オブジェクト p1[n]のソースがセットされ この 時 点 で 画 像 ファイルが 読 み 込 まれる このようにして dog1.jpg~dog6.jpg の 画 像 が 画 面 が 開 かれる 前 に 読 み 込 まれており スライドショウでの 画 像 の 入 れ 替 えがスムースになる 関 数 show()では 先 ず 16 行 目 で document.images[0].src = p1[pos++].src によって 41 行 目 で 表 示 される 画 像 のソースが 設 定 し 直 され 画 像 の 入 れ 替 えが 行 われる この 処 理 の 後 pos の 値 は 1 増 える 次 の 17 行 目 に document.forms[0].elements[0].value = pos + "/6" という フォームの 処 理 が 出 てくる フォームは forms という 配 列 で 扱 うことができ フォーム 内 の<input>タグなどのフォーム 要 素 は elements という 配 列 で 扱 うことができる 従 って forms[0].elements[0]は 最 初 に 出 てくる 43 行 目 の input 要 素 を 意 味 し その value を 設 定 して 表 示 される 文 字 を 変 化 させていることになる 18 行 目 に if (pos == 6) pos=0;という if 文 で pos の 値 が 6 になったとき pos を 0 に 戻 し スライド ショウが 繰 り 返 されるようにしている show() 関 数 の 中 の 19 行 目 と stop() 関 数 の 中 の 25 行 目 にある window.status="~"; という 命 令 は ウィンドウのステータスバーに"~"という 文 字 列 を 表 示 させるもの 但 し IE9 では セキュリティのレベルに よっては この 表 示 が 行 われないようにデフォルトで 設 定 されているので この 処 理 が 無 視 されることがあ る 関 数 interval(n)の 34 行 目 には if (n1 < 1 n1 > 5) return; という if 文 がある ここで 使 われている は 論 理 演 算 子 と 呼 ばれもので または を 意 味 している 従 って 34 行 目 は n1 が 1 より 小 さいか または n1 が 5 より 大 きければ 処 理 を 打 ち 切 る という 処 理 になる - 26 -