Jekyllのヘッダ部分どうしよう

ってなり、bootstrapやらHTML5やらの書き方を色々調べた。

参考:

• ランディングページとは何か、これで分かる！ | Ｗｅｂ集客の開花塾
• Bootstrapを使ってWEBサイトを作ってみようぜ 第6回 「ヘッダー部分を作る」
• Bootstrapを使ってみる。ヘッダー編（Jumbotron）| みずかず
• ジャンボトロン ≪ コンポーネント ≪ Bootstrap3日本語リファレンス
• Jumbotron - Bootstrap
• HTML5 でのサブタイトルのマークアップについて - 破棄されたブログ
• Components - Bootstrap#Page header

結果としてこうなった

<div class="jumbotron">
  <header>
    <h1>Page Title</h1>
    <p>subtitle</p>
  </header>
  <p>description</p>
</div>

こうなった理由は以下。

大きなヘッダをきれいに簡単に作りたい

ブログのヘッダや最近のWebページのトップみたいに、大きいヘッダを簡単に作ることはできないかと調べた。

ランディングページ（landing page）とは、直訳すれば着地ページで、ユーザーが最初に訪問するWebページになります。

最近はトップページのことをランディングページと言うらしい。

bootstrap3からはjumbotronっていうのが実装されて、以前はhero-unitと呼ばれてたものが置き換わったようです。 このjumbotronっていうのを使うと、簡単にヘッダー部分が出来上がります

jumbotron というものを使えば大きなスペースを持つヘッダが簡単にできるようだ。

ソースコード

<div class="jumbotron">
	<h1>ジャンボトロン</h1>
	<p>WEBサイトにおける主要コンテンツを紹介するのに適したスタイル。</p>
	<p><a class="btn btn-primary btn-lg" href="./jumbotron.html" role="button">もっと詳しく</a></p>
</div>

なるほど。

サブタイトルはどうやって書こうか。

タイトルとタグラインを header 要素でグループ化した例

タイトルを h2 要素、タグラインを p 要素でマークアップして、header 要素でグループ化している。 (引用元 Wikipedia)

<header>
   <h2>ラブライブ! School idol project</h2>
   <p>雑誌『電撃G's magazine』（アスキー・メディアワークス）・ランティス・サンライズの合同ユーザー参加企画、および関連作品の名義。</p>
</header>

section
| + header title
| | + h1 main title
| | + p subtitle
| + [contents]

他にも例はいくつか載っているがこれがいい気がする。

Page header

A simple shell for an h1 to appropriately space out and segment sections of content on a page. It can utilize the h1’s default small element, as well as most other components (with additional styles).

Example page header Subtext for header

<div class="page-header">
  <h1>Example page header <small>Subtext for header</small></h1>
</div>

bootstrapはこうしている。