CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】

CSSを使ってレスポンシブなブログレイアウトを作成するには、viewportメタタグの設定と、デバイスの画面幅に応じて柔軟に調整されるレイアウト構造の定義がポイントになります。以下に、ナビゲーションバー・ブログ本文・サイドリンク・フッターを備えた、ブログサイトの完全なコード例を紹介します。

コード例

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    nav {
        font-size: 20px;
        background-color: rgb(136, 22, 182);
        color: #cccccc;
        height: 75px;
    }
    ul {
        position: fixed;
        right: 10px;
    }
    ul li {
        display: inline;
        padding-right: 30px;
        font-weight: 500;
        color: rgb(251, 255, 0);
    }
    .logo {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        color: white;
        float: left;
        font-size: 30px;
        padding-left: 20px;
        padding-top: 20px;
    }
    .blog {
        margin-top: 20px;
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        height: 400px;
    }
    .post {
        margin-top: 20px;
        float: left;
    }
    .blogHeader {
        font-size: 36px;
        margin-bottom: 20px;
    }
    .links {
        float: right;
    }
    .links li {
        color: black;
    }
    footer {
        color: white;
        position: fixed;
        width: 100%;
        bottom: 0;
        margin-left: auto;
        margin-right: auto;
        font-size: 30px;
        height: 100px;
        padding: 20px;
        background-color: rgb(9, 141, 101);
        text-align: center;
    }
</style>
</head>
<body>
<nav>
<div class="logo">
↷ LOGO ↶
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="blog">
<div class="post">
<div class="blogHeader">
<h1>Blog Heading</h1>
</div>
<div class="blog-body">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt non neque eos eaque veritatis praesentium.
</p>
</div>
</div>
<div class="links">
<ul>
<li>BLOG 2</li>
<li>BLOG 3</li>
</ul>
</div>
</div>
<footer>
Copyright ©
</footer>
</body>
</html>

出力結果

上記のコードを実行すると、以下のような画面が表示されます。

CSSでレスポンシブなブログレイアウトを作成する方法【完全なコード例付き】

コードのポイント解説

1. viewportメタタグの設定

<meta name="viewport" content="width=device-width, initial-scale=1"> を指定することで、ページが各デバイスの画面幅に合わせて表示され、スマートフォンやタブレットでも適切にレスポンシブ対応ができます。

2. box-sizing: border-box の指定

ユニバーサルセレクタ（*）に box-sizing: border-box を設定することで、paddingやborderを含めて要素のサイズが計算されるため、意図しないレイアウト崩れを防ぐことができます。

3. コンテンツの中央配置

width: 75% と margin-left: auto; margin-right: auto; を組み合わせることで、ブログ本文を画面中央に配置しつつ、画面幅に応じて柔軟に伸縮するレスポンシブな構造を実現しています。

4. floatによる2カラムレイアウト

.post に float: left、.links に float: right を指定することで、ブログ記事とサイドリンクを左右に並べた2カラムレイアウトを作成しています。

5. 画面下部に固定されるフッター

footer に position: fixed; bottom: 0; width: 100%; を指定することで、スクロールしても常に画面下部に固定表示されるフッターを実現しています。

  1. CSSで2カラムのレイアウトグリッドを作成する方法

    CSSを使用すれば、画面を左右に分割した2カラム（2列）のレイアウトグリッドを簡単に作成できます。ここでは、position: fixedとwidth: 50%を組み合わせた基本的な実装方法を、実際のコード例とともに解説します。 コード例 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body {

  2. CSSでレスポンシブなジグザグ（交互）レイアウトを作成する方法

    CSSを使用すれば、テキストと画像を左右交互に配置した「ジグザグ（交互）レイアウト」を簡単に実装できます。ジグザグレイアウトは、コンテンツに視覚的なリズムと変化を与え、閲覧者の視線を自然に誘導できる人気のデザイン手法で、ランディングページやサービス紹介ページなどでよく活用されています。 実装のポイントは大きく分けて2つあります。1つ目はfloatプロパティで要素を左右に振り分けること、2つ目はメディアクエリを使って画面幅に応じてレイアウトを切り替えることです。以下に具体的なコード例を示します。 実装例 <!DOCTYPE html> <html> <head>