スタイルシートの共通化によりWebサイト（ホームページ）のメンテナンス性向上

CSSとは

CSSとは、Cascading Style Sheetsの略称で、HTMLと同じマークアップ言語として用いられます。HTMLは、Webサイト（ホームページ）上で画像や文章等を表示させる事が出来ますが、HTMLだけではWORD文書のように、縦にズラーっと画像や文章が並んでしまうだけになってしまいます。ビジュアル的に、ここの一文は大きくして色を変える、下線をつける、画像の横に文章を並べる等、Webページの内容によって伝える側の意図をより効果的にユーザーへ伝えていくためには、デザインや装飾、レイアウトが不可欠です。CSSはそういった装飾、デザイン、レイアウトを行うために必要な言語です。

HTMLでも一部装飾が可能なタグがありますが、CSSでは装飾やレイアウトに特化している分、より幅広く装飾を行えるだけでなく、最近ではCSS3によって、アニメーションやスライド等の動きまでCSSにて実装する事が可能となりました。また、あらかじめclass名に対応するCSSの記述を施しておくことにより、モジュール的な使い方ができ、未経験の方でも当てはめるだけで簡単にレイアウトを作る事が可能です。

以前は、HTMLソースにインラインにて記述（コーディング）する事がありましたが、今ではHTMLソースファイルとは別に、レイアウト記述を統合させたCSSファイルを作成し、分けて管理する形が通常となりました。

CSSの煩雑化による悩み

しかし、Webサイトの規模が大きくなってくると、増えたページ数だけ、デザイン・レイアウトを整えるためのCSSのコーディング内容も増えてきます。それによって、Webサイトを運用する際にとてもメンテナンス性が悪くなり、最悪の場合は同じ記述を繰り返し書くような事にもなってきます。また、1つの大きなディレクトリ構造の中に、親サイト・子サイトのような構成があって、基本的なデザインが同じ場合、それぞれのサイト毎にCSSファイルを分けてしまうと、1ヵ所修正が発生したら全てのCSSファイルを修正しなければならないので、かなりの手間になります。

こういった場合は、親サイトのCSSファイルを直下の子サイト全てに読み込ませれば、1ヵ所の修正で全部のWebサイトに反映できるので、修正の手間を大きく省く事ができます。また、先述したモジュール的な使い方をうまく利用し、よく使う汎用的なレイアウトを実現するCSSを記述したclassを用意し、整理したCSSファイルを親サイトから子サイト全体に読み込ませれば、HTMLやCSSを知らない方でも、用意したclass名を部品のようにHTMLソースに当てはめるだけで簡単にレイアウトを作っていけるので、この方法は保守・更新における煩雑化の解消に貢献します。

また、コメントアウト等を使って、CSSファイル内の記述をテーマ・カテゴリ毎に分けると、コードが見やすくなり、Webサイト全体を容易に把握できるため、CSSファイルの記述の整理を行う事はとても重要です。

CSSの整理を実際に行う（メンテナンス）

自社のコーポレートWebサイト（ホームページ）は、Movable TypeというCMSで構築、運用されており、先述した親サイトの下にいくつかの子サイトがある構成となっております。近年HTML5・CSS3が主流になってきたことに伴い、デザインの変更やソースの記述の変更、新たな子サイトの制作・細分化等を行う事で自然とCSSの記述が増え、煩雑化していきました。大きく影響する事はなかなか無いですが、CSSファイルの記述量が増える事は、Webサイトの読み込み速度を遅くする原因の一つになります。Webサイトの読み込みが遅くなると直帰率が上がり、検索順位にも影響してくることになるので、CSSファイルの軽量化を行うためにも、無駄な記述を極力減らしていく事は必要な事でした。

私たちは具体的にCSSを整理するために、以下の事を行いました。

• 子サイト間を1つの共通のCSSの読み込みに統一
• 古いCSSの記述を取り除き、コメントアウトを効果的に使いカテゴリ毎に整理

それまでは、子サイト一つ一つのディレクトリ内にCSSファイルが存在し、それぞれコーディングを行うというメンテナンス性の悪い方法でしたが、それを1つにして共通のCSSとして読み込む事で、子サイトの修正を1ヵ所で済ませる事が出来るようになりメンテナンス性を向上する事ができました。また、古い記述を確認しながら重複しているコードを取り除き、さらにカテゴリ分けする事でCSSの軽量化を行う事ができ、また汎用的に使用するCSSのコードを探しやすくなったので、保守性・管理性が向上しました。