ウィンドウ幅いっぱいのヘッダー画像。Wedとりとめないメモ。TueSVGでやることのまとめ。Satスクロールパラパラ。Wedふりがなを振る。Wed段組みのCSS。Sunウィンドウ幅いっぱいのヘッダー画像。Wedよこ並びのCSS。Friコンテナからの解放。Tueイラレでイラスト。Wed動くCSSのためのメモ。Thuなつかしくってあったかい、きりぎりす。Sun透明ノイズと紙テクスチャ。Sun透明にしないでテクスチャウィンドウ幅いっぱいのヘッダー画像。Sunサイトのヘッダーに、ロゴやタイトルの背景として大きな画像をウィンドウ幅いっぱいに表示する、ブログの記事ページなどでわりと見かけるタイプのレイアウトについてのメモです。ここでは、ヘッダー画像がウィンドウの上半分を埋めるようにレイアウトされる、下図のようなデザインを作ることにします:)。背景画像として表示する方法。シンプルな方法、CSSのbackgroundプロパティを使って、背景画像として表示する方法です。HTMLヘッダー部分のHTMLは以下のとおり。ヘッダーの中には、ページタイトルと、画像のライセンス表記を入れました。relativeを指定して、ページタイトルとキャプションを絶対配置する時に、header要素を基準として位置を決められるようにしておきます。vhは、“ウィンドウの高さ”を表す単位で、常にウィンドウの高さを基準とした割合でもってサイズを指定できて便利なのです;)。50vh;}表示する画像は、backgroundプロパティを使って、背景画像として指定します。background-sizeプロパティのcoverという値を指定すれば、背景画像がheader要素を埋めるように配置されるので、これだけで「画面めいっぱい表示」ができちゃうんですねー:D。[size]をまとめて指定してます。cover;}あとは、上に重ねる文字が読みやすいように、header要素の::after擬似要素を使って、半透明のスクリーントーンを作って、写真の上全体を覆うように配置します。スクリーントーンの模様は、background-imageプロパティで円形グラデーションを描画することができるradial-gradient()関数を使って作っています。ページタイトルはヘッダーの中央に絶対配置、ライセンス表記は写真の右下に絶対配置。1;を指定しておくのも忘れずに。いっちょあがり!background-imageだけHTMLで指定するヘッダー画像をCSSで指定するのはなんだか更新性に欠けるので、CSSではデフォルト画像を指定しておいて、ページごとに、background-imageだけ直接記述するようにする方が実用的かなと思います:)。コメントデータの処理方法の詳細はこちらをご覧ください。