実践！レスポンシブブログサイトを作ろう！HTML/CSS中級

2025年1月17日 07:11

はじめに（導入）
- 対象者：HTML/CSSの基礎知識を持つ中級者
- ゴール：レスポンシブ対応のブログサイトを構築し、基本的なカスタマイズができるようになる
- レスポンシブデザインの復習と重要性
- 使用技術：HTML5、CSS3、メディアクエリ、Flexbox（またはGrid Layout）
- 今回の完成イメージ（スクリーンショットなどを掲載）
HTMLの構造設計（セマンティックHTMLの活用）
- ブログに必要な要素：ヘッダー（サイトタイトル、ナビゲーション）、メインコンテンツ（記事一覧、記事詳細）、サイドバー（プロフィール、カテゴリー、検索）、フッター（コピーライトなど）
- セマンティックHTMLタグの活用：<header>, <nav>, <main>, <article>, <aside>, <footer>などを適切に使用
- 具体的なHTMLコード例：

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="style.css">
</head>
<body>
    <header>
        <div class="container">
            <h1><a href="#">ブログタイトル</a></h1>
            <nav>
                <ul>
                    <li><a href="#">ホーム</a></li>
                    <li><a href="#">カテゴリー</a></li>
                    <li><a href="#">アーカイブ</a></li>
                    <li><a href="#">お問い合わせ</a></li>
                </ul>
            </nav>
        </div>
    </header>
    <main class="container">
        <div id="content">
            <article>
                <h2><a href="#">記事タイトル1</a></h2>
                <p>記事の概要...</p>
                <a href="#" class="read-more">続きを読む</a>
            </article>
            </div>
        <aside id="sidebar">
            <div class="widget">
                <h3>プロフィール</h3>
                <p>自己紹介文...</p>
            </div>
            <div class="widget">
                <h3>カテゴリー</h3>
                <ul>
                    <li><a href="#">カテゴリー1</a></li>
                    </ul>
            </div>
        </aside>
    </main>
    <footer>
        <div class="container">
            <p>&copy; 2024 ブログ名</p>
        </div>
    </footer>
</body>
</html>

ここから先は

2,261字

¥ 400

期間限定！Amazon Payで支払うと抽選で
Amazonギフトカード5,000円分が当たる

ログイン

この記事が気に入ったらチップで応援してみませんか？