基本構造
HTMLの基本構造に使うタグです。
HTMLの基本構造は、<!DOCTYPE html>、<html></html>、<header></header>、<body></body>で構成されます。
ドキュメントタイプの宣言<!DOCTYPE html>
<!DOCTYPE html>は、文書がHTML5で作成されたファイルであることを宣言するために使用します。
HTML文書<html></html>
<html></html>は、HTML文書であることを伝えるタグです。
ヘッダーもボディもこの<html></html>の中に入れます。
ヘッダー<header></header>
<header></header>の中は、サイト自体に関する情報や、メタ情報などを記述します。
メタ情報とは、サイトのタイトル、サイトの概要などを指します。
ボディ<body></body>
<body></body>の中は、ブラウザに表示する情報を記述します。
例）
<!DOCTYPE html>
<html>
<header>
ここにheader要素が入ります。
</header>
<body>
ここにbody要素が入ります。
</body>
</html>以上がHTMLの基本構造です。
この基本的な構造を覚えておきましょう。
見出しと段落<h1></h1><p></p>
見出しと段落は、<body></body>内に記述します。
見出しは、<h1></h1> 〜 <h6></h6>で表記します。
段落は<p></p>で表記します。
サイトの文章は、見出しと段落で表現します。
見出しは、<h1></h1>から順に<h6></h6>まであります。
見出しは、コンピューターに文章の構造を伝えるために重要な情報です。
新聞や雑誌の見出しをイメージするとわかりやすいでしょう。
段落<p></p>は、新聞で言えば記事の中身の内容です。
<p></p>の中に文章を書きます。
例）
<!DOCTYPE html>
<html>
<header>
ここにheader要素が入ります。
</header>
<body>
<h1>これが見出しになります。</h1>
<p>これが段落になります。</p>
<p>見出しに関する文章をこのようにどんどんと書いていきます。</p>
</body>
</html>このように見出しと段落を駆使して作りたいサイトを構築していきます。
リンク<a></a>
<a></a>タグは、サイトにリンクを貼りたい場合に使うタグです。
タグの前部分<a>の中にhref=”リンク先のURL”と書いて、リンクのURLを指定します。
リンク先を文章にしたい場合は<a></a>の間に挟みます。
例）当サイト（かとのぼのウェブサービス開発講座）のタイトルでURLのリンクを貼る場合
<!DOCTYPE html>
<html>
<header>
ここにheader要素が入ります。
</header>
<body>
<h1>これが見出しになります。</h1>
<p>これが段落になります。</p>
<p>見出しに関する文章をこのようにどんどんと書いていきます。</p>
<a href="https://katonobo.com/">かとのぼのウェブサービス開発講座</a>
</body>
</html>画像タグ<img>
<img>タグは画像をサイトに表示させたい時に使用します。
使い方は、<img>タグの中にsrc=”表示させたい画像のURL”と書きます。
例）画像image.pngを表示させたい。
<!DOCTYPE html>
<html>
<header>
ここにheader要素が入ります。
</header>
<body>
<h1>これが見出しになります。</h1>
<p>これが段落になります。</p>
<p>見出しに関する文章をこのようにどんどんと書いていきます。</p>
<a href="https://katonobo.com/">かとのぼのウェブサービス開発講座</a>
<img src="image.png">
</body>
</html>入力フォーム
テキストなどを入力させるタグを紹介します。
ここでは基本的なタグだけ紹介しますが、タグにオプションをつけることで様々な機能を持たせることができます。
フォーム<form></form>
フォーム<form></form>は入力・送信フォームを作成する際に使用します。このフォームの中にインプットタグなどを入れていきます。
インプット<input>
インプットタグ<input>はテキスト入力や実行ボタン等、 フォームを構成するパーツです。
type=”text”を書くと一行の入力欄になります。
ボタン<button></button>
ボタンタグ<button></button>は送信ボタン、取り消しボタンなどを作る時に使います。
例）名前の入力欄と送信するボタンをつける。
<!DOCTYPE html>
<html>
<header>
ここにheader要素が入ります。
</header>
<body>
<h1>これが見出しになります。</h1>
<p>これが段落になります。</p>
<p>見出しに関する文章をこのようにどんどんと書いていきます。</p>
<a href="https://katonobo.com/">かとのぼのウェブサービス開発講座</a>
<img src="image.png">
<input type="text">
<button>送信</button>
</body>
</html>リスト
リストタグはリストを記述する時に使用します。
<ol></ol>、<ul></ul>
<ol></ol>か<ul></ul>のどちらかでリストを囲います
- <ol></ol>が、順序のないリスト
- <ul></ul>が、順序のあるリスト
になります。
個別のリストは<li></li>
実際の個別のリストは<li></li>で記述をします。
例）好きな食べ物のリストを書く
<!DOCTYPE html>
<html>
<header>
ここにheader要素が入ります。
</header>
<body>
<h1>これが見出しになります。</h1>
<p>これが段落になります。</p>
<p>見出しに関する文章をこのようにどんどんと書いていきます。</p>
<a href="https://katonobo.com/">かとのぼのウェブサービス開発講座</a>
<img src="image.png">
<input type="text">
<button>送信</button>
<h2>好きな食べ物リスト</h2>
<p>私の好きな食べ物リストを紹介します。</p>
<ul>
<li>バナナケーキ</i>
<li>カレーうどん</li>
<li>ハンバーガー</li>
</ul>
</body>
</html>範囲の指定<div></div> <span></span>
範囲を指定する場合は、<div></div>や<span></span>を使用します。
<div></div>も、<span></span>も、CSSでレイアウトを整えるためによく使います。
divタグはブロックを一つにまとめるために使い、spanタグは文書をまとめるために使います。
例）食べ物リストをdivタグでまとめておく
<!DOCTYPE html>
<html>
<header>
ここにheader要素が入ります。
</header>
<body>
<h1>これが見出しになります。</h1>
<p>これが段落になります。</p>
<p>見出しに関する文章をこのようにどんどんと書いていきます。</p>
<a href="https://katonobo.com/">かとのぼのウェブサービス開発講座</a>
<img src="image.png">
<input type="text">
<button>送信</button>
<h2>好きな食べ物リスト</h2>
<p>私の好きな食べ物リストを紹介します。</p>
<div>
<ul>
<li>バナナケーキ</i>
<li>カレーうどん</li>
<li>ハンバーガー</li>
</ul>
</div>
</body>
</html>コメント<!– –>
コードの中にコメントを書くために使用します。
画面に表示はさせたくないけど、書いておきたいことを残す時に使います。
<!– –> の、「<!–」と「–>」の間にコメントを書きます。
例）
<!DOCTYPE html>
<html>
<header>
ここにheader要素が入ります。
</header>
<body>
<h1>これが見出しになります。</h1>
<p>これが段落になります。</p>
<p>見出しに関する文章をこのようにどんどんと書いていきます。</p>
<a href="https://katonobo.com/">かとのぼのウェブサービス開発講座</a>
<img src="image.png">
<input type="text">
<button>送信</button>
<h2>好きな食べ物リスト</h2>
<p>私の好きな食べ物リストを紹介します。</p>
<div>
<ul>
<li>バナナケーキ</i>
<li>カレーうどん</li>
<li>ハンバーガー</li>
</ul>
</div>
<--! このようにコメントタグの間に文章を書けば反映されません。 -->
<--! もちろんこの文章も反映されません。 -->
</body>
</html>
コメント