HTML

HTMLのの使用方法を学ぶ ウェブサイトの要素。 HTMLの elementは、ページタイトル、スタイル、スクリプトなど、Webページに関するメタデータ（情報）のコンテナです。 内のコンテンツ 要素は主に サイトの訪問者ではなく、マシン（ブラウザなど）によって読み取られ、処理されます。 要素をと混同しないでください 別の目的を果たす要素。 要素は、開口部の のすぐ下に配置されます タグ、および開始の直前 タグ： 次のHTML要素を内に配置できます 要素： 例 の使用方法の例をいくつか見てみましょう。 いくつかの一般的に

HTMLコード構文を表示する場合は、なし ブラウザがそれを実際のマークアップとして解釈（およびレンダリング）するために、予約済みをエスケープする必要があります。 最初にHTML文字。 を見てください 内のタグ 以下の要素： 上記のコードをHTMLドキュメントに追加すると、 実際のマークアップとして解釈されますが、これは明らかに望ましくありません。 山かっこをエスケープする必要があります および h1を囲む 予約されたHTML文字だからです。 幸い、それは簡単です： を置き換えます ＆lt; を置き換えます ＆gt; 例： これで、上記のコードが正しく

最も一般的に使用される属性名と値のいくつかを見て、HTML属性の使用方法を学びます。 HTML属性とは何ですか？ HTMLでは、属性はHTML要素に追加情報を追加したり、デフォルトの（すぐに使用できる）動作を変更したりするために使用される修飾子ツールです。 属性が追加されていないHTML要素は次のようになります： 属性を持つHTML要素 次のように定義されます： そのモデルを念頭に置いて、いくつかの実用的な属性の例を見てみましょう。 href属性 href 属性は、HTMLで最も重要な属性の1つです。 href 次のURLを指定するために使用されます： ハイパーリンク（単に

href属性 href 属性は、HTMLで最も重要な属性の1つです。 href 次のURLを指定するために使用されます： ハイパーリンク（単に「リンク」とも呼ばれます）。 または、スタイルやスクリプトなどの外部リソースをインポートするため。 hrefの最も一般的な使用例 アンカー要素<a>に内部リンクまたは外部リンク（URL）を追加することです ： hrefとの内部リンク ユーザーがフロントページをクリックすると、そのページに移動するリンクを作成しましょう。 これをホームと呼びます。 まず、アンカー要素を定義します： 次に、<a>を作成します 要

タグは、HTMLのインライン要素を定義します。これにより、テキストの間に改行（改行）が挿入されます。 例： <p> The &lt;br&gt; tag <br>forces<br>line<br>breaks in text </p> 結果： タグ 力 ライン テキストの区切り タグについて知っておくと便利です 開発者が<br>を使用しているのをよく目にします タグを使用して個々のHTML要素の間にスペースを追加しますが、これは誤った使用法です。 CSSのマージンを使用する必要があります 要

HTMLには、次の3種類のリスト要素があります。 順序付けされていないリスト（最も一般的） 注文リスト 説明リスト 順序付けされていないリスト 順序付けされていないリストは、<ul>で定義されます 要素とその中の各リストアイテムは、<li>で定義されます。 要素： 結果： アップル バナナ オレンジ デフォルトでは、順序付けされていないリストは円の箇条書きでスタイル設定されますが、これはCSSでカスタマイズできます。 順序付きリスト 順序付きリストは、<ol>で定義されます 要素とその中の各リストアイテムは、<li>で定義されま

HTMLの 要素は、JavaScriptが無効の場合に、サイト訪問者のブラウザにコンテンツを表示するために使用されます 。 たとえば、誰かがあなたのWebサイトにアクセスしたが、ブラウザでJavaScriptが無効になっているとします。彼らに知らせるために（彼らは誤ってJavaScriptをオフにした可能性があります）、 を使用します このように： 説明のために、上記のHTMLスニペットをこのCodePenに追加しました ただし、JavaScriptが無効になっていないと表示されません。 JavaScriptを（一時的に）無効にするには： ブラウザのアドレスバーに移動し、鍵のアイコ

ボタンやリンク（アンカー要素<a>）を使用するWebサイトをよく目にします ）交換可能。しかし、正しく理解するのは難しくありません。基本的なガイドラインは次のとおりです。 リンクを使用する場合（） リンクを使用する（<a href="/go-here">link</a> ）ユーザーに次のことをさせたい場合： 同じページの別のセクションに移動 ウェブサイトの別のページに移動 外部のWebサイト（別のドメイン）に移動します ボタンを使用するタイミング（） ボタンを使用する （<button type="button&q

HTMLのの使用方法を学ぶ 要素。 elementは、HTMLドキュメントに関するいくつかのタイプのメタデータを定義するために使用されます。メタデータは単に情報を意味します。または、より具体的には、メタデータは、他のデータに関する情報を記述および提供するデータです。 要素にはいくつかの属性と値があります。 名前 属性は最も重要なものの1つです。 名前 いくつかの値を取ります。例： description 、 contentと一緒に使用されます ページを説明する属性： 要素は内にのみ存在します 要素。 メタデータはウェブページには表示されませんが、サーバー、ブラウザ、検索エ

rel="noopener" 属性は、外部リンクのセキュリティに直接影響するため、知っておくべき最も重要なHTML属性の1つです。 target="_blank"を使用するアンカーリンク 属性。 target="_blank" リンクを新しいブラウザタブで開きます。 rel="noopener"へのリンクの例を次に示します。 属性： rel=noopenerの仕組み rel="noopener"を追加する場合 ウェブサイトの外部リンクへ（target="_blankを使用）

ターゲット属性 target 属性は、ユーザーがリンクをクリックしたときにリンクを開く場所を指定します。 以下のリンクをクリックすると、現在のブラウザのタブ/ウィンドウにあるTechStackerのフロントページに移動します。 したがって、別のWebサイトにリンクすると、ユーザーはWebサイトから移動し、リンクしたWebサイトに移動します。これが必要な場合と不要な場合があります。 これは、デフォルトで<a>が原因で発生します 要素にはtargetがあります _selfの値を持つ属性 —これは、ユーザーがいるのと同じウィンドウでリンクを開くことを意味します。 したがって、

HTMLでは、属性は通常 アンカー要素の例のように、属性名と属性値で構成されます。 ただし、値 （動作）は属性名に組み込まれています。 たとえば、defer HTMLの<script>を変更するために使用する属性 要素： deferに注意してください 属性に代入演算子がありません（= ）またはその動作が組み込まれているため価値があります。 defer いわゆるブール値です 属性。ブール値は、 trueの2つの値しか持てないタイプのデータに使用されます またはfalse （または有効/無効 。 deferを詳しく見てみましょう 属性。 この<script>

HTMLでは、カスタム属性を作成できます。次に、CSSを使用してスタイルを設定したり、JavaScriptを使用してこれらの属性の動作を制御したりできます。 カスタム属性は好きなように呼び出すことができますが、カスタム属性名の前にはdata-を付ける必要があります。 ラベル： たとえば、「Apple」という食品要素があるとします。 。ユーザーがクリックすると、タイプを表示します。 ポップアップダイアログボックスに表示されます。 そのために、food-typeというカスタム属性を作成します （data-を覚えておいてください ラベル）そしてそれを<div>に追加します Ap

<figcaption> 要素は、<figureのキャプションを追加するために使用されます エレメント。画像のキャプションを追加するためによく使用されます。 コード例：

HTMLキャンバス全体を特定の色で塗りつぶすには、fillRect()を使用できます。 長方形を単色で塗りつぶすプロパティ。 次に、キャンバスの高さと幅のプロパティを使用して、塗りつぶされた長方形をキャンバス全体に広げます。 const canvas = document.getElementById(my-canvas); const ctx = canvas.getContext(2d); ctx.fillStyle = blue; ctx.fillRect(0, 0, canvas.width, canvas.height);

HTMLの 属性は、アセット（通常はCSSファイル）を最適化するデバイスタイプを指定するために使用されます。このようにして、さまざまな目的のためにさまざまなCSSスタイルシートを作成できます。 メディア 属性はいくつかの値を取りますが、最も一般的な値は次のとおりです。 すべて ：はデフォルトであり、すべてのメディアタイプのデバイスに適用されます。 画面 ：コンピューター画面、タブレット、スマートフォン—任意の画面用です。 印刷 ：印刷プレビューモード、および印刷ページ用です。 したがって、実際には、 screen用に最適化されたさまざまなCSSスタイルシートを使用できます。 およびp

モーダルは、Webページのメインウィンドウとは別のウィンドウです。主な目的は、メインウィンドウでユーザーとのやり取りを無効にし、情報を共有したり、ユーザーと何かを確認したりすることです。モーダルウィンドウは、ログインコンポーネント、ユーザー入力の確認、またはその他の無数の用途として使用するのに人気があります。 Bootstrapは、コンポーネントを非常に迅速に作成するのに役立つフレームワークです。この記事では、Bootstrapをセットアップする方法を確認し、モーダルが必要な理由を学び、Bootstrapフレームワークを使用して動作するモーダルの例をいくつか見ていきます。 はじめに W

タブは、余分なスペースを使用せずにさまざまな情報ペインを表示できるようにするユーザーインターフェイス（UI）要素です。バインダーや本のタブと同じように、詳細についてはページ上の配置をマークし、情報のペインに含まれる内容によって識別されます。タブをクリックすると、そのタブに関連付けられている情報が表示されます。 Bootstrapは、タブをすばやく作成するのに役立つフレームワークです。この記事では、Bootstrapを設定する方法を確認し、タブを使用する必要がある理由を学び、Bootstrapタブの動作例をいくつか見ていきます。 はじめに Webページにタブを表示できるようにするために最

マークアップ言語について話すとき プログラミングでは、誰かが何かの価格を上げようとしているという意味ではありません。 マークアップ 値上げではありません。これは、特定の種類のスクリプト言語を使用してデータを表現する方法です。 このガイドでは、マークアップ言語とは何か、それらがどのように機能するか、およびマークアップ言語をいつ使用できるかについて説明します。また、3つの異なるマークアップ言語とその使用例を分析して、マークアップがどのように機能するかをしっかりと理解できるようにします。 マークアップ言語とは何ですか？ マークアップ言語は、コンピューターがドキュメントに注釈を付けるために使用する

Webページのスタイル設定にCSSを使用する場合、ページの特定の部分をターゲットにすることがよくあります。 1つ以上の要素を選択する方法の1つは、IDまたはクラス属性、あるいはその両方を使用することです。 このチュートリアルを進めながら、インタラクティブなCodepenをチェックして、一緒に遊んでください！ ID属性とCSSセレクター 先に進み、タグを使用して簡単な段落を作成しましょう： <p> Color this paragraph! </p> IDは、単一の要素を追加して一意に識別する一意の識別子です。規則id=” #NAME”に従います。 その