【初心者でもわかる】HTMLとCSSを使っておしゃれなホームページを作成しよう

HTMLとCSSは、ウェブデザインの基本となる言語です。この章では、初心者の方でもわかりやすく、具体的なコード例とともにHTMLとCSSを使ったおしゃれなホームページの作成方法を解説します。

・htmlを使ってホームページを作成したい
・おしゃれに作りたいけどCSSファイルって何かわからない。
・コードの中身が全く分からない。

こんな悩みを解決します。

ブログの対象者
　・初心者だけどホームページを自分で作りたい人
　・1からhtml cssを学んでみたい人
　・おしゃれにホームページを作りたい人

リンク

Contents

ページの基本的な構造:
まとめ

🚀 0円で現役エンジニアから学べる【Techスクールオンライン】のお申込みをお勧めします。このオンラインスクールでは、現役のエンジニアから直接学ぶことができ、プログラミングの基礎から高度なスキルまでを習得できます。しかも、今なら 0円で受講できるチャンスです。エンジニア転職を考えている方やプログラミングに興味がある方、新しいスキルを習得したい方に特におすすめです。

ページの基本的な構造:

HTMLでは、ウェブページの基本的な構造を定義します。まずは、以下のコードを使って基本的なHTMLの構造を作りましょう。

基本的なHTML要素（html, head, body)

このコードでは、基本的なHTML要素（<html>、<head>、<body>）を使用し、タイトルや外部スタイルシートのリンクを追加しました。また、ヘッダー、メインコンテンツ、フッターなどのセクションも作成しました。

<!DOCTYPE html>
<html>
<head>
  <title>My Stylish Homepage</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome to My Homepage</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>About Me</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lobortis eros, eu mattis elit fringilla a.</p>
    </section>
    <section>
      <h2>My Portfolio</h2>
      <!-- Portfolio items go here -->
    </section>
    <section>
      <h2>Contact Me</h2>
      <form>
        <!-- Contact form goes here -->
      </form>
    </section>
  </main>
  <footer>
    <p>© 2023 My Stylish Homepage. All rights reserved.</p>
  </footer>
</body>
</html>

この状態で、Live serverを起動すると、下記のようなブラウザが開かれます。CSSファイルを作成していないので、まだシンプルなホームページになります。

ナビゲーションメニューの作成:<nav>

おしゃれなホームページには、スタイリッシュなナビゲーションメニューが必要です。以下のコードを使って、ナビゲーションメニューを作成しましょう。
上記のhtmlコードに、下記のようなナビゲーションメニューが使用されています。

<!-- 上記のHTMLコードに追加 -->
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Portfolio</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

下記のようなナビゲーションメニューに対応します。

次に、現在は、シンプルなhtmlファイルになっていますが、おしゃれにするために、style.cssというスタイルシートを作成します。このスタイルシートでは、ナビゲーションメニューの項目をおしゃれにしてみます。

/* styles.css */

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

nav li {
  display: inline-block;
  margin-right: 10px;
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

nav a:hover {
  color: #ff5500;
}

ナビゲーションメニューがstyles.cssを適用したことで、変更されております。マウスをホバーすると、赤くなるように設定されています。また、配置も若干変わっています。

このコードでは、<nav>要素内に<ul>と<li>を使ってナビゲーションメニューを作成しました。CSSファイルで指定したスタイルを適用することで、リンクのスタイリングやホバーエフェクトを実現しています。

レイアウトの設定

ホームページのレイアウトは、ページの見た目と使いやすさに大きく影響します。以下のコードを使って、ヘッダー、コンテンツ領域、フッターのセクションのレイアウトを設定しましょう。

header, main, footerに下記のようにcssファイルの設定を行い、おしゃれに修正します。

/* styles.css */

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
}

main {
  margin: 20px;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

このheader, main, footerの設定を変えるだけで、雰囲気が一変します。

下図の右側になります。雰囲気が一変したのがわかるでしょうか？？

このコードでは、CSSでヘッダー、メインセクション、フッターのスタイリングを行っています。ヘッダーとフッターには背景色やテキストカラーを指定し、コンテンツ領域にはマージンを追加しました。

スタイリングとデザイン:

ホームページのスタイリングとデザインは、魅力的な見た目を作り出すために重要です。以下のコードを使って、テキストの装飾や背景色の設定を行いましょう。

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

<head>
  <title>My Stylish Homepage</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>Welcome to My Homepage</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section>
      <h2>About Me</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur maximus lobortis eros, eu mattis elit fringilla a.</p>
    </section>
    <section>
      <h2>My Portfolio</h2>
      <!-- Portfolio items go here -->
    </section>
    <section>
      <h2>Contact Me</h2>
      <form>
        <!-- Contact form goes here -->
      </form>
    </section>
  </main>
  <footer>
    <p>© 2023 My Stylish Homepage. All rights reserved.</p>
  </footer>
</body>
</html>

このコードでは、セクション要素に背景色や余白、ボーダーの設定を追加し、各要素を見やすく整えました。また、お問い合わせフォームにはテキストフィールドやボタンのスタイリングを適用しました。

だいぶおしゃれになってきたのがわかります。

レスポンシブデザインの適用:

最後に、作成したホームページを様々なデバイスで見やすく表示するために、レスポンシブデザインを適用しましょう。

レスポンシブデザインにするため、cssファイルに下記コードを追加します。

このコードでは、768px以下の画面幅で表示される場合に適用されるCSSルールを設定しています。文字サイズやパディングを調整することで、モバイルデバイスなど小さな画面でも読みやすくなります。

/* styles.css */

@media screen and (max-width: 768px) {
  body {
    font-size: 14px;
  }

  header {
    padding: 10px;
  }

  main {
    margin: 10px;
  }

  section {
    padding: 10px;
  }
}

CSSファイルを設定することで、これだけサイトの雰囲気が変わりました。
簡単に設定できるのでぜひためしてみてください。

リンク

まとめ

このブログでは、HTMLとCSSを使っておしゃれなホームページを作成する方法について解説しました。初心者の方でもわかりやすく具体的なコード例を示しましたので、自分のホームページ作成の参考にしていただければと思います。

第1章では、HTMLの基本的な構造やタグの使い方について学びました。ウェブページを構成するための基礎知識を身につけることができます。

第2章では、CSSを使ってホームページのスタイリングを行う方法について紹介しました。ナビゲーションメニューやレイアウトの設定に加えて、スタイリングやデザインのテクニックも学びました。

第3章では、画像とメディアの組み込みについて詳しく解説しました。画像の表示や動画の埋め込みなど、ホームページに魅力的なコンテンツを追加する方法を学びました。

第4章では、HTMLとCSSを組み合わせておしゃれなホームページを作成する手順を具体的に説明しました。ページの基本構造、ナビゲーションメニュー、レイアウトの設定、スタイリングやデザイン、そしてレスポンシブデザインの適用まで、幅広いトピックについてカバーしました。

最後に、これらの知識を活用して自分だけのおしゃれなホームページを作成してみてください。実際にコードを書きながら試行錯誤することで、より深く理解を深めることができます。初心者でも取り組みやすい具体的な例を示しましたので、ぜひチャレンジしてみてください。ホームページ作成の楽しさと満足感を味わえることでしょう。