JavaScript & jQuery & CSS & HTML の達人

JavaScript と jQuery と CSS と HTML の使い方がわかるブログ

JavaScript の基本 ~ 自分を含む要素内のHTMLを取得したい ~『outerHTML』

~ 自分を含む要素内のHTMLを取得したい ~ 自分を含む要素内のHTMLを取得するには「outerHTML」プロパティを使用します。 例)get_html = element.outerHTML; // 自分を含む要素内のHTMLを取得 サンプルソース 下のサンプルでは「outer」という id 名が付け…

JavaScript の基本 ~ 要素内のHTMLを取得したい ~『innerHTML』

~ 要素内のHTMLを取得したい ~ 要素内のHTMLを取得するには「innerHTML」プロパティを使用します。 例)get_html = element.innerHTML; // element内のHTMLを取得 サンプルソース 下のサンプルでは「test」という id 名が付けられた要素内のHTMLを取得した…

JavaScript の基本 ~ 選択されている文字列を取得したい ~『getSelection』

~ 選択されている文字列を取得したい ~ 選択されている文字列を取得するには「getSelection」メソッドを使用します。Chrome と Edge で確認したところ例1~3は同じ結果になりました。 例1)window.document.getSelection(); // 選択されている文字列を取得…

JavaScript の基本 ~ JavaScript でウィンドウを閉じる ~『close』

~ JavaScript でウィンドウを閉じる ~ JavaScriptでウィンドを閉じるには「close」メソッドを使用します。ただし、セキュリティー上「close」で閉じることができるのは「open()」で開かれたウィンドウだけに制限されています。 例1)ウィンドウ名.close ()…

JavaScript の基本 ~ 新しいウィンドを開く ~『window.open』

~ 新しいウィンドを開く ~ JavaScriptで新しいウィンドを開くには「window.open」メソッドを使用します。( ) の中のパラメータは省略することができますが、URLを省略した場合は空白のウィンドウが開かれます。 例)window.open(URL,任意のウィンドウ名,オ…

JavaScript の基本 ~ ページの読み込み完了時に処理を実行したい ~『window.onload』

~ ページの読み込み完了時に処理を実行したい ~ ページの読み込み完了時に処理を実行させるには「window.onload」を使用します。 例)window.onload = function() { ~ ここに処理を記述 ~ }; ※window を省略しても動作しますが、省略はあまりおすすめで…

JavaScript の基本 ~ マウスの左ボタンを押したときに処理を実行する ~『onmousedown』

~ マウスの左ボタンを押したときに処理を実行する ~ マウスの左ボタン※1を押した時に処理を実行するには「onmousedown」イベントを使用します。※1 マウスの主と副のボタンを入れ替えてある場合は右ボタンになります。 例)onmousedown=" alert('メッセージ…

JavaScript の基本 ~ マウスアウト時に処理を実行する ~『onmouseout』

~ マウスアウト時に処理を実行する ~ マウスアウト時に処理を実行するには「onmouseout」イベントを使用します。 例)onmouseout=" alert('メッセージ') " サンプルソース <div onmouseout=" alert('メッセージ') ">この行からマウスカーソルが外れるとメッセージが表示されます…</p> 実行結果 この行か…

JavaScript の基本 ~ マウスオーバー時に処理を実行する ~『onmouseover』

~ マウスオーバー時に処理を実行する ~ マウスオーバー時に処理を実行するには「onmouseover」イベントを使用します。 例)onmouseover=" this.style.backgroundColor = 'lightgreen' " サンプルソース <div onmouseover=" this.style.backgroundColor = 'lightgreen' ">この行にマウスカーソルを乗せると背景色が変わりま</div>…

JavaScript の基本 ~ 確認ダイアログを表示する ~『confirm』

~ 確認ダイアログを表示する ~ 確認ダイアログを表示するには「confirm()」メソッドを使用します。 例)confirm("ラーメンが好きですか?"); サンプルソース var kotae = confirm("ラーメンが好きですか?");if(kotae == true){ alert("OKが押されました…

JavaScript の基本 ~ 警告(アラート)を表示する ~『alert』

~ 警告(アラート)を表示する ~ 警告(アラート)ダイアログを表示するには「alert()」メソッドを使用します。 例)aleat("ここに警告内容を書く"); サンプルソース <input type="button" value="押してください" onclick="alert('押されました!')" /> 実行結果 完 // // //

JavaScript の基本 ~ JavaScript を記述する場所 ~

~ JavaScript の記述場所 ~ JavaScript を記述する場所は以下の3つです。スクリプトの長さや使用する目的に応じてこの3つの記述場所を使い分けるようにします。 ① jsファイルを作成してHTML文書とリンクする サイズが大きい(長い)スクリプトをHTML文書…

CSSの技 ~ 要素の枠(アウトライン)を表示する ~

CSS

~ 要素の枠(アウトライン)を表示する ~ 要素の枠(アウトライン)を表示するには「outline-style」、枠の幅を指定するには「outline-width」、枠の色を指定するには「outline-color」プロパティを設定しますが、「outline」でスタイルと幅と色を一度に指…

CSSの基本 ~ テキストに影を付ける ~

CSS

~ テキストに影を付ける ~ CSSでテキストに影を付けるには「text-shadow」プロパティを使用します。パラメーターは左から「色指定」「X方向の移動量」「Y方向の移動量」「ぼかし量」になります。 text-shadow : 色指定 X方向の移動量 Y方向の移動量 ぼかし…

CSSの基本 ~ テキストに線を付ける ~

CSS

~ テキストに線を付ける ~ テキストに線を付けるにはテキスト装飾の「text-decoration」を使います。付けられる線の種類は「上線」「下線」「取消し線」の3種類があり、CSSでの指定方法はそれぞれ「overline」「underline」「line-through」になります。 …

CSSの基本 ~ ボックスの角を丸めたい ~

CSS

~ ボックスの角を丸めたい ~ ボーダーの角を一律同じ径で丸くするには「border-radius」を指定します。四隅をそれぞれ別々の径で指定したい場合は「border-top-left-radius」「border-top-right-radius」「border-bottom-left-radius」「border-bottom-rig…

CSSの基本 ~ 文字色を指定する ~(色見本、カラーコード、カラーネーム)

CSS

~ 文字色の指定方法 ~ 文字の色を指定するには「color」を使用します。色の指定方法は、色コード3桁(#xxx)、色コード6桁(#xxxxxx)、カラーネーム(red,blue,green…など)、RGB指定(rgb(xxx,xxx,xxx))です。 サンプル .sample { color: #F00; ※色コ…

CSSの基本 ~ よく使うCSSセレクタの種類 ~

CSS

CSSセレクタとは? CSSセレクタとはスタイルを適用する対象を指定している部分で、下記の赤色文字の部分がCSSセレクタになります。 .sample { text-align: center; font-weight: bold; color: #FFF;} よく使うCSSセレクタの種類 セレクタにはいろいろな種類…

HTMLの基本 ~ リンクを設定する ~

~ リンクを設定する ~ リンクを設定するには <href src="〇〇〇"> タグを使用します。「src」属性の 〇〇〇 にリンクするページのURLを記述します。 サンプルソース 今日も<href src="https://auctions.yahoo.co.jp/">ヤフオク</href>を利用した。 結果 今日もヤフオクを利用した。 // //</href>

HTMLの基本 ~ 音楽ファイルを再生する ~

~ 音楽ファイルを再生する ~ 音楽ファイルを再生するには <audio> タグを使用します。「src」属性はファイルの場所で、タグ内に「controls」属性を追加すると、ミニプレイヤーが表示されるようになります。 サンプルソース <audio src="ここに音楽ファイルのURL" controls> 結果 // //</audio></audio>

HTMLの基本 ~ 文字列を注釈にしたい ~

~ 文字列を注釈にしたい ~ 文字列をひと回り小さな注釈にするには <small> タグを使用します。 サンプルソース <p>デフォルトサイズの文字列</p> <small>※これは注釈にした文字列</small> 結果 デフォルトサイズの文字列 ※これは注釈にした文字列 // //</small>

HTMLの基本 ~ 文字列を強調したい ~

~ 文字列を強調したい ~ 文字列を強調するには <em> タグを使用して文字を斜体にします。 ※chrome、Edge・・・デフォルトでは対応していない場合があるようです。 サンプルソース 文字列を<em>強調</em>します 結果 文字列を強調します // //</em>

HTMLの基本 ~ 重要な文字列を強調したい ~

~ 重要な文字列を強調したい ~ 重要な文字列を太字にして強調させるには <strong> タグを使います。 サンプルソース ラーメンはやっぱり<strong>醤油味</strong>が一番だ 結果 ラーメンはやっぱり醤油味が一番だ // //</strong>

HTMLの基本 ~ 改行する ~

~ 改行する ~ 改行は <br> または <br /> タグを使用します。XHTMLでは <br /> にしないとエラーになりますが、HTML5では <br> <br /> のどちらを使っても良いです。 サンプルソース こんにちは。<br>今日はとても天気が良いですね。<br />そうですね。 結果 こんにちは。今日はとても天気が良…

HTMLの基本 ~ 上付き文字と下付き文字 ~

~ 上付き文字と下付き文字 ~ 上付き文字は <sup> ~ </sup> 下付き文字は <sub> ~ </sub> タグを使用して表示します。 サンプルソース 東京オリンピック<sup>上付き文字</sup>は2020年に開催される 東京パラリンピック<sub>下付き文字</sub>も2020年に開催される 結果表示 東京オリンピック上付き文字…

HTMLの基本 ~ 文字にルビをふる ~

~ 文字にルビをふる ~ 文字にルビをふるには <ruby> タグと <rt> タグを組み合わせます。 サンプルソース <ruby>東京<rt>とうきょう</rt></ruby>オリンピック 結果表示 東京とうきょうオリンピック // //</rt></ruby>

HTMLの基本 ~ 文字に取り消し線を入れる ~

~ 文字に取り消し線を入れる ~ 任意の文字を <s>~</s> タグで囲むことで取り消し線を表示することができます。 サンプルソース <s>文字に取り消し線を入れる</s> 結果表示 文字に取り消し線を入れる // //

HTMLの基本 ~ 文字をハイライト表示する ~

~ 文字列をハイライトする ~ <mark> タグを使用すると任意の文字列をマーカーでハイライトしたように表示することができます。 サンプルソース テキスト<mark>文字列をハイライトする</mark>サンプル 結果表示 テキスト文字列をハイライトするサンプル // //</mark>

HTMLの基本 ~ 見出しを表示する ~ <h1>~<h6>

~ 見出しを表示する ~ 見出しは <h1> <h2> <h4> <h5> <h6> のタグを使用して表示します。見出しの上下には見出しの大きさに応じてスペースが空けられます。 サンプルソース <h1>見出し1</h1><h2>見出し2</h2><h3>見出し3</h3><h4>見出し4</h4><h5>見出し5</h5><h6>見出し6</h6> 結果 <h1> ~ <h6>までそれぞれの大きさの見出しが出力され</h6></h1></h6></h5></h4></h2></h1>…

HTMLの基本 ~ HTML文書にタイトルを付ける ~

~ HTML文書にタイトルを付ける ~ 文書のタイトルは<head>要素の中に<title>タグで記述します。 <title>ここにタイトル</title> // //</head>