忘備録～Body 編～

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

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

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

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

さてと、話題に戻して…

忘備録～Body 編～

Webコーディングをしていく中で、CSSの初期化のリセットスタイルを読み込ませた後の「body」の設定方法はどないしてるんか気になりますよね？

こちらのいつものパターンをいくつかご紹介しますね。

真似てもよし！

ご参考までにどうぞ！

body{
	background: #FFF;/* 初期化の背景カラー設定 */
	color: #333;/* 文字色設定 */
	display: block;
	font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;/* 表示をするフォントの種類選定 */
	font-size: 16px;/* フォントサイズ設定 */
	font-weight: 400;/* フォントの太さ設定 */
	margin: 0 auto;/* 外の余白設定 */
	padding: 0;/* 内の余白設定 */
	text-align: justify;/* 文字の位置設定 */
}

これはいつも設定しておりますが、Font-familyのフォントをGoogle Fontsを入れたいときはこういう設定をします。

body{
	background: #FFF;/* 初期化の背景カラー設定 */
	color: #333;/* 文字色設定 */
	display: block;
	font-family: Lato, 'Noto Sans Japanese', system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Arial, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;/* 表示をするフォントの種類選定 */
	font-size: 16px;/* フォントサイズ設定 */
	font-weight: 400;/* フォントの太さ設定 */
	margin: 0 auto;/* 外の余白設定 */
	padding: 0;/* 内の余白設定 */
	text-align: justify;/* 文字の位置設定 */
}

Font-familyの先頭にGoogle Fontsを入れています。

Google Fontsの読み込みスピードがいつ向上してくれるんやろうね？

こちらで、「body{～}」の設定方法はこれでいつもしております。

ではまた！