HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. HTMLシンボルとは？HTML文字エンティティの正しい使い方

    HTMLページにテキストを記述していると、キーボードから直接入力できない文字や、HTMLで特別な意味を持つ予約文字を使いたい場面に遭遇します。こうした特殊文字は「エンティティ（実体参照）」と呼ばれます。本記事では、コード内でこれらの特殊文字を扱う方法を解説し、頻出エンティティの早見表もご紹介します。 HTMLコードをそのまま画面に表示させるには シンボルの活用例として、画面上に表示したいコードブロックを作成するケースを考えてみましょう。ここで問題になるのは、HTMLコードをそのまま表示しようとしても、ブラウザがそれを「実行」してしまうという点です。 < と > は、HTMLに

  2. プロジェクトでセマンティックHTMLを使う方法：初心者向け入門ガイド

    Web開発者にとって、スクリーンリーダーを利用するユーザーも含めて、あらゆる人がサイトの情報を正しく読み取れるようにすることは重要な課題です。HTMLには「セマンティック（意味的）な要素」が用意されており、これを活用することでアクセシビリティの高いマークアップを実現できます。本記事では、Web開発でよく使われる代表的なセマンティック要素について解説します。 セマンティックHTMLとは 「セマンティックHTML」を理解するには、「セマンティクス（意味論）」という言葉の定義から始めるのが分かりやすいでしょう。Merriam-Webster辞書によれば、セマンティクスとは「意味の研究、あるいは記

  3. HTMLで画像サイズを指定する方法｜width属性とheight属性の基本

    HTMLにおける画像サイズとは、画像の高さ（height）と幅（width）のことを指します。これらは、<img>要素に対するHTML属性として指定します。本記事では、画像サイズの正しい設定方法をわかりやすく解説します。 基本の構文 <img>タグにwidth属性とheight属性を設定する際の基本的な構文は以下のとおりです。 <img src=<画像のURL> alt=<代替テキスト> height=<ピクセル数> width=<ピクセル数> /> 実際のコード例を見てみましょう。 <!DOC

  4. HTMLでドロップダウンを作成する方法：select要素とoption要素の基本

    HTMLの学習を進めていくと、作成したページがユーザー体験にどのような影響を与えるかを考える必要が出てきます。その中でも重要なのが、Webページの情報整理（レイアウト）がユーザー体験をどう変えるかという点です。ごちゃごちゃと詰め込まれたページは、訪問者がそのサイトに留まり、目的の操作を完了しようとする意欲を大きく損なってしまいます。 フォームを見やすく整理する方法のひとつが、ラジオボタンやチェックボックスとして並べていた選択肢を、ドロップダウンリストにまとめることです。ユーザーはリストをスクロールしながら、目的の選択肢を探すことができます。 この記事では、HTMLを活用してフォーム要素とし

  5. HTMLでテキストを強調する方法：太字・斜体・下線の基本を解説

    HTMLには、テキストを目立たせて注目を集めるためのさまざまな書式設定の方法があります。この記事では、テキストを太字、斜体、下線にする方法を詳しく解説します。読み終える頃には、あなたもHTMLの書式設定を自在に扱えるようになっているでしょう。 太字（ボールド）の設定方法 HTML5以前は、テキストを太字にするには、強調したい部分を<b>タグで囲むのが一般的でした。 <!DOCTYPE html> <html> <head> <meta charset=utf-8> <meta name=viewport co

  6. Bootstrapボタン徹底解説！色・サイズ・状態のカスタマイズ方法

    ボタン要素は、ユーザーがページとやり取りできるようにする、HTMLの中でも特に有用な要素のひとつです。ログインや登録、削除、メニューの表示、カラーテーマの切り替えなど、さまざまな操作がボタンを通じて行われます。しかし、ブラウザのデフォルトのボタンスタイルは決して美しいとは言えず、モダンなデザインからも程遠いものです。プロジェクトごとに毎回スタイルをカスタマイズしていては、同じ結果を得るために何度も同じコードを書くことになってしまいます。そこで活躍するのがBootstrapです。この記事では、Bootstrapのボタンで何ができるのかを詳しく見ていきましょう。カラーボタン <butt

  7. HTMLでリンクを新しいタブで開く方法｜target="_blank"の使い方を解説

    ユーザーを外部のウェブページへ誘導したい場合、何も設定しない状態では、リンク先のページが同じタブ内で開きます。外部リンクを新しいタブで開くようにすれば、ユーザーは元のページに簡単に戻ることができ、自サイトからの離脱を防ぎやすくなります。この記事では、HTMLでリンクを新しいタブで開く具体的な方法を解説します。 基本の構文 <a href=https://placekitten.com/1000/1000 target=_blank rel=noopener noreferrer>クリックして猫の画像を見る！</a> この機能の実装はとてもシンプルです。<a&

  8. HTMLの引用タグ完全ガイド――blockquote・q・citeなどの正しい使い方

    HTMLには、出典を引用したり、引用文を周囲のテキストと区別したりするための専用要素がいくつか用意されています。本記事では、HTMLの引用関連要素である<blockquote>、<q>、<abbr>、<address>、<bdo>、<cite>の6つを取り上げ、それぞれの特徴と適切な使い分け方を、具体的なコード例とともに解説します。 blockquote:長い引用文に使う <blockquote>要素は、複数行にわたる長い引用テキストに使用します。この要素を使うことで、引用部分そのものを、前後の段落や他のH

  9. HTMLでスペースを挿入する方法｜ ・ ・ ・ の違いと使い分け

    HTMLでは、テキストに空白（スペース）を入れたい場面がよくあります。しかし、キーボードのスペースキーを何度押しても、HTMLは連続する半角スペースを自動的に1つにまとめて表示してしまうため、意図した通りの余白を作るのは簡単ではありません。複数のスペースやタブのような幅を持つ空白が必要なときに活躍するのが、HTMLエンティティ（文字実体参照）です。この記事では、さまざまなサイズのスペースを実現できるHTMLエンティティの種類と、それぞれの使い方を詳しく解説します。 HTMLで使える4種類のスペース HTML要素内で主に使用されるスペースには、以下の4種類があります。 &thins

  10. HTMLでリダイレクトを実行する方法｜metaタグを使ったクライアントサイド転送の基本

    Webサイトの移転に伴い、アクセスを新しいURLへ誘導したい場面は少なくありません。リダイレクトの実装方法は複数ありますが、一般的にはサーバーサイド（バックエンド）で設定するケースが多いでしょう。本記事では、HTMLのmetaタグを使った「クライアントサイドリダイレクト」の実装方法をわかりやすく解説します。 HTMLリダイレクトの仕組み このリダイレクトは、HTML文書のhead要素内に記述したmetaタグによって実現します。指定した秒数だけ待機してから、ブラウザが自動的に新しいページへ遷移する仕組みです。 基本的な構文は以下のとおりです。 <head> <met

  11. HTMLの色指定をマスターする4つの方法｜HSL・RGB・Hex・カラー名の使い分けガイド

    Web制作のコーディングは、一見雑多に見えることがあります。同じ目的を達成するための方法が複数存在し、その中には効率的なものもあれば、そうでないものもあります。さらに、環境によっては動作しない解決策もあるかもしれません。優れたサイトと最高のサイトの違いはアプローチの選択にかかっており、それはHTMLのカラーコーディングにおいて特に顕著です。 とはいえ、HTMLの色指定は脳外科手術ほど難しいものではありません。このガイドでは、サイトのHTMLを調整して多彩な色合いを実現するための4つの方法をご紹介します。シンプルな手順に従うだけで、あなたのウェブサイトは魅力的なトーンで彩られ、競合他社よりも際立

  12. HTMLのtextareaタグとは？複数行テキスト入力フィールドの作り方を徹底解説

    HTMLの<textarea>タグは、フォーム内に複数行のテキスト入力欄を作成するために使用されるタグです。<textarea>タグで定義され、文字数の制限なくテキストを保持できます。 HTMLでフォームを作成する際、長いテキストを受け付けたいケースがあります。例えば、小売店のWebサイト向けにお問い合わせフォームを作る場合、顧客が直面している問題の詳細な説明を受け付けるフォーム要素が必要になるでしょう。 そんなときに役立つのが、HTMLの<textarea>タグです。<textarea>要素は、複数行のテキスト編集機能を備えたフォーム要

  13. HTMLのbuttonタグとは？使い方と主要属性をステップごとに解説

    HTMLの<button>タグは、HTMLフォーム内にクリック可能なボタンを作成するために使用されます。ユーザーがフォームに入力した情報をWebサイトへ送信する際に活用され、ボタンの見た目はCSSで自由にカスタマイズできます。 Webページ上でフォームを作成する際には、ユーザーがフォームを送信できるように、クリック可能なボタンが必要になります。たとえば、ECサイトの注文フォームで配送先情報を入力してもらう場合、ユーザーが入力を終えた後に情報を送信するためのボタンが欠かせません。 そこで登場するのがHTMLの<button>タグです。buttonタグは、HTMLフォーム

  14. HTMLフォームの作成方法を徹底解説！初心者向けステップバイステップガイド

    HTMLフォームは、テキストフィールド、ドロップダウン、チェックボックスなどを使ってユーザーからデータを収集するための仕組みです。HTMLのフォームは<form>タグで囲み、各要素は<input>タグを使って作成します。 HTMLフォームは、ユーザーがWebサイトやWebアプリケーションとやり取りするための重要な手段です。フォームを通じてユーザーが送信したデータは、Webサイトやサーバー側で処理・保存することができます。 「HTMLでフォームはどうやって作るの？」——この記事では、その疑問にお答えします。 本チュートリアルでは、具体的な例を交えながら、HTMLフォーム

  15. HTMLテーブルの作り方：初心者向けステップバイステップガイド

    HTMLテーブルとは、行と列で構成されたデータの集合体です。HTMLでテーブルを作成するには<table>要素を使用します。行の作成には<tr>、列（セル）の作成には<td>、テーブルの見出しには<th>を使います。テーブルは、行と列を使ってデータを分かりやすく提示するための手段です。私たちは日常のさまざまな場面でテーブルに触れています。バスの時刻表や、食品に含まれる成分表示などがその代表例です。HTMLにおいても、テーブルはデータを見やすく整理して表示するための重要な手法として使われています。このチュートリアルでは、具体例を交えながら、HTML

  16. HTMLリストの作り方：3種類のリストタグをステップバイステップで解説

    HTMLのリストタグは、Webページ上にリストを作成するために使用される要素です。順序付きリスト（番号付き）、順序なしリスト（箇条書き）、記述リスト（定義リスト）の3種類を作成できます。 Webページを作成していると、情報を見やすく整形されたリスト形式で表示したい場面が多くあります。例えば、学生の名簿をリスト形式で表示したり、ブログ記事の一覧を整理して提示したりするケースが挙げられます。 HTMLには、リストを作成するための機能が標準で備わっています。このチュートリアルでは、HTMLのリストの種類と、それぞれをWebページに実装する方法を詳しく解説します。 HTMLリストの種類 HTMLには

  17. 【初心者向け】HTMLで動画を埋め込む方法：video・object・embedタグの使い方を徹底解説

    HTMLドキュメントに動画を埋め込むには、<video>、<object>、<embed>という3つの要素を使用できます。それぞれ動作の仕組みが異なり、いずれもsrc属性などで動画ファイルのURLを指定します。 HTMLで動画を埋め込む場面とは Webページを作成していると、ページ内に動画を埋め込みたくなることがあります。例えば、ケーキの焼き方を解説するチュートリアル記事を書いていて、レシピと一緒にハウツー動画を掲載したいようなケースです。 HTMLで動画を埋め込む方法はいくつかあります。このガイドでは、<video>、<object&g

  18. HTMLでテキストを太字にする方法｜bタグ・strongタグ・font-weightの使い分け

    HTMLでテキストを太字にするには、<b>タグ、<strong>タグ、またはCSSのfont-weightプロパティを使用します。 Webページをデザインしていると、特定のテキストを目立たせたい場面に出くわします。 例えば、新しい技術の使い方を説明する手順書の中に、ユーザーが必ず読むべきセキュリティ上の注意事項があるとしましょう。読者がその注意事項を見逃さないよう、強調表示しておくと効果的です。 HTMLには、テキストを太字にするための機能が標準で備わっています。この記事では、HTMLでテキストを太字にする3つの主要な方法——<b>タグ、<stron

  19. HTML属性とは？基本から使い方までステップバイステップで解説

    HTML属性は、HTML要素に追加のプロパティ（性質）を定義するためのものです。属性はHTML要素の開始タグ内に記述され、要素によっては機能するために属性が必須となる場合もあります。 HTML属性とは何か、そしてどのように使うのか。HTMLを学び始めると、属性（attributes）という用語に出会うことがあります。属性は、HTMLページ上の特定の要素について追加情報を提供するために使われます。 属性はHTMLの開始タグ内に記述され、通常は「名前/値」のペアで指定します。たとえば、nameという属性にvalueという値を設定する場合は、name=valueのように記述します。 この記事では、

  20. HTMLで空白（スペース）を追加する3つの方法： 、preタグ、brタグの使い方

    HTMLでコードを書いていると、スペースキーを連続で押して入力した余分な空白が、ブラウザ上の表示には反映されないことに気づくでしょう。これは、HTMLでは連続する半角スペースが1つにまとめられてしまうためです。 例を見てみましょう。 <p>April is the cruelest month,</p> <p>April is the cruelest month,</p> 最初の<p>タグでは単語間にスペースが1つだけありますが、2つ目の<p>タグではスペースが3つ入っています。しかし、ブラウザで表示する

Total 2020 -コンピューター  FirstPage PreviousPage NextPage LastPage CurrentPage:101/101  20-コンピューター/Page Goto:1 95 96 97 98 99 100 101