40代高卒者が製造業からIT転職する【サンプルページ】

programming
DMM WEBCAMP

こんにちは、フローです。

今回もHTMLの記述例を書いていきたいと思います。

前回の記事はこちらです。

40代高卒者が製造業からIT転職する【HTML3】

製品ページの例

今回は製品を紹介するページの記述例を書いていきたいと思います。

CSSでは、positionを使った記述例を使ってみました。

この、positionは色々なサイトに使われているCSSなので、是非覚えておきましょう。

私も何度もハマりました笑

HTMLの例

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>高度なサンプルサイト</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
    integrity="sha256-l85OmPOjvil/SOvVt3HnSSjzF1TUMyT9eV0c2BzEGzU=" crossorigin="anonymous" />
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <header>
    <a href="#" class="logo">ロゴ</a>
    <nav>
      <ul>
        <li><a href="#">製品</a></li>
        <li><a href="#">サポート</a></li>
        <li><a href="#">お問い合わせ</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="hero">
      <div class="hero-text">
        <h1>タイトル</h1>
        <p>キャッチフレーズや短い説明文</p>
        <a href="#" class="cta-button">もっと詳しく</a>
      </div>
    </section>
  </main>
    <section class="products">
      <h2>製品一覧</h2>
      <div class="product-card">
        <img src="product1.jpg" alt="製品1">
        <h3>製品1</h3>
        <p>製品1に関する簡単な説明文</p>
        <a href="#" class="cta-button">詳細を見る</a>
      </div>
      <div class="product-card">
        <img src="product2.jpg" alt="製品2">
        <h3>製品2</h3>
        <p>製品2に関する簡単な説明文</p>
        <a href="#" class="cta-button">詳細を見る</a>
      </div>
      <div class="product-card">
        <img src="product3.jpg" alt="製品3">
        <h3>製品3</h3>
        <p>製品3に関する簡単な説明文</p>
        <a href="#" class="cta-button">詳細を見る</a>
      </div>
    </section>

    <section class="contact">
      <h2>お問い合わせ</h2>
      <form>
        <label for="name">お名前</label>
        <input type="text" id="name" name="name">
        <label for="email">メールアドレス</label>
        <input type="email" id="email" name="email">

        <label for="message">メッセージ</label>
        <textarea id="message" name="message"></textarea>

        <button type="submit" class="cta-button">送信する</button>

      </form>
    </section>
    <footer>
      <p>© 2023 高度なサンプルサイト. All rights reserved.</p>
    </footer>
</body>

</html>

この例では、画像が無いのでご自身で用意してお好きな画像を入れてみて下さい。

私がよく使う、画像フリーサイトはこちらです。

https://o-dan.net/ja/

このページでは、トップ画像、製品紹介、お問い合わせが、一つのページに書かれています。

CSSの例

/* 基本スタイル */
* {
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ヘッダーセクション */
header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 30px;
  background-color: #222;
}

header .logo {
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  margin-right: auto;
}

/* ナビゲーション */
nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav ul {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  margin-left: 30px;
}

nav a {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
}

nav a:hover {
  color: #ccc;
}

/* その他のスタイルはここに追加 */

/* ヒーローセクション */
.hero {
  position: relative;
  background-image: url("〇〇.jpg"); /* ここに画像のパスを指定 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
/* ヒーローセクションの疑似要素にフィルターを適用 */
.hero:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* ここの0.3は不透明度を調整する値です。必要に応じて変更してください */
  
}

.hero-text {
  color: #fff;
  position: relative;
  z-index: 1;
}

.hero-text h1 {
  font-size: 48px;
  margin-bottom: 10px;
}

.hero-text p {
  font-size: 24px;
  margin-bottom: 30px;
}

.cta-button {
  display: inline-block;
  background-color: #ff7f50;
  color: #fff;
  padding: 12px 24px;
  font-size: 18px;
  text-decoration: none;
  border-radius: 4px;
}

.cta-button:hover {
  background-color: #f4511e;
  text-decoration: none;
}

/* その他のスタイルはここに追加 */


/* 製品セクション */
.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  grid-gap: 30px;
  padding: 60px 30px;
}

.product-card {
  background-color: #f4f4f4;
  padding: 20px;
  text-align: center;
}

.product-card img {
  max-width: 100%;
  height: auto;
}

.product-card h3 {
  margin-top: 20px;
  margin-bottom: 10px;
}

.product-card p {
  margin-bottom: 20px;
}

/* お問い合わせセクション */
.contact {
  background-color: #333;
  color: #fff;
  padding: 60px 30px;
}

.contact form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  max-width: 1200px; /* MacBook 14-16インチに対応 */
  margin: 0 auto;
}

.contact label {
  display: block;
  margin-bottom: 5px;
}

.contact input,
.contact textarea {
  background-color: #555;
  border: none;
  color: #fff;
  padding: 10px;
  width: 100%;
  resize: none;
}

.contact .input-field {
  flex: 1;
  margin-bottom: 20px;
}

.contact textarea {
  flex-basis: 100%;
  margin-bottom: 20px;
}

.contact input[type="submit"] {
  background-color: #f4f4f4;
  color: #333;
  cursor: pointer;
  width: 50%; /* 送信ボタンの幅を調整 */
  margin: 0 auto;
}

.contact input[type="submit"]:hover {
  background-color: #ddd;
}

/* フッターセクション */
footer {
  background-color: #222;
  color: #fff;
  padding: 20px;
  text-align: center;
}

See the Pen Untitled by YOSHIHIKO NAKAYA (@enthreepiece) on CodePen.

この例では、ヘッダー、メイン、製品紹介、フッターのデザインレイアウトをCSSで書いています。

メイン画像に、positionを使用して影を付けています。

この、positionの使い方でデザインの幅が広がるので何度も使って見て、是非覚え下さい。

今回はとりあえず、記述例だけ紹介いたします。

次回はこの例を基に、詳しくみていきましょう。

レッツチャレンジ！