CSSスタイルの指定を無効にする(CSSスタイルを解除する)方法を現役エンジニアが解説【初心者向け】

初心者向けにCSSスタイルの指定を無効にする(CSSスタイルを解除する)方法について解説しています。ここではinitialを使った初期化の方法、記述する際の注意点についてサンプルを使って説明します。実行結果を画面上で確認しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

CSSスタイルの指定を無効にする(CSSスタイルを解除する)方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使用して初心者向けに解説します。

 

CSSについてそもそもよく分からないという方は、CSSの書き方について解説した記事をご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、Webデザイン講座のCSSカリキュラムをもとに執筆しています。

 

田島悠介

今回は、CSSに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

CSSスタイルの指定を無効にする(CSSスタイルを解除する)方法について詳しく説明していくね!

大石ゆかり

お願いします!

 

CSSスタイルの指定を無効にする方法

CSSによる装飾は様々な方法で無効にすることが可能です。

そして、CSSのスタイルを指定を向こうにする場合は、初期値または既定値を記述するしましょう。

値としては、数値の0、文字列のnone、normal、initialなどがあります。

 

initialの使い方

initialは、どのプロパティにも使用できるものであり全てを初期化できます。

しかし、初期の既定値に戻るだけであるため、初期の既定値が扱いづらい値に定められている場合は、使用する意味がありません。

また、initialの値は厳密に初期値を定めているわけではなく、あらためて初期値や既定値を参照しているため、処理の方法としては複雑になっています。

 

[PR] HTML/CSSで挫折しない学習方法を動画で公開中

initialを使用したコード

ブラウザの標準的なCSS(カスケーティングスタイルシート)には、h1タグにはあらかじめ余白が設けられています。

また、文字の大きさも101%以上に定められていることが多いのが現状です。

これらの標準的な値にinitialを使用してから、既定値として初期化することも可能です。

なお、ブラウザの標準的なCSSを全て合理的に初期化する場合は、逐一初期化を記述しなくても、すでに「リセットCSS」と呼ばれる初期化用のスタイルシートが配布されています。

注意点として、initialを使用した場合、都合が悪くなってしまう場合もあります。

例えば、ブロックレベル要素のdivタグに対して、displayの値としてinitialを指定した場合、ブロックレベル要素には戻りません。

一律、インライン要素に初期化されてしまいます。

initialの性質を使用した装飾の仕方やソースコードの解読に労力が必要となります。

そのため、ブラウザの標準的なCSSを初期化する場合は、前述のスタイルシートの使用していきましょう。

 

執筆してくれたメンター

井内洋平

TechAcademyの現役メンター。

元Web Developerで、趣味は貯金、節税対策、投資信託、株式投資、FXなど多岐にわたる。

 

大石ゆかり

CSSスタイルの指定を無効にする方法がよく分かったので良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

TechAcademyでは初心者でも、最短4週間でオリジナルWebサイトを公開できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので参加してみてください。