今回はHTMLについて記事にしたいと思います。
1. HTMLとは？
HTMLは、ウェブページの骨組みを作るためのマークアップ言語です。HTMLは「タグ」と呼ばれる要素を使って、見出し、段落、リンク、画像などを定義します。タグはブラウザにページの内容をどのように表示するかを指示します。
HTMLの基本構造：
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML入門</title>
</head>
<body>
<h1>はじめてのHTML</h1>
<p>ここは段落のテキストです。</p>
</body>
</html>
このコードがHTMLの基本的な構造です。次に、タグの役割について詳しく説明していきます。
2. HTMLの基本タグ
2.1 見出しタグ (
～
)
見出しは、ページのタイトルやセクションのタイトルに使われます。
が最も重要な見出し、
が最も小さな見出しです。
<h1>大見出し（H1）</h1>
<h2>中見出し（H2）</h2>
<h3>小見出し（H3）</h3>
見出しは、ページのタイトルやセクションのタイトルに使われます。
が最も重要な見出し、
が最も小さな見出しです。
<h1>大見出し（H1）</h1>
<h2>中見出し（H2）</h2>
<h3>小見出し（H3）</h3>
<h1>大見出し（H1）</h1>
<h2>中見出し（H2）</h2>
<h3>小見出し（H3）</h3>
2.2 段落タグ (
)
段落を定義するタグです。テキストを段落として表示したい場合に使います。
<p>これは段落として表示されるテキストです。</p>
2.3 リンクタグ ()
リンクを作成するためのタグです。href属性にURLを指定してリンク先を定義します。
<a href="https://example.com">こちらをクリック</a>
2.4 画像タグ ()
画像をページに表示するためのタグです。src属性に画像のURLを指定し、alt属性で画像の説明文を指定します。
<img src="image.jpg" alt="サンプル画像">
2.5 リストタグ（
- 、
- ）
リストは箇条書きとして表示されます。順序なしリスト（箇条書き）は- タグ、順序ありリスト（番号付き）は
- タグで指定します。
<ul> <li>アイテム1</li> <li>アイテム2</li> <li>アイテム3</li> </ul> <ol> <li>ステップ1</li> <li>ステップ2</li> <li>ステップ3</li> </ol>3. HTMLの属性
HTMLタグには属性があり、要素に追加情報を提供します。たとえば、href属性やsrc属性などは、リンク先や画像の場所を指定するために使われます。
属性の例：
リンクタグ（）の href 属性：<a href="https://example.com">リンク先</a>画像タグ（
）の src 属性と alt 属性：
<img src="image.jpg" alt="画像の説明">IDとクラス：id 属性や class 属性を使って、要素を特定したりグループ化できます。
<div id="main-content">メインコンテンツ</div> <div class="sidebar">サイドバー</div>4. フォームの作成
フォームは、ユーザーから情報を入力してもらうために使われます。HTMLでは、
タグを使ってフォームを作成します。フォームには、テキストボックス、チェックボックス、ラジオボタン、送信ボタンなどが含まれます。フォームの例：
<form action="/submit" method="POST"> <label for="name">名前:</label> <input type="text" id="name" name="name"><br><br> <label for="email">メールアドレス:</label> <input type="email" id="email" name="email"><br><br> <input type="submit" value="送信"> </form> <input type="text">: テキストボックス <input type="email">: メールアドレス用の入力欄 <input type="submit">: 送信ボタン5. HTML5の新しいタグ
HTML5では、ページ構造をより意味的に表現するための新しいタグが追加されました。これらのタグを使うことで、ページのセクションやナビゲーション、フッターなどをわかりやすく記述できます。
HTML5のセマンティックタグ：
: ヘッダー部分を定義します。 ```htmlウェブサイトのタイトル
ナビゲーションバー ``` : ナビゲーションリンクのグループを定義します。: 記事など独立したコンテンツを定義します。<nav> <ul> <li><a href="/">ホーム</a></li> <li><a href="/about">会社概要</a></li> </ul> </nav>: ページやセクションのフッター部分を定義します。 ```html<article> <h2>記事のタイトル</h2> <p>これは記事の本文です。</p> </article>© 2024 ウェブサイト名
``` # 6. HTMLのコメント コードにコメントを追加することで、他の開発者や自分自身が後から見たときに、コードの意図を理解しやすくなります。コメントはブラウザに表示されず、コードを説明するために使われます。コメントの例：
<!-- これはコメントです。ブラウザには表示されません。 --> <p>ここは表示されるテキストです。</p>7. 応用テクニック
7.1 リンクのターゲットを指定する
リンクをクリックしたときに、新しいタブで開くようにしたい場合、target="_blank"を指定します。<a href="https://example.com" target="_blank">新しいタブで開くリンク</a>7.2 画像のサイズを指定する
画像の表示サイズを指定したい場合、widthとheight属性を使います。<img src="image.jpg" alt="サンプル画像" width="200" height="150">8. HTMLとCSSの連携
HTMLだけではページの構造を定義することしかできません。ページをスタイリッシュに見せるためには、**CSS（Cascading Style Sheets）**を使います。CSSをHTMLに適用することで、文字の色や大きさ、背景色、レイアウトを変更できます。
CSSをHTMLに適用する例：
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSSの例</title> <style> body { background-color: lightblue; } h1 { color: navy; font-size: 36px; } p { font-size: 18px; } </style> </head> <body> <h1>CSSでスタイルを追加</h1> <p>このテキストはスタイルが適用されています。</p> </body> </html>まとめ
HTMLは、ウェブページの骨組みを作るための最も基本的な技術です。見出しや段落、リンク、画像、リスト、フォームなど、HTMLを使ってページの構造を定義し、意味のあるドキュメントを作成します。
基本タグ: 見出し、段落、リンク、画像などの要素を定義
属性: タグに追加情報を提供し、リンク先や画像パスなどを指定
フォーム: ユーザーから情報を入力してもらうための構造を定義
HTML5のセマンティックタグ: より意味的なページ構造を作成今回はHTMLについて記事にしてみました。
- タグで作成します。リスト項目は
- タグで指定します。
- 、