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

   web入門, web知識あれこれ| 

web標準でつくるホームページ

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

《2016年2月補足》サイトリニューアルにあたり、旧記事を整理していますが、アクセスの多い記事は残していこうと思います。古い情報が入っていますのでご注意ください。

それとはべつに、有効な被リンクを増やす方法のひとつとして自分で対策できるのが、ブログを使ったSEO対策です。
無料ブログサービスを利用すれば、プログラムの知識がない方でも、手軽にブログの立ちあげができます。

W3C準拠ってなに?

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

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

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

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

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

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

fireside-essay

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

2016-01-31_233406

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

2016-01-31_233517

実はこの状態が、音声ブラウザ(目の見えない方のために音読してくれるブラウザ)で読み上げられる状態であり、携帯など他の端末の表示に変換するためのシンプルな形であり、検索エンジンクローラーなどのプログラムが読みとりやすい状態だったりするわけです。

これがよく『正しいソースコードで書いていると、SEO対策にも良い』と言われている理由のひとつです。

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

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

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

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

 

webの森では、デザイナーの卵さん向けの個人講習も行っています。
会社でweb担当者になったんだけど、基本を知らないとまずいらしい・・・??と思われた方などなど。
詳しくはお問合せください

toi

   web入門, web知識あれこれ| 

  関連記事

(WEB制作入門5)ショッピングカートって何?

WEB制作入門1から4までで、独自ドメインの大事さ、WordPressがどれだけすぐれているかを書い ≫続きを読む

【Q】SEO対策しませんか?という電話がありました。どこで調べたのか私の個人情報も結構知っていて不安です。

●●グループから電話がかかってきましたか? しつこい営業でけっこう悪名高いところなので無視していただ ≫続きを読む

【Q】ウィルスに感染したために、サイトが改ざんされたというニュースを読んで不安です

「××社のホームページが改ざんされ訪れた人にウィルス感染の危険」こんな言葉でニュースになっているので ≫続きを読む

調整レイヤーの使い方

フォトレタッチの極意1:紅葉の色彩をアップする | Adobe Creative Station 部 ≫続きを読む

no image
[リクルートID]定期ニュースの停止

[リクルートID]定期ニュースの停止ができずイライラマックス!   ポンパレで一度買い物しただけなの ≫続きを読む

【ホームページの作り方】建築・建設・施工・造園業等のホームページ作成

個人的な印象ですが、建築、建設会社さんで、ホームページを上手に活用しているところは、他の分野に比べて ≫続きを読む

【Q】Dreamweaverでホームページを作っています。サイトを一部修正してサーバーにアップしているのに反映されません!

Dreamweaverでホームページを修正してサーバーにアップしてるのに、ブラウザで見ると変化がない ≫続きを読む

(WEB制作入門6)ショッピングカートのいろいろ

ショッピングカート・・・いろいろあって迷いますよね?どれが良いのでしょうか。ここでは、ASPサービス ≫続きを読む

illustratorでキャラクターに色を塗る方法

illustratorで、キャラクターに色を塗る方法を紹介します。 1)線でイラストを描きます。後ろ ≫続きを読む

【Q】ホームページのバックアップってどうすればいいですか?

バックアップについてお話する前に、ホームページには2種類あることを復習しますね。 1つは静的に作られ ≫続きを読む

▲ページ先頭へ