概要
HTMLのheader要素内に固定メニューを配置する。左端にロゴ画像を置き、メニューは右寄せで配置する例。
HTML/CSS
HTML
ヘッダーにdiv要素によるロゴ画像とulによるメニューを配置し、スタイルはCSSで設定する。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ヘッダーメニュー</title> <link rel="stylesheet" href="header_menu.css"> </head> <body> <header> <div class="header_logo"></div> <ul class="header_menu"> <li>新規作成</li> <li>編 集</li> <li>プロフィール</li> <li>ログアウト</li> </ul> </header> </body> </html> |
CSS
header内のロゴとメニューブロックをFlex-boxで配置し、左右に寄せている。メニューリストの水平配置にもFlex-boxを使っている。
なおheaderを固定してbodyのみをスクロールさせることもできる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */ :root { --header-height: 50px; } /* スタイルをリセット */ * { margin: 0; padding: 0; } header { display: flex; justify-content: space-between; height: var(--header-height); background-color: #8ef } .header_logo { background-image: url('logo_org_simple_transparent.png'); background-repeat: no-repeat; background-size: contain; width: calc(var(--header-height) * 2); height: var(--header-height); } .header_menu { display: flex; list-style: none; } .header_menu li { display: flex; align-items: center; justify-content: center; margin: 10px 0px 10px 5px; width: 90px; font-size: 14px; color: #c00; } .header_menu li + li { padding-left: 5px; border-left: 1px solid black; } |
- 最初のブロックでスタイルをリセット。
header要素display: flex指定でコンテンツ(ロゴ、メニューブロック)をフロートさせて配置justify-contentで2つのコンテンツを左端と右端に寄せる- 高さを指定
.header_logodiv要素に背景画像を指定
.header_menu- Flex-boxによりリストを横並びにしている
.header_menu li- 最初の3行はリストの中の文字を縦横センタリングする設定
.header_menu li + li- 隣接セレクターによってリストアイテムの間に境界線を描いている
ロゴのサイズについて
- div要素で背景画像のみを表示させるときは
width/heightを明示的に設定しなければならない - 当初は
height: 100%でheaderの高さに合わせ、width: autoで表示されていた - ところがそこで親の
headerにdisplay: flexを設定すると表示が消えてしまった - そこでここでは、グローバルなカスタムプロパティーを使っている
Rails/SCSS
HTML
- 通常すべてのレンダリング時に使われる共通レイアウト
app/views/layouts/application.html.erb
- これとは別にヘッダーメニューが必要な場合の共通レイアウトファイルを作成
app/views/layouts/application_with_header.html.erb
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <title>Styles</title> <%= csrf_meta_tags %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_include_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <header> <div class="header_logo"></div> <ul class="header_menu"> <li>新規作成</li> <li>編 集</li> <li>プロフィール</li> <li>ログアウト</li> </ul> </header> <body> <%= yield %> </body> </html> |
ヘッダーメニューが必要なアクションのみこのレイアウトを使うため、コントローラーでレイアウトファイルを指定。
|
1 2 3 4 5 6 7 |
class PagesController < ApplicationController ..... def header_menu render layout: "application_with_header" end ..... end |
レイアウトファイルが読み込むスタイルシートは標準と同じapplication.css
|
1 |
*= require layout.scss |
requireされるlayout.scssで、ヘッダーメニュー用のSCSSを読み込む(ヘッダーメニューがない場合も読み込む)。
|
1 2 3 4 5 |
@import "reset.scss"; @import "header_menu.scss"; @import "pages.scss"; |
SCSS
以下のSCSSファイルを作成して読み込ませる。リセットCSSは別に読み込んでいる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/* CSS内共通のカスタムプロパティー：ヘッダーの高さ */ :root { --header-height: 50px; } header { display: flex; justify-content: space-between; height: var(--header-height); background-color: #8ef } .header_logo { background-image: image-url('logo_org_simple_transparent'); background-repeat: no-repeat; background-size: contain; width: calc(var(--header-height) * 2); height: var(--header-height); } .header_menu { display: flex; list-style: none; li { display: flex; align-items: center; justify-content: center; margin: 10px 0px 10px 5px; width: 90px; font-size: 14px; color: #c00; &+li { padding-left: 5px; border-left: 1px solid black; } } } |