死んだ魚の目

Web放浪記

HTML5とCSS3でそれっぽいページを作ってみる

HTML5とCSS3を使ってこんな感じのそれっぽいページを作ってみました。

f:id:yutoritelepath:20181121212130p:plain

HTMLコードは以下の通りです。

index.html

<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <link href="hoge.css" rel="stylesheet" type="text/css">
    <title>hoge</title>
</head>

<body>
    <div id="topbar">
        <header>
            <p>hoge</p>
        </header>
        <nav>
            <ul>
                <li class="active"><a href="index.html">Top</a></li>
                <li><a href="profile.html">Profile</a></li>
                <li><a href="blog.html">Blog</a></li>
                <li><a href="link.html">Link</a></li>
            </ul>
        </nav>
    </div>

    <article>
        <h1>hoge</h1>
        <p> hogehoge</p>
        <p> hogehoge</p>
        <p> hogehoge</p>
        <p> hogehoge</p>

    </article>
    <footer>
        <p>hoge</p>
    </footer>

</body>

</html>
  • header, nav, article, footerのセクションに分割。
  • headerとnavは#topbarでラップ。
  • #topbarはスクロールした際にページ上部に固定されるようCSSを記述。
  • navのリンクはリストで列挙(.activeで現在のページを緑色にハイライト）。

続いてCSS。

hoge.css

body {
    margin: 0px;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

#topbar {
    position: sticky;
    top: 0;
    width: 100%;
}

header {
    margin: 0px;
    padding: 0.25em;
    background-color: black;
}

header p {
    color: white;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

nav li {
    float: left;
}

nav li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

nav li:last-child {
    border-bottom: none;
}

nav li a:hover {
    background-color: #111;
    color: white;
}

.active {
    background-color: #4CAF50;
    color: white;
}

footer {
    background-color: lightgray;
    margin-top: auto;
}
  • body
    • headerやnavbarをページ横方向いっぱいに広げるためにmargin: 0を指定。
    • footerをにページ下部に固定するためdisplay: flexでFlexboxを使用。
    • flex-direction : columnでflexアイテムを縦積み。
    • min-height: 100vhでbodyをページ縦方向いっぱいに広げてfooterを最下部へ移動。
  • #topbar
    • position: sticky, top: 0でページスクロール時にheaderとnavbarをページ上部に固定。
  • nav ul
    • list-style: noneでリストマークを非表示。
    • margin: 0, padding: 0にリセット。
    • overflow: hiddenが必要な理由は調査中。おまじない？
  • nav li
    • float: leftで要素を横方向に配置。

自分が思ったようにコンテンツを表示させようと試行錯誤してみましたが、ロジックパズルを解くようでなかなか面白いです。

参考サイト