2006年9月13日（水）
『ソース』って何ですか？ こだわるとどんなご利益があるのでしょうか？
Web制作会社の日常会話、新人にはわからないWeb用語がもりだくさんです。
今回は『ソースの鬼』と呼ばれる寺島さんに、ソースについてレクチャーしていただきました！
「実はちょっと曖昧だったんだよね」という方！ 必見です！
----------------
tera： 『ソースとか、Web標準とか、そんな人が……』の、そもそもソースがなんなのか分からないという話でしたけれども……。
ma：ぼんやりと、プログラムということはわかっているんですが、それが「どんなもの？」と訊かれると答えられないです。
ma：CSSはソースとは呼ばないんですか？
tera：ソースってのは、プログラムとかHTMLとか、そういうのを記述したもののこと。Webページを作るためのものが、HTMLです。ソースの表示から見ることが出来るものを「HTMLソース」と呼びましょう。最初からHTMLソースって言えば良かったのですね。
ma：「HTMLソース」は「骨格」と先ほど教えていただきましたが、どこからどこまでを担っていて、どこからがCSSが担う部分になるんでしょう？
tera：全体的な段落分けはHTMLで設定。色や文字サイズなどのデザインはCSSで設定するという感じですね。
CSS（デザイン）は、CSS単体で作成して、そのURLをHTMLの中に組み込むという形になります。
tera：例えば、これが『営業日報』のソースです。
▲『営業日報』のHTMLソース（クリックすると詳細画像を表示）
tera：このソースの上から18行目にあるのが、CSSのURLです（詳細画像で確認できます）。URLの中に「CSS」って書いてありますよね？
ma：あ、本当だ！ へ～、CSSって、こうやってHTMLの中に組み込まれてるんですね～。
tera：そうなんです。で、これが、そのURLのリンク先にある「CSS」です。この文字列で文字サイズや色などのデザイン部分を設定しているんですよ。
▲『営業日報』のCSS（クリックすると詳細画像を表示）
ma：おぉ～！ これでデザインが設定されているんですね！ こんな文字列が！ 何だか不思議ですね～
tera：ちなみに、CSSを組み込んでいないと『営業日報』はこんな感じ。
▲CSSを組み込んでいない状態の『営業日報』（クリックすると詳細画像を表示）
＃このエントリです。
ma：わ～、何かさみしいですね。CSSの担っているデザイン部分って大きいんですね。
tera：そうなんですよ。この規則を定めている団体がW3C（World Wide Web Consortium）。今使われているのが、主にHTMLとXHTMLとISO HTMLかな。
----------------
tera：続いて、冒頭のプログラムとソースの違いの話について。
簡単に説明すると、ブラウザはHTMLソースのエラーに寛大で、エラーをエラーとしないので、滅茶苦茶なソースコードでも通用してしまうのです。
プログラムは、エラーが出ると、普通動きません。
HTMLは、エラーを通してしまうので、表示されてしまいます。
tera：で、この規則に従っていないWebサイトはとても多いです。北海道でも。規則に従わなくてもブラウザがエラーを出さないから、テキトーに作ってもなんとなく表示されてしまいます。
ma：なるほど。
tera：そんなテキトーな仕事は駄目です！
ma：さすが仕事人！ その心意気がスバラシイです !!
----------------
ma：あと「ソースを整理するといろいろ良いぞ！」っていう理由（仕組み）が知りたいです。
tera：W3Cが定めているHTMLの世界的なルールがあるんですよ。それに従ってHTMLソースを作ることが「世界標準」であって、Web制作の仕事をしている人間は、まずこれに従わないでどうする！ という感じですね。
ma：おぉ～
tera：「世界標準」は、先ほど説明したHTML（構造）とCSS（デザイン）を別々に作って、HTMLにCSSを組み込む方法をとっているんです。
HTMLでデザイン部分を設定することもできますが、HTMLでデザインも書き込むと、いろいろ不都合が起こります。
○ソースの記述が滅茶苦茶になる。
制作する人によって好きなように記述できるため、他の人がソースを読もうとするとどこがデザインなのか、非常にわかりにくくなります。メンテナンスも大変です。
○検索ロボットの読み込みが困難になる（検索にかかりにくくなる）。
ロボットは重要なものとそうではないものとを分けています。
○デザインを必要としない人（目が不自由なため音声で記事を読み聞く人など）にとって不親切。
音声でサイトを読み上げる場合、テキスト部分を読み込みます。HTMLが文書として構造化されていないと、何を言わんとしているのか分からないページになってしまって、アクセシビリティに欠けるかと思います。
HTML（構造）とCSS（デザイン）を分離した状態で制作していれば、ソースも整理されて見やすくなります。
また、デザインが必要ない場合は、CSSのURLを抜かす（デザインを表示しない）だけなので、充分テキストの記事が読めます。CSSに対応していないブラウザもあったりするんですが、そんな場合でもちゃんとテキストが読めるのでサイトにアクセスしてもらえますよ。
実は、HTMLとCSSで制作しているサイトは、一部の携帯（docomoなど）でも見られたりするんですよ。これも、CSS（デザイン部分）だけを除けるからこそできることなんです。
もちろん、HTMLでデザイン部分も制作しているサイトは、携帯で見ることは難しいということになります（ブラウザ組み込み携帯は別ですが）。
なので、もろもろ総合して、HTML（構造）とCSS（デザイン）で制作しているサイトは、
アクセシビリティの観点から見ても「良くなる可能性を秘めたサイト」
と言えるんです（厳密なアクセシビリティはHTMLの仕様書に従うだけでは駄目で、より突っ込んだ記述が必要なのです）。
これが、ソースへのこだわりです！
ma：なるほど～！ だから「世界標準ソース」で制作することが重要なんですね。
非常に勉強になりました！ ありがとうございます！
----------------
人生は日々勉強です。
Webサイト制作会社の広報プロフェッショナルへの道のりは続く。
＜新人MA@アイタス＞
コメント
霧さん、こんにちは。
制作をしている以上、HTMLを書くのはある程度できて当たり前なので、ビジネス面やコミュニケーション面を、もっと学んでゆかなければならないと思っています。
ｲｼｶﾜ→o|｀┏ω┓´|ﾉ_彡☆(ToT)ゞ←ﾃﾗｼﾏ
↑毎日こんな感じです。
はじめまして、いつも楽しく拝見させていただいてます。
私はメモ帳でちまちまＨＴＭＬを打つのが好きで、
デザイン等もタグを使用して、軽量化を考えつつも
構成をしていたのですが、
それが通用するのは私的なサイトのみだというのが、
この記事をみて思い知らされました。
ソースが見づらくなる、やロボット検索を意識、
というのはタグ打ちつつも少しは配慮していたのですが、
デザインを必要としない方のための配慮なんていうのは
考えたこともありませんでした。
他者のＨＰのソースを見ることが好きで、
色々と考えてみたりしているつもりでしたが、
まだまだと思い知らされました。
ここの日報は勉強になる記事が多いので、
今後も読まさせていただきます。
更新作業も楽ではないと思いますが、
頑張っていただけると一読者としてありがたいです。
では、長くなりましたがこの辺で失礼させていただきます。