## HTML

HTML(HyperText Markup Language)はWebページの構造を記述するための言語

### HTMLの書き方

以下のように、開始タグと終了タグで囲むことで要素を記述する

```html
<!DOCTYPE html>
<html>
  <head>
      <title>タイトル</title>
  </head>
  <body>
      <h1>見出し1</h1>
      <p>段落</p>
  </body>
</html>
```

### HTMLの代表的な要素

- h1~h6: 見出し
- p: 段落
- a: リンク
- img: 画像
- ul: 箇条書きリスト
- ol: 番号付きリスト
- li: リストの要素
- table: テーブル
- tr: 行
- th: ヘッダー
- td: セル
- form: フォーム
- input: フォームの入力欄
- button: ボタン
- div: ブロック要素
- span: インライン要素
- br: 改行
- hr: 水平線
- meta: メタ情報
- link: CSSやファビコンの読み込み
- script: JavaScriptの読み込み
- style: CSSの記述
- head: ページの情報
- body: 表示されるコンテンツ
- html: HTMLのルート要素
- title: タイトル
- header: ヘッダー
- footer: フッター

### Metaタグについて

Metaタグはページの情報を記述するためのタグ
SEO対策では特に重要

Metaタグの代表的なものは以下の通り

- charset: 文字コード
- description: ページの説明
- keywords: キーワード
- viewport: ビューポート
- X-UA-Compatible: IEのバージョン
- robots: クローラーの動作
- author: 著者
- generator: 生成ツール
- format-detection: 電話番号のリンク
- theme-color: テーマカラー

#### Open Graph Protocolについて

Open Graph ProtocolはSNSでのシェア時に表示される情報を記述するためのプロトコル

以下のように記述することでSNSでのシェア時に表示される情報を設定できる

```html
<meta property="og:title" content="タイトル">
<meta property="og:description" content="説明">
<meta property="og:image" content="画像">
<meta property="og:url" content="URL">
<meta property="og:type" content="種類">
<meta property="og:site_name" content="サイト名">
<meta property="og:locale" content="言語">
<meta property="og:locale:alternate" content="言語(複数)">
<meta property="og:video" content="動画">
```

## CSS

CSS(Cascading Style Sheets)はWebページのデザインを記述するための言語

### CSSの書き方

pをセレクタ、colorをプロパティ、redを値という

```css
p {
    color: red;
}
```

各プロパティについては以下のMDNのReference`properties`を参照

- <https://developer.mozilla.org/ja/docs/Web/CSS>

### CSSの各場所

- インラインスタイル: HTMLのstyle属性に記述(本記事では記述量削減のため、この方法で記載する)
- ページスタイル: HTMLのheadタグ内のstyleタグに記述

```html
<!DOCTYPE html>
<html>
  <head>
      <style>
          p {
              color: red;
          }
      </style>
  </head>
  <body>
      <p style="color: red;">Hello, World!</p>
  </body>
</html>
```

- 外部ファイル: CSSファイルに記述

index.html

```html
<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <p>Hello, World!</p>
  </body>
</html>
```

style.css(index.htmlと同じディレクトリに配置)

```css
p {
    color: red;
}
```

実務では外部ファイルに記述することが多い

### 代表的なプロパティ

代表的なプロパティは以下の通り

- color: 文字色
- background-color: 背景色
- font-size: フォントサイズ
- font-weight: フォントの太さ
- text-align: テキストの配置
- border: 枠線
- border-radius: 枠線の角の丸み
- width: 幅
- height: 高さ
- margin: 外側の余白
- padding: 内側の余白
- display: 要素の表示方法
- flex: 要素の並び方
- grid: 要素の配置方法
- media query: 画面サイズに応じたCSSの変更
- position: 要素の配置方法
- z-index: 要素の重なり順
- transition: アニメーション
- transform: 要素の変形
- filter: 要素のフィルター
- box-shadow: 要素の影
- text-shadow: テキストの影
- background-image: 背景画像
- background-size: 背景画像のサイズ
- background-position: 背景画像の位置
- background-repeat: 背景画像の繰り返し

### CSS要素の余白について

- margin: 要素の外側の余白
- padding: 要素の内側の余白
- border: マージンとパディングの間にある線

- margin,padding=0

```html
<div style="background-color: red;border: solid 3px black;width:100px;height:100px; margin:0;padding:0;">
    <div style="background-color: blue;border: solid 3px yellow;width:50px;height:50px; margin:0;padding:0;">
    </div>
</div>
```

- margin=10px
外側の余白が10pxになるになっているため、0の時より親要素の中央に寄っている

```html
<div style="background-color: red;border: solid 3px black;width:100px;height:100px; margin:0;padding:0;">
    <div style="background-color: blue;border: solid 3px yellow;width:50px;height:50px; margin:10px;padding:0;">
    </div>
</div>
```

- padding=10px

```html
<div style="background-color: red;border: solid 3px black;width:100px;height:100px; margin:0;padding:0;">
    <div style="background-color: blue;border: solid 3px yellow;width:50px;height:50px; margin:0;padding:10px;">
    </div>
</div>
```

### CSSのレイアウトについて

CSSのレイアウトはdisplayプロパティを利用することで実現できる

変化を見やすくするために以下を設定

```css
.child {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}
```

#### display: block

要素に改行が入る
幅と高さが指定できる
代表的なタグ(div, p, h1, h2, h3, h4, h5, h6)

```html
<div id="example-element" style="display: block; border: solid 3px;">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
</div>
```

#### display: inline

要素に改行が入らない
幅と高さが指定できない
代表的なタグ(span, a, img)

```html
<div id="example-element1" style="display: block; border: solid 3px;">
    <span class="child">Child 1</span>
    <span class="child">Child 2</span>
    <span class="child">Child 3</span>
</div>
```

#### display: inline-block

要素に改行が入らない
幅と高さが指定できる

```html
<div id="example-element1" style="display: inline-block; border: solid 3px;">
    <span class="child">Child 1</span>
    <span class="child">Child 2</span>
    <span class="child">Child 3</span>
</div>
```

#### display: none

ブラウザ上に表示されない

```html
<div id="example-element2" style="display: none; border: solid 3px; border: solid 3px;">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div> 
    <div class="child">Child 3</div>
</div>
```

#### display: flex

並列に要素を配置することができる
要素数が可変の際によく利用する

flexの詳細は以下のMDNのReferenceを参照

- <https://developer.mozilla.org/en-US/docs/Web/CSS/flex>

```html
<div id="example-element3" style="display: flex; border: solid 3px;">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
</div>
```

#### flexを親要素に持つ要素の中央寄せ

要素の中央寄せはjustify-content: centerを指定する

```html
<div id="example-element3" style="display: flex; border: solid 3px;justify-content: center;">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
</div>
```

#### flexを親要素に持つ要素を列方向の並び替え

列方向に並び替える場合はflex-direction: columnを指定する

```html
<div id="example-element3" style="display: flex; border: solid 3px;flex-direction: column;">
    <div class="child">Child 1</div>
    <div class="child">Child 2</div>
    <div class="child">Child 3</div>
</div>
```

#### display: grid

格子(grid)状に要素を配置することができる
要素数が固定の際によく利用する

gridの詳細は以下のMDNのReferenceを参照

- <https://developer.mozilla.org/en-US/docs/Web/CSS/grid>

単位frについては以下の記事を参照

- <https://kumonosublog.com/coding/css/gridlayoutfrauto/>

```html
<div class="wrapper" style="display: grid;
  grid-template-columns: 1fr 1fr 1fr; border: solid 3px;">
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="child">Three</div>
  <div class="child">Four</div>
  <div class="child">Five</div>
</div>
```

#### gridを親要素に持つ要素の中央寄せ

要素の中央寄せはjustify-items: centerを指定する

```html
<div class="wrapper" style="display: grid;
  grid-template-columns: 1fr 1fr 1fr; border: solid 3px; justify-items: center;">
  <div class="child">One</div>
  <div class="child">Two</div>
  <div class="child">Three</div>
  <div class="child">Four</div>
  <div class="child">Five</div>
</div>
```

#### gridを親要素に持つ要素を列方向の並び替え

列方向に並び替える場合は`grid-auto-flow: column;`を指定する

```html
<div class="wrapper" style="display: grid;
  grid-template-columns: 1fr 1fr 1fr; border: solid 3px; justify-items: center; grid-auto-flow: column;">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
</div>
```

### メディアクエリ

画面サイズに応じてCSSを変更することができる

メディアクエリの詳細は以下のMDNのReferenceを参照

- <https://developer.mozilla.org/ja/docs/Web/CSS/MediaQueries/Usingmediaqueries>

以下の例では画面サイズが600px以下の場合に背景色を変更している

- index.html

```html
<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
      <p>Hello, World!</p>
  </body>
</html>
```

- style.css

```css
@media screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}
```

### アニメーション

アニメーションはtransitionプロパティを利用することで実現できる
また、keyframesを利用することでアニメーションの詳細を設定できる

アニメーションの詳細は以下のMDNのReferenceを参照

- <https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions>

以下の例では、div要素を回転させるアニメーションを実装している

- index.html

```html
<!DOCTYPE html>
<html>
  <head>
      <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="child"></div>
  </body>
</html>
```

- style.css

```css
.child {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
```



脱・人海戦術

Author

Ryo Arai

Jobs

AI Engineer

Full Stack Engineer

SNS

カテゴリ

タグ

PlayGround