LoginSignup
16
13

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