CSS活用で得られる7つの魅力−HTML&CSSガイド−

HTML&CSSガイド

CSSとはカスケーディング・スタイルシート(Cascading Style Sheets)の略で、HTMLで定義される「装飾部分=フォントサイズ、色、表示位置、背景など画面上のデザインやレイアウト」を別途、一括「設定」することができる機能のことです。

このページが、これから自社のホームページを作りたい方や、すでにあるホームページをリニューアルしたい方のCSSの導入などに少しでもお役立てば幸いです。

CSS活用で得られる7つの魅力!

webページにCSSを有効活用ホームページデザインにCSSを活用した場合、何が魅力なのでしょうか?代表的な魅力をピックアップしてみます。

  1. 新しいWebデザインの方法が生まれる
  2. 効果的なSEO対策になる!
  3. アクセシビリティの向上
  4. ファイルサイズの縮小化
  5. 高度な文字表現の実現
  6. 要素配置がより柔軟に
  7. 印刷やPDAも1つのHTMLで可能に

新しいWebデザインの方法が生まれる

従来の典型的なホームページは、基本的にはHTMLだけで1ページずつ完結しており、内容としてはテキストなどのコンテンツと、その表示方法を指定するタグで占められていました。ホームページを指定する表示方法には、テーブルやフレームが使われていました。CSSをホームページのデザインに切り替えることで、コンテンツとデザインを切り離し、情報が表記されているHTML文書には、レイアウトの為に使用していたテーブルタグのような情報と直接関係ないものは、記述しなくなります。こうすることにより、HTML文書に余分な情報が消え去り、構造化されたHTMLを実現できます。

Webページの形が変化

効果的なSEO対策になる−SEOには検索エンジンの理解が不可欠!

SEOとはSearch Engine Optimization=検索エンジン最適化のことをさします。構造化されたHTMLを作ることは検索ロボットにとっても解析しやすいページになり、より高いページランキングをめざすことが可能となります。

ホームページが出来上がったら、より多くの人に見てもらいたいもの!そのために、SEO対策は多くの人が注目するところです。SEO対策用に、多額の費用をかけられる企業ならいざ知らず、一般的な中小の会社や個人の場合、SEO対策に掛ける費用はそう多くは用意できないのが現実ではないでしょうか?

費用を掛けずにSEO対策する一番簡単な方法は、ホームページを表示させる為のHTMLを構造化させることです。ウェブササドットコムの制作するホームページは、Web標準に準拠した構造化されたHTMLをご提供いたします。

このページの先頭へ

アクセシビリティの向上

アクセシビリティとは、Webページから情報を得ることができるかどうかの指標です。「アクセシビリティを確保したページ」や「アクセシビリティの高いページ」を作ることで、ユーザーの障害の有無や、受信環境の違いなどに関係なく、誰でもどこからでも情報を得ることができるようになるでしょう。この場合もWebページはW3Cの標準規格に従ってページを作成することがポイントです。

最近は、インターネット環境の整備に伴い、ホームページを利用してさまざまな情報やサービスを提供できる条件が整ってきました。自治体や企業などのサイトを構築する際には、W3Cの標準仕様やアクセシビリティなどを考慮したホームページ制作が、ますます重要となってきています。

CSSを効果的に使うことによって、構造的に意味のあるHTML文書を作成することが可能になります。構造的サイトは音声ブラウザのようなアクセシビリティの必要な端末にも有効です。アクセシビリティの向上により、より多くのユーザーがあなたのサイトに訪れやすくなるというわけです。

ファイルサイズの縮小化

CSSを使うことによってファイルサイズを小さく、ダウンロード時間を短縮できページの表示速度が速くなります。一見同じサイトに見えるページでも、従来のテーブルを使った方法のホームページとテーブルを一切使わないCSSデザインではサイトの中身はまったく違います。

テーブルを使ったWebサイトとテーブルを使わないCSSデザインのWebサイトでは、そのソースコードを比べるとCSSデザインのWebサイトはそのソースコードが非常にシンプルで見やすくなります。実際のサンプルページを今準備中です。

実際にテーブルデザインからCSSデザインに変えると、ファイルサイズは40〜60%程度落とすことができると言われています。これだけの違いがあると、ページの表示速度にも影響がありますし、大きなサイトになればなるほど、ファイルの転送量やサーバーの負荷にも違いが出てくるでしょう。

このページの先頭へ

高度な文字表現の実現

フォントサイズをより細かく指定できるようになり、行間や文字幅など可読性の向上や、影をつけた文字デザインが可能になります。

要素配置がより柔軟に

テーブルデザインでは不可能だった階層での場所指定が可能です。要素を重ね合わせたり、HTMLの記述順とブラウザで表示させる位置を違った形で表示させるなど、ピクセル単位で細かく指定できるようになります。

印刷やPDAも1つのHTMLで可能に

CSSを使えば、印刷用ページ、PDA専用ページなどのように作り分ける必要がなく、1つのHTMLファイルで表現が可能になります。

上記以外にも、CSSで表示部分を取り除いたHTMLは、データを将来もそのまま利用できるというメリットもあります。規格に従って適切に作られたデータは、将来性も確保でるのです。CSSはこのように実用的な魅力がいくつもあり、ホームページを作成するときには、ぜひ活用したい技術です。

ホームページにCSSを活用するにあったの現実問題

魅力がたくさんあるCSSですが、実際にホームページに活用する為には、クリアしなければならない問題もあります。次ページCSSの現実では、その問題点をご説明いたします。

ウェブササドットコムは、お客様の「ホームページを自分で作る」を応援しています! ホームページ作成支援サポートを受けながら、安心してホームページ作成を進めることができます。

ウェブササドットコムはホームページにCSSを有効活用

ウェブササドットコムはホームページ制作にCSSを有効活用することにより、HTML構造からデザインを切り離しCSSの持つ魅力をお客様のサイト制作に活かします。

このページの先頭へ