ホームページの作成技術

Size: px

Start display at page:

Download "ホームページの作成技術"

いつやうばら
7 years ago
Views:

1 Next ホームページの作成技術 2012/02/25 制作編集 : 庄司たけしこの資料はホームページ作成のための諸技術についてまとめたものである資料 1と資料 2は HTML の基礎についての復習用資料 3と資料 4はスタイルシートについてまとめたもの資料 5 ~ 資料 7は Javascript について例題を示しながら解説している資料 8~ 資料 10 は Perl による自作 CGI を作るのに必要な事柄を解説し最後に簡単な掲示板の作成例を示しているこの資料の Web 版は次の URL に掲載してある == 目次 == 資料 1: HTML 文書の作成 HTML 文書の作成ツール HTML はテキスト形式で文書構造を書き表したもの HTML はハイパーテキスト日本語文字コード HTML タグはブロックタグと行内タグに分類されるテーブルを利用した配置のデザインフレームを利用したページ HTML の W3C 標準への準拠の程度はブラウザによって異なるレンタルサーバーについて... 2 資料 2: HTML 文書についての補足メモ帳を HTML 文書編集に使うときの問題 Web サイトで使えるファイル名文書構造を理解し易くするため適宜改行とインデントを行うソース文で改行しても表示上は改行されない HTML 文書における特殊記号 color, bgcolor 属性などでの色の指定 width, height 属性などでの長さの指定同一ページ内の特定箇所にリンクを張るには他のページ内の特定箇所にリンクを張るには画像の扱い方画像ファイルについて... 4 資料 3: CSS を使った文書の修飾 HTML は文書の構造 CSS は文書の修飾 <body> タグで文書全体のスタイルを設定してみる文書内の特定の要素にスタイルを設定してみる i -

net/shouji/raku/kouza/doc/index.html == 目次 == 資料 1: HTML 文書の作成... 1 1.HTML 文書の作成ツール... 1 2.HTML はテキスト形式で文書構造を書き表したもの... 1 3.HTML はハイパーテキスト... 1 4. 日本語文字コード... 1 5.

2 4.スタイルシートの3 種類の設定方法スタイルを設定するためだけの <span> という行内タグがあるスタイル設定の対象をセレクタという要素セレクタ複数セレクタ子孫セレクタ子供セレクタクラススタイル ID スタイル疑似クラス疑似要素スタイルの継承スタイルの宣言がぶつかったときの処理スタイルの値として色長さ URL を指定するにはコメントを付けるには CSS に対するブラウザの対応状況は異なる... 7 資料 4: 主な CSS のプロパティ文字色背景フォントテキスト幅高さ余白 (マージンパディング) 枠線 (ボーダー) 表示配置テーブルリストカーソル入力補助資料 5: Javascript の基礎知識 Javascript はプログラム言語 Javascript の組み込み方 Javascript の書き方 Javascript のデバッグオブジェクトプロパティメソッドイベントハンドラー Javascript 疑似 URL 変数配列関数変数配列関数の使い方の注意事項資料 6: Javascript を使った表示例例題 1. 画像の入れ替え ii -

.. 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.

3 例題 2. 画像のロールオーバー例題 3. 画像のスライドショウ(1) 例題 4. 画像のスライドショウ(2) 例題 5.フレームの操作例題 6.ウィンドウの操作 (1) 例題 7.ウィンドウの操作 (2) 例題 8.DOM を使ったスタイルの操作資料 7: Javascript についての解説ビルトイン関数 parseint( 文字列 ), parsefloat( 文字列 ) escape( 文字列 ), unescape( 文字列 ) Number(), String() ビルトインオブジェクト Array オブジェクト Date オブジェクト Math オブジェクト String オブジェクトナビゲータオブジェクト window オブジェクト navigator オブジェクト screen オブジェクト frame オブジェクト document オブジェクト location オブジェクト history オブジェクト image オブジェクト link, area オブジェクト anchor オブジェクト form オブジェクト form 内の要素オブジェクト DOM について資料 8: Perl/CGI の基礎 CGI とはサーバーの選び方デバッグ環境の整備自作 CGI のデバッグ CGI スクリプトの出力原理資料 9: Perl の書式文字列に関する書式 qq() と q() ヒアドキュメントいろいろな演算子文字列結合演算子比較演算子 iii -

.. 40 Date オブジェクト... 40 Math オブジェクト... 41 String オブジェクト... 42 3.ナビゲータオブジェクト... 43 window オブジェクト... 43 navigator オブジェクト... 44 screen オブジェクト... 44 frame オブジェクト... 45 document オブジェクト... 45 location オブジェクト.

4 論理演算子変数の扱い方変数関数ハッシュ( 連想配列 ) 環境変数用の %ENV 処理の制御 if 文条件演算子 for ループループ制御 while ループ until ループ foreach ループサブルーチンサブルーチン変数のスコープ正規表現正規表現とは置換演算子 s/// 変換演算子 tr/// ファイルを扱うファイルを開く閉じるファイルの入出力ファイルのロックファイルテスト演算子ファイルのパーミッション主な関数数学処理関数時間処理変換処理文字処理配列処理連想配列処理ディレクトリ処理 I/O 処理制御処理宣言定義処理資料 10: CGI/Perl の使用例環境変数の表示フォームデータの扱い方フォームから送信されるデータの形式 GET と POST の違いフォームデータの解読フォームを使った表示例外部 CGI を作る簡単な掲示板を作る iv -

.. 62 ファイルテスト演算子... 62 ファイルのパーミッション... 62 8. 主な関数... 63 数学処理関数... 63 時間処理... 64 変換処理... 64 文字処理... 64 配列処理... 65 連想配列処理... 65 ディレクトリ処理... 66 I/O 処理... 66 制御処理.

5 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 のもう一つの特徴はハイパーテキストこれは文書内のある箇所から他の文書などへリンクを張ってジャンプできるようにした文書またはその仕組みのこと同一サイト内でのリンクは相対アドレスで他サイトへはから絶対アドレスで指定する例 1) <a href="../index.html">トップページへ</a> 例 2) <a href=" 設問 ) リンクの色を変えるには? リンク先のページを別ウィンドウで開くには? 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 -

HTMLはテキスト形式で文書構造を書き表したもの HTML とは HyperText Markup Language の略 Markup Language とはタグを使ってテキスト形式で文書構造を記述する言語画像音楽などのバイナリファイルは外部ファイルとしておいてタグを使ってこれらを読み込んで利用する

6 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 -

親 frame には本文などの情報が書かれていないため検索されにくい従って本格的な営業用のホームページでは敬遠される傾向にある上述の理由によりフレーム構成のトップページを使うのは避けた方が無難であろう 8.

7 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 -

かれている改行記号が半角の空白で表示されて改行されないことがあるこのような問題があるためソースの表示に以前の IE ではメモ帳が使われていたが IE8 からは内臓のビューワーが使われるようになった HTML 文書作成にメモ帳を使う場合は上記の問題に注意を要す問題回避

8 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 -

リンク元では <a href="#n1"> 関連個所へ</a> と書きリンク先には <a name="n1"> と書くか <p id="n1"> ~ </p> などと書く name 属性 id 属性の値は同一ページで一意であること( 重複してはいけない) 2.

9 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 -

文書内の特定の要素にスタイルを設定してみる <b style="color: red; font-size: 14pt"> 赤い太字 </b> 赤い太字 4.

10 クラスセレクタ(クラススタイル) 一意セレクタ(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 -

子供セレクタ p 要素の子要素または孫要素などとなる b 要素のスタイルを設定している例 ) p>b {color: red;} p 要素の子要素となる b 要素のスタイルを設定している孫要素には適用されない 11.クラススタイル.

11 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 つで指定 (# で緑 ) 2. #に続けて 1 桁の 16 進数 3 つで指定 (#08f は#0088ff と同じ) 3. rgb 関数を用い 0~255 の 10 進数を 3 つ列挙 (rgb(0,128,0)は# と同じ) 4. rgb 関数を用い 0%~100%の% 値を 3 つ列挙 (rgb(0%,50%,0%)は# と同じ) 長さを指定するには 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 -

html タグの属性 ( <p align="center"> ~ </p> ) 優先順位が最も低い 2. 要素セレクタ( p {text-align: right;} ) 3. クラススタイル(.s1 {text-align: left;} ) 4. IDスタイル( #n1 {text-align: center;} ) 5.

12 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 -

background-repeat ( 背景画像の繰り返し) 背景画像の敷き詰め方を指定する縦横すべて敷き詰めるには repeat(デフォルト) 横方向だけなら repeat-x 縦方向だけなら repeat-y 敷き詰めないなら no-repeat を指定する background-attachment ( 背

13 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 -

ずれることがなくなる font-family (フォントの種類 ) フォントの種類を表すキーワードで指定する方法として serif( 明朝系フォント) sans-serif(ゴシック系フォント) monospace( 等幅フォント)などがある "Century Gothic"などと具体的なフォント名で指定することもできるフォント名

14 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 のマージンを設定できる即ち

いは normal と同じだが表示範囲をはみ出しても自動改行は行われない letter-spacing ( 文字の間隔 ) 文字の間隔を指定するのに使用うデフォルトは標準の文字間隔で normal 間隔の値は mm, px, pt などの値で指定する word-spacing ( 単語の間隔

15 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 と同様に

( 上下左右夫々のマージン) 上のマージンは margin-top 右のマージンは margin-right 下のマージンは margin-bottom 左のマージンは margin-left で設定できる padding (パディングの一括設定 ) margin の設定と同様に右 ] [ 下 ] [ 左 ] の順に指定したことになる

16 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 の互換モードはこれに非対応

( 上下左右の枠線の太さを個別に設定 ) 上のボーダーは border-top-width 右のボーダーは border-right-width 下のボーダーは border-bottom-width 左のボーダーは border-left-width で設定できる border-color ( 上下左右の枠線の色を一括設定 )

17 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 は一行目で列幅を割り付けておいて使うのが普通

番を任意に変更できる 0 を基準として値が大きいものほど前面に表示されるようになる float ( 回り込みの設定 ) 画像やブロック要素を左または右に寄せて配置するのに使う後に続く内容はその反対側に回り込む左側に配置するには left 右側に配置するには

18 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 の値が優先される

指定された値になる empty-cells ( 空白セルの枠線表示 ) テーブルの空白セルのボーダーを表示するには show 表示しないなら hide と指定する caption-side (キャプションの位置 ) キャプションの表示位置指定に使うデフォルトは top でテーブルの上側に表示される下側に表示

19 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 と設定すると英数字入力モードになりユーザーの操作によるモード変更はできなくなる < 以上 >

事を示す北 ( 上 ) 方向にリサイズ可能でありことを示す南 ( 下 ) 方向にリサイズ可能である事を示す東 ( 右 ) 方向にリサイズ可能である事を示す西 ( 左 ) 方向にリサイズ可能である事を示す北東 ( 右上 ) 方向にリサイズ可能である事を示す北西 ( 左上 ) 方向

20 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 ページは正常に表示されるが意図していた機能が働いていないという状況になるこれを防ぐには実際に動かしてテストしてみるしかない

Javascriptの組み込み方 html 文書内に Javascript 文を記述するには下に示すような書き方をする <script type="text/javascript"> スクリプト文 </script> Javascript の外部ファイルを読み込むにはヘッダー部で次のように記述する外部ファイルの拡張

21 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 を走らせることができる

22 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')">

23 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; と書いて処理を打ち切ることができる < 以上 >

24 Top Back Next 資料 6: Javascriptを使った表示例 Javascript の文法やオブジェクトなどについて使用例を示しながら解説する実用的な題材を取り上げできるだけ単純なスクリプトでいくつかの使用例を示す夫々の例題では新しく出てきた用語書式オブジェクトプロパティなどについてかなり詳しく解説しているので一つの例題を理解してから次に進むというように例題 1から順に読み進めていただきたい耳慣れない言葉が多く出てくるので先を急がずに読むことをお勧めする例題 1. 画像の入れ替え 1 例として 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 行目はこの簡略化した書き方を使っている

25 例題 2. 画像のロールオーバー 1 例として 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"という文字列に自動的に型変換されて

26 結合されるこの結合によりグローバル変数 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 ( について説明する例題 1でサムネイル画像をクリックしたときに画像の入れ替えが行われるようにした例を示したがこの

27 例ではそれに加えてスライドショウ形式での表示も行えるようにしている 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()

28 関数を 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 は偽

29 例題 4. 画像のスライドショウ(2) 1 例として 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() の再帰呼び出しが停止することになる

30 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 より大きければ処理を打ち切るという処理になる

すべて見る

Cascade Style Sheet

SmartDoc Cascade Style Sheet http://k-sek01.t-komazawa.ac.jp/ (CSS) CSS HTML 1. HTML HTML HTML 2. HTML 3. HTML CSS. class :link :visited :visited :hover :active 1. { : ; } 2. ":" 3. h1 { font-size: 24pt;