注目の記事 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. 11-wordpressfirst-aicache

    モバイルユーザビリティを向上させるAMPとは何か?

  2. 23-revealids-header

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

  3. 13-wordpressfirst-aicache

    AMP for WPの詳細設定方法-Design(デザイン)

  4. 26-gdpr-header

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

  5. 12-wordpressfirst-header

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

  6. 17-postandpage-header

    WordPressの投稿ページと固定ページの違い

  7. 34-bigdata-header

    GDPR対応について-WordPressをGDPR&CCPAに対応する

  8. 28-consumerbehavior-header

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

  9. 24-polylang-header

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

特集記事

  1. 22-recaptcha-header スパムコメントをシャットアウトreCAPTCHAサービスとInvisible r…
  2. 03-wordpressfirst-aicache WordPressをインストールして最初にやる設定-表示設定
  3. 26-gdpr-header GDPRに対応して個人情報保護法やEU圏のユーザー個人情報を保護する
  4. 13-wordpressfirst-aicache AMP for WPの詳細設定方法-Design(デザイン)
  5. 21-marketing-header マーケティング調査・戦略・プログラム立案・実行・管理の流れ
  6. 05-wordpressfirst-aicache WordPressをインストールして最初にやる設定-パーマリンク設定
  7. 20-marketing-header マーケティングの定義-消費者志向から価値主導のマーケティングへ
  8. 19-chromedev-header ChromeでPCからモバイル端末をエミュレートして表示する方法
  9. WordPressをインストールして最初にやる設定-一般設定
  10. 17-postandpage-header WordPressの投稿ページと固定ページの違い

PICK UP記事

  1. 30-wpsitemap-header WP Sitemap Pageでユーザーフレンドリーなサイトマップを生成する
  2. 13-wordpressfirst-aicache AMP for WPの詳細設定方法-Design(デザイン)
  3. WordPressをインストールして最初にやる設定-一般設定
  4. 02-wordpressfirst-header WordPressをインストールして最初にやる設定-投稿設定
  5. 03-wordpressfirst-aicache WordPressをインストールして最初にやる設定-表示設定
  6. 17-postandpage-header WordPressの投稿ページと固定ページの違い
  7. 05-wordpressfirst-aicache WordPressをインストールして最初にやる設定-パーマリンク設定
  8. 06-wordpressfirst-header SiteGuard WP PluginでWordPressの不正ログインを防止す…
  9. 04-wordpressfirst-aicache WordPressをインストールして最初にやる設定-ディスカッション設定
  10. 26-gdpr-header GDPRに対応して個人情報保護法やEU圏のユーザー個人情報を保護する

Twitter

最近の記事

  1. 30-wpsitemap-header
  2. 28-consumerbehavior-header
  3. 34-bigdata-header
  4. 26-gdpr-header
  5. 25-marketing-header
  6. 24-polylang-header
  7. 23-revealids-header
  8. 22-recaptcha-header
  9. 21-marketing-header
  10. 20-marketing-header

おすすめ記事

  1. 28-consumerbehavior-header
  2. 20-marketing-header
  3. 06-wordpressfirst-header
  4. 13-wordpressfirst-aicache
  5. 34-bigdata-header
  6. 26-gdpr-header
  7. 21-marketing-header
  8. 03-wordpressfirst-aicache
  9. 11-wordpressfirst-aicache
  10. 19-chromedev-header
PAGE TOP