CSSを使って、見栄えの良いSEOに強いホームページ制作をしましょう

CSSを使いこなしてデザインとHTMLを分離しましょう

CSSつまりカスケーディングスタイルシートを使う意味

Cascading Style Sheets＝カスケーディング・スタイルシート・・・CSSとは: cssとは、カスケーディングスタイルシートのことで、HTML の標準化を進める W3C の勧告は、ホームページのデザインとレイアウトをHTMLと分離して記述しましょうということで、現在WEBデザイナーは、勿論、一般の人も勉強するようになりました。

つまり、HTMLには、記述内容を論理的に適切なタグで、マークアップすることで、検索エンジンに正確に迅速に伝えることが可能となり、かつデザインの部分は、CSSにて記述することにより、様々なメリットをもたらしました。また、CSSにはHTML内に直接記述していく方法と外部ファイルに記述する方法があります。一般的には、外部ファイルをCSSと呼ぶことが、多いようです。

CSSをホームページ制作に使うメリットとは、？

装飾のタグをｃｓｓに入れてしまうので結果的に検索されやすくなります
HTMLファイルの要領が軽くなりぷらプラウザの表示が早くなりユーザビリティに優れています
複数のHTMLファイルのページデザインが統一が出来ます
スタイルシートのスタイルを変更することで、複数のページのデザインを簡単に変更できます
HTMLのソースが、シンプルになり、記述が、容易にできます。
HTMLの記述を論理的に正しく記述しやすくなります。つまりSEOにつながります

全くスタイルシートつかわずに、スタイルシートを使わない表示にした場合は、見出しは、重要度が高い別順に文字が大きすぎたり、リンクが寂しかったりと見栄えが良くありません。かといって、装飾タグをHTMLに書き込んでしまうと、ファイルの容量が大きくなりすぎてしまい、表示や、更新等様々なデメリットがあると思います

ＣＳＳを使って見栄えの良いデザインのホームページを作成するためには

インターネットで、例えば、自分が上位表示させたいキーワードを検索してみてください。上位表示されているホームページの大半のＨＴＭＬソースの<head>と</head>の間の記述の中に、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"　"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >のバージョンの宣言をして、
<meta http-equiv="Content-Style-Type" content="text/css>スタイルシートtext/cssを使っていますと明記して、
<link rel="stylesheet" type="text/css" href="css/スタイルシート名.css" >スタイルシート名を記述してあると思います。そしてｈｔｍｌ本体には、例えば<td align="left" valign="top" width="440" height="238"><font size="2" color="#000000">などの装飾に使うタグは、記述されていないと思います。

このホームページはＸＨＴＭＬ1.0のバージョンでスタイルシートを使い、外部スタイルシート名を指定した記述です。そして、装飾タグを全部スタイルシートに分離したので、ＨＴＭLの中には、文書の内容を論理的に記述してゆくタグしか残っていないと思います。
上位表示されているということは、ＳＥＯに有効であるということです。tsuttie.webでは、ＳＥＯを考えた、ＣＳＳを使って見栄えの良い、ホームページ制作のためにこんな方法を使っています。

CSSのフォルダをつくります。
body,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,input,p,blockquote,th,tdなどのタグのデフォルトの属性をクリアーしたＣＳＳファイルを制作し、名前を指定します
ページ全体のメニューやナヴィゲーション、本文記入領域やfooterなどのレイアウトを記述したＣＳＳファイルを制作し名前を指定します
2.3で作ったＣＳＳファイルを@importを使い本文記述用のＣＳＳファイルに埋め込み、記述したい内容に合わせて制作し、名前を指定します
4のＣＳＳファイルをＨＴＭＬの本体の<head>に<link rel="stylesheet" type="text/css" href="css/指定した名前.css" />と記述ます

あとは、デザインの部分は、ＣＳＳで変更するので、最初は、大変ですが、それだけのメリットはあると思います