frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

bodyに充てるべきcss2017

スポンサードリンク


スポンサードリンク


bodyに充てるべきcssサイト全体を左右するのでとても重要です。

自分が充てているcssは以下です。
(あくまでも一例)

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    font-family: "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fff;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 320px;
}

margin: 0;padding: 0;

余白を消すための指定です。

font-size: 16px;

ベースとなるフォントサイズです。
人によってはemやremを使用します。

-webkit-text-size-adjust: 100%;

スマホを横向き(ランドスケープ)にした場合、文字が拡大されるのを防ぎます。

font-family

ゴシック指定のsans-serifを指定するのを忘れないようにします。詳細は下記の記事がわかりやすいです。

CSSのfont-family指定に関する考察 2014年版 | セブンシックス

color:#333;

ベースの文字色を指定します。

line-height: 1.6;

ベースの行間を指定します。

相対的な指定になるように単位はつけません。

background-color: #fff;

ベースとなる背景色を指定します。

word-wrap: break-word;overflow-wrap: break-word;

urlなどの英数値の羅列が折り返すようにします。
こちらを指定しないと幅を越してしまいます。

またリンク、リスト、テーブルなどのモジュールにword-break: break-all;を指定します。
なぜならdisplay:table、display:table-cellを指定した場合word-break: break-all;を付け加えないと
こちらも折り返さないからです。

詳細は下記の記事がわかりやすいです。
word-breakとword-wrapはややこしい

min-width: 320px;

こちらはリテラシーの低めのお客さん対策です笑

何度かブラウザを320px未満に幅を狭められ、崩れたと指摘されるため
bodyにmin-width: 320px;を指定すればその指摘は皆無です。

もちろんスマホの幅は最少320pxなので320px未満の崩れを修正する必要はありません。