HTML

 Computer >> コンピューター >  >> プログラミング >> HTML
  1. HTMLのID属性とクラス属性の違いとCSSセレクターの使い方

    CSSでWebページをスタイリングする際、「ページ内の特定の部分だけ」を狙って装飾したい場面がよくあります。そんなときに活躍するのが、要素に付与するID属性とクラス（class）属性です。この2つを使いこなせば、1つまたは複数の要素を思いどおりに選択できるようになります。 本記事では、実際のコード例を見ながら進めていきます。ぜひCodePenなどの環境で手を動かしながら読んでみてください。 ID属性とCSSセレクター まずは<p>タグを使って、シンプルな段落を作成しましょう。 <p> この段落に色をつけてください！ </p> IDとは、単一の要素に固有の識別

  2. HTMLのiframeタグ徹底解説：埋め込み方法をステップバイステップで学ぶ

    HTMLの<iframe>タグは、Webページの中に別のドキュメント（PDF、Webページ、その他のリソースなど）を埋め込むための要素です。埋め込むリソースの場所は、src属性で指定します。 HTMLを使えば、PDFやGoogleマップなど、あるWebドキュメントの内容を別のページに埋め込むことができます。 そのために活躍するのがHTMLの<iframe>タグです。このタグを使うと、他のWebページなどの外部オブジェクトを1つのWebページ内に埋め込めます。本記事では、具体例とともに、<iframe>タグでWebリソースをページに埋め込む方法を解説します。

  3. HTML学習完全ガイド：初心者からプロへ、Web制作の基礎言語をマスターする方法

    自分のWebサイトを作りたい方も、Webデベロッパーとしてキャリアを目指したい方も、HTMLの知識は必須のスキルです。 HTML（HyperText Markup Language／ハイパーテキスト・マークアップ言語）は、インターネット上のほぼすべてのWebサイトを支える「3つのコア技術」のひとつです。HTMLを使うことで、Webデザイナーや開発者はサイトの構造を定義できます。テキストや画像などの要素をページのどこに配置するかを決めるのが、まさにHTMLの役割です。 HTMLは、Web開発を学ぼうとしている技術者だけのためのものではありません。ドラッグ＆ドロップ式のWebサイト作成ツールの中に

  4. HTMLのinputタグ完全ガイド：ステップバイステップで学ぶフォーム入力の基本

    <input>タグは、ユーザーがデータを入力するための入力フィールドを作成するHTML要素です。テキストフィールド、チェックボックス、ラジオボタン、メールアドレス入力欄など、さまざまな種類の入力欄を作成できます。また、inputタグには<label>タグを使ってラベルを付けるのが推奨されています。 HTMLフォームとは フォームは、ユーザーがWebサイトとやり取りするための重要な要素です。フォームを使うことで、ユーザーはサイトにデータを送信できます。送信されたデータは、クライアント側、あるいはバックエンドのサーバーやデータベースで処理されます。 HTMLでは、Webフ

  5. 【初心者向け】HTMLでハイパーリンクを作成する方法を徹底解説

    HTMLのハイパーリンク（hyperlink）を使うと、別のページへ移動できるようになります。リンクは<a>タグで定義され、href属性にはクリック時にユーザーが移動する先のURLを指定します。開始タグ<a>と終了タグ</a>の間に記述したテキストが、画面に表示されるアンカーテキストとなります。 Webページを作っていると、他のページや外部サイトを参照したい場面が出てきます。たとえばブログ記事の中で「関連するこちらの記事もどうぞ」といった形でリンクを貼ることはよくあるでしょう。 ハイパーリンクとは、あるWebページから別のWebページをつなぐ仕組みのことで

  6. HTMLのspanタグとは？初心者向け使い方ガイド

    HTMLの<span>タグを使うと、Webページや段落の一部にスタイルを適用できます。段落内のテキストを装飾する、たとえば特定の単語の色を変更するといった用途でよく使われます。<span>タグ自体は、デフォルトでは何のスタイルも持ちません。HTMLでコーディングをしていると、Webページ上の特定の部分だけにスタイルを適用したくなることがあります。たとえば、文中の特定の単語を強調したい、リンクリストの中の特定のリンクだけを目立たせたい、といったケースです。そんなときに役立つのがHTMLの<span>タグです。<span>は汎用的なインラインコンテナ

  7. HTML画像タグ（img）の使い方完全ガイド｜基本から応用まで徹底解説

    HTMLの<img>タグは、Webページに画像を表示するための要素です。src属性で表示したい画像の場所を指定し、alt属性を使えば、画像が読み込めない場合に代わりのテキストを表示できます。 Webが誕生した当初、ページに表示できるのはテキストだけでした。しかし間もなく画像を埋め込む機能が追加され、以来、画像はWebページに欠かせない存在となっています。ロゴから写真まで、インターネット上のあらゆる場所で画像が活用されています。 この記事では、Web開発者が<img>タグを使ってHTML画像を扱う方法を解説します。<img>タグで利用できる主要な属性について

  8. HTMLの上付き文字（sup）と下付き文字（sub）の使い方と活用シーン

    HTMLの<sup>タグは、上付き文字（superscript）を定義します。これは行の上部に表示されるテキストのことです。一方、<sub>タグは下付き文字（subscript）を表し、行の下部に表示されるテキストを指します。 通常、私たちが目にするテキストには「ベースライン」と「xハイト」という基準線があります。 ベースラインとは、下線を引いた場合に表示される位置に相当する基準線です。xハイトは小文字の高さを示す仮想の線で、その名前は小文字の「x」がちょうどこの空間を埋めることに由来しています。 このガイドでは、HTMLで上付き文字と下付き文字を定義する方法を解

  9. HTMLでフォントを変更する方法｜CSSを使った実践ガイド

    font-family CSSプロパティを使えば、HTMLドキュメントのフォントを自由に定義できます。外部フォントを参照したい場合は、url()メソッドで@font-faceを定義するか、Google Fontsのようなサイトからフォント用のCSSファイルを読み込むことが可能です。 開発者なら誰でも、HTMLが処理されたときにデフォルトで表示されるフォントではなく、独自のフォントを使いたい場面に一度は遭遇するはずです。この記事では、ベストプラクティスに沿って、HTMLドキュメントのフォントを変更する方法をご紹介します。 HTMLでフォントを変更する3つの方法 HTMLでWebページのフォ

  10. HTMLで改行する方法を解説！brタグとpreタグの使い分け

    HTMLページに改行を追加するには、<br>タグまたは<pre>タグを使用します。<br>タグはページ内の指定した位置で改行を挿入し、<pre>タグはコードエディター上のテキストをそのままの形式で表示します。<pre>タグ内の改行は、すべて最終的なページに反映されます。 Webページを作成していると、「ここで改行したい」と思うことがあります。しかし、HTMLではEnterキーを押すだけでは改行されません。改行を実現するには、その目的のために用意されたHTMLタグを使用する必要があります。 この記事では、HTMLで改行を追加できる&

  11. HTMLのtitleタグとは？基本から実践的な使い方まで徹底解説

    HTMLの<title>タグは、Webページのタイトルを定義する要素です。このタイトルは、ブラウザのタブやお気に入り（ブックマーク）に登録した際に表示されます。すべてのWebページには<title>タグを含めることが推奨されています。Webページを作成する際には、そのページに適切なタイトルを設定したくなるでしょう。例えば、地元のベーカリーのWebサイトのホームページを作っているとします。ページのタイトルとしてベーカリーの店名を表示したいはずです。そんなときに役立つのが<title>タグです。<title>タグはHTMLドキュメントのタイトルを定義

  12. HTMLのselectタグ徹底解説！ドロップダウンリストの作り方と使いどころ

    HTMLの<select>タグは、ユーザーが1つまたは複数の選択肢を選べるリスト（セレクトボックス）を作成するための要素です。<select>タグの中には、ユーザーが選択できる選択肢を表す<option>タグを1つ以上配置します。 セレクトボックスは多くのWebフォームにおいて重要な役割を担っています。ユーザーの入力を受け付けながら、選択できる項目をあらかじめ指定したものだけに限定できる点が大きな特徴です。 本記事では、HTMLの<select>タグの基本的な使い方から、実際のコード例、利用できる属性までをわかりやすく解説します。 HTML

  13. HTMLのDOCTYPE宣言とは？HTML5の書き方と過去のDOCTYPE一覧を解説

    新しいHTMLドキュメントを作成するとき、最初に行うべきことの一つがDOCTYPE（ドキュメントタイプ）宣言の記述です。DOCTYPE宣言は、ブラウザに対して「これから表示するページはHTMLで書かれている」ということを伝える役割を果たします。HTML5のDOCTYPEを宣言するには、HTMLドキュメントの1行目に <!DOCTYPE html> と記述します。なお、HTML5のDOCTYPE宣言は大文字・小文字を区別せず、閉じタグも不要です。 新しいHTMLドキュメントに含めるべき要素 DOCTYPE宣言に加えて、html、head、body の各タグも記述する必要があります

  14. CSSをHTMLにリンクする方法――マークアップをすっきり整理して読みやすくしよう

    Web制作を学び始めたばかりの頃、多くの人が最初に取り入れるのがインラインスタイルです。style属性を使って、HTML要素に直接CSSを記述します。 <!DOCTYPE html> <html> <head> <title>Inline Style</title> </head> <body> <h1 style=color:blue;text-align:center;>Star Wars</h1> <h4 style=color:red;text-align:cente

  15. HTMLのdiv要素とは？基本的な使い方とスタイリング方法を徹底解説

    HTMLのdiv要素とは？ <div>は、HTMLで複数の要素をひとつのグループにまとめ、CSSを使って一括でスタイルを適用するための汎用コンテナです。div要素自体はデフォルトでは空であり、中にHTML要素を配置して初めて機能します。<div>タグは開始タグと終了タグがペアで構成されています。 <!DOCTYPE html> <html lang=ja> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width,

  16. HTMLで画像リンクを作成する方法【初心者向け】

    HTMLで画像リンクを作成する方法 画像はあらゆるWebページに欠かせない要素であり、別ページへのリンクを作る手段としても非常に有効です。アンカー(<a>)タグのhref属性と<img>タグを組み合わせることで、クリックすると別のページへ移動できる「画像リンク」を簡単に作成できます。 以下の手順に従って、実際に作ってみましょう。 画像リンクの作成手順 div要素を作成する まずは<div>要素を用意します。この中に<img>タグ、アンカータグ、そしてリンクに関する説明文などをまとめて配置していきます。 アンカータグを作成する 次に&l

  17. HTMLでテキストを中央揃えにする方法｜style属性とalign属性の使い方

    HTMLでテキストを中央揃えにする方法 プログラミングを学び始めたとき、最初に覚えることのひとつがテキストブロックの配置（アラインメント）です。この記事では、style属性とalign属性を使って、コンテナ内のテキストを中央揃えにする方法をわかりやすく解説します。 style属性を使った中央揃え HTMLでdiv要素を扱う際は、style属性を使ってインラインスタイルを直接記述できます。CSSプロパティのtext-alignに「center」を指定することで、<div>内のテキストを中央揃えにできます。 <!DOCTYPE html> <html lang

  18. HTMLで背景色を設定する方法|style属性とbackground-colorプロパティの使い方

    CSSは設定項目が非常に多く、経験豊富な開発者でも戸惑うことがあります。そこで本記事では、独立したCSSファイルを作成することなく、HTMLドキュメントの背景色を変更する方法を解説します。 HTML5では、style属性とbackground-colorプロパティを使って背景色を指定できます。この属性は任意の要素に適用可能ですが、ページ全体の背景色を設定する場合は、bodyタグにstyle属性を記述します。コードは以下のようになります。 <!DOCTYPE html><html> <head> </head> <body styl

  19. HTMLのhr要素で水平線を作成し、CSSでスタイリングする方法

    Webページを構築していると、コンテンツを視覚的に区切って、読みやすく整理したい場面が出てきます。この記事では、HTMLの水平線（hr要素）について解説し、マークアップに組み込んでページをより魅力的でユーザーフレンドリーにする方法を学びます。 hr要素の基本 <hr>要素は、他のHTML要素とまったく同じようにCSSでスタイリングできます。記述の慣例としては、自己終了タグ（<hr />)ではなく、閉じタグのない形式（<hr>）で書くのが一般的ですが、どちらの書き方でもブラウザは同じように解釈します。hr要素はブロックレベル要素として表示され、主要なブラウ

  20. HTMLのtext-indentプロパティでテキストをインデントする方法

    HTMLのインラインスタイルプロパティであるtext-indentは、文章を書くときに段落の最初の行を字下げするのと同じように、テキストの各段落にインデント（字下げ）を適用できるプロパティです。 text-indentとは？ text-indentは、段落の先頭行だけを右方向へずらして表示するためのプロパティです。レポートや論文の冒頭のように、読みやすい段落構成を作りたい場合に活用されます。値には長さの単位や割合を指定でき、指定した分だけ最初の行がインデントされます。 ピクセル（px）でインデントを指定するコード例 次のコードでは、絶対長さの単位であるピクセル（px）を使って、各段落に25px

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