実際にホームページを作ってみる　１回目

これからは、実際にサイトを作成しながら学びながら覚えていこうと思います！作ることで、『調べて使えるようになる』ってなれば、OKってことで。

今回は、すでに一度作ったホームページのイメチェンバージョンを作っていこうと思います。

HTML、CSSに慣れたらWordPressを勉強して、オリジナルテーマを使えるようにチャレンジします✊

現在のホームページを確認

現在のホームページを確認してみます。Top画面全体の画像なので、重いです…💦

これを違うイメージのものに作り変えながら、練習していきます。

作成手順のイメージ

一か所一か所を完璧まで進めてからってなると、なかなか全体像がつかめないので、まずは全体的に作ってから微調整を行っていこうと思います。

また、最近は企業サイトもスマホでの閲覧割合が増えてきているので、PCバージョンができたらスマホ対応するためのCSSを追加していこうと思います。（ヘッダーは少し対応を入れています）

ヘッダー部分を作成

今日できた作成した部分がこちら。お問い合わせだけ、目立たせるようにボタンと背景色をつけてみました。

ここだけ先にマウスを持ってきたときに表示を変更する処理を入れちゃいました。

コード

HTML、CSSの教科書や動画を見てもコードについては、正解がないってどの人も言っている。

たしかに、自分もプログラミングを教えてるときには、目的が達成出来てたらとりあえず正解！って言う。

この書き方は、こういう時に困る可能性があるからよくないよってのは、たまにありますが…

まだ、手探りの時って正解を求めてしまう気持ちが出ちゃいますね。

今回作った部分のコード。

    <header class="header_area">
        <div class="container">
            <!-- ロゴ -->
            <div class="header_logo">
                <a href="#">
                    <img src="./images/logo.png" alt="ロゴ画像">
                </a>
            </div>
            <nav class="header_nav_area" id="js-nav">
                <ul class="header_nav_list">
                    <li class="nav-items_item"><a href="">グループホーム</a></li>
                    <li class="nav-items_item"><a href="">就労支援施設</a></li>
                    <li class="nav-items_item"><a href="">開業・運営支援</a></li>
                    <li class="nav-items_item"><a href="">ブログ</a></li>
                    <li class="nav-items_item">
                        <a class="btn_contact" href="">お問い合わせ</a>
                    </li>
                </ul>
            </nav>

            <button class="hamburger" id="js-hamburger">
                <span></span>
                <span></span>
                <span></span>
            </button>
        </div>
    </header>

/*  */
/* ヘッダーエリア */
/*  */
.header_area {
  /* 文字色 */
  color: black;
  /* 背景色 */
  background-color: #fff;
  /* 影を付ける */
}

/* container */
.header_area > .container {
  /* 高さ */
  height: 100px;
  /* flex指定 */
  display: flex;
  /* 上下中央 */
  align-items: center;
  /* 余白 */
  padding: 0 30px;
  /* ポジション */
  position: relative;
}

/* ロゴエリア */
.header_logo {
  /* ブロック */
  display: block;
}

/* ロゴイメージ */
.header_logo img {
  height: 100px;
  vertical-align: bottom;
}

/* ヘッダーのロゴ部分 */
.header__title {
  width: 80px;
}
@media screen and (min-width: 960px) {
  .header__title {
    width: 120px;
  }
}

/* ナビエリア */
.header_nav_area {
  display: flex;
  justify-content: end;
  width: 100%;
  align-items: center;
}
@media screen and (max-width : 1024px) {
  .header_nav_area {
    position: absolute;
    background-color: #f6f6f6;
    display: block;
    height: 100vh;
    display: none;
  }
}

/* リストエリア */
.header_nav_list {
  position: absolute;
  /* flex */
  display: flex;
  /* 上下中央 */
  align-items: center;
}
/* @media screen and (max-width: 961px) {
  .header_nav_list {
    position: absolute;
    display: flex;
    align-items: center;
  }
} */
/* liが連続したら */
.header_nav_list > li + li {
  /* メニューとの余白 */
  margin-left: 40px;
}

/* リスト */
.header_area a {
  /* 文字大きさ */
  font-size: 15px/1em;
  /* 文字の太さ */
  font-weight: 500;
}

/* お問い合わせボタン */
.header_nav_list .btn_contact {
  display: flex;
  /* 上下中央 */
  align-items: center;
  /* 高さ */
  height: 36px;
  /* 文字色 */
  color: white;
  /* 背景色 */
  background-color: #6CC4A1;
  /* 角 */
  border-radius: 4px;
  /* 余白 */
  padding: 0 20px 0 48px;
  /* ポジション基準 */
  position: relative;
}
.btn_contact:hover {
  /* 文字色 */
  color: white;
  /* 背景色 */
  background-color: #3c715d;
  /* 影 */
  box-shadow: 4px 4px 0px 0 #1c352c;
  /* 角 */
  border-radius: 4px;
  /* 余白 */
  padding: 0 20px 0 48px;
  /* ポジション基準 */
  position: relative;
}

/* お問い合わせロゴ */
.header_nav_list .btn_contact:before {
  /* 疑似要素 */
  content: "";
  /* ブロック要素 */
  display: block;
  /* ロゴ */
  background: url(./logo/メール.svg) no-repeat;
  /* 横幅 */
  width: 24px;
  /* 高さ */
  height: 24px;
  /* ポジション */
  position: absolute;
  /* 位置調整 */
  top: 50%;
  left: 16px;
  /* 自分の要素半分を上に戻す */
  transform: translateY(-50%);
}

/* ハンバーガーメニュー */
.hamburger {
  background-color: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  right: 0;
  z-index: 1000;
}

/* PCでは非表示 */
@media screen and (min-width: 960px) {
  /*PC時非表示にする*/
  .hamburger {
    display: none;
  }
}

.hamburger > span {
  /* 黒線にする */
  background-color: black;
  /* 横幅 */
  width: 36px;
  /* 高さ */
  height: 2.5px;
  /* ブロックに変更 */
  display: block;
  /* 下のあいだ調整 */
  margin-bottom: 8px;
  /* アニメーション完了までの時間 */
  transition: transform 1s;
}

.hamburger span:nth-child(3) {
  /* いちばん下なのでゼロに変更 */
  margin-bottom: 0px;
}
/* メニューオープンで黒に変更 */
.menu-open {
  background-color: #000000;
}
/* メニューオープンでspanを黒に変更 */
.menu-open span {
  background-color: white;
}

/* いちばん上のバー */
.menu-open .hamburger span:nth-child(1) {
  /* 開始までの時間 */
  transition-delay: 0.2s;
  /* 下に10px移動　反時計回り315度回る */
  transform: translateY(10px) rotate(-315deg);
}

/* いちばん下のバー */
.menu-open .hamburger span:nth-child(3) {
  transform: translateY(-10px) rotate(315deg);
}

/* 真ん中のバー */
.menu-open .hamburger span:nth-child(2) {
  transform: translateX(-18px) scale(0);
}

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

この記事を書いた人

あつし

「＠縁紡ぐ」にご訪問頂きありがとうございます。
業務改善やＩＴ化、システム開発・プロジェクトチーム運用支援を行っています。
お気軽にご相談ください。

実際にホームページを作ってみる　１回目