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

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

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

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

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

さてと、話題に戻して…

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

前日は「大手企業メーカー（一部抜粋）」のサイトの「body{～}」の設定方法をご紹介しました。

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

Apple
Microsoft
Tesla
日立製作所

Apple

body {
	background: -webkit-gradient(linear, left top, left bottom, from(#f5f5f7), color-stop(0%, #fff));
	background: -webkit-linear-gradient(#f5f5f7 var(--global-nav-collective-height), #fff 0%);
	background: linear-gradient(#f5f5f7 var(--global-nav-collective-height), #fff 0%);
}
body {
	margin: 0;
	padding: 0;
}
body{
	background-color: #fff;
	color: #1d1d1f;
	font-family: "SF Pro Text","SF Pro Icons","Helvetica Neue","Helvetica","Arial",sans-serif;
	font-size: 17px;
	font-style: normal;
	font-weight: 400;
	letter-spacing: -.022em;
	line-height: 1.47059;
}

「body」の要素がいくつか書かれているんですね。

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

Microsoft

body{
	margin: 0;
}
body {
	background-color: #fff;
	color: #000;
	font-family: "Segoe UI",SegoeUI,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 0;
}

文字色がめっちゃ黒い！

「color: #000;」

コードを見ると2つもかかれているんですね。

Tesla

body {
	display: block;
	margin: 8px;
}
body {
	margin: 0;
	min-block-size: 100vh;
	min-block-size: -webkit-fill-available;
}
body {
	background-color: #fff;
	background-color: var(--tcl-body-background-color);
	overflow-x: hidden;
	width: 100%;
}

3つの「body」を記述してたったのこれだけ？

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

いろんな大手企業が「body」の記述方法を見るとシンプルに組み立ててるんですね。

いろんな要素を生かして簡潔化にしてるんですね。

いろんなサイトや競合サイトを見て勉強をして吸収していきましょうね。

ではまた！