初めてのHTMLとCSS　Part.2

# 初めてのHTMLとCSS　Part.2

おはこんばんにちは
ぽぽのたんです。

Part.1に引き続きHTMLとCSSについてアウトプットしていきます。
今回はHTMLばかり書いていきます。
CSSは次回に書こうと考えていますので、こうご期待。

# ブロックレベル要素とインライン要素
HTMLはしばしば積み木と表現されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3864659/c1b2e44f-8bae-6076-c066-8ac50d5409af.png)
HTMLでは画像のように左上を重力の中心として各要素が配置されていきます。
要素を追加すると、縦並びに要素が追加されていく、これが**ブロックレベル要素**になります。
```html
  <a>ぽぽのたんぽぽのたんぽぽのたんぽぽのたんぽぽのたん</a>
  <a>これがHTMLこれがHTMLこれがHTMLこれがHTMLこれがHTML</a>
```
このようにプログラムを書いた場合、下の画像のように要素が連なって配置されます。
これを**インライン要素**と呼びます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3864659/b168a9ed-ba48-4fb6-1b6c-cd8ffa6956db.png)


<table>
  <caption>それぞれの違い</caption>
  <thead>
    <tr>
      <th>項目</th> <th>インライン要素</th> <th>ブロックレベル要素</th>
    </tr>
  </thead>
  <tr>
    <td>表示形式</td> <td>横方向に並べる</td> <td>縦方向に並べる</td>
  </tr>
  <tr>
    <td>新しい行</td> <td>同じ行に続けて表示される</td> <td>親コンテナの幅全体を占有する</td>
  </tr>
  <tr>
    <td>マージン/パディング</td> <td>水平方向に効く場合が多い</td> <td>水平垂直方向に効く</td>
  </tr>
  <tr>
    <td>代表的な要素</td> <td>< a >, < span >, < img ></td> <td>< div >, < p >, < h1 >〜< h6 ></td>
  </tr>
</table>

# 親子構造を含んだHTML
```html
<body>
    <header>
      旅行
    </header>
    <div class="contents">
      <div class="top-content">
        沖縄
      </div>
      <div class="bottom-content">
        京都
      </div>
    </div>
    <footer>
    </footer>
  </body>
```
## header要素   < headr >…< /headr >
Webページにおける最上部に表示されるヘッダー専用の要素です。
head要素とは異なるので注意してください。

## div要素   < div >…< /div >
様々な用途で使用でき、レイアウト作成に使用されます。
div要素の中にほかの要素を入れることもでき、CSSでの編集が可能です。
上記のようにdivのなかにdivを大量に入れることが可能です。
ちなみにDivisionの略称で、「特定の意味がない」という意味になります。

## footer要素   < footer >…< /footer >
Webページにおける最下部に表示されるフッター専用の要素です。

# < body >に入れる要素たち

```html
 <body>
    <h1>
      五十音
    </h1>
    <p>
      あいうえお
    </p>
    <p>
      かきく<br>けこ
    </p>
    <p>
      さしすせそ<b>この部分は太字になります。</b>
    </p>
  　<!-- <p>
      たちつてと
    </p> -->
     <a href="https://www.google.com/">クリックすると、Googleへ移動します。</a>
  </body>
```

## h1〜h6   < h1 >…< /h1 >
見出しを作るための要素です。
この要素で囲われると、そのテキストは強調されます。
＜ｈ1＞から順に文字の太さと大きさが小さくなっていきます。
ｈはHeadingの略

## p要素   < p >…< /p >
文字の段落を示す要素です。
この要素で囲む一塊の段落になり、Webページ上のテキストのほとんどがこの要素で構成されています。
ｐはParagraphの略

## br要素   < br >
テキストの改行を行うための要素です。
この要素は終了タグが不要になります。
brはLine Breakの略

## b要素   < b >…< /b >
文字を太くする要素です。
bはBoldの略

## a要素    < a >…< /a >
< a >…< /a >で囲ったテキストをリンクにすることができ、Webページ上でクリックするとそのWebサイトに移動します。
aタグのhref属性に、移動させたいページのURLを指定します。
aとはAnchorの略

## href属性   < a href="…" >…< /a >
href属性でリンクの移動先を指定できます。
また、< a >…< /a >で囲ったテキストがリンクとして機能します。

## コメントアウト
```html
<!-- <p>
  たちつてと
</p> -->
```
ctl + /と入力するとコメントアウト状態になり、Webページ上では表示されなくなります。


## span要素   < span class=”…" >…< /span >
```html
<h1>
  これは<span class="blue">たいやき</span>です
</h1>
```
HTMLで< span >…< /span >と囲った範囲を、指定したclass名（例文でいう”blue”）をCSSで装飾が可能です。
```css
.blue {
  color: blue;
}
```
上記のようにCSSで「.class名」を指定して、装飾が可能です。

## リストを作れる要素（ul要素、li要素）
```html
<div class="main_list">
  今日やること
  <ul class="lists">
    <li class="list">朝ご飯を食べる</li>
    <li class="list">部屋の掃除をする</li>
    <li class="list">勉強をする</li>
    <li class="list">昼ご飯を食べる</li>
  </ul>
</div>
```
### ul要素 < ul class=”…" >…< /ul >
順序に意味を持たないリストの作成できます。
デフォルトでは黒丸で表示され、CSSによる編集が可能になります。
主に項目の表示を目的にしています。

### li要素 < li class="…" >…< /li >
リストの項目を表す要素です。
必ず `< ul >`、`< ol >`、または `< menu >` の中で使用される必要があります。

### ol要素 < ol class="…" >…< /ol >
項目の順序月リストを作成できます。

### menu要素 < menu class="…" >…< /menu >
順序に意味を持たないリストの作成できます。
操作を行うための対話型の項目のために使用されます。