HTML | コンピューター

HTMLのscript要素の使い方を徹底解説｜インライン・外部ファイル・defer属性の基本

HTMLの<script>要素の使い方について解説します。 HTMLの<script>要素は、ドキュメントにJavaScriptコードを追加するための要素です。 <script>要素でJavaScriptを追加する方法は、大きく分けて次の2つがあります。 JavaScriptコードをインラインとして、ドキュメント内に直接記述する外部のJavaScriptファイル（.js）を読み込むつまり、「内部で読み込む」か「外部から読み込む」かの違いです。それでは、両方の方法を順番に見ていきましょう。インラインJavaScript JavaScriptコードを

HTMLのhead要素の使い方を徹底解説!基本から実例まで

この記事では、WebサイトにおけるHTMLの<head>要素の使い方をわかりやすく解説します。 HTMLの<head>要素は、ページタイトル、スタイル、スクリプトなど、Webページに関するメタデータ(情報)を格納するためのコンテナです。 <head>要素の中身は、サイト訪問者のためというよりも、主にブラウザなどのマシンによって読み取られ、処理されるものだと覚えておきましょう。なお、<head>要素は、ページ上部のヘッダー領域を表す<header>要素とは役割がまったく異なるため、混同しないよう注意してください。 head要素の配置場

HTMLの予約文字をエスケープしてコードを正しく表示する方法

HTMLコードの構文を、ブラウザに本物のマークアップとして解釈・描画させずにそのまま表示したい場合は、あらかじめ予約文字をエスケープしておく必要があります。なぜエスケープが必要なのかまずは、下記の<code></code>要素の中にある<h1>タグに注目してみましょう。このコードをHTMLドキュメントにそのまま記述すると、<h1>は本物のマークアップとして解釈され、実際に見出しとして描画されてしまいます。コードを見せたいだけなのに、これでは意図した表示になりません。この問題を避けるには、h1を囲んでいる山括弧 < と > を

HTML属性の使い方を徹底解説！href・target・カスタム属性の基本

よく使われる属性名とその値の実例を見ながら、HTML属性の基本的な使い方を学びましょう。 HTML属性とは？ HTMLにおける属性（attribute）とは、HTML要素に追加情報を持たせたり、デフォルトの動作を変更したりするための修飾ツールです。属性が一切付いていないHTML要素は、次のようなシンプルな形をしています。 <tag>Content</tag> 一方、属性付きのHTML要素は、次のように定義します。 <tag attribute=value>Content</tag> この基本モデルを頭に入れた上で、実際によく使われる属性の例を見

【初心者向け】HTMLのhref属性の使い方を徹底解説！内部リンク・外部リンクの設定方法

href属性とは？href属性は、HTMLの中でも最も重要な属性のひとつです。リンク先のURLを指定することで、Webページ同士をつなぐ重要な役割を担っています。hrefは、主に以下のようなURLを指定するために使われます。ハイパーリンク（通称「リンク」）の作成スタイルシートやスクリプトなど、外部リソースの読み込みhref属性の最も一般的な使い方は、アンカー要素<a>に、サイト内リンク（内部リンク）または外部リンク（URL）を設定することです。hrefで内部リンクを作成するまずは、クリックするとサイトのトップページへ移動するリンクを作成してみましょう。リンクテキストは「Home」と

HTMLのbrタグ（改行）の正しい使い方と注意点

HTMLの<br>タグは、テキストの中で強制的に改行を挿入するためのインライン要素です。段落内の文章を任意の場所で折り返したい場合に使用します。 brタグの基本的な使い方以下のように、改行したい位置に<br>を記述します。 <p> The <br> tag <br>forces<br>line<br>breaks in text </p> このコードはブラウザ上で次のように表示されます。 The <br> tagforces line breaks in text &l

HTMLリストの使い方完全ガイド｜ul・ol・dlタグの違いと書き方を実例つきで解説

HTMLには、用途に応じて使い分ける3種類のリスト要素が用意されています。順序なしリスト（最もよく使われる）順序付きリスト記述リスト（定義リスト）順序なしリスト（ul要素）順序なしリストは <ul> 要素で定義し、リストの各項目は <li> 要素で記述します。 <ul> <li>りんご</li> <li>バナナ</li> <li>オレンジ</li> </ul> 表示結果：りんごバナナオレンジデフォルトでは「・」（黒丸）のビュレットマークが

HTMLのnoscript要素とは？使い方とJavaScript無効時の表示方法を解説

リンクとボタンの使い分けガイド — どちらをいつ使うべきか？

Webサイトを見ていると、ボタンとリンク（アンカー要素 <a>）が混同されて使われているケースをよく目にします。しかし、正しく使い分けるのはそれほど難しいことではありません。この記事では、基本的なガイドラインをわかりやすく解説します。リンク（<a>）を使うべき場面ユーザーに以下のような「移動」をさせたい場合は、リンク（<a href=/go-here>リンク</a>）を使用します。同じページ内の別セクションへ移動させる自サイト内の別ページへ移動させる外部サイト（別ドメイン）へ移動させるつまり、リンクとは「ナビゲーション」のための要

HTMLのmeta要素の使い方完全ガイド｜description・viewport・robotsタグの基礎とSEO対策

この記事では、HTMLの<meta>要素の基本的な使い方から、SEO対策につながる実践的な活用方法までをわかりやすく解説します。 meta要素とは？ <meta>要素は、HTML文書に関するさまざまな種類のメタデータ（メタ情報）を定義するために使用される要素です。メタデータとは「情報」のことであり、より正確に言えば、他のデータについての説明や付加情報を提供するデータのことを指します。 <meta>要素には複数の属性と値が存在しますが、その中でもname属性は最も重要な属性の一つです。 name属性とdescriptionの設定 name属性にはいくつかの

HTMLのrel="noopener"属性の使い方（セキュリティ上とても重要）

rel=noopener属性は、target=_blank属性を使ったアンカーリンクにおける外部リンクのセキュリティに直接関わるため、知っておくべき最も重要なHTML属性のひとつです。target=_blankを指定すると、リンク先が新しいブラウザタブで開きます。以下はrel=noopener属性を付けたリンクの例です。<a href=https://www.youtube.com rel=noopener target=_blank>youtube.comへのリンク</a>rel=noopenerの仕組みウェブサイトの外部リンク（target=_blank付き）にre

HTMLのtarget属性の使い方を徹底解説！リンクの開き方を制御する方法

target属性とは target属性は、ユーザーがリンクをクリックした際に、そのリンクをどこで開くかを指定するためのHTML属性です。例えば、以下のようなリンクをクリックすると、現在表示しているのと同じブラウザタブ（ウィンドウ）でリンク先のページが開きます。 <a href=https://techstacker.com/>トップページへのリンク</a> つまり、別のウェブサイトへのリンクを設置した場合、ユーザーはあなたのサイトから離れ、リンク先のサイトへ移動してしまうのです。これは意図した挙動の場合もあれば、そうでない場合もあります。デフォルトでは「_self」

HTMLのdefer属性の使い方をわかりやすく解説

HTMLにおいて、属性は通常「属性名」と「属性値」の組み合わせで構成されます。アンカー要素などがその典型的な例です。しかし、中には挙動そのものが属性名に組み込まれている属性も存在します。その代表例が、HTMLの<script>要素を制御するためのdefer属性です。 <script defer src=app.js></script> 注目すべきは、defer属性には代入演算子（=）も属性値も存在しないという点です。これは、その挙動がすでに属性名自体に組み込まれているためです。 deferは、いわゆるブーリアン（論理型）属性と呼ばれるものです。ブーリアン

HTMLでカスタム属性（data属性）を使う方法をわかりやすく解説

HTMLでは、独自のカスタム属性を作成できます。作成したカスタム属性は、CSSでスタイリングしたり、JavaScriptで動作を制御したりするために活用できます。カスタム属性の名前は自由に決められますが、必ず data- という接頭辞（プレフィックス）を付ける必要があります。基本の書式は以下のとおりです。 <tag data-custom-attribute-name=value>コンテンツ</tag> カスタム属性の実例：クリックすると食品の種類を表示する具体例として、「りんご（Apple）」という食品要素を考えてみましょう。ユーザーがこの要素をクリックしたときに

HTMLのfigcaption要素とは？画像にキャプションを付ける正しい使い方

<figcaption>要素は、<figure>要素に対してキャプション（説明文）を追加するためのHTML要素です。特に画像に説明文や出典を付ける際によく使われます。基本的な使い方 <figcaption>は必ず<figure>要素の中に配置します。配置できる位置は、<figure>内の最初の子要素または最後の子要素のどちらか一方のみです。 <figure> <img src=path-to-image.jpg alt=画像の説明 /> <figcaption>写真のキャプション</

JavaScriptでキャンバス全体を特定の色で塗りつぶす方法｜fillRect()の使い方

HTMLのcanvas要素全体を特定の色で塗りつぶしたい場合は、Canvas APIのfillRect()メソッドを使うのが最もシンプルな方法です。fillRect()は、指定した座標とサイズをもとに、単色で塗りつぶされた矩形（四角形）を描画できます。ポイントは、矩形の描画開始位置を左上の原点 (0, 0) に設定し、サイズとしてキャンバス自身の width（幅）と height（高さ）プロパティを渡すことです。こうすることで矩形がキャンバス全体を覆い、結果的に背景色として機能します。基本的なコード例 const canvas = document.getElementById(my-ca

HTMLのlink要素「media属性」を使いこなす!画面用・印刷用にCSSを読み分ける方法

HTMLの<link>要素にあるmedia属性は、読み込むリソース(通常はCSSファイル)をどのデバイスやメディア向けに最適化するかを指定するための属性です。これを活用することで、用途ごとに異なるCSSスタイルシートを切り替えて適用できます。 media属性の主な値 media属性には複数の値を指定できますが、特によく使われるのは次の3つです。 all:デフォルト値。すべてのメディアタイプのデバイスにスタイルが適用されます。 screen:パソコンのモニター、タブレット、スマートフォンなど、あらゆる「画面」表示向けのスタイルを指定します。 print:印刷プレビュー画面や実際に

Bootstrapフレームワークでモーダルを作成する方法を徹底解説

モーダルとは、Webページのメインウィンドウとは別に表示されるウィンドウのことです。主な目的は、メインウィンドウへのユーザー操作を一時的に無効化し、ユーザーに情報を伝えたり確認を求めたりすることです。モーダルウィンドウは、ログインフォームやユーザー入力の確認など、さまざまな場面で広く活用されています。 Bootstrapは、コンポーネントを素早く構築できるフレームワークです。この記事では、Bootstrapのセットアップ方法、モーダルが必要になる理由、そしてBootstrapを使ったモーダルの実装例をわかりやすく紹介します。準備：必要な依存関係を整える Webページでモーダルを正しく表示する

Bootstrapフレームワークでタブを作成する方法｜初心者向けコード解説

はじめにタブは、限られたスペースを有効活用しながら複数の情報パネルを切り替えて表示できるUI（ユーザーインターフェース）要素です。バインダーや書籍のインデックスタブのように、ページ上の位置を示す目印となり、パネルの中身に応じてラベルが付けられます。タブをクリックすると、そのタブに関連付けられた情報が表示されます。Bootstrapは、こうしたタブを素早く構築するためのフロントエンドフレームワークです。本記事では、Bootstrapのセットアップ方法、タブが必要になるシーン、そして実際に動作するタブのコード例まで、順を追って解説します。事前準備：依存パッケージの導入Webページ上でタブを正しく動

マークアップ言語とは？仕組みと主な種類を初心者向けにわかりやすく解説

プログラミングの世界で「マークアップ言語」と聞くと、何かの値段をつり上げる「値上げ」を連想するかもしれませんが、実際はまったく別のものです。マークアップとは、特定の形式を持つ記述言語を使ってデータを表現する方法のことを指します。この記事では、マークアップ言語とは何か、どのような仕組みで動作するのか、そしてどの場面で活用されるのかを解説します。さらに、代表的な3つのマークアップ言語とそれぞれの用途についても紹介し、マークアップの基礎をしっかりと身につけられる内容となっています。マークアップ言語とは何かマークアップ言語とは、コンピュータが文書に注釈（アノテーション）を付けるために使用する言語