>>>HOME >>>CSSの基礎知識①
ようこそ「HP-Knowledge」へ。このホームページは、「ホームページ作成・制作」におけるHTMLとCSS(スタイルシート)の基礎知識を紹介するホームページ作成初心者向けのページです。ホームページを作るために知っておくべきHTMLとCSS(スタイルシート)の基礎知識を身につけてホームページ作成に強くなろう!

スタイルシート基礎知識①

HTMLとスタイルシートを組み合わせることで、ホームページに統一感を持たせデザイン性が増します。HTMLだけじゃなく、CSSでデザインをしてみましょう。このページではCSS(スタイルシート)の説明に入ります。HTMLと同じように最初は困難な壁がいくつもありますが、これはもう慣れるまでの辛抱。スタイルシートを有効に活用するためにがんばりましょう。

スタイルシートってナニ?

CSS(スタイルシート)とは、HTMLの文章から不要とされるテーブルタグやフォントタグなどを取り除くための解決策として開発された言語のことです。 CSSを利用する目的は、ページ内のデザインと情報を管理しやすいように分割することにあります。 HTMLで論理的にコンテンツを打ち込み、デザインはCSS側で管理したほうが訂正や更新が楽になるので、主流となっているホームページ作成方法です。 本来はHTMLだけでページを構成していましたが、これからのホームページはHTMLファイルとCSSファイルを併用することでページを構成していくことになります。初めのうちは、スタイルシートがページ全体の見栄え・デザインに大きくかかわっていることを覚えておきましょう。

スタイルシートでできること

スタイルシートを使うと具体的にはどんなことができるか解説します。 スタイルシートを使うことによって自由自在に変更できる一例として、
  • 背景に表示する画像の位置
  • 画像の表示方法
  • 画面全体の背景色
  • リンクテキストの色
  • テキストのフォントサイズ
  • テキストの行間
  • テキストの色
  • テキスト始めのインデント処理
  • 枠線の色
  • 枠線の太さ
  • 要素の表示位置
  • 要素の表示方法
・・・などが挙げられます。これら以外にもスタイルシートで管理できる効果はたくさんあり、ありとあらゆることが非常に細かく調整できるのがスタイルシートの売りです。これらを駆使すれば画像を一切使わないページだとしても、十分見栄えのあるホームページ作成がが可能です。

スタイルシートのメリット

ホームページを作るときにスタイルシートを使うと様々なメリットが得られます。 例えば、文字フォントの大きさや色、文字同士の幅や行間、表示位置を細かく設定できるだけでなく、 文字同士の重ね合わせなども表現できるのでより高度なデザインを表現することができます。 また、一度作ったデザインを違うページに適用させることもでき、同じようなページデザインならばスタイルシートを1つ作るだけで流用が可能です。 このページの流用をすることでページサイズを小さく抑えることができますし、ページ全体の配色を変えるときもスタイルシートを調整するだけで スタイルシートが適用された全ページに効果を反映させることができます。 デザインの更新・訂正が楽になるだけじゃなく、それまでHTMLファイルに書き込んでいたタグをスタイルシートでまかなうことでHTML側が整理されるので、文章の差し替え部分を見つけるのが非常に楽になります。

スタイルシートのメリット:SEO対策

ホームページ作成についてインターネットで調べるとよく出てくる単語「SEO対策」。 これはグーグルやyahooなどの検索エンジンでホームページを検索した時に、検索結果でページを上位に持ってくるための対策のことです。 スタイルシートを有効活用したページは自然とページソースが簡素化されスッキリとしたHTML文章になります。これにより、検索ロボットがページの情報を検索しやすく、また解析もしやすくなるので、ページ検索の結果でより高い順位を目指すことができるというメリットがあります。

スタイルシートの注意点

スタイルシートがどのような働きを持っていてどのようなメリットがあるのかを説明しましたが、しかしこのスタイルシートを過信するのは禁物です。 このページの説明だとまるでメリットしかないような書き方になっていますが、完全なモノがこの世にないように、スタイルシートもまた完全ではないのです。スタイルシートの欠点、それは「ブラウザによってホームページの見え方が違う」ということ。これは口で説明するより実際に作ったほうがわかりやすいとは思いますが、インターネット閲覧ブラウザの代表格である「InternetExploler」や「Firefox」など、閲覧するブラウザによってはデザインにズレが生じてしまうことがあります。これはブラウザに設定されたデータ解釈の違いから生まれるものですが、スタイルシートを使ってホームページを作成してると必ず出会うトラブルになります。IEだときちんと表示されるのにfirefoxだとメニューの位置やフォントサイズがバラバラになるなどの症状も様々です。インターネットを閲覧するソフト側の問題なので、ホームページのデザインをいくら調整してもどうにもならない部分もあります。 デザインが滅茶苦茶なホームページはまず見向きされないので、ホームページを作るときは一番普及しているIEでちゃんとに表示できるように調整して、その他ブラウザでは閲覧に支障が無い程度に調整するのがベストです。この対策に不満を持つ方もいるかも知れませんが、ホームページのデザインを現在使われているインターネットブラウザ全てで正常に表示させるのは実質不可能なので、諦めが肝心。スタイルシートを使ったホームページ作成には、ある程度妥協が必要になる部分があることを覚えておきましょう。

おすすめWEBサイト 5選

痩身エステ 池袋 人気

最終更新日:2017/8/17

Copyright(C)2008 HP-Knowledge. All Rights Reserved.