HTMLとCSSは、ウェブデザインの基本となる言語です。この章では、初心者の方でもわかりやすく、具体的なコード例とともにHTMLとCSSを使ったおしゃれなホームページの作成方法を解説します。
・htmlを使ってホームページを作成したい
・おしゃれに作りたいけどCSSファイルって何かわからない。
・コードの中身が全く分からない。
こんな悩みを解決します。
ブログの対象者
・初心者だけどホームページを自分で作りたい人
・1からhtml cssを学んでみたい人
・おしゃれにホームページを作りたい人
ページの基本的な構造:
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を組み合わせておしゃれなホームページを作成する手順を具体的に説明しました。ページの基本構造、ナビゲーションメニュー、レイアウトの設定、スタイリングやデザイン、そしてレスポンシブデザインの適用まで、幅広いトピックについてカバーしました。
最後に、これらの知識を活用して自分だけのおしゃれなホームページを作成してみてください。実際にコードを書きながら試行錯誤することで、より深く理解を深めることができます。初心者でも取り組みやすい具体的な例を示しましたので、ぜひチャレンジしてみてください。ホームページ作成の楽しさと満足感を味わえることでしょう。
