見出し画像

コーディング練習 中級編：セミナーサイト No.2

Toyo

今回はパソコンサイトのコーディングです。
「ヘッダー」「メインビジュアル」「ABOUT」「フッター」部分をコーディングしました。
コードはBEM記法にしました。
現在、Sassについて勉強中で、上級編が終えたら、まとめてCSSはSassのネストにしようと思っています。
教材は「無料コーディング練習所」にある「中級編：セミナーサイト」を使いました。
教材の完成版（コーディングしたもの）はこちらです。


なお、コーディング練習を始める前に、コーディング学習オンラインサービスの「ドットインストール」と「Progate」でホームページのコーディングに必要なことを学びました。

記事の内容は主に練習結果で、作成方法の説明ではありません。

完成したコードは記事の最後に載せています。

ヘッダーの「ABOUT」をクリックするとサイトに移動しますが、「SPEAKER」「SESSION」部分については、次回コーディングするので、クリックしても何も起こりません。
また、「REGISTOR」分部も次回になるので、「お申し込み」ボタンをクリックしても何も起こりません

完成したものは画像では上手く伝えることができないので動画にしました。
動画には音声はありません、無音です。
ご覧いただけましたら幸いです。


テキストエディタは「Cursor（カーソル）」を使っています。

CursorにはコーディングをサポートしてくれるAI機能（ChatGPT）が付いています。
無料版を利用しているのでAI機能の使用回数に制限がありますが、無料で利用できる生成AI（ChatGPT、Copilot、Gemini）を使えば無料版でも十分だと思います。

OGP(Open Graph Protocol)について
OGPはWebページがXやFacebookなどのSNSでシェアされる際に、ページのタイトル、URL、概要、画像などの情報を伝えるために設定されるHTML要素です。
OGPを適切に設定することで、SNSなどでWebページのタイトルや画像、URL、概要などの情報を表示させることができます。これにより、ユーザーに訴求できる情報量が増え、クリックを促しやすくなります。
設定方法（headタグの中に以下の記述）

<meta property="og:title" content="タイトル">
<meta property="og:type" content="website　または　blog　または　article">
<meta property="og:url" content="サイトのurl" />
<meta property="og:description" content="ページの簡単な説明">
<meta property="og:site_name" content="サイトのタイトル">
<meta property="og:image" content="サムネイル画像のURL>

今回の設定

<meta property="og:title" content="WDC" />   
<meta property="og:type" content="website" />
<meta property="og:url" content="https://webdesigner-go.com/wdc/" />
<meta property="og:description" content="Web Design Conference（WDC）は、最新のWebデザインのトレンドやワーキングスタイルを紹介するイベントを開催。お気軽にご参加ください。" />
<meta property="og:image" content="https://webdesigner-go.com/wdc/img/ogp.png" />


教材として使っている「無料コーディング練習所」のサイトはこちらです。


関連する記事


作成したコードはこちらです。
HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta property="og:type" content="website" />
    <meta property="og:title" content="WDC" />
    <meta property="og:url" content="https://webdesigner-go.com/wdc/" />
    <meta property="og:description" content="Web Design Conference（WDC）は、最新のWebデザインのトレンドやワーキングスタイルを紹介するイベントを開催。お気軽にご参加ください。" />
    <meta property="og:image" content="https://webdesigner-go.com/wdc/img/ogp.png" />
    <meta name="description" content="Web Design Conference（WDC）は、最新のWebデザインのトレンドやワーキングスタイルを紹介するイベントを開催。お気軽にご参加ください。" />
    <title>WDC</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Noto+Sans+JP:wght@500;700&display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons+Round" rel="stylesheet" />
    <link href="css/destyle.css" rel="stylesheet" />
    <link href="style.css" rel="stylesheet" />
    <link rel="icon" type="image/png" href="icon-192x192.png" />
    <link rel="apple-touch-icon" type="image/png" href="apple-touch-icon-180x180.png" />
    <link rel="icon" href="favicon.ico" />
  </head>

  <body class="body">

    <header class="header">
      <div class="header-logo">
        <a href="#">WDC</a>
      </div>
      <nav class="header-nav">
        <ul class="header-nav__list">
          <li class="header-nav__item">
            <a class="header-nav__link header-nav__link--active" href="#about">about</a>
          </li>
          <li class="header-nav__item">
            <a class="header-nav__link" href="#speaker">speaker</a>
          </li>
          <li class="header-nav__item">
            <a class="header-nav__link" href="#session">session</a>
          </li>
        </ul>
      </nav>
    </header>

    <div class="mv">
      <div class="mv-inner">
        <div class="mv-titleArea">
          <div class="mv-titleArea__subtitle">
            Web Design <br class="sp" />Conference vol.24
          </div>
          <h2 class="mv-titleArea__title">WORK<br />REVOLUTION</h2>
          <div class="mv-titleArea__date">2030.05.30</div>
          <div class="mv-titleArea-btn">
            <a href="#registor" class="mv-titleArea-btn__item">お申し込み</a>
          </div>
        </div>
        <div class="mv-speaker">ショーン・デイビット・ジュニア<span class="mv-speaker__name--small">氏</span><br />
          <span class="mv-speaker__name--label">Webデザイナー</span>
        </div>
      </div>
    </div>

      <section id="about" class="about">
        <div class="about-container">
          <div class="about-heading">
            <h2 class="about-heading__title">about<span class="about-heading__subtitle">イベントについて</span>
            </h2>
          </div>
          <div class="about-body">
            <figure class="about-imgArea">
              <img class="about-imgArea__img" src="img/about.jpg" alt="深夜作業の様子" />
            </figure>
            <div class="about-desc">
              <div class="about-desc__subtitle">テーマ</div>
              <h3 class="about-desc__title">定時で帰る</h3>
              <div class="about-desc__text">
                <p>
                  残業は心と体に良くないです。世界最速で定時に帰る男、ショーン・デイビット・ジュニア氏が定時で帰るためのスペシャルな技を紹介！
                  さぁ、Let's go home now!
                </p>
              </div>

                <table class="about-table">
                  <tr class="about-table__row">
                    <th class="about-table__head">日時</th>
                    <td class="about-table__data">2030年5月30日（土） 13:00-翌朝13:00</td>
                  </tr>
                  <tr class="about-table__row">
                    <th class="about-table__head">会場</th>
                    <td class="about-table__data">オンライン</td>
                  </tr>
                  <tr class="about-table__row">
                    <th class="about-table__head">定員</th>
                    <td class="about-table__data">3名</td>
                  </tr>
                  <tr class="about-table__row">
                    <th class="about-table__head">参加費</th>
                    <td class="about-table__data">無料</td>
                  </tr>
                </table>

              <div class="about-btn">
                <a href="#registor" class="about-btn__item about-body-btn__item--sm">お申し込み</a>
              </div>
            </div>
          </div>
        </div>
      </section>

    <footer class="footer">
      <div class="footer-copyright">&copy;2030 Web Design Conference</div>
    </footer>

  </body>
</html>

CSS

@charset "UTF-8";

:root {
  --bg-color: #141414;
  --bg-gradient: linear-gradient(
    135deg,
    #0e002e 0%,
    #1e092b 23%,
    #320c65 49%,
    #a01b7c 80%,
    #c21780 100%
  );
  --main-color: #d136d1;
  --text-color: #fff;
}

/*--------------------------------
全体
---------------------------------*/
.body {
  font-family: "Montserrat", "Noto Sans JP", Arial, "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  letter-spacing: 0.05em;
  color: var(--text-color);
  background-color: var(--bg-color);
  font-feature-settings: "palt";
}

/*--------------------------------
ヘッダー
---------------------------------*/
.header {
  display: flex;
  position: fixed;
  z-index: 10;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 90px;
  padding: 30px;
}

.header-logo {
  font-size: 28px;
  font-weight: bold;
  line-height: 1;
  color: var(--main-color);
}

/* ヘッダーナビ */

.header-nav__list {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: center;
  column-gap: 30px;
}

.header-nav__item {
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.header-nav__link {
  color: #fff;
  text-decoration: none;
}

/*--------------------------------
メインビジュアル
---------------------------------*/
.mv {
  background: var(--bg-gradient);
}

.mv-inner {
  display: flex;
  position: relative;
  align-items: center;
  max-width: 1240px;
  height: 700px;
  margin: 0 auto;
  padding: 0 50px;
  background-image: url(img/mv.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 560px 737px;
}

.mv-titleArea {
  position: relative;
  color: #fff;
}

.mv-titleArea::after {
  display: block;
  content: "";
  position: absolute;
  right: 40px;
  bottom: 60px;
  width: 326px;
  height: 68px;
  transform: rotate(-13deg);
  background-image: url(img/teiji-de-kaerumon.svg);
  background-size: contain;
}

.mv-titleArea__subtitle {
  font-size: 24px;
  font-weight: bold;
  line-height: 1;
  color: var(--main-color);
  margin-bottom: 0.8em;
}

.mv-titleArea__title {
  font-size: clamp(24px, 10vw, 100px);
  font-weight: bold;
  line-height: 1;
  margin-bottom: 10px;
}

.mv-titleArea__date {
  font-size: 36px;
  font-weight: bold;
  letter-spacing: 0.07em;
}

.mv-titleArea-btn {
  margin-top: 2em;
}

.mv-titleArea-btn__item {
  display: inline-block;
  position: relative;
  width: 300px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  padding: 24px 0;
  transition: all 0.3s;
  border-radius: 100px;
  background: linear-gradient(135deg, #c41a7f 0%, #664bbf 100%);
  box-shadow: 0 10px 0 #dd118e;
}

.mv-titleArea-btn__item:hover {
  transform: translateY(4px);
  box-shadow: 0 6px 0 #dd118e;
}

.mv-titleArea-btn__item--sm {
  width: 230px;
  font-size: 18px;
}

.mv-speaker {
  position: absolute;
  right: 20px;
  bottom: 20px;
  font-size: 21px;
  line-height: 1;
}

.mv-speaker__name--small {
  font-size: 0.8em;
}

.mv-speaker__name--label {
  font-size: 14px;
}

/*--------------------------------
ABOUT
---------------------------------*/
.about {
  padding: 110px 0;
}

.about-container {
  max-width: 1170px;
  margin: 0 auto;
  padding: 0 30px;
}

.about-heading {
  text-align: center;
  margin-bottom: 60px;
}

.about-heading {
  font-size: 60px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: var(--main-color);
  text-transform: uppercase;
}

.about-heading__subtitle {
  display: block;
  font-size: 20px;
  color: #fff;
  margin-top: 10px;
}

.about-body {
  display: flex;
  align-items: center;
  column-gap: 70px;
}

.about-imgArea {
  flex: 0 1 40%;
}

.about-imgArea__img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

.about-desc {
  flex: 1;
}

.about-desc__subtitle {
  font-size: 24px;
  margin-bottom: 20px;
}

.about-desc__title {
  font-size: 48px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.1em;
  color: var(--main-color);
  margin-bottom: 40px;
}

.about-desc__text {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.about-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.about-table__head {
  text-align: left;
  padding: 5px 0;
}

.about-table__data {
  text-align: left;
  padding: 5px 0;
}

.about-btn {
  margin-top: 20px;
}

.about-btn__item {
  display: inline-block;
  position: relative;
  width: 300px;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  letter-spacing: 0.05em;
  color: #fff;
  text-align: center;
  margin: 0 auto;
  padding: 24px 0;
  transition: all 0.3s;
  border-radius: 100px;
  background: linear-gradient(135deg, #c41a7f 0%, #664bbf 100%);
  box-shadow: 0 10px 0 #dd118e;
}

.about-btn__item:hover {
  transform: translateY(4px);
  box-shadow: 0 6px 0 #dd118e;
}

.about-btn__item--sm {
  width: 230px;
  font-size: 18px;
}

/*--------------------------------
フッター
---------------------------------*/
.footer {
  display: grid;
  color: #fff;
  padding: 70px 20px;
  background-color: #141414;
  place-items: center;
}

.footer-copyright {
  font-size: 14px;
  font-weight: bold;
  letter-spacing: 0.08em;
}

いいなと思ったら応援しよう！

Toyo
よろしければサポートお願いします！いただいたサポートはクリエーターとしての活動費に使わせていただきます！

この記事が参加している募集

#最近の学び

188,778件