LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@apptest(App T. Engineer)

HTML/CSS基礎実習：初心者向け徹底ガイド🚀

Posted at

HTMLとCSSの基礎を、初心者の方にも分かりやすく解説しながら、実習形式で学べる記事です。この記事は職業訓練校や初学者向けの授業を想定して構成しています。

✅ 学べること

  • 📝 HTMLの基本構造とセマンティクス
  • 🏷️ よく使うタグ（<h1>や<p>、<img>、<div>、<nav>など）
  • 🎨 CSSの書き方と使い方（外部CSS、セレクタ、プロパティ）
  • 📱 レスポンシブデザインの基礎
  • 🌐 実際に自分のオリジナルWebページを作る手順
  • 🖼️ ローカル画像の貼り方やファイル構成
  • ✨ モダンなWebページの構築方法

🛠️ 準備するもの

  • 💻 WindowsまたはMacのパソコン
  • 📝 テキストエディタ（Visual Studio Code 推奨）
  • 🌐 Webブラウザ（Google Chrome 推奨）
  • 🖼️ 練習用の画像ファイル（JPEG、PNG形式）

📁 ファイル構成

以下のように1つのフォルダにまとめて作業します 📂

project-folder/
├── index.html
├── style.css
├── images/
│   ├── sample.jpg
│   └── profile.png
└── README.md（任意）

📄 HTMLの基本構造

まずは最も基本的なHTMLファイルのテンプレートです 💡

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>はじめてのWebページ - HTML/CSS実習</title>
    <meta name="description" content="HTML/CSS実習で作成した初心者向けのWebページです。">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <h1>私のWebサイト</h1>
            <ul>
                <li><a href="#home">ホーム</a></li>
                <li><a href="#about">自己紹介</a></li>
                <li><a href="#contact">お問い合わせ</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>ようこそ、私のWebサイトへ</h2>
            <p>これはHTML/CSSの基礎実習で作成したページです。初心者でも分かりやすく、実用的なWebページを目指しています。</p>
            <img src="images/sample.jpg" alt="サンプル画像の説明">
        </section>
        
        <section id="about">
            <h2>自己紹介</h2>
            <div class="profile-container">
                <img src="images/profile.png" alt="プロフィール画像" class="profile-image">
                <div class="profile-text">
                    <p>Web開発を学習中の初心者です。HTML、CSS、JavaScriptを勉強しています。</p>
                    <p><strong>興味のある分野：</strong>フロントエンド開発、UI/UXデザイン</p>
                </div>
            </div>
        </section>
    </main>
    
    <footer>
        <p>&copy; 2025 私のWebサイト. All rights reserved.</p>
    </footer>
</body>
</html>

📖 解説

タグ 役割 重要度
<!DOCTYPE html> HTML5であることを示す宣言 ⭐⭐⭐
<html lang="ja"> HTML全体の始まり、日本語サイトであることを明示 ⭐⭐⭐
<meta name="viewport"> レスポンシブデザインに必要な設定 ⭐⭐⭐
<header> ページのヘッダー部分（ナビゲーションなど） ⭐⭐
<nav> ナビゲーションメニュー ⭐⭐
<main> ページのメインコンテンツ ⭐⭐⭐
<section> 意味的なまとまりを持つセクション ⭐⭐
<footer> ページのフッター部分 ⭐⭐

🎨 CSSの基本とモダンなスタイリング

次に、style.cssファイルにCSSを記述して、現代的なデザインを加えます ✨

/* 🔄 リセットCSS */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 📄 ベーススタイル */
body {
    font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa;
}

/* 🏠 ヘッダーとナビゲーション */
header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 1rem 0;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

nav {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav h1 {
    font-size: 1.8rem;
    font-weight: 700;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 2rem;
}

nav a {
    color: white;
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.3s ease;
}

nav a:hover {
    opacity: 0.8;
}

/* 📝 メインコンテンツ */
main {
    max-width: 1200px;
    margin: 2rem auto;
    padding: 0 2rem;
}

section {
    background: white;
    margin-bottom: 2rem;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

h2 {
    color: #2c3e50;
    font-size: 2rem;
    margin-bottom: 1rem;
    border-bottom: 3px solid #667eea;
    padding-bottom: 0.5rem;
}

p {
    font-size: 1.1rem;
    margin-bottom: 1rem;
    color: #555;
}

/* 🖼️ 画像スタイル */
img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

/* 👤 プロフィールセクション */
.profile-container {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
    flex-wrap: wrap;
}

.profile-image {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #667eea;
}

.profile-text {
    flex: 1;
    min-width: 300px;
}

/* 🔻 フッター */
footer {
    background: #2c3e50;
    color: white;
    text-align: center;
    padding: 2rem;
    margin-top: 3rem;
}

/* 📱 レスポンシブデザイン */
@media (max-width: 768px) {
    nav {
        flex-direction: column;
        gap: 1rem;
    }
    
    nav ul {
        gap: 1rem;
    }
    
    main {
        padding: 0 1rem;
    }
    
    section {
        padding: 1.5rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    .profile-container {
        flex-direction: column;
        text-align: center;
    }
    
    .profile-image {
        width: 150px;
        height: 150px;
        align-self: center;
    }
}

/* ✨ アニメーション効果 */
section {
    animation: fadeIn 0.6s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 🖱️ ホバー効果 */
section:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

🖼️ ローカル画像を使うには？

画像ファイル（例：sample.jpg、profile.png）をimagesフォルダに入れ、HTMLの中でこのように書きます：

<img src="images/sample.jpg" alt="サンプル画像の詳細な説明">

⚠️ 重要なポイント

  • 📝 ファイル名は必ず半角英数字とアンダーバーのみを使用
  • 🏷️ alt属性は必須：画像が表示されない場合の代替テキスト
  • 📏 適切な画像サイズ：Web用には幅1200px以下が推奨
  • 📸 ファイル形式：JPEG（写真）、PNG（イラスト・透明背景）を使い分け

⚙️ VS Codeの便利な機能

🔧 推奨拡張機能

  1. Live Server 🔴：リアルタイムプレビュー
  2. Prettier ✨：コードの自動整形
  3. Auto Rename Tag 🏷️：開始・終了タグの同期編集
  4. HTML CSS Support 💡：CSSの入力補完

⌨️ ショートカット

  • Ctrl + /：コメントアウト/解除 💬
  • Alt + Shift + F：コードの自動整形 ✨
  • Ctrl + D：同じ単語を複数選択 🔍

📦 ZIPで提出する方法

  1. 📁 作成したフォルダを右クリック
  2. 📤 「送る」→「圧縮（ZIP形式）フォルダ」を選択
  3. 🏷️ 「学籍番号-HTML-CSS-ex1.zip」など、指定のファイル名にリネーム
  4. ✅ 提出前チェック：ZIPを展開して正常に表示されることを確認

📋 まとめとポイント

💡 基本原則

  • 🏗️ **HTMLは「構造」、CSSは「見た目」**を担当
  • 📖 セマンティックHTML：タグの意味を理解し、正しい場所に正しいタグを書く
  • 🔗 外部CSS：スタイルは外部ファイルに書いて<link>で読み込む
  • 📱 レスポンシブデザイン：様々な画面サイズに対応

📁 ファイル管理

  • 🖼️ ローカル画像は必ずフォルダ構造を守る
  • 📝 ファイル名や拡張子は英数字・半角で統一
  • 📂 適切なファイル構成でプロジェクトを整理

❌ よくあるミスと対処法

ミス例 原因と対処法 重要度
🖼️ 画像が表示されない パス間違い・日本語ファイル名・大文字小文字の違い ⭐⭐⭐
🎨 CSSが適用されない <link>の記述ミス、パス違い、キャッシュ問題 ⭐⭐⭐
🔲 ページが真っ白 タグの閉じ忘れ、全角記号の混入、JavaScriptエラー ⭐⭐
📱 レイアウトが崩れる CSSの記述ミス、ブラウザ互換性の問題 ⭐⭐

🚀 次に学ぶと良いステップ

📖 基本要素の拡張

  • 📋 リスト：<ul>/<ol>/<li>
  • 🗂️ テーブル：<table>/<tr>/<td>/<th>
  • 📝 フォーム：<form>/<input>/<textarea>/<select>

🎯 中級テクニック

  • 📐 FlexboxとCSS Grid：モダンなレイアウト技術
  • 🎨 CSS変数（カスタムプロパティ）
  • ✨ CSS アニメーションとトランジション
  • 📱 メディアクエリを使った高度なレスポンシブデザイン

🔧 開発環境の向上

  • 💅 Sass/SCSS：CSS拡張言語
  • 📦 Node.jsとnpm：モダンな開発ツール
  • 🌲 Git：バージョン管理システム
  • 🔍 デベロッパーツールの活用方法

📝 実習課題例

🌟 初級課題

  1. 👤 自己紹介ページ：趣味や経歴を含む個人ページを作成
  2. 📸 写真ギャラリー：複数の画像を美しく配置
  3. 🏢 シンプルな企業サイト：会社概要、サービス、お問い合わせページ

🎯 中級課題

  1. 💼 レスポンシブポートフォリオ：スマートフォン対応の作品集
  2. 🛬 ランディングページ：商品やサービスの紹介ページ
  3. 📰 ブログテンプレート：記事一覧と詳細ページ

📚 学習リソース

📖 公式ドキュメント

  • 🌐 MDN Web Docs：最も信頼できるWeb技術のリファレンス
  • 📚 W3Schools：初心者向けのチュートリアル

🛠️ 便利なツール

🎉 おわりに

HTML/CSSはWeb制作の基礎であり、すべてのWeb技術の出発点です 🌟

今回の実習で構造・見た目・ファイル管理の基本をしっかり押さえ、モダンなWeb開発の入り口に立つことができました。継続的な学習と実践を通じて、より高度なWeb開発スキルを身につけていきましょう 💪

分からないことがあれば、公式ドキュメントやコミュニティを活用して問題解決能力も同時に育てていくことが重要です 🤝

この記事が皆さんのWeb開発学習の一助となれば幸いです。実際に手を動かして、たくさんのWebページを作ってみてください 🚀✨

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?