🗂

【HTML・CSS】Webページを作成してみよう

2023/09/05に公開

tech

はじめに

復習した内容のアウトプットとしてHTMLとCSSを使って以下のwebページを作成しました。

ヘッダーの作成

以下の画像のようにレイアウトを調整します。

headerのlogoとナビゲーションを記述します。

wals.html

<header>
<div class="header-group">
  <img class="logo" src="img/logo.png" />
  <nav>
    <ul class="nav-lists">
      <li class="nav-items">
        <a href="Portfolio">Portfolio</a>
      </li>
      <li class="nav-items">
        <a href="Feature">Feature</a>
       </li>
      <li class="nav-items">
        <a href="Profile">Profile</a>
      </li>
      <li class="nav-items">
        <a href="Contact">Contact</a>
      </li>
    </ul>
  </nav>
</div>
</header>

次にレイアウトを調整します。

wals.css

header {
  width: 100%;
  height: 70px;
  background-color: #EC715F;
}

.header-group {
  display: flex;
  justify-content: space-between;
}

.logo {
  height: 70px;
}

.nav-lists {
  display: flex;
  line-height: 70px;
  padding: 0 30px;
  list-style: none;
  font-size: 16px;
}

.nav-items {
  padding: 0 30px;
  color: #FAFAFA;
}

ナビゲーションのテキストを垂直の中央に寄せたかったのでline-height: 70px;でnavのボックスの高さを揃えました。
logoとナビゲーションを横並びにしたかったので、display: flex;を使用しました。
またjustify-content: space-between;で各要素を均等間隔で両端に寄せました。

justify-content: space-between;とは？

各アイテムを均等に配置し最初のアイテムは先頭に寄せ、最後のアイテムは末尾に寄せることができます。

メインビジュアルを作成する

以下のようにレイアウトを調整し記述しました。

wals.html

<div class="main-visual">
  <div class="main-visual-content">
    <p class="main-visual-item">Lorem lpsum</p>
    <p class="main-visual-text">simply dummy text of the printing</p>
  </div>
</div>

wals.css

.main-visual {
  width: 100%;
  height: 650px;
  background-image: url(img/mv.png);
  background-size: cover;
  background-position: center;
}

.main-visual-content {
  padding-top: 200px;
  text-align: center;
}

.main-visual-item {
  font-size: 64px;
  color: #FAFAFA;
}

.main-visual-text {
  font-size: 20px;
  color: #FAFAFA;
}

背景画像を画面幅に対して100％で設定するとのことだったので
background-size: cover;で表示領域に対して要素を埋めました。
またbackground-position: center;で表示する画像を中央に設定しました。

「Portfolio」を作成する

今回、表示されている画像は、背景画像として表示させました。

wals.html

<div class="portfolio">
  <div class="portfolio-title">
    <p class="portfolio-item">Portfolio</p>
    <p class="portfolio-text">
      It is a long established fact that a render will be distracted by the readable</br>
      content of a page when looking at its layouts.</br>
      The point of using +orem lpsum is that it has a more-or-less normal distribution of letters
    </p>
  </div>
  <div class="portfolio-contents">
    <div class="portfolio-image1"></div>
    <div class="portfolio-image2"></div>
    <div class="portfolio-image3"></div>
    <div class="portfolio-image4"></div>
    <div class="portfolio-image5"></div>
    <div class="portfolio-image6"></div>
  </div>
</div>

wals.css

.portfolio {
  background-color: #ECEFF1;
  width: 100%;
  text-align: center;
}

.portfolio-title {
  padding-top: 90px;
}

.portfolio-item {
  font-size: 32px;
  color: #000000;
  border-bottom:3px solid #EC715F;
  padding-bottom:8px;
  display:inline;
}

.portfolio-text {
  font-size: 16px;
  color: #000000;
  margin: 38px 0;
}

.portfolio-contents {
  margin-bottom: 90px;
  width: 920px;
  display: flex;
  flex-flow: row wrap;
  margin: 0 auto;
}

.portfolio-image1{
  background-image: url(img/sketch.jpg);
  width: 300px;
  height: 250px;
  margin-right: 10px;
  margin-bottom: 10px;
  background-size: cover;
  background-position: center;
}

.portfolio-image2{
  background-image: url(img/websuku.png);
  width: 300px;
  height: 250px;
  margin-right: 10px;
  margin-bottom: 10px;
  background-size: cover;
  background-position: center;
}

.portfolio-image3{
  background-image: url(img/write.jpg);
  width: 300px;
  height: 250px;
  padding: 5px;
  background-size: cover;
  background-position: center;
}

.portfolio-image4{
  background-image: url(img/webcamp.png);
  width: 300px;
  height: 250px;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}

.portfolio-image5{
  background-image: url(img/talk.jpg);
  width: 300px;
  height: 250px;
  margin-right: 10px;
  background-size: cover;
  background-position: center;
}

.portfolio-image6{
  background-image: url(img/webcamp-mother.png);
  width: 300px;
  height: 250px;
  padding: 5px;
  background-size: cover;
  background-position: center;
}

Portfolioに下線を加える必要があったのでcssで以下のように記述しました。
各要素説明していきたいと思います。

border-bottom:3px solid #EC715F;
padding-bottom:8px;
display:inline;

まずborder-bottom:3px solid #EC715F;では高さ幅3pxの#EC715F色の実線と設定しました。
padding-bottom:8px;で文字と下線の間隔をあけます。
display:inline;ではインライン要素へ変更しレイアウト変更を可能にする機能があります。

それ以降の「Feature」「Profile」「Contact」「フッター」は基本構成がほぼ同じなので省略します。
ページ内リンクを初めて実装したので簡単にまとめておきました！

ページ内リンクについて

ページ内リンクは、「ページ内ジャンプ」「アンカーリンク」とも呼ばれており、ページ内の好きな場所までクリックひとつでスクロールさせることができるものです。
ページ内リンクをうまく設計すれば、読者が欲しい情報に即座に到達できるようになります。
これも一種のユーザビリティーを高める機能の一つです。

ページ内リンクの作り方

ページ内リンクには、３つの設定方法があります。

HTML（nameタグ）を使った設定方法
HTML5（idタグ）を使った設定方法
WordPressを使った設定方法
今回はHTML5で推奨されている2のidタグを使った方法で実装します。

リンクで飛んだ先の設定をします。idを追加したいので、htmlに以下のように記述します。

wals.html

<div id="portfolio" class="portfolio">
:
</div>

<div id="feature" class="feature">
:
</div>

<div id="profile" class="profile">
:
</div>

<div id="contact" class="contact">
:
</div>

headerのナビゲーションから各設定先へのリンクを指定します。
href属性の属性値の前に＃をつけて指定します。

wals.html

<nav>
  <ul class="nav-lists">
    <li class="nav-items">
      <a href="#portfolio">Portfolio</a>
    </li>
    <li class="nav-items">
      <a href="#feature">Feature</a>
      </li>
    <li class="nav-items">
      <a href="#profile">Profile</a>
    </li>
    <li class="nav-items">
      <a href="#contact">Contact</a>
    </li>
  </ul>
</nav>

これでheader内のナビゲーションをクリックすれば指定した箇所へ飛ぶことができます。

参考にさせていただいた記事

まとめ

cssは正直完成形をイメージしながら実装するのが苦手なので、HTMLと比べて悩む時間が多くしまってます。特にflexの部分で悩んでしまうことが多いです。
今は紙に書いて大枠をイメージしながらやっているのですが、後々は紙に書かなくても実装内容がイメージできるようにならないとです...。

はじめに

ヘッダーの作成

メインビジュアルを作成する

「Portfolio」を作成する

ページ内リンクについて

ページ内リンクの作り方

参考にさせていただいた記事

まとめ

Discussion