注目の記事 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. 19-chromedev-header

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

  2. 07-wordpressfirst-aicache

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

  3. 17-postandpage-header

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

  4. 34-bigdata-header

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

  5. 05-05-sxomarketing-header

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

  6. 24-polylang-header

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

  7. 13-wordpressfirst-aicache

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

  8. 12-wordpressfirst-header

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

  9. 30-wpsitemap-header

    WP Sitemap Pageでユーザーフレンドリーなサイトマップを生成する

特集記事

  1. 04-wordpressfirst-aicache WordPressをインストールして最初にやる設定-ディスカッション設定
  2. 13-wordpressfirst-aicache AMP for WPの詳細設定方法-Design(デザイン)
  3. 12-wordpressfirst-header AMP for WPのイントールと詳細設定の方法
  4. 11-wordpressfirst-aicache モバイルユーザビリティを向上させるAMPとは何か?
  5. 03-wordpressfirst-aicache WordPressをインストールして最初にやる設定-表示設定
  6. 21-marketing-header マーケティング調査・戦略・プログラム立案・実行・管理の流れ
  7. 19-chromedev-header ChromeでPCからモバイル端末をエミュレートして表示する方法
  8. 17-postandpage-header WordPressの投稿ページと固定ページの違い
  9. 26-gdpr-header GDPRに対応して個人情報保護法やEU圏のユーザー個人情報を保護する
  10. 02-wordpressfirst-header WordPressをインストールして最初にやる設定-投稿設定

PICK UP記事

  1. 02-wordpressfirst-header WordPressをインストールして最初にやる設定-投稿設定
  2. 30-wpsitemap-header WP Sitemap Pageでユーザーフレンドリーなサイトマップを生成する
  3. 17-postandpage-header レンタルサーバーが増強されるようです
  4. 20-marketing-header マーケティングの定義-消費者志向から価値主導のマーケティングへ
  5. 04-wordpressfirst-aicache WordPressをインストールして最初にやる設定-ディスカッション設定
  6. 28-consumerbehavior-header 消費者行動モデル-AIDMA・AISAS・VISAS複雑化するコミュニケーション…
  7. 03-wordpressfirst-aicache WordPressをインストールして最初にやる設定-表示設定
  8. 14-wordpress-aicache WordPressサイトを簡単にバックアップ&復元-UpdraftPlus&Go…
  9. 16-onamae-header お名前.comのドメインのDNS設定をする-コアサーバー連携
  10. WordPressをインストールして最初にやる設定-一般設定

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. 08-wordpress-head
  2. 16-onamae-header
  3. 02-wordpressfirst-header
  4. 05-wordpressfirst-aicache
  5. 26-gdpr-header
  6. 07-wordpressfirst-aicache
  7. 23-revealids-header
  8. 20-marketing-header
  9. 12-wordpressfirst-header
PAGE TOP