ご相談・お問い合わせご相談・お問い合わせ 電話0120-800-804

ホームページの高速表示にも影響?CSSのショートハンドプロパティについて

Webサイト
ホームページの高速表示にも影響?CSSのショートハンドプロパティについて

ホームページの表示速度は、お客さまの満足度向上のためにも、検索エンジンからの評価の向上のためにも、是非とも取り入れたい改善施策です。ホームページの表示速度に関係する要素としては、画像やJavaScriptの読み込み、キャッシュの設定など、さまざまなものがありますが、CSSが表示速度に影響することは意外と見落とされがちな要素です。

確かに、テキスト情報で構成されているCSSはファイルサイズとしては、画像などのリソースと比べると軽量なデータかもしれません。しかし、ブラウザの解釈のスピードという側面を考えると、しっかり考慮して書くことで、結構な差が付く場合があるのです。

CSSを簡潔に書くことでブラウザのレンダリング速度を速める

各社が展開しているInternet Explorer、Google Chrome、FireFoxなどのブラウザは、それぞれCSSを解釈して、ホームページを装飾するというシステムが搭載されています。

このCSSの解釈の仕方が、各ブラウザで微妙に違うがために、あるブラウザで正常に表示されているけれどもあるブラウザでは崩れてしまっているというような事態がおこりがちなのですが、これはまた別の話。(クロスブラウザ対応と呼びます)

今回の焦点であるCSSの解釈のスピードという観点からいうと、基本的に書かれているものの上から読み込み、一行ごとに適用するかしないかを判断するため、CSSは短ければ短いほどレンダリング速度が短くなるというのはどのブラウザでも共通です。
しかし、クライアントやお客さまが満足するデザインを実現するためには、それなりの量のCSSを書かなくてはいけません。
また、サイトの規模が大きくなってくるとCSSの量はどうしても増加する傾向にあります。

こうした際に活用したいのが、CSSのショートハンドプロパティです。ショートハンドプロパティとは、たとえば以下のようなものを指します。

background-color:#000000;
background-image:url(sample.png);
background-repeat:no-rpeat;

この3行のCSSは、このまま記述するとブラウザの解釈は3回行われることになりますが、以下のように記述することで1回に抑えることができるようになります。

background:#000000 url(sample.png) no-rpeat;

CSSショートハンドプロパティをマスターするとコーディングの効率化にもつながる

CSSショートハンドプロパティを覚えて実際に実装することは、ホームページの表示速度向上につながるだけでなく、単純にタイプ量が少なくなりますので、コーディングの効率が良くなります。

ただし、世の中のCSSを扱うエンジニアのみんながみんなショートハンドプロパティを熟知しているわけではありませんので、複数人が所属しているプロジェクトでは、逆に足かせとなってしまう場合もあります。
自身のコーディングスタイルと周りのコーディングスタイルの歩調をあわせたり、ショートハンドプロパティについて啓蒙活動をおこなったりすることが必要になる場合もあるでしょう。

CSSショートハンドプロパティの具体例について

上記で挙げた背景に関するCSS以外にも、以下のようなものもショートハンドプロパティで記述が可能です。

マージンやパディング

padding-top:5px;
padding-right:10px;
padding-bottom:5px;
padding-left:10px;

この表現は、ショートハンドプロパティを利用すると以下のように記述することができます。

padding:5px 10px 5px 10px;

もしくは

padding:5px 10px;

paddingプロパティに4つの数値を記述すると、記述した順に上から時計回りにパディングをとるという指定となります。2つ指定した場合は、最初に記述した数値が上下のパディング、後に記述した数値が左右のパディングと解釈されます。

ボーダー

border-width:1px;
border-style:solid;
border-color:#000000;

この非常にシンプルなボーダーの記述は、以下のように記述することでさらにシンプルになります。

border:1px solid #000000;

border関係のプロパティは、borderプロパティにスペース区切りで書くことで1度に指定することができるのです。

フォント

font-size:12px;
line-height:1.5;
font-weight:bold;

意外と知られていませんが、フォント関係のプロパティもショートハンドプロパティでまとめることが可能です。

font:12px /1.5 bold;

line-heightはプロパティの名前に「font」が入っていないので、一見fontプロパティで扱えないようにも思えますが、実は数値の前にスラッシュを入れることで、fontプロパティの中で解釈してくれるのです。

CSSショートハンドプロパティをうまく活用するために

ショートハンドプロパティをマスターすることで、表示速度の改善によるユーザーエクスペリエンスの向上と作業効率の向上が見込めます。
ただし、周りとの協調を意識しないと、逆にパフォーマンスを落としてしまうことがありますので、注意をするようにしましょう。

ちなみにCSSのセレクタについても、深い階層まで細かくするよりも、浅い階層を指定するシンプルなものの方がブラウザは素早くレンダリングをしてくれます。
しかし、これもショートハンドの話と同様に、周りとうまく協調しなければかえってホームページ運営の妨げとなってしまう場合があります。

こうしたことも勘案したうえで、自社のホームページにはどのような方向性がよいのかを、関係者を集めじっくり検討してみるとよいでしょう。

ReEight MAGAZINE

いいねして最新情報をチェック!

矢印アイコン
無料サイト診断サービス

WEBサイトに関してお困りなことはありませんか?

私たちは制作だけではなく、SEO、マーケティング、ブランディング、など
WEBに関して総合的な知見を持ち合わせており、
WEBサイトを最大限に活用するためのノウハウを蓄積しております。
御社が抱えている事業課題を私たちならきっと解決できると考えています。

お気軽にお問い合わせください。

フォームでのお問い合わせ

メールご相談・お問い合わせ

お電話でのお問い合わせ

電話
0120-800-804受付時間10:00〜18:00

WEBサイトに関することなら
お気軽にお問い合わせください。

フォームでのお問い合わせ

お見積り依頼やご相談・ご質問は
お問い合わせフォームをご活用ください。

メールご相談・お問い合わせ

お電話でのお問い合わせ

お急ぎの方や詳しく話を聞きたい方は
お電話ください。

電話
0120-800-804受付時間10:00〜18:00
サイトマップ プライバシーポリシー Copyright © re-eight.inc. All Right Reserved.