注目の記事 PICK UP

リセットCSSとは何か-WEB制作の基礎

Last Updated 2021.02.06

WEB制作の基礎リセットCSSとは何か

18-resetcss-header
WEB制作のデザインの現場では当たり前ですが、WordPressで初めてWEBサイトを開設したばかりの方は馴染みがないと思われるのがCSSのデザインのリセットという考え方です。CSSとはWEBサイトのページのデザインの部分をカスタマイズできるコードなのですが、HTML 5およびCSS 2.0規格が制定された頃からどのブラウザ・どのPCやモバイル端末でも見た目を統一するため、デフォルトのHTML要素のデザインをリセットするという考え方が広まりました。これがリセットCSSというものの考え方・概念です。

CSSのリセットとは何か

ブラウザで表示するWEBサイトのページには、HTMLのタグによってどう表示するか例えばH1タグでしたら文字は大きく太字にする、inputタグではブラウザによってボタンのデザインが違うなど、ブラウザによってHTMLを解釈した時デフォルトのデザイン・レイアウトが設定されています。このデフォルトのデザイン・レイアウトは、WEBデザインをしていく過程でChromeでは意図した通りのデザイン・レイアウトで表示されていますが、FireFoxやSafariではボタンのデザインが違う、H1タグのフォントのデザイン・レイアウトが崩れている等、WEBデザインをしていく上でクロスブラウザで意図した通りに表示するという前提が崩れる要因となりやすいです。このクロスブラウザで意図した通りにWEBデザインを表示させるために、CSSで各HTMLタグのデザイン・レイアウトをリセットするというところから名付けられたのがリセットCSSというものです。

リセットCSSは世界中で公開されています

リセットCSSは世界中で開発されていて、無償で公開されているものが多いです。
その中でもWEB制作の現場で、メインとして使われている有名なものを紹介します。

HTML5 Doctor Reset CSS

現在のHTML規格、HTML規格 5に対応したリセットCSSです。
WEB制作の現場で数多く採用されているリセットCSSだと言われています。

特に癖が無く、こだわりが無ければこのリセットCSSをベースにしてCSSのデザインを構築していくのがおすすです。
リセットCSSのダウンロードページは下記リンクにあります。

YUI yahoo CSS RESET

Yahoo!が開発したリセットCSSで、上記のHTML5 Doctor Reset CSSなどと並ぶくらい有名なものです。

コードはWEB上には公開されておらず、WEBサーバーに置いてあるCSSファイルを読み込むように公式では推奨しています。
しかし、公開されているWEBサーバーがhttpなため、httpsが主流となっているWEBサイトではブラウザ上でセキュリティの警告が出る可能性があり、おすすめできるものではありません。
できれば、hrefで読み込まれているCSSファイルを開いてソースをコピーして自サイトのCSSに組み込むのがいいでしょう。

その他のリセットCSS
  1. Universal Selector Reset
  2. Normalize.css
  3. ress.css
  4. Reboot.css

上記のリセットCSSは、CSSで各要素をリセットしつつもデフォルトでデザイン・レイアウトを少し追加しているものです。
シンプルにCSSでHTML要素のデザイン・レイアウトをリセットしているものでは無いことに注意が必要です。

リセットCSSの使い方

WEB制作の現場では、上記で紹介したHTML5 Doctor Reset CSSを採用してWEBデザインの案件毎に追加でリセットする要素を加えてアレンジして使用している場合が多いようです。当サイトのテーマでもリセットCSSは採用されていて、各HTML要素の初めにリセットCSSのコードの記述があります。

リセットCSSを理解することで、各種ブラウザの個性を知ることができWEBデザインの幅が広がることでしょう。WEBデザインの幅を広げるため、HTMLコーディングの効率化のため、色々と用途はありますがリセットCSSを知っておくと余計なCSSコードを書く必要がなくなり便利です。気になった方はHTML5 Doctor Reset CSSを使って各HTML要素のデザイン・レイアウトを、Chrome・FireFox・Safari等クロスブラウザでの挙動をテストしてみるといいと思います。

Chromeブラウザの機能でiPhoneやAndriodフォンの端末をエミュレートしてモバイル端末でWEBサイトを表示できる機能があります。この機能を使う事でレスポンシブデザインのレイアウトの確認をすることができます。

関連記事

  1. 07-wordpressfirst-aicache

    新しいブロックエディターが使いづらい。そんな時はClassic Editor

  2. 05-03-aboutsxo-header

    SXO検索体験最適化とは何か?-SEOの次世代のSEO対策

  3. 26-gdpr-header

    GDPRに対応して個人情報保護法やEU圏のユーザー個人情報を保護する

  4. 28-consumerbehavior-header

    消費者行動モデル-AIDMA・AISAS・VISAS複雑化するコミュニケーション経路

  5. 23-revealids-header

    投稿一覧をID順で並べ替えるプラグイン-Reveal IDs

  6. 19-chromedev-header

    ChromeでPCからモバイル端末をエミュレートして表示する方法

  7. 12-wordpressfirst-header

    AMP for WPのイントールと詳細設定の方法

  8. 24-polylang-header

    PolylangとLingotek Translationで自動翻訳した多言語サイトを構築する

  9. 05-05-sxomarketing-header

    SXO検索体験最適化を実現するためには-2022年からのSEO対策

特集記事

  1. 05-05-sxomarketing-header SXO検索体験最適化を実現するためには-2022年からのSEO対策
  2. 13-wordpressfirst-aicache AMP for WPの詳細設定方法-Design(デザイン)
  3. 05-wordpressfirst-aicache WordPressをインストールして最初にやる設定-パーマリンク設定
  4. 34-bigdata-header GDPR対応について-WordPressをGDPR&CCPAに対応する
  5. 17-postandpage-header WordPressの投稿ページと固定ページの違い
  6. 19-chromedev-header ChromeでPCからモバイル端末をエミュレートして表示する方法
  7. WordPressをインストールして最初にやる設定-一般設定
  8. 12-wordpressfirst-header AMP for WPのイントールと詳細設定の方法
  9. 24-polylang-header PolylangとLingotek Translationで自動翻訳した多言語サ…
  10. 29-complianzgdpr-header 英国のGDPRはさらに厳しい-Complianz GDPR&CCPA Cooki…

PICK UP記事

  1. 16-onamae-header お名前.comのドメインのDNS設定をする-コアサーバー連携
  2. 10-wordpressfirst-header Jetpackプラグイン-Facebook・Twitter連携WEB高速化多機能…
  3. 13-wordpressfirst-aicache AMP for WPの詳細設定方法-Design(デザイン)
  4. 18-resetcss-header リセットCSSとは何か-WEB制作の基礎
  5. 11-wordpressfirst-aicache モバイルユーザビリティを向上させるAMPとは何か?
  6. 26-gdpr-header GDPRに対応して個人情報保護法やEU圏のユーザー個人情報を保護する
  7. 34-bigdata-header GDPR対応について-WordPressをGDPR&CCPAに対応する
  8. 08-wordpress-head WordPressの簡単セットアップ方法-コアサーバー(CORESERVER)
  9. 20-marketing-header マーケティングの定義-消費者志向から価値主導のマーケティングへ
  10. 09-wordpressfirst-aicache Site Kit by GoogleでGoogleサービスと連携する

Twitter

最近の記事

  1. 17-postandpage-header
  2. 02-02-csspseudoclass-header
  3. 35-newthemeupdate-header
  4. 05-03-aboutsxo-header
  5. 05-05-sxomarketing-header
  6. 29-complianzgdpr-header
  7. 30-wpsitemap-header
  8. 28-consumerbehavior-header
  9. 34-bigdata-header
  10. 26-gdpr-header

おすすめ記事

  1. 17-postandpage-header
  2. 30-wpsitemap-header
  3. 24-polylang-header
  4. 05-03-aboutsxo-header
  5. 22-recaptcha-header
  6. 12-wordpressfirst-header
  7. 21-marketing-header
  8. 05-05-sxomarketing-header
  9. 29-complianzgdpr-header
  10. 04-wordpressfirst-aicache
PAGE TOP