HOMEWebの間のコラムCSSCSSの修正時に影響範囲を限定させる方法CSSの修正時に影響範囲を限定させる方法CSS修正する時にHTMLとCSSのどちらを修正するべきか明確にルール化しておくと後工程でスムーズに進められます。修正時に困ってしまうのがCSSの内容を把握しなければならない時です。CSSの行数が1万もあると内容を把握するだけで一苦労です。フォントサイズを修正するだけで数時間かかってしまうこともあります。HTML・CSSをわかりやすく構築しておくと後が楽です。修正することを前提とした設計ができると数ランク上のコーディングとなります。(再掲載)HTMLを修正する、CSSを修正する、HTML・CSS両方とも修正するWebサイトはコーディング方法によって修正時のスピード感が変わります。修正がある場合、主にテキスト修正と見た目の修正と2パターンとなるでしょう。この場合、弊社では次のような修正で済むのが理想と考えます。対して見た目の修正でHTMLの修正が必要なコーディングの場合、次のような問題が生じます。修正対象が複数ある場合、修正箇所もその分増えてしまう修正後に設定したい内容がCSSに存在していない場合、HTMLとCSSの両方修正が必要となる運用フェーズでは対応箇所が少ない方がスピード感もありますし、ミスの可能性も減ります。コーディングは修正時の対応も踏まえて設計すべきです。CSSパーツ化のデメリットCSSをパーツ化することで一つの設定を色々な箇所で使用することができます。文字サイズや文字色を設定ごとに用意しておく形です。{font-size:16px;}文字サイズを14pxから16pxへ変更指示があったとします。class=“fs14”>テキスト</p>HTMLに記述されているPタグのCLASSを次のように変更します。class=“fs16”>テキスト</p>すると文字サイズが16pxになります。修正箇所が複数あった場合は全て修正する必要があります。対してCSSを変更するというやり方もあります。class=“fs14”>テキスト</p>CSSの記述内容を次のように変更します。{font-size:16px;}こうすると「class=“fs14”」で設定されている箇所が全て16pxに変更できます。複数箇所を一括で変更できることがメリットなのですが、「class=“fs14”」なのに文字サイズが16pxとなるのでわかりづらくなります。HTML・CSS両方を修正するとなると修正ステップが増えるので手間が多い運用となります。CSSをパーツ化するというのは大局的に考えて運用しづらい構成であると弊社は考えています。CSSをパーツ化すると普段使用しないCSSも記述することになるのでファイルサイズが肥大化しがちです。不要な記述はしない方が運用効率が良いと経験から考えます。CSSの範囲指定(子孫セレクタ)とはCSSは設定次第で対象を限定させることができます。その一つ、子孫セレクタは使用頻度が高いです。子孫セレクタとは次のような設定です。{color:rgb(0,0,255);}Pタグ内のSPANタグだけ色が青になります。これを#wrapper内に限定させると他の要素内には影響しなくなります。{color:rgb(0,0,255);}子孫セレクタを使用すると読み込みが若干遅くなります。CSSの影響範囲を限定させた方が管理しやすくなるので、弊社は子孫セレクタの使用を選択します。修正時に素早く対応できるCSS設定とはCSSの影響範囲を限定させておくと修正時に該当ページ以外を気にする必要がなくなります。対象箇所だけ考えれば良いので修正スピードを速めることができます。新規ページを追加する時も既存設定を気にする必要がなくなります。したことですが、この差も大きいです。わかりやすさと対応スピードの観点から、弊社ではCSSは子孫セレクタを多用して構築します。SEOやWebサイト構築実績多数。ECサイトのカスタマイズ経験も多数あり。会社概要はこちら「ECサイトをより便利にしたい」「もっと集客したい」ECカスタマイズはお任せくださいECサイトのカスタマイズについてCSSの修正時に影響範囲を限定させる方法の関連記事[2018年版]リセットCSS(reset.css)の設定方法で変わる表示速度とSEO対策についてリセットCSSかノーマライズCSSなのかは制作者で考え方が変わります。弊社はCSSはリセットしてから再設定をします。理由はHTMLタグを文字サイズや余白で選択しないためです。そのため、文字サイズの指定や余白は細かくなりがリセットCSSとNormalize.cssの使い分け方とは?最初に言うと弊社は独自のリセットCSSを使用しています。これは文字サイズ、余白(margin、padding)を細かく設定することが多いので、デフォルトでは何も効いていない状態の方が管理しやすいからです。Sheets(カスケーディング・スタイル・シート)」のことで、Webページの見た目を指定するための言語です。HTMLと組み合わせて使用し、HTMLタグの各要素に対して色・フォンCSSフォントサイズ指定の考え方、remとemの違いとは?Webブラウザの文字サイズはCSSのfont-sizeで指定します。この指定方法により若干挙動が異なるので注意が必要です。font-sizeで指定できる単位はこちらです。Webサイトはコーディング方法によって修正時のスピード感が変わります。修正がある場合、主にテキスト修正と見た目の修正と2パターンとなるでしょう。