忘備録～Body 編～
2023年8月3日
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{～}」の設定方法はこれでいつもしております。
ではまた！
- Leonardo
- 今日は愛車の点検！ 2024年12月22日
- マーケティングについて考えること 2024年12月21日
- 冬になると手がカサカサになる… 2024年12月20日
- 転職したほうがいい？～Part.2～ 2024年12月19日
- 転職したほうがいい？ 2024年12月18日