[基礎編] コーディングの基礎 cssのリセット | 中国短期大学情報ビジネス学科メディア科目ブログ WEBCRE8TOR.COM

この記事の目次

1 cssリセット
- 1.1 レイアウト崩れはブラウザ独自のcssが原因であることが多い。
  - 1.1.1 レイアウト崩れの代表的な例・・・marginとpaddingの余白
- 1.2 cssを使ってブラウザ独自のcssをリセットする。
2 結論:授業で使用しているcssリセット

cssリセット

レイアウト崩れはブラウザ独自のcssが原因であることが多い。

以前、ブラウザによるhtmlとcssの解釈の違いがあり、
それが原因でレイアウト崩れを起こしたり、使えない機能があると話しました。

これは、Google ChromeやEdgeなどのブラウザが、独自のcss(以下:ブラウザcss)をすでにブラウザに設定しており、
自分が書いたcssの設定が、そのブラウザcssに影響を受けてしまうことが原因です。

そのため制作時に自分がテストしていたブラウザ以外では期待通りの表示がされず、
レイアウトが崩れたり、動画が再生されなかったり、アニメーションが動かなかったりしてしまうんです。

レイアウト崩れの代表的な例・・・marginとpaddingの余白

代表的なものを例に挙げます。

コーディング経験の浅いデザイナーがだいたい最初に困るのが、
要素の内側と外側の幅、そして外枠線のサイズ計算の解釈の違いです。

cssで頻繁に使うプロパティで、

「指定要素と周りの要素との間の距離であるmargin」、
「指定要素の内側の余白の距離であるpadding」、
「指定要素の外側の枠線であるborder」

というものがあります。
「h1」タグを使って説明します。

htmlファイル

<html>
  <h1>ウェブデザインA</h1>
</html>

次にcssで以下を記述し指定を行います。

cssファイル

h1 {
  width: 200px; /* width・・・ボックスの幅 */
  height: 200px; /* height・・・ボックスの高さ */
  margin: 20px; /* margin・・・ボックスから周りの要素までの上下左右距離 */
  padding: 20px; /* padding・・・ボックスの内側の上下左右の余白の距離 */
  background-color: yellow; /* background-color・・・ボックスの背景色 */
  border: 1px solid red; /* border・・・ボックスの外枠線の太さや形状や色 */
}

このように記述すると、Google ChromeやFirefox、Safariなどのモダンブラウザ(Web標準の技術を採用したブラウザ)ではこう表示されます。