長野県駒ヶ根・ホームページ制作・SEO対策リニューアル

最近はdivというのを使ってホームページを作ると聞きました。何故以前のようなテーブルデザインではいけないんですか？

テーブルデザインではなく、スタイルシートを使って制作する方法は、時に「xhtml＋cssで制作する方法」とか「web標準で制作する方法」とか「W3C準拠」などとよばれています。
今までテーブルデザインでやっていた人が、この方法でデザインしようとしてよく迷い道にはまり込む場合がありますが、cssの方法だけ検索して調べて、適用していたりして、きちんとしたxhtmlで組んでいなかったりすることがあります。
「なんでこうなるの～～～」と泣くことがよくあって、正しいマークアップとスタイルシートのテクニックは両方平行して学ばないといけません。

W3C準拠ってなに？

W3C（ダブルスリーシー・World Wide Web Consortium）という機関があって、ざっくり言うと、ホームページを制作する技術の世界標準を決めている機関なんですね。
世界のあらゆる人たちがバラバラの技術で好き勝手に作っていたホームページの作成方法を、ちゃんと基準を設けて、誰もがきれいに読めるように、技術の統一を図りましょうということです。

W3Cの仕様書は英語なので、日本語訳がこちらで読めます。 このW3Cが提唱している方法で作られたホームページっていうのが「web標準」で作られているサイトと言われていて、
web標準の目的のひとつは「情報をすべての人に平等に読んでもらいましょう」ということです。

すべての人っていうのは、どの国の人にも、音声リーダーで読む人にも、携帯などの別の端末で読む人にも、そして検索エンジンクローラーなどのコンピュータにも平等に読んで貰うという意味が含まれています。

上記のすべての人に平等に情報を届けるにはどうすればいいでしょうか。
それは、装飾をとっぱらった素の状態で、その情報を読んだときに正確に伝わる記述の仕方をしておくということです。
ホームページはHTMLというソースコードで書きますよね。そのソースコードの状態のみで、ブラウザにて表示した状態で、ちゃんと意味がつたわるホームページを作りましょうという意味です。

装飾をはずした状態とは？

構造と装飾が切り離されている例を見てください。
例えばこのページ。http://fireside-essay.jp/（薪ストーブエッセイ・森からの便り）

このサイトのスタイルシートを外してみましょう・・・
IE8の場合、表示メニュー　＞スタイル　＞スタイルなし　を選びます

すると、下記のような状態に・・・・
これが、cssが適用されていない、装飾なしの、構造だけの状態のサイトです。
構造だけのサイトはただのテキストとは違います。大見出し、中身だし、小見出しがあり、本文があり。もくじがあり、その目次がどこへリンクしているかという情報もはいってます。

実はこの状態が、音声ブラウザ（目の見えない方のために音読してくれるブラウザ）で読み上げられる状態であり、携帯など他の端末の表示に変換するためのシンプルな形であり、検索エンジンクローラーなどのプログラムが読みとりやすい状態だったりするわけです。これがよく『正しいソースコードで書いていると、SEO対策にも良い』と言われている理由のひとつです。

スタイルシートの勉強はまず正しいマークアップから

というわけで、web標準の意味がわかっていただけましたら、冒頭にてオススメした参考書などで勉強してみてください。
マークアップにはきまりがあって、簡単にいうとタグには役割があってその役割通りに使うという意味です。h1はそのページのタイトルをあらわすタグなので１つのページの中に１回だけ登場するとか、見た目で一行空けるために、改行を二回繰り返すのではなく、ちゃんとpという段落のタグを使うこと・・・とか・・。
どの形式で制作するか・・ということも決めないといけません。

そこを理解しないで、css辞典などのリファレンスから手っ取り早くコピーしてきてスタイルをつけたりすると、web標準でつくる意味がないし、何かうまくいかなくて、どうしてここが崩れるんだろう・・・とか、悩んだりしたときにドツボにはまっちゃうんですね。。
というわけで、スタイルシートの勉強は、正しいマークアップの方法から・・と覚えましょう。

◎下記は私の作っている動画マニュアルサイトです。
＞Dreamweaver8＋CSS 入門・動画講座（スタイルシートの使い方）
＞DreamweaverCS4 でホームページ入門

ホームページ入門講座

TwitterとFacebookについて

• ツイッターのはじめの一歩
• Twitterの使い方を教えてください
• ツイッターを始めた方がいいよって言われるんですが何がいいのですか？
• Twitterを登録しましたが、何からどうしたらいいのやら・・わかりません。
• フォローはどうやって増やしたらいいんですか？
• ホームページやブログにTwitterの新着を載せたいのですが・・・
• Twitterの便利なサイトを教えてください

ブログについて

• ホームページにブログの記事を新着表示させたいんですが・・・・
• ブログを使ったSEO対策。具体的にどうすればいいですか？

基本のSEO対策

• 初心者すぎて何からどうしたらいいか皆目わかりません(+ +；)
• キーワードの選び方を教えてください。
• SEO対策業者に依頼する前に
• ホームページをCMSにするとSEO対策に不利？
• ホームーページに何人見に来てくれているかわかりますか？

セキュリティ対策

• ウィルスに感染したために、サイトが改ざんされたというニュースを読んで不安です
• ホームページのバックアップってどうすればいいですか？

デザイナーの卵さんからの質問

• 何故以前のようなテーブルデザインではいけないの？
• ホームページが大きくなるにつれてメニューの管理に困っています。
• Dreamweaverでサーバーにアップしているのに反映されません！

携帯サイト作成の初歩

• 携帯サイトを初めて作ることになりました。まず何からやれば？
• Dreamweaverでの携帯サイトの作り方を教えてください

ネットショップ店長さんからの質問

• ランディングページって何ですか？
• Googleプレイスに登録しましょうと言われたのですが、どうすれば・・・？
• 写真撮影のコツを教えてください

Webデザイナーの備忘録

• 初心者向け解説：ドメインの移管方法
• Wordpressのサーバー引っ越しメモ