ウェブ制作でよく使うレイアウトや要素をご紹介

2024/05/12

#CSS

#HTML

まず初めに共通のHTMLとCSSをご紹介！

共通のHTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div class="container">
    <main class="main">
        <div class="main-inner">
            <section class="block">
                <div class="block-inner">
                    <div class="block-head">
                        <h2>タイトル</h2>
                    </div>
                    <div class="block-body">
                        ここに今回必要なコードを記述する
                    </div>
                </div>
            </section>
        </div>
    </main>
</div>
</body>
</html>

共通のCSS

* {
    box-sizing: border-box;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 400;
    list-style: none;
    margin: 0;
    padding: 0;
}
img {
    height: auto;
    max-width: 100%;
}
.block {
    padding: 65px 0;
}
.block-inner {
    margin: 0 auto;
    width: 92%;
    max-width: 800px;
}
.block-head {
    margin: 0 0 25px;
}
.block-head h2 {
    font-size: 18px;
    font-weight: bold;
}