tags: `HTML` `CSS`

ホームページ制作 - Indexページ編

index.html の作成を行っていきます．

Font Awesome の導入

Font Awesome はウェブサイトやブログでWebアイコンフォントを表示できるようにしてくれるサービスです．

Webアイコンフォント

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

Font Awesomeを使用

CDNを用いて導入します．

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

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

Font Awesome の使い方

使いたいアイコンをクリックします．

Image Not Showing Possible Reasons The image file may be corrupted The server hosting the image is unavailable The image path is incorrect The image format is not supported Learn More →

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

Image Not Showing Possible Reasons The image file may be corrupted The server hosting the image is unavailable The image path is incorrect The image format is not supported Learn More →

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

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

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

Index.html用のCSSを読み込み

以下のlinkタグをindex.htmlに追加します．

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

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

メインコンテンツを作る

<main> タグ内にマークアップしていきます．

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

目標物

ゴールを確認します．

Image Not Showing Possible Reasons

The image file may be corrupted
The server hosting the image is unavailable
The image path is incorrect
The image format is not supported

Learn More →

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

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)を指定します．

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;を消すとこんな感じです！

コミットとプッシュ

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

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

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

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

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

手直し(for iOS)

indexページにアクセスすると，iOSの人は不自然にスクロールできることに気が付くかもしれません．

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

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

body {
  overflow: hidden;
}

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

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

まとめ

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

tags: HTML CSS