###### tags: `HTML` `CSS`
# ホームページ制作 - Indexページ編
`index.html` の作成を行っていきます．

## もくじ
- [Font Awesome の導入](#Font-Awesome-の導入)
- [Index.html用のCSSを読み込み](#Index.html用のCSSを読み込み)
- [メインコンテンツを作る](#メインコンテンツを作る)
- [コミットとプッシュ](#コミットとプッシュ)
- [まとめ](#まとめ)

## Font Awesome の導入
[Font Awesome](https://fontawesome.com/search?c=alert&s=solid) はウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです．

### Webアイコンフォント
ウェブページ上で文字と同じように表示できるアイコン．

### Font Awesomeを使用
CDNを用いて導入します．

以下の`link`タグを`head`要素内に追加してください．

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css">

### Font Awesome の使い方
使いたいアイコンをクリックします．

||
|-|

HTMLの部分が選択されていることを確認します．

||
|-|

表示されているマークアップをコピーします．

そして，表示すると以下のようになります．

<iframe height="300" style="width: 100%;margin-bottom:10px;" scrolling="no" title="FontAwesome" src="https://codepen.io/yosse95ai-the-decoder/embed/ZErZevv?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/ZErZevv">
FontAwesome</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

> 参考：https://saruwakakun.com/html-css/basic/font-awesome

## Index.html用のCSSを読み込み
以下の`link`タグを`index.html`に追加します．

<link rel="stylesheet" href="styles/index.css">

このファイルは，`index.html`固有のスタイルを宣言するファイルです．

## メインコンテンツを作る
`<main>` タグ内にマークアップしていきます．

このページは，ホームページのエントランス的な役割をさせたいので，シンプルな見た目にします．

### 目標物
ゴールを確認します．


- HTML
1. タイトルがある(`yosse95ai`のところ)
2. このページの説明がある(`タイトル直下の文言`)
3. 外部へのリンクがある(`GitHubやTwitter`のアイコン)
- CSS
1. `タイトル`，`説明`，`外部リンク`が縦並びで中央配置
6. 外部リンクは横並びで中央配置

### HTML
以下のようにマークアップしますが，外部リンクは持っているものだけでいいです．

- 上から`Qiita`，`GitHub`，`Twitter`，`Stack Overflow`です．
- `href`の値はそれぞれのアカウントのものに置き換えてください．
- いらないものは消してください．

<main class="wrapper">
  <h1 class="title">yosse95ai</h1>
  <p class="desc">yosse95aiのホームページへようこそ！</p>
  <div class="social">
    <a href="https://qiita.com/RoaaaA" target="_blank" class="qiita">
      <img src="img/qiita.png" width="20px">
    </a>
    <a href="https://github.com/yosse95ai" target="_blank" class="git">
      <i class="fa-brands fa-github fa-lg"></i>
    </a>
    <a href="https://twitter.com/yosse95ai" target="_blank" class="twt">
      <i class="fa-brands fa-twitter fa-lg"></i>
    </a>
    <a href="https://ja.stackoverflow.com/users/47477/hiiro-shimura" target="_blank">
      <span class="so"><i class="fa-brands fa-stack-overflow"></i></span>
    </a>
  </div>
</main>

Qiitaのアイコンは Font Awesome にないので，Qiita公式からダウンロードする必要があります．
Qiitaをこのリストに入れたい方はダウンロードしてください．

> ダウンロードリンク：https://help.qiita.com/images/qiita-png.zip
> 公式：https://help.qiita.com/ja/articles/others-brand-guideline

ダウンロードが終わったら，zipファイルを解凍して，中にある`\qiita-png\qiita-png\favicon.png`を`imgフォルダ`内に`qiita.png`という名前でコピーしてください．

### CSS
CSSも先ほどと同様にいらないものは読み飛ばしてください．
`index.css`に記述していきます．

#### main全体の宣言
もともとあるmainの定義に`.wrapper`の定義として追加の定義をします．

.wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: var(--text);
  background-color: black;
}

フレックスボックスの定義を追加し，コンテンツの向きは垂直方向(`flex-direction: column;`)にしています．
すべてのコンテンツは，垂直方向・水平方向どちらも中心(`center`)へ配置します．

テキストの色は，カスタムプロパティのテキストカラー(`#ddd`)を指定します．

:::success
`background-color: black;`は後々消しますが，CSSの適用範囲が分かりやすいようにするために，色を付けます．
:::

#### タイトルと説明の宣言
フォントサイズ(`font-size`)とフォントの太さ(`font-weight`)を宣言します．

.title {
  font-size: 32px;
  font-weight: 600;
}
.desc {
  padding-top: 10px;
  font-weight: 200;
}

ここのサイズ感などは好みに変更してください．

#### 外部リンクラッパーの宣言
フレックスボックスの定義をして横並びにし，中央揃え(`center`)にしています．

.social {
  padding-top: 10px;
  display: flex;
  align-items: center;
}

.social a:not(:last-child) {
  margin-right: 10px;
}

`.social a:not(:last-child)`に関して，`:last-child`は`.social`内の`a`要素のうち「最後のもの」を指します．
それを`:not()`関数で否定しているので，

「a要素のうち，最後の要素以外にスタイリングする」

という意味になります．

#### 外部リンク個々の宣言
いらないものは消してください．

- `twt`: Twitter
- `git`: GitHub
- `so` : Stack Overflow

.twt {
  color: #1da1f2;
}
.git {
  color: var(--text);
}
.so {
  width: 20px;
  height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(1, 42%, 49%);
  color: var(--text);
}

### 完成状態
`background-color: black;`を消すとこんな感じです！

<iframe height="400" style="width: 100%;" scrolling="no" title="index" src="https://codepen.io/yosse95ai-the-decoder/embed/vYdMJmw?default-tab=result" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/yosse95ai-the-decoder/pen/vYdMJmw">
index</a> by yosse95ai (<a href="https://codepen.io/yosse95ai-the-decoder">@yosse95ai-the-decoder</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## コミットとプッシュ
GitHubにコミット・プッシュして変更を反映させましょう！

# 変更をステージング
git add .

# 変更をコミット
git commit -m "Indexページ完成"

# 変更をプッシュ
git push origin main

完了したら，アクセスしてみましょう！

### 手直し(for iOS)
indexページにアクセスすると，iOSの人は不自然にスクロールできることに気が付くかもしれません．
<div style="text-align:center;">

<img src="https://i.imgur.com/t8f7oPB.jpg" width="200px" >
</div>

アドレスバーの高さ分のスクロールができてしまいます．
これはiOS特有の現象なので，以下のように対処します．

`index.css`に以下を追記します．

body {
  overflow: hidden;
}

とりあえずこれでOKです．
どんなに頑張って`height`を設定しても全くうまくいきません．
(公式は早くAndroidみたいに検索バーを考慮してくれさい…)

多分これで最低限うまくいくと思います．
(iPhone12では検証済み)

## まとめ
ここまでで，Indexページが完成しました！
次は，Aboutページを作成していきます．

- [テンプレート編](https://hackmd.io/@kit-web-team/homepage-temp)
- [Aboutページ編](https://hackmd.io/@kit-web-team/homepage-about)