大手サイトの「body」の設定はどないしてる？～Part.2～

8月に入り、日にちが経ちますが…

まだまだ、猛暑日が続きますね…

水分補給もまめに取ってくださいね。

ついでに、塩分補給も忘れないようにね！

さてと、話題に戻して…

大手サイトの「body」の設定はどないしてる？～Part.2～

前日は「大手検索エンジン」のサイトの「body{～}」の設定方法をご紹介しました。

大手サイトの「body{～}」の設定はどないしてるか見ていきましょう！

トヨタ自動車WEBサイト
LEXUS
日産自動車
日立製作所

トヨタ自動車WEBサイト

body{
-o-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-webkit-font-smoothing: antialiased;
-webkit-tap-highlight-color: transparent;
-webkit-text-size-adjust: 100%;
background-color: #fff;
color: #333;
font-size: 14px;
line-height: 1.5;
text-size-adjust: 100%;
position: relative;
width: 100%;
}

見ると納得するぐらいですね。

ほかのブラウザとかいろいろ対応するようなコードが書かれていますね。

LEXUS

body{
	-webkit-tap-highlight-color: transparent;
	-webkit-touch-callout: none;
	background-color: #fff;
	color: #000;
	font-size: 16px;
	font-family: Nobel-Regular,"レクサスロダン Pro M",LexusRodinPro-M,"メイリオ",sans-serif;
	line-height: 1.6;
}

文字色がめっちゃ黒い！

「color: #000;」

しかも、企業の独特のフォントを使ってるんですね。

日産自動車

body {
	color: #666666;
	display: block;
	margin: 0;
}

たったのこれだけ？

ほかのCSSの組み立てを見るといろんな組み立てを最優先させてるんですね。

日立製作所

body {
	-o-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-webkit-text-size-adjust: 100%;
	background-color: #e5e5e5;
	color: #333;
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',Arial,Helvetica,sans-serif;
	font-size: 100%;
	line-height: 100%;
	text-align: left;
	text-size-adjust: 100%;
}

コードを見ると「%」という単位を使ってるんですね。

「font-family」の設定内容を見ると日本語が最優先で英語が最後になってますね。

いろんな大手の企業のサイトを見ると、独特性があって色々設定しているんですね。

海外のサイトはどうなんやろ？

また後日にご紹介しますね。

ではまた！