⑦【集大成】HTMLとCSSだけで作る！おしゃれな自己紹介ページ制作

これまでに学んだ「構造・デザイン・スマホ対応」の知識をすべて使って、実際に1枚の自己紹介ページを完成させましょう。WordPressの「カスタムHTML」ブロックに貼り付けるだけで使えるコードを用意しました。

1. 完成イメージのコード

以下のコードを、WordPressの「カスタムHTML」ブロックにコピー＆ペーストしてみてください。

HTML

<div class="profile-card">
  <img src="https://picsum.photos/200" alt="プロフィールの写真" class="profile-img">

  <h1>あなたの名前 / Name</h1>
  <p class="role">Webクリエイター見習い</p>
  
  <p class="description">
    こんにちは！HTMLとCSSを勉強中の初心者です。趣味はカフェ巡りと読書です。
    このページは、自分でコードを書いてデザインしました。
  </p>

  <a href="#" class="profile-btn">お問い合わせはこちら</a>
</div>

<style>
  /* 全体の箱のデザイン */
  .profile-card {
    max-width: 500px;
    margin: 20px auto;
    padding: 30px;
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 20px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    text-align: center;
    font-family: sans-serif;
  }

  /* 画像を丸くする */
  .profile-img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
  }

  /* 肩書きのスタイル */
  .role {
    color: #888888;
    font-size: 0.9rem;
    margin-bottom: 20px;
  }

  /* ボタンのデザイン */
  .profile-btn {
    display: inline-block;
    background-color: #333333;
    color: #ffffff !important;
    padding: 12px 30px;
    text-decoration: none;
    border-radius: 50px;
    transition: 0.3s;
  }

  /* スマホ用の調整 */
  @media (max-width: 600px) {
    .profile-card {
      width: 90%;
      padding: 20px;
    }
  }
</style>

2. コードの解説（ここが復習！）

今回のコードには、これまで学んだ大事なポイントが詰まっています。

・HTML構造：divタグで全体を囲み、img、h1、p、aタグで中身を作っています。
・CSSクラス：.profile-cardのように名前をつけることで、特定の場所にだけデザインを当てています。
・丸い画像：border-radius: 50% を使うと、四角い画像が綺麗な円形になります。
・スマホ対応：一番下の @media の部分で、スマホで見た時にカードの幅が画面に収まるよう調整しています。

3. 自分流にカスタマイズするヒント

このコードをベースに、以下の場所を書き換えてみてください。

・色を変える：background-color の値を自分の好きな色（#ffefd5 など）に変える。
・画像を自分のものに：img src="..." の部分を、WordPressのメディアライブラリにアップした画像のURLに書き換える。
・ボタンを増やす：aタグをコピーして、SNSへのリンクなどを増やしてみる。

まとめ：自分で作れる楽しさ

最初はただの「文字」だったものが、CSSを加えることで「デザイン」になり、メディアクエリで「スマホ対応」までできました。

「ここをもっとこうしたい！」と思ったら、その都度検索して新しいプロパティを探してみてください。その繰り返しが、Web制作をマスターする一番の近道です。

コメント

PAGE TOP