よく使うタグ - Computer Literacy

HTMLでWebページを作成する際に頻繁に使うタグを紹介します。

見出し¶

HTMLでは、見出しを作成するためにh1からh6までの要素を使用します。hは"heading"の略で、数字が小さいほど見出しのレベルが高くなります。

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

改行¶

<br>要素はテキストの途中で改行したいときに使用します。

<p>This is a line.<br>This is another line.</p>

文字装飾¶

タグ	説明	見た目
`<b>`	太字	太字
`<strong>`	強調	太字
`<i>`	斜体	斜体
`<em>`	強調	斜体

<p>This is <b>bold</b> text.</p>
<p>This is <strong>strong</strong> text.</p>
<p>This is <i>italic</i> text.</p>
<p>This is <em>emphasized</em> text.</p>

リスト¶

番号付きリスト¶

<ol>要素は、番号付きリストを作成するために使用されます。各項目は<li>要素で表されます。

<ol>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ol>

箇条書きリスト¶

<ul>要素は、箇条書きリストを作成するために使用されます。各項目は<li>要素で表されます。

<ul>
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

引用¶

blockquote要素¶

<blockquote>要素は、引用を示すために使用されます。

法政大学の目的は、以下のとおりである。

<blockquote cite="https://www.hosei.ac.jp/hosei/daigakugaiyo/rinen/rinen/">
    <ol>
        <li>「自由と進歩」の精神と公正な判断力をもって、主体的、自立的かつ創造的に、新しい時代を構築する市民を育てる。</li>
        <li>学問の自由に基づき、真理の探究と「進取の気象」によって、学術の発展に寄与する。</li>
        <li>多様化する地球規模の課題を解決し、「持続可能な地球社会の構築」に貢献する。</li>
    </ol>
</blockquote>

q要素¶

<q>要素は、短い引用を示すために使用されます。通常、引用符で囲まれます。

<p><q>Anyone who has never made a mistake has never tried anything new.</q> - Albert Einstein</p>

address要素¶

<address>要素は、連絡先情報を示すために使用されます。

<address>
  3-7-2 Kajino-cho<br>
  Koganei-shi, Tokyo 184-8584<br>
  Japan
</address>

Emoji¶

HTMLでは、Emojiを直接使用することができます。

<p>Here is a grinning face: 😀</p>
<p>Here is a grinning face: &#128512;</p>

以下ではいくつかの代表的なEmojiとそのコードを示します。

Emoji	コード
😀	`😀`
😂	`😂`
❤️	`❤`
🎉	`🎉`

div要素¶

<div>要素は、他のHTML要素をグループ化するために使用されます。style属性を使用して、背景色や文字色などを指定することができます。

<div style="background-color:yellow;">
    <h2>Paris</h2>
    <p>Paris is a city in France.</p>
</div>

<div style=" background-color:rebeccapurple; color:white;">
    <h2>New York</h2>
    <p>New York is a city in the United States.</p>
</div>

<div style="background-color:lightblue; color:black;">
    <h2>Tokyo</h2>
    <p>Tokyo is a city in Japan.</p>
</div>

span要素¶

<span>要素は、テキストの一部をスタイル付けするために使用されます。style属性を使用して、文字色や背景色などを指定することができます。

<p>This is a <span style="color: red;">red</span> word.</p>
<p>This is a <span style="background-color: yellow;">highlighted</span> word.</p>
<p>This is a <span style="font-weight: bold;">bold</span> word.</p>
<p>This is a <span style="font-style: italic;">italic</span> word.</p>