16
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

有名なサービスのWebページヘッダーの高さは何px?(2017年10月)

Posted at

調べる機会があったのでまとめました。
方法はPCでChromeのDeveloperツールを利用してポチポチと調べてみました。

結果

| サービス | ヘッダー高さ
※下段はモバイルページ | ロゴ(PC) | 検索窓(PC) |
|:---------|:---------|:---------|:---------|:---------|
| facebook |42px
44px |左寄せ |高さ:25px、左寄せ、ロゴとの余白5px|
| Twitter |46px
105px スクロール時36px |中央 |高さ:32px、右寄せ|
| Google |122px(64px+58px)
144px(64px+80px)|左寄せ(余白13px)|高さ:49px ロゴとの12px+|
| Apple |44px
48px |左寄せ|高さ:44px 入力時に中央寄せ|
|amazon|99px(39px+60px)
139px(44px+50+45px)|左寄せ|高さ:35px、左寄せ|
|Yahoo!Japan|137px(背景の変更箇所までは105px)
88px(34px+44px)|右寄せ|高さ:28px、左寄せ|
|楽天|68px
メインは156px(38px+77px)
47px
メインは109px(48px+61px)|左寄せ|高さ:36px、左寄せ|
|はてなブックマーク|34px
44px|左寄せ|高さ:30px、ヘッダーになし|
|Naverまとめ|44px
45px|中央寄せ|高さ:26px、左寄せ|
|Airbnb|106px(64px+42px)
106px(64px+42px)|左寄せ|高さ:40px、左寄せ|
|UBER|86px
63px|中央寄せ|検索なし、アカウント名の高さ:36px|
|AWS|41px
PCページのみ|左寄せ|検索なし、アカウント名の高さ:16px|
|HEROKU|50px
50px|左寄せ|高さ:34px、中央寄せ|
|Microsoft Azure|40px
PCページのみ|左寄せ|高さ:28px、中央寄せ|
|Google Cloud Platform|48px
48px|左寄せ(最左部はハンバーガーメニュー)|高さ:36px、中央寄せ|
|Salesforce|90px(50px+40px)
44px|左寄せ(余白16px)|高さ:34px、左よりの中央|
|Firebase|48px
48px|左寄せ(余白20px)|検索なし、アカウント名の高さ:32px|
|Google Drive|48px
56px|左寄せ(余白24px)|高さ:46px、中央寄せ|
|Google Analytics|64px
PCのみ|左寄せ|検索なし、アイコン領域の高さ:48px|
|Twitter Bootstrap(navbar)|56px
56px|左寄せ|高さ:38px、右寄せ|
|React|60px
40px|左寄せ|高さ20px、右寄せ|
|Slack|53px(チャンネル内のHeader)
アプリのみ(ページヘッダーは70px)|左寄せ(チャンネル名)|高さ:34px、右寄せ|
|Todoist|44px
40px|左寄せ|高さ:28px、中央寄せ|
|GitHub|54px
86px(50px+36px)|左寄せ|30px、左寄せ|
|Stack Overflow|57px
44px|左寄せ|高さ:36px、左寄せだが中央あたりに表示|
|Qiita|48px
48px|左寄せ|33px|

##確認時のページURL

サービス URL
facebook https://www.facebook.com/
Twitter https://twitter.com/
Google https://www.google.co.jp/search?q=header
Apple https://www.apple.com/
amazon https://www.amazon.co.jp/
Yahoo!Japan https://search.yahoo.co.jp/search?p=header
楽天 トップページカテゴリページ
はてなブックマーク http://b.hatena.ne.jp/
Naverまとめ https://matome.naver.jp/search?q=XXX ※検索ページ
Airbnb https://www.airbnb.jp/
UBER https://riders.uber.com/trips
※ログイン後ページ
AWS https://ap-northeast-1.console.aws.amazon.com/console/home
※ログイン後ページ
HEROKU https://dashboard.heroku.com/apps
※ログイン後ページ
Microsoft Azure https://portal.azure.com/#dashboard/
※ログイン後ページ
Google Cloud Platform https://console.cloud.google.com/home/dashboard
※ログイン後ページ
Salesforce https://XXX.lightning.force.com
※ログイン後ページ
Firebase https://console.firebase.google.com/u/1/project/
※ログイン後プロジェクトページ
Google Drive https://drive.google.com/drive/u/1/my-drive
※ログイン後ページ
Google Analytics https://analytics.google.com/analytics/
※ログイン後ページ
Twitter Bootstrap(navbar) http://getbootstrap.com/docs/4.0/examples/starter-template/
React https://reactjs.org/
Slack https://XXXXX.slack.com/messages/
※ログイン後ページ
Todoist https://todoist.com/app
※ログイン後ページ
GitHub https://github.com/
※ログイン後ページ
Stack Overflow https://stackoverflow.com/
Qiita https://qiita.com/
16
13
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?