～ マウスオーバー時に処理を実行する ～ マウスオーバー時に処理を実行するには「onmouseover」イベントを使用します。 例）onmouseover=" this.style.backgroundColor = 'lightgreen' " サンプルソース <div onmouseover=" this.style.backgroundColor = 'lightgreen' ">この行にマウスカーソルを乗せると背景色が変わりま</div>…
～ 確認ダイアログを表示する ～ 確認ダイアログを表示するには「confirm()」メソッドを使用します。 例）confirm("ラーメンが好きですか？"); サンプルソース var kotae = confirm("ラーメンが好きですか？");if(kotae == true){ alert("ＯＫが押されました…
～ 警告（アラート）を表示する ～ 警告（アラート）ダイアログを表示するには「alert()」メソッドを使用します。 例）aleat("ここに警告内容を書く"); サンプルソース <input type="button" value="押してください" onclick="alert('押されました！')" /> 実行結果 END //
～ JavaScript の記述場所 ～ JavaScript を記述する場所は以下の３つです。スクリプトの長さや使用する目的に応じてこの３つの記述場所を使い分けるようにします。 ① jsファイルを作成してHTML文書とリンクする サイズが大きい（長い）スクリプトをHTML内に…
～ 要素の枠（アウトライン）を表示する ～ 要素の枠（アウトライン）を表示するには「outline-style」、枠の幅を指定するには「outline-width」、枠の色を指定するには「outline-color」プロパティを設定しますが、「outline」でスタイルと幅と色を一度に指…
～ テキストに影を付ける ～ CSSでテキストに影を付けるには「text-shadow」プロパティを使用します。パラメーターは左から「色指定」「X方向の移動量」「Y方向の移動量」「ぼかし量」になります。 text-shadow : 色指定 X方向の移動量 Y方向の移動量 ぼかし…
～ テキストに線を付ける ～ テキストに線を付けるにはテキスト装飾の「text-decoration」を使います。付けられる線の種類は「上線」「下線」「取消し線」の３種類があり、CSSでの指定方法はそれぞれ「overline」「underline」「line-through」になります。 …
～ ボックスの角を丸めたい ～ ボーダーの角を一律同じ径で丸くするには「border-radius」を指定します。四隅をそれぞれ別々の径で指定したい場合は「border-top-left-radius」「border-top-right-radius」「border-bottom-left-radius」「border-bottom-rig…
～ 文字色の指定方法 ～ 文字の色を指定するには「color」を使用します。色の指定方法は、色コード３桁（#xxx）、色コード６桁（#xxxxxx）、カラーネーム（red,blue,green…など）、RGB指定（rgb(xxx,xxx,xxx)）です。 サンプル .sample { color: #F00; ※色コ…
_ CSSセレクタとは？ CSSセレクタとはスタイルを適用する対象を指定している部分で、下記の赤色文字の部分がCSSセレクタになります。 .sample { text-align: center; font-weight: bold; color: #FFF;} よく使うCSSセレクタの種類 セレクタにはいろいろな…
～ リンクを設定する ～ リンクを設定するには <href src="〇〇〇"> タグを使用します。「src」属性の 〇〇〇 にリンクするページのURLを記述します。 サンプルソース 今日も<href src="https://auctions.yahoo.co.jp/">ヤフオク</href>を利用した。 結果 今日もヤフオクを利用した。 END</href>
～ 音楽ファイルを再生する ～ 音楽ファイルを再生するには <audio> タグを使用します。「src」属性はファイルの場所で、タグ内に「controls」属性を追加すると、ミニプレイヤーが表示されるようになります。 サンプルソース <audio src="ここに音楽ファイルのURL" controls> 結果 END</audio></audio>
～ 文字列を注釈にしたい ～ 文字列をひと回り小さな注釈にするには <small> タグを使用します。 サンプルソース <p>デフォルトサイズの文字列</p> <small>※これは注釈にした文字列</small> 結果 デフォルトサイズの文字列 ※これは注釈にした文字列 END</small>
～ 文字を斜体で強調したい ～ 文字を強調するには <em> タグを使用して文字を斜体にします。※注意・・・chrome、Edge はデフォルトでは対応していない場合があります。 サンプルソース 文字列を斜体にして<em>強調</em>します 結果 文字を強調します。 END</em>
～ 重要な文字列を強調したい ～ 重要な文字列を太字にして強調させるには <strong> タグを使います。 サンプルソース ラーメンはやっぱり<strong>醤油味</strong>が一番です！ 結果 ラーメンはやっぱり醤油味が一番です！ END</strong>
～ 改行する ～ 改行は <br> または <br /> タグを使用します。XHTMLでは <br /> にしないとエラーになりますが、HTML5では <br> <br /> のどちらを使っても改行されます。 サンプルHTML こんにちは。<br>今日はとても天気が良いですね。<br />そうですね。 結果 こんにちは。今日はとても天気が…
～ 上付き文字と下付き文字 ～ 上付き文字は <sup> ～ </sup> 下付き文字は <sub> ～ </sub> タグを使用して表示します。 サンプルソース 東京オリンピック<sup>上付き文字</sup>は2020年に開催される予定でした。 東京パラリンピック<sub>下付き文字</sub>も2020年に開催される予定でした。 結果表示 東…
～ 文字にルビをふる ～ ルビとはふりがなのことです。文字にルビをふるには <ruby> タグと <rt> タグを組み合わせます。 サンプルHTML <ruby>東京<rt>とうきょう</rt></ruby>オリンピック 結果 東京とうきょうオリンピック END</rt></ruby>
～ 文字に打消し線を入れる ～ 任意の文字を <s>～</s> タグで囲むことで打消し線を入れることができます。<del>～</del>でも同じように打消し線が入れられます。 サンプルソース <s><s>で文字に打消し線を入れる</s><del><del>で文字に打消し線を入れる</del> 結果表示 <s>で文字に打消し線を入れる<del>で文字に</del></s></del></s>…
～ 文字列をハイライトする ～ <mark> タグを使用すると任意の文字列をマーカーでハイライトしたように表示することができます。 サンプルソース テキスト<mark>文字列をハイライトする</mark>サンプル 結果表示 テキスト文字列をハイライトするサンプル END</mark>
～ 見出しを表示する ～ 見出しは <h1> <h2> <h4> <h5> <h6> のタグを使用して表示します。見出しの上下には見出しの大きさに応じた行間が付けられます。 サンプルHTML <h1>見出し１</h1><h2>見出し２</h2><h3>見出し３</h3><h4>見出し４</h4><h5>見出し５</h5><h6>見出し６</h6> 結果 <h1> ～ <h6>までそれぞれの大きさの見出しが出力されました</h6></h1></h6></h5></h4></h2></h1>…
～ HTML文書にタイトルを付ける ～ 文書のタイトルは<head>要素の中に<title>タグで記述します。 <html><head><title>ここにタイトル</title></head><body></body></html> END
～ HTMLの基本構造 ～ <html> 要素はHTML文書のルートとなりその他の要素を含みます。<head> 要素には文書の情報を記述し、<body> 要素内には文書の本体を記述します。 サンプルソース <html><head>文書情報を記述するところJavaScript、CSSも基本的にここに記述</head><body>表示される要素を記述する</body></html> </body></head></html>…
// JavaScript + jQuery でストップウォッチを作る 今回は JavaScript と jQuery を使ってストップウォッチ（1/10秒タイプ）を作ります。このサンプルのポイントは、表示部分をテーブルではなく「span」タグと「CSS」で作っているところです。 動作サンプル …
// マウスポインタの座標を取得する マウスポインターの移動を検出するのは jQuery の「mousemove」を、座標を取得するのは JavaScript の「clientX」「clientY」を利用します。
// HTML要素をグルグル回転させる 今回は jQuery と CSS を使ってHTML要素をグルグル・・・と回転させます。 要素を時計回りで45度回転させる場合：transform:rotate(45deg); 動作サンプル ページが読み込まれると、ピンク色のボックスとその中の文字「要素…
// クリックでセルの背景色が変わる 今回は、jQuery を利用してテーブルセルをクリックすると、そのテーブルセルの背景の色が変わるスクリプトを作成します。 動作サンプル 無色のセルをクリックすると背景色が赤色になり、赤色のセルをクリックすると無色に…
JavaScript でカウントアップ 今回は、JavaScript でカウントアップタイマーを作ります。 メインのタイマー部分には一定の時間で繰り返し指定の関数を実行する「setInterval」関数を使います。 var tm = setInterval("sample()", 1000); この場合の動作：100…
CSSで要素の枠の角を丸める デフォルトでは要素の枠の角はとがっていますが、CSS を利用すれば枠の角を自由に丸めることができます。 CSS の border-radius で角を丸める 要素の枠の角を丸めるにはCSSで「border-radius」を設定します。角の弧の大きさを半径…
// jQuery でトグルメニューを作る メニュー項目をクリックすると一階層下にあるサブメニューが上下にスライドするトグルメニューを jQuery で作ります。 ＜サンプル＞ まずはサンプルを見てください。青色文字の項目をクリックするとその項目の下の階層にあ…
