NEWSページ作成
- キービジュアルは、ブラウザ幅100%
- section幅は、960px(可変)
- h2(見出し)は、擬似要素で英語・日本語併記
画像
テキスト
The Code NEWS NEWS 2024.10.10 ホームページをリニューアルしました。 2024.10.10 ホームページをリニューアルしました。 2024.10.10 ホームページをリニューアルしました。 2024.10.10 ホームページをリニューアルしました。 Twitter © The Code NEWS Inc.
制作ポイント(要件定義)
- キービジュアルは、高さ「60vh」で指定
- 2つの「h2」は「section」ブロックの見出しとする
- 「h2」と「dl」は、横並び(各幅は、適宜指定)
- 「h2」の英語・日本語併記は、擬似要素「::before(または、::after)」で指定
- 書体「font-family: "Poppins", "Noto Sans JP", sans-serif;」
Weightを限定したいとき
- 「↓ Change Style」をクリックして、必要なWeightのみを選択する
擬似要素の設定
ページ内リンク
- 「<a href="#news">NEWS</a>」のリンクが、「<h2 id="news">NEWS</h2>」へ向かって遷移する
- 「#名」と「id名」が一致する必要があります
- ページの遷移にアニメーションが実行されるには、以下のような記述が必須です
html { scroll-behavior: smooth; }
完成例
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>【コーディング練習】The Code NEWS</title> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Poppins:wght@700&display=swap" rel="stylesheet"> <link rel="stylesheet" href="css/sample.css"> </head> <body> <!-- header --> <header class="header"> <div class="container"> <h1>The Code NEWS</h1> <nav class="gnav"> <ul> <li><a href="#news">NEWS</a></li> <li><a href="#twitter">Twitter</a></li> </ul> </nav> </div><!-- /.container --> </header> <!-- /header --> <!-- main --> <main class="main"> <div class="key_visual"> <img src="img/hero.webp" alt=""> </div><!-- /.key_visual --> <div class="container"> <section class="news"> <h2 id="news">NEWS</h2> <dl> <dt><time datetime="2024-10-10">2024.10.10</time></dt> <dd>ホームページをリニューアルしました。</dd> <dt><time datetime="2024-10-10">2024.10.10</time></dt> <dd>ホームページをリニューアルしました。</dd> <dt><time datetime="2024-10-10">2024.10.10</time></dt> <dd>ホームページをリニューアルしました。</dd> <dt><time datetime="2024-10-10">2024.10.10</time></dt> <dd>ホームページをリニューアルしました。</dd> </dl> </section> <section class="twitter"> <h2 id="twitter">Twitter</h2> <a class="twitter-timeline" data-dnt="true" href="https://twitter.com/1234web?ref_src=twsrc%5Etfw" data-height="500px">Tweets by 1234web</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script> </section> </div><!-- /.container --> </main> <!-- /.main --> <!-- footer --> <footer class="footer"> <p><small>© The Code NEWS Inc.</small></p> </footer> <!-- /footer --> </body> </html>
@charset "UTF-8"; /* ------------------------------------------ reset ------------------------------------------ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } ul { list-style: none; } a { color: inherit; text-decoration: none; } img { max-width: 100%; vertical-align: bottom; } html { scroll-behavior: smooth; } /* ------------------------------------------ body ------------------------------------------ */ body { background-color: #fff; color: #333; font-size: 16px; font-family: "Poppins", "Noto Sans JP", sans-serif; line-height: 1.0; } /* ------------------------------------------ layout ------------------------------------------ */ .container { width: min(90%, 960px); margin: 0 auto; } /* ------------------------------------------ header ------------------------------------------ */ .header { padding: 20px 0 24px; text-align: center; } .header > .container { display: flex; justify-content: space-between; align-items: center; } /* ------------------------------------------ nav ------------------------------------------ */ .gnav > ul { display: flex; justify-content: center; align-items: center; } .gnav li > a { display: block; justify-content: center; padding: 6px 20px; } /* ------------------------------------------ main ------------------------------------------ */ .key_visual { margin-bottom: 100px; } .key_visual > img { width: 100%; height: 70vh; object-fit: cover; object-position: center center; } .news, .twitter { margin-bottom: 40px; } .news { display: flex; gap: 4%; } h2 { position: relative; width: 30%; font-size: 48px; margin-bottom: 30px; } .news > h2::after { content: "ニュース"; position: absolute; left: 0; top: 50px; font-size: 14px; } .twitter > h2::after { content: "ツイッター"; position: absolute; left: 0; top: 50px; font-size: 14px; } dl { width: 70%; } dt { margin-bottom: 10px; font-weight: bold; } dd { margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #aaa; } /* ------------------------------------------ footer ------------------------------------------ */ .footer { padding: 20px 0; background-color: #000; color: #fff; text-align: center; }