ページのレイアウト - paulbarre/RssReader GitHub Wiki

このレッスンでは、最初にHTMLのレイアウトを準備します。

index.htmlという新規ファイルを作成して、下記のHTMLを記述します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Rss Reader</title>
</head>
<body>

</body>
</html>

ヘッダー

ページのヘッダーはページのタイトルになります。

<body>
    <header>
        <h1>RSS Reader</h1>
    </header>
</body>

メニュー

メニューの中には、お気に入りのRSSフィードとブックマークを配置します。

ページのレイアウトのため、フィード1などの一旦テキストを記述します。

<body>
	...

	<aside>
        <h2>メニュー</h2>
        <article>
            <h3>気に入り</h3>
            <ul>
                <li>フィード1<button>ダウンロード</button></li>
            </ul>
        </article>

        <article>
            <h3>ブックマーク</h3>
            <ul>
                <li><a href="" target="_blank">ブックマーク1</a></li>
            </ul>
        </article>
    </aside>
</body>

リンクをクリックする際にブラウザーの新規タブを開くため、aタグにあるtargetプロパティを_blankにします。

一覧

フィードをダウンロードする時に、フィードのアイテム（article）をリストで表示します。

ページレイアウトのため、下記のテキストを記述します。

各アイテムのタイトル、内容、ブックマークボタンとリンクを配置します。

<body>
	...

    <section>
        <h2>一覧</h2>

        <article>
            <h3>情報1</h3>
            <p>内容1</p>
            <a href="">もっと見る</a>
            <button>登録</button>
        </article>

        <article>
            <h3>情報2</h3>
            <p>内容2</p>
            <a href="">もっと見る</a>
            <button>登録</button>
        </article>
    </section>
</body>

フィールタ

上記の一覧に書いてある内容の中でキーワード検索をするためのテキストをフッターに追加します。

<body>
	...

	<footer>
        <input type="text" placeholder="検索する...">
    </footer>
</body>

レイアウトを確認します

ブラウザで作ったページを開き、確認してください。

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️