-
HTML Canvasのrect()メソッドとは?矩形を描画する方法を解説
rect()メソッドとは HTML5の<canvas>要素を使用すると、JavaScriptを使ってWebページ上に自由にグラフィックを描画できます。<canvas>要素には、描画領域のサイズを指定するための「width(幅)」と「height(高さ)」という2つの属性があります。 CanvasRenderingContext2Dのrect()メソッドは、キャンバス上に矩形(長方形)のパスを作成するために使用されるメソッドです。なお、rect()メソッドはあくまでパスを定義するだけなので、実際に画面へ描画するには、fill()やstroke()などのメソッドと組み合わせ
-
onmouseoverプロパティを使ってWebページの背景色を変更する方法
onmouseoverプロパティは、マウスポインタが要素の上に乗った(ホバーした)タイミングでスクリプトを実行できるイベント属性です。このプロパティと、HTML DOMのbackgroundColorプロパティを組み合わせることで、マウス操作に応じてWebページの背景色を動的に変更できます。 onmouseoverで背景色を変更する仕組み onmouseover属性の中にJavaScriptのコードを直接記述し、document.body.style.backgroundColorに任意の色名やカラーコードを代入します。これにより、ユーザーが指定した要素にマウスを重ねた瞬間に、ページ全体の背景
-
HTMLのchecked属性とは?チェックボックス・ラジオボタンを初期選択状態にする方法
HTMLのchecked属性は、Webページが読み込まれた時点で<input>要素をあらかじめ選択済み(チェック済み)の状態にするために使用される属性です。この属性は、ラジオボタン(type="radio")とチェックボックス(type="checkbox")の2つの入力タイプで有効です。ここでは、チェックボックスに対してchecked属性を使用する方法を詳しく見ていきましょう。checked属性の基本構文<input type="checkbox" checked>上記のように「checked」を記述するだけ
-
HTMLのciteタグとは?作品タイトルをマークアップする方法と実装例
citeタグとは?HTMLの<cite>タグは、創作物のタイトルを明示するために使用される要素です。対象となるのは、映画のタイトル、楽曲名、絵画の題名、書籍名など多岐にわたります。多くのブラウザでは、このタグで囲んだテキストはデフォルトで斜体(イタリック体)として表示されます。それでは、citeタグの具体的な実装例を見ていきましょう。実装例:書籍のタイトルを表示する次のサンプルコードは、JavaとAngularJSに関するおすすめ書籍のタイトルを、citeタグでマークアップしたものです。<!DOCTYPE html> <html> <body>
-
【初心者向け】HTMLのclass属性とは?使い方をサンプルコードで解説
HTMLのclass属性とは? HTMLのclass属性は、要素に1つ以上のクラス名を設定するためのグローバル属性です。設定したクラス名をもとに、CSSでスタイルを適用したり、スタイルシート内で対象の要素を指定したりできます。 同じクラス名はページ内の複数の要素に共通して付与できるため、複数の要素にまとめて同じデザインを適用したい場合に非常に便利です。また、JavaScriptで特定の要素を取得する際にも広く活用されています。 class属性の実装例 それでは、HTMLでclass属性を使用する具体的な例を見てみましょう。ここでは、<h2>要素に「demo」というクラス名を設定し
-
HTMLの<col>タグの使い方!span属性でテーブルの列スタイルを一括設定
HTMLの<col>タグとは? HTMLの<col>タグは、テーブルの各列(カラム)に対してスタイルやプロパティをまとめて設定するための要素です。<col>要素は単体では機能せず、必ず<colgroup>要素の中に配置して使用します。 このタグを使うことで、行ごとのセルに個別にスタイルを指定することなく、列単位で背景色や幅などを一括制御できます。その結果、コードがすっきりし、メンテナンス性も向上します。 <col>タグの主な属性 span:<col>要素が適用される列の数を指定します。たとえば「span=2」と記述する
-
HTML Canvasのfill()メソッドとは?基本構文とサンプルコードを解説
HTML Canvasのfill()メソッドは、現在作成されている描画パス(図形)を塗りつぶすために使用されるメソッドです。塗りつぶし色を指定しない場合、デフォルトの色である黒が適用されます。<canvas>要素は、JavaScriptを使ってWebページ上にグラフィックを描画するためのHTML5の機能です。各キャンバスには、描画領域のサイズを定義する2つの属性があり、それぞれwidth(幅)とheight(高さ)で指定します。fill()メソッドの構文fill()メソッドの基本的な構文は以下の通りです。ctx.fill();引数は不要で、呼び出すだけで現在のパスが閉じられ、設定さ
-
HTMLのbase要素のtarget属性とは?リンクのデフォルト表示先を一括設定する方法
base要素のtarget属性とは HTMLの<base>要素におけるtarget属性は、ドキュメント内に含まれるすべてのハイパーリンクに対して、デフォルトの表示先(ターゲット)を一括して設定するための属性です。各リンクに個別にtarget属性を書かなくても、<base>要素で一度指定しておけば、ページ全体のリンクの開き方を統一できるのが大きな特徴です。 基本構文 target属性の基本的な構文は以下のとおりです。 <base target=_blank|_self|_parent|_top|frame> target属性に指定できる値 target属性
-
HTMLのbigタグとは?使い方とサンプルコードを解説
HTMLの<big>要素は、デフォルトのフォントサイズよりも大きなテキストを表示するために使用される要素です。 注意:<big>要素はHTML5ではサポートされていません。現在は非推奨となっており、同様の表示を実現したい場合は、CSSのfont-sizeプロパティを使用することが推奨されています。 使用例 それでは、実際に<big>要素をHTMLで実装した例を見てみましょう。 <!DOCTYPE html> <html> <body> <h2>Demo Heading</h2> &l
-
HTML blockquote要素のcite属性で引用元を指定する方法
HTMLの<blockquote>要素におけるcite属性は、引用文の出典元(参照先のURL)を指定するために使用される属性です。 この属性により、引用した情報がどのページから来たものなのかを、意味的に明示することができます。 cite属性の基本構文 cite属性の基本的な書き方は以下のとおりです。 <blockquote cite="url"> 引用したいテキスト </blockquote> 「url」の部分には、引用元となるページのアドレスを記述します。 なお、cite属性で指定したURLはブラウザ上には直接表示されません
-
HTMLのbutton要素におけるautofocus属性の使い方を解説
autofocus属性とはHTMLの<button>要素に用意されているautofocus属性は、ページが読み込まれた時点で自動的にそのボタンへフォーカスを設定するための属性です。ユーザーがマウスやキーボードで操作しなくても、最初からボタンが選択された状態になるため、フォーム操作の効率化などに役立ちます。基本構文autofocus属性はブール型の属性のため、値を指定せずに記述するだけで有効になります。基本的な書き方は以下のとおりです。<button type="button" autofocus>上記のように、buttonタグ内に「autofocus
-
HTMLの<area>要素におけるrel属性の使い方と設定できる値を解説
<area>要素のrel属性は、現在のドキュメントとリンク先のドキュメントとの関係性(リレーション)を指定するために使用します。この属性は、HTML5で<area>要素に対して新たに導入されました。rel属性の基本構文rel属性の基本的な書き方は以下のとおりです。<area rel=value>「value」の部分には、リンク先との関係を表す以下のいずれかのキーワードを指定できます。rel属性に指定できる主な値alternate:ドキュメントの代替バージョンへのリンク(例:印刷用ページなど)author:ドキュメントの著者へのリンクbookmark:ブックマ
-
HTML formターゲット属性の使い方を徹底解説!フォーム送信後の表示先を制御する方法
HTMLの<form>要素におけるtarget属性を使うと、フォームを送信した後に表示されるレスポンス(応答結果)の表示先を指定できます。フォーム送信結果を新しいタブで開きたい場合や、同じフレーム内に表示したい場合など、用途に応じて柔軟に制御できる便利な属性です。 target属性の基本構文 target属性の基本的な書き方は以下のとおりです。 <form target=_blank|_self|_parent|_top|frame> 指定できる値とその動作 target属性に指定できる主な値と、それぞれの動作は次のとおりです。 _blank … レスポンスを新しいウ
-
HTMLの<frame>タグとは?使い方と主な属性を解説
<frame>タグは、フレームを作成するために使用されるタグで、<frameset>要素の中で1つのウィンドウフレームを定義します。注意: <frame>タグはHTML5で廃止(非推奨)されています。現在のWeb開発では、代わりに<iframe>を使用することが推奨されています。<frame>タグの主な属性<frame>タグで使用できる主な属性は以下の通りです。属性説明frameborderフレームの周囲に境界線を表示するかどうかを指定しますlongdescフレームの内容に関する詳細な説明が記載されたページへの参照を指定し
-
HTMLの<area>要素におけるtarget属性の使い方を解説
HTMLの<area>要素におけるtarget属性とは<area>要素のtarget属性を使うと、クリックされたリンク先のドキュメントをどこに表示するかを指定できます。たとえば、新しいウィンドウ(タブ)で開く、同じフレーム内で開く、親フレームで開く、といった表示方法を柔軟に制御することが可能です。target属性の構文target属性の基本的な構文は以下の通りです。<area target=_blank|_self|_parent|_top|フレーム名>それぞれの値の意味は次のようになっています。_blank:リンク先のドキュメントを新しいウィンドウまたは新
-
HTMLのbutton要素におけるname属性の使い方を徹底解説
<button>要素のname属性は、ボタンに名前を設定するために使用される属性です。複数のボタンに同じ名前を付けることも可能ですが、name属性とvalue属性を組み合わせることで、同じ名前のボタンからでもそれぞれ異なる値を送信できます。 これは特に、フォーム内で複数の送信ボタンを配置し、押されたボタンによって処理を切り替えたい場合に非常に便利です。 基本構文 <button name="btn_name"> 上記の構文において、btn_name の部分にはボタンの任意の名前を指定します。この名前はフォーム送信時のパラメータ名としてサーバー側に渡さ
-
HTMLのblockquoteタグとは?使い方とcite属性の指定方法を解説
HTMLの<blockquote>タグは、他のソース(外部サイトや文献など)から引用した一節を示すための要素です。主に長い引用文を定義する際に使用され、多くのブラウザではデフォルトでインデント(字下げ)されて表示されます。短い引用文を表したい場合は、代わりに<q>タグを使用しましょう。 blockquoteタグで使える属性 cite: 引用元(出典)のURLを指定します それでは、実際にHTMLでblockquoteタグを実装した例を見ていきましょう。 使用例 <!DOCTYPE html> <html> <body> <
-
HTMLのbodyタグとは?基本の使い方と非推奨属性をわかりやすく解説
HTMLの<body>タグは、Webページの本体(ボディ)部分を定義する要素です。ブラウザ上に実際に表示されるテキスト、画像、動画など、ページを構成するすべてのコンテンツは、このタグの中に記述します。 bodyタグの主な属性 かつてbodyタグには、ページ全体の見た目を制御するためのさまざまな属性が用意されていました。しかし、以下に挙げる属性はすべてHTML5で非推奨(Deprecated)となっています。現在では、これらの装飾的な指定はCSSで行うのが標準的な方法です。 属性値説明 alinkrgb(x,x,x)#xxxxxxカラーネーム非推奨 - ドキュメント内のアクテ
-
HTMLのbrタグとは?改行の設定方法を実例付きで解説
HTMLの<br>タグは、テキスト内に強制的な改行(ラインブレーク)を挿入するためのタグです。段落タグである<p>とは異なり、<br>タグを使うことで、新しい段落を作らずに1行分だけ改行できます。終了タグが不要な空要素(void要素)である点も特徴です。この記事では、<br>タグの基本的な使い方を、実際のコード例と表示結果をもとにわかりやすく解説します。コード例:brタグで改行を設定する以下は、HTMLで<br>タグを使用して改行を設定するサンプルコードです。<!DOCTYPE html> <html> <
-
HTMLのbuttonタグとは?使い方と主な属性をサンプルコード付きで解説
buttonタグとは?HTMLの<button>タグは、Webページ上に「クリックできるボタン」を作成するための要素です。フォームの送信やJavaScriptによる処理の実行など、ユーザーの操作を受け付けるトリガーとして幅広く利用されています。同じようにボタンを作成できる要素に<input type="submit">がありますが、<button>タグは開始タグと終了タグのペアで構成されているため、ボタンの内側に画像やアイコンなどのHTML要素を自由に配置できるのが大きな違いです。inputタグでは実現できない柔軟でリッチなデザインが可能