Navigation

日本の人気サイトから考察するCSSまとめ


TAKAHIRO YAMADA
@rural_web
日本の人気サイトから考察するCSSまとめ

自分的に「有名」だと思われるサイトで使われてるCSSまとめ。順不同で、特に意味はない。思いついたサイトだけなので、比較表に加えたほうがいいサイトがあったら知りたい。思った以上に面倒くさいので暇なときに更新中。一部スマホはごちゃごちゃするので割愛。

font-family(font)

Google ニュース 400 15px/20px Roboto,RobotoDraft,Helvetica,Arial,sans-serif
Yahoo! JAPAN MS PGothic,Arial,Hiragino Kaku Gothic ProN,Osaka,sans-serif
Amazon ‘Hiragino Kaku Gothic Pro W3′,’Hiragino Kaku Gothic ProN’,Meiryo,sans-serif
Facebook Helvetica, Arial, “hiragino kaku gothic pro”,meiryo,”ms pgothic”,sans-serif
Twitter Arial, “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, Osaka, メイリオ, Meiryo, “MS Pゴシック”, “MS PGothic”, sans-serif
はてな Arial, Helvetica, Meiryo, “メイリオ”, sans-serif
niconico “ヒラギノ角ゴ Pro W3”, “Hiragino Kaku Gothic Pro”, “メイリオ”, Meiryo, Osaka, “MS Pゴシック”, “MS PGothic”, sans-serif
NAVER まとめ “Meiryo,”MS PGothic”,arial,sans-serif
Instagram -apple-system,BlinkMacSystemFont,”Segoe UI”,Roboto,Helvetica,Arial,sans-serif
DMM.com ‘Hiragino Kaku Gothic Pro’,’ヒラギノ角ゴ Pro W3′,’メイリオ’,Meiryo,’MS Pゴシック’,sans-serif
livedoor ‘ヒラギノ角ゴ Pro W3′,’Hiragino Kaku Gothic Pro’,’Meiryo UI’,’メイリオ’,Meiryo,’MS Pゴシック’,Arial,sans-serif
食べログ “メイリオ”,”Meiryo”,”ヒラギノ角ゴ Pro W3″,”Hiragino Kaku Gothic Pro”,”MS Pゴシック”,”Helvetica Neue”,Helvetica,Arial,sans-serif

コンテンツ最大幅(max-width)

Google ニュース 1112px
Yahoo! JAPAN 950px
Amazon 1500px
Facebook(ログイン後) 1012px
Twitter(ログイン後) 1190px
はてな 960px
niconico 976px
NAVER まとめ 1010px
Instagram(ログイン後) 600px
DMM.com 100%
livedoor 1010px
食べログ 1120px

右サイドバー幅(sidebar)

Google ニュース 304px
Yahoo! JAPAN 350px
Amazon 310px
Facebook(ログイン後) 244px
Twitter(ログイン後) 290px
はてな 300px
niconico 350px
NAVER まとめ 300px
Instagram(ログイン後) なし
DMM.com 250px
livedoor 300px
食べログ 260px

見出し(hタグ)

サイト名 PC SP
Google ニュース h1:24px
h2:未確認
h3:未確認
h1:未確認
h2:未確認
h3:未確認
Yahoo! JAPAN
(記事ページ)
h1:87.5%
h2:137.5%
h3:93.75%
h1:100%
h2:18px
h3:未確認
Amazon h1:未確認
h2:21px
h3:16px
h1:未確認
h2:15px
h3:未確認
Facebook(ログイン後) h1:14px
h2:13px
h3:12,13px
h1:12px,14px
h2:未確認
h3:14px
Twitter(ログイン後) h1:21px
h2:22px
h3:14px,18px
h1:14px
h2:未確認
h3:未確認
はてな h1:未確認
h2:80%,90%,100%
h3:80%,95%,100%
h1:未確認
h2:90%,1.1em,.6em
h3:95%,1.17em,.75em
niconico h1:100%
h2:200%
h3:100%
h1:100%,13px
h2:100%
h3:未確認
NAVER まとめ h1:100%
h2:100%
h3:16px
h1:11px,18px
h2:9px,11px
h3:未確認
Instagram(ログイン後) h1:未確認
h2:未確認
h3:未確認
h1:1.17em
h2:未確認
h3:未確認
DMM.com h1:未確認
h2:未確認
h3:未確認
h1:20px
h2:未確認
h3:未確認
livedoor h1:100%
h2:15px
h3:100%
h1:12px,17px
h2:17px
h3:14px
食べログ
(詳細ページ)
h1:2em
h2:2.2rem
h3:2rem
h1:1.2rem,1.6rem
h2:未確認
h3:1.17em

主要カラー(background/color)

※全てRGBに変換、白(#FFF)は省略

サイト名 PC SP
Google ニュース #f7f7f7
#000000
#4285f4
#757575
#f5f5f5
#e5e5e5
#262626
#659800
Yahoo! JAPAN
(記事ページ)
#0033cc
#f7f7f8
#efefef
#333333
#006ccc
#f7f7f7
#eff2f5
#333333
Amazon #232f3e
#247bbd
#37475a
#f7901e
#232f3e
#0066c0
#d1d1d1
#fba61c
Facebook(ログイン後) #4267b2
#e9ebee
#f6f7f9
#90949c
#3b5998
#243c6d
#dddfe2
#f6f7f9
Twitter(ログイン後) #1da1f2
#e6ecf0
#f5f8fa
#66757f
#1da1f2
#f5f8fa
#657786
#14171a
はてな #008fde
#52bab0
#4d4d4d
#f7f7f7
#555555
#e5e5e5
#94bf2c
#dddddd
niconico #272727
#eaeaea
#bdbfc2
#006699
#333333
#498dca
#e3a000
#13346e
NAVER まとめ #000000
#e7e7e7
#aeaeae
#f9f9f9
#f5f5f5
#000000
#e5e5e5
#49b232
Instagram(ログイン後) #fafafa
#e6e6e6
#262626
#003569
#262626
#003569
#3897f0
#e6e6e6
DMM.com #333333
#242424
#e7e7e7
#005fc0
#e0e0e0
#3b5998
#333333
#fafafa
livedoor #da0b16
#f2f2f2
#2355a5
#000000
#da0b16
#333333
#999999
#2d2d2d
食べログ
(詳細ページ)
#f3980a
#faf8f5
#797152
#0066cc
#ffaa00
#faf8f5
#797152
#0066cc
コメントを表示 (0)

Comments

CAPTCHA


関連記事

ホームページ制作

フォントサイズの単位まとめ

フォントサイズの単位「px、em、rem、%」の違いについてのまとめ。 px(ピクセル)について 押さえたいポイント モニタ画面の最小単位1ドットと同等で考えておけばいい。 環境によって左右されない絶 […]

by TAKAHIRO YAMADA
ホームページ制作

CSSでつくるボタン各種サンプル集

HTMLとCSSでつくる「ボタン」サンプル集。最近は画像ボタンよりもCSSでつくる機会が増えたので、ちょこちょこまとめてみる。基本的にレスポンシブ。困ったときにコピペでさくっと簡単に使える用。思いつい […]

by TAKAHIRO YAMADA