鮮やかな桃色が一面に広がる艶やかなデザインが印象的で、パッと見はガールズサイト風……その実態は、格闘ゲーム「ギルティギア」とカードゲーム「カルドセプト」を中心としたイラスト・絵日記・小説・素材・ゲームサイトです。
ギルティギアは2D格闘ゲーム、往年のストリート・ファイター2やキング・オブ・ファイターズの流れを汲む人気作品です。アーケードでヒットし、PS2 のソフトにもなっています。順調にシリーズを重ね、現在ではサミーの代表的なゲームシリーズのひとつとなりました。サミーといえばパチンコ・パチスロ台メーカー大手ですが、地道にアーケードゲームや家庭用ビデオゲームも作り続けているのです。看板商品は「大戦略」や「ダービースタリオン」など。ゲームファンでその名を聞いたことがないとすればモグリでしょう。
一方、カルドセプトはその道では有名なカードボードゲームです。カルドセプト購入前の FAQ を読めばイメージがつかめるでしょうか。ダイスを振ってルートを回り、カードを使って相手をジャマしたり土地を取ったりする…スゴロクと陣取りとカードゲームを合わせたようなゲーム
とのこと。
カルドセプトの特徴はゲーム中に利用できる50枚のカード。この組み立ての妙により、たいへん奥深い世界が生み出されているのですが……じつのところ、それは「milk punch」にはあまり関係ないお話。「milk punch」がどういうサイトか、ということは、エンターページを通過し目次ページに達すれば一目瞭然です。イラストの選択が非常に親切で、閲覧者に勘違いをさせません。
管理人の草薙若葉さんは和歌山出身、属性→ツインテール、オッドアイ、ネコミミ、（以下略）
……私にはよくわかりませんが、属性
とは「好み」に近い意味でしょう。今年、バイトから正社員へステップアップされたそうで、最近は仕事が大変なようです。健康に気をつけて頑張ってください。
ところで、草薙さんのイラストは好みの分かれるところだろうと思いますけれども、カルドセプトアイコンの素材は私も気に入りました。
私の個人サイト「milk punch」は格闘ゲーム「ギルティギア」とカードゲーム「カルドセプト」を中心としたイラスト・絵日記・小説・素材・ゲームサイトです。
サイトデザインは独学のHTML手打ちで行っており開設時から愛用している素材サイト様の素材を使用しております。テーブルタグやフォントタグなどを多用しておりますのでデザインの重さ、見辛さの不安面がございます。是非、サイトデザインに関してのアドバイスを頂ければと思っております。
お忙しい中、大変お手数をおかけしますが宜しくお願い申し上げます。
イラスト中心のサイトであり、データのダウンロードと表示にかかる時間（＝「重さ」）は、ほぼ画像の量で決まっています。「テーブルを使うと重くなる」とはよくいわれることですが、半ば迷信です。なぜかといえば、少なくとも（閲覧者の大多数が利用している環境である） WinIE6 は、一定量以上の画像については読み込み完了を待たずにテーブルを表示するからです。
大量のテキストを含むサイトならいざ知らず、少数の大きな画像を中心としたサイトの場合、スタイルシートでレイアウトしようとテーブルでレイアウトしようと、表示速度に有意な差はありません。無茶なことをすれば、どちらでも遅くなるし、逆にスッキリまとめれば、まったく問題ないといえます。
さらに。
一昔前であれば、貧弱な回線で接続している方が多かったわけですが、現在、個人サイトをたくさん閲覧するヘビーユーザの大半はブロードバンド（ADSL または光）の利用者です。だから商用サイトの大半がブロードバンドの利用を前提としたデザインへと移行しているのであって、そしてそれは成功しています。毎秒1MB以上のデータをダウンロードできる環境であれば、多少の工夫など体感速度に影響しません。一瞬で表示されるなら、ビジュアルにこだわったリッチなデザインの方が多くの支持を集めます。
かつての5秒ルールは、もはや形骸化しています。あまりに多くのサイトが重くなったので、ダイヤルアップ回線の利用者らは長々と待たされるのが当たり前となってしまい、（そして彼らの大半は）怒る気力もなくなってしまいました。そして実際、低速回線ユーザを無視しても、サイトの人気には影響しません。これは断言できます。
デザインに対する不満の声は、サイトの人気を考える場合、気にする必要がありません。「サイトの表示を軽くすべきかどうか」という問いについては、「したければすればよい」が私の回答になります。
何かしら見返りを期待して努力すべきことではありません。閲覧者は一言も感謝の言葉をくれないのだし、カウンターの数字だって、リニューアルの前後で全然変化ないはずです。自分が現状に不満を持っており、表示をもっともっと軽くしたいとお考えなのであれば、いろいろ努力されるとよいでしょう。それ以上は、考えない方が幸せだと思います。
4重以上のテーブルを組むと、さすがに表示がモタつく場合がありますが、ひとつひとつタグを手で入力しているような方がそうした手法へ突き進むことはあまりありません。実際、草薙さんは非常にシンプルなデザインを志向されています。だから、私は安心しているのです。
しかし程度の問題といって放り投げるのも不親切ですから、ひとつ例示しましょう。Naver - 知識plus という知識ポータルサイトがあります。ここのソースはかなりとんでもないものであり、なんと「角丸テーブル」を画像なしで実現するという荒業を実行しています。点線もテーブルを駆使して表現しているのだから驚きます。それでいて閲覧を保証する環境を Windows＋IE5以上（JavaScript ON）に限定。それなら素直に画像とスタイルシートを使えばいいじゃない……と思うのは私だけではないと思いますけれども、このようなデザインが商売に影響を与えていない現実を参考とすべきです。
最悪、この程度の無茶まで許される、とお考えになってください。無茶は無茶なりに、音声系ブラウザでもまずまず問題なく内容を把握できるよう配慮されているのが Naver のやり方です。
Goodbye, Tables のような煽り記事もありますが、Hello, Standards や主要ポータルの脱テーブル状況のリンク先を辿ってみて、果たしてこれを前進
と呼ぶのが正しいのかどうか、よく考えてみる必要があります。
製作者が特定のデザインを閲覧者に押し付けたいと願っている状況、閲覧者の大多数もまたそれを望んでいる状況に変化の兆しがない以上、Web標準への準拠は結局、製作者の利益にしかならないといって大きく外れはしない。草薙さんのようなテーブルの使い方に致命的な問題はないのではないか。（もっとマトモな考察を読みたい方はHTMLページの構造の階梯（かいてい）がたいへん参考になります）
単純にアンケートを取るならば、サイトの表示は重いより軽い方がいいに決まっていて、その意味では「軽いサイトを喜ぶ閲覧者」は決して少なくない。しかしながら、「嫌われない」アプローチではアクセス向上に成功しません。「重いから見ない」なんていっている閲覧者は、軽くなっても見てくれません。本当に見たいコンテンツがあれば、少々重くたって我慢して見ます。あまり常識外れな重さでなければ。
前述の Naver は毎日10万人単位の閲覧者が集まっているサイトです。とんでもないテーブルレイアウト、表示は決して軽くない。JavaScript も必須、そして JavaScript の動作確認は WinIE5 以上でしかやっていない。こうした現実を前にして、小さな需要を全部拾おうとする虚しさに「気付くな」という方が無理な話。そして、そうしたことを知りながら教えないのもどうかと思う。
人気サイトとそうでないサイトを分けているのは、嫌われる要素の多寡ではなく、魅力の多寡なのです。この1点を無視したアクセス向上指南は全部ウソです。
注：もちろん Naver の「重さ」には意味があります。デザインなどの面で一定の見返りを期待したものであって、その意図は概ね実現されていると思います。しかし「一定の見返り」のために諦めたものの大きさは相当なものですから、「バランスを欠いているのではないか?」という疑念がわくのも当然です。とはいえ、結局のところ、この程度のアンバランスはサイトの人気を決める要素として無視できるレベルなのです。
私がいっているのは、損得勘定の話です。正しいことは正しい、という話をしていません。
あなたの好きな要素（HTML）は?やホームページビルダーを正しく使う方法といった記事に示した通り、多くの方は W3C の示す方向性にあまり関心を持ちません。だから Strict HTML＋CSS によるウェブデザイン手法を他人に薦める場合、ひたすらに損得の話をする他ない。正直、私自身、単に楽だから W3C の勧告に大筋で従っている、というのが実情です。
テーブルレイアウト＋font 要素で装飾 という手法で長らくやってきて、とくに不便を感じていらっしゃらない方が方針を転換するのにはたいへんなエネルギーが要ります。正しいと信じることのためにエネルギーを消費するのは、たしかに楽しいことのひとつではあります。けれども、その正しさに十分納得していない方を、嘘っぱちの餌で釣り上げるのは詐欺的行為だと思います。
もちろん、Strict HTML＋CSS に慣れてしまえば、以前のやり方に戻ることはそうそうないと思います。その意味では、「切欠は何でもいいじゃない」という結論もありえましょう。けれども、勉強にかかった苦労の元を取るのは、簡単なことではありません。
私もこれまで、いい加減なアドバイスをたくさんしてきたわけですが、それで正直懲りたのです。世の中には素直な方がたくさんいらして、私がこうした方がいい、というと、頑張ってそうなさる。それで私の約束した未来が到来したか? 答えはノーです。このつらいことといったらない。
アクセス向上についての相談に、最近ほぼ一律に「無理でしょう」あるいは「こうやれば楽にうまくいく、なんて秘策はありませんよ」と答えているのは（少なくともその理由のひとつは）、このためです。自分自身も「にゃごろう村」でつくづく思い知らされたことですが、デザインなんて、閲覧者にとってはホント、どうでもいいんですね。悪いよりはよい方がいい、それは当たり前だけれども、よほど凄いものでない限り、とくに感謝も感動もしてくれない。といって、この私に上っ面のこと以外の何をアドバイスできるのか。
ずいぶん多くのサイトを見てきましたが、相当ひどくない限り、作者が満足ならそれでいいのだと思います。これは本当にそう思います。
草薙さんは今回、不安
を理由に相談されました。私の答えは簡単です。ご安心ください。現状維持で問題ありませんよ。今回のアドバイスに限らず、最近のほとんどの相談者について、私の意見は同じです。
相談者に一定の影響力を持っている私の立場で変化や勉強を勧めるとしたら、功利主義的な説得しか、私にはできません。読みたい人が勝手に読めばいい、といって放り投げている記事ならともかく、この場において私は臆病にしか振舞えません。
以前、その頃は情報政策（IT 関連）担当だったこともあって、さんざん批判されたウェブサイトです。結局、全然改善されなかったのですが、じつはこれがバカにしたものではない。テキストブラウザでも案外、閲覧できます。
現行のフレーム未対応ブラウザや画像オフの環境に概ね対応。ひどいテーブルレイアウトですが、読み上げてみると、不思議と致命的な順番ミスがない。フレーム定義ファイルに title 要素がない、予告なく PDF ファイルへのリンクが存在するなど、改善点は多々ありますが、ホームページビルダー7を比較的きちんと使っていることに驚かされます。
このレベルなら、目を吊り上げてワーワーいうこともないんじゃないか、と私は思います。
前項で述べた通り、草薙さんのサイトの場合、表示速度の改善は非常に困難であると思います。
現状を一通り点検いたしましたが、たしかに HTML については無駄な記述が非常に多いものの、それを取り払っても、表示速度は改善されません。仮に現在の表示速度が遅いとしても、その理由は画像ファイルの存在に他ならないのです。では無駄な画像があるのか。ありませんね。
いろいろ頑張ってみても、体感速度に有意な差は生じないだろうと思います。当サイトの表示がとくに速くもない事実が、何より雄弁に私の手詰まりを示しています。
むしろ趣味のサイトの場合、製作者の努力よりもサーバ選びの妙が重要だったりするわけです。当サイトも、かつて一時期、たいへん表示に時間がかかったものでした。製作者が同じデータを用意していても、閲覧者のところへデータを送り出すサーバの動作やサーバの回線次第で、「重さ」はまったく変ってきます。軽くキビキビ動作するサーバをいかにして確保するか、そこが問題なんですが……ロリポップをご利用なさっているんですね。私の見て回った限りではスイスイ表示されており、たいへん結構だと思いました。
訪問済リンクの色が、見辛いと思います。背景色と文字色がかなり近いので。この1点だけですね、私が気になったのは。
基本的には、「重さ」についてのアドバイスと同じです。私は草薙さんのサイトが素晴らしく見やすいとは思いません。けれども、致命的にダメなデザインでないことは保証します。非常にシンプルな1段組のレイアウトなので、閲覧順序に迷うことはありません。ナビゲーションは画面の端にあり、本文との区別がきちんとつく形で用意されていますから、目次へ帰れなくなることもないでしょう。現在地を見失うことはありえますが、「とりあえず表紙へ戻る」ことで窮地を脱せます。
背景画像と文字を重ねていることもあって、文字がみづらいと思う方はいらっしゃるでしょう。けれども、文字色の黒と背景色のピンクには十分なコントラストがある他、シンプルなタイル模様の背景画像はうるさくありません。たいていの閲覧者は、とくに気にされないと思います。むしろ、タイルの隙間からページ全体の背景画像がチラチラ覗く視覚効果の面白さに、目を奪われるのではないでしょうか。
目次のページでは、全体の背景、テーブルの背景にさらにトップ画像を重ねていますよね。トップ画像は人物と吹出し以外を透明で抜いており、そして吹出しの文字は影付き。見事な重層的デザインです。
HTML の各要素の入れ子関係は、視覚効果においては重層的な表現となりますが、多くの方はこの点を失念しています。だから、平板な塗り絵のようなデザインをやってしまいがち。別にそれはそれでかまわないのですけれども、やはり他人のあまりやらないデザインの方がインパクトは強いですよね。画像の一部透明化を駆使した草薙さんの表現は、とてもいいと思います。将来、新しいデザインを考える際にも別の形で活かせるアイデアです。
前項に記載の通り、最低限のナビゲーションはきっちり押えていると思います。ナビゲーションはリッチにしようと思えばどこまでも……という扱いづらい相手です。しかも、必ずしもリッチなナビゲーションが使いよいとは限りません。現状維持で、まず心配要らないと思います。
私が初めて HTML を学んだのは大学1年の情報処理の授業で、ウェブサイトを作ったのもそのときが最初でした。こんな面倒くさいもの、やってられるかと思って放り投げ、その後、大学3年の後期が終って春休みに就職活動を始めるまで、ウェブサイトは見る方専門でした。
リクナビで就活しようと思い、ネット接続環境を用意したところ、友人から「ホームページ作りを手伝ってほしい」と頼まれたのが、趣味としてのウェブサイト作りの原点です。なんとその友人は自宅にネット環境がなかったのでした。それでもホームページを持とうとするその表現欲に圧倒され、私はお手伝いすることになります。といっても最初は、郵便で送られてきたフロッピーディスクの内容を、ホームページビルダー（HPB）でアップロードするだけでした。ただ、デザインは少しいじってもいいということだったので、私は作業のついでにデザインいじりをはじめたわけです。
私が HTML を再び勉強したのは、HPB の操作が面倒くさかったからです。ツールバーにボタンがあるものは楽なのですが、ドロップダウンメニュー→カテゴリ選択→項目選択→ダイアログボックスが開く→いろいろ入力……となると、リッチな GUI がかえって煩わしくなります。最終的に HPB がテキストに HTML のタグを付けていることは知っていたので、ボタン一発で実行できない操作は、HTML を直接編集した方がいいと思ったわけです。
HPB 標準モードの操作結果を手作業で再現することが学習の目的だったので、当然、私はテーブルレイアウトを覚えました。しばらくはそれでよかったので、勉強の意欲もすっかり薄れました。一方、書くことに専念したためか、友人のサイトはどんどんコンテンツが増えていき、ページ数はいつしか200を超えました。
あるとき、ふと思い立ってサイトのデザインを全部リニューアルすることにしました。これが地獄の始まりだったのです。テーブルレイアウトをやっている場合、（テンプレートと内容データから文書を自動生成するシステムなどを利用していない限り）デザインを変えるには HTML 文書を一つ一つ修正していく必要があります。正直、気の遠くなるような作業でした。約1ヶ月経ち、ようやく全部の作業が終了したときには、もうそのデザインが気に入らなくなっていました。頭がクラクラしました。
今度こそ、私はまじめに勉強することにしました。そうして私が知ったのが、構造と表現を分離し、デザイン情報は本文とは別にまとめて一括管理するというスタイルシートの考え方でした。これは素晴らしい! と早合点して、テーブルレイアウトを残したまま再びリニューアルしたので、今度こそ本当にバカを見ました。前回よりさらにコンテンツが増えていて作業量が増加していたのはともかく、このリニューアルがほとんど無意味だったことが非常に身に堪えました。
せっかく外部スタイルシートでデザインをコントロールしてみても、基本的なレイアウトをテーブルでやってしまっていたら、その部分はスタイルシートをどう書き換えたって変更のしようがないのです。
HTML のことは「わかっている」つもりで不勉強を放置していたのが間違いだと悟りました。と、ここで友人と仲違いしてそのサイトから離れ、その直前に実験と勉強のために作っていた自分のサイトに主力を移しました。これが当サイトの始まりです。今度は HTML にも気をつけ、勉強の成果を最初から反映させていったので、テーブルレイアウトを無事に脱却できたのでした。以来、当サイトは何度もリニューアルを繰り返してきましたが、かつての苦労を甦らせたことはありません。
以上、長々と私事を語りましたが、私は面倒くさがりで、ちょっとやそっとでは勉強しようとしない人間だったので、しなくていい苦労をたくさんすることになったのでした。しかし逆に、私自身の経験から考えて、リニューアルさえしなければテーブルレイアウトでも別に困りません。table 要素まわりは HTML の面倒なところなのですが、同じデザインのページをたくさん作るだけなら、枠組みを以前の文書からコピーしてきて、本文だけ新しく書けば足りるわけです。
font 要素も面倒なものですけれども、毎日やっていればとくに気にならないものでしょう。簡単に慣れてしまう。
私は、HTML と CSS（スタイルシートの一種）を勉強して以降、何かと楽になりましたけれども、勉強するのは楽ではありません。時間も気力も要します。本を買えばお金もかかります。絶対に勉強するべきだ、とは思いませんし、いいません。ただ、もし興味があって、少し勉強してみてもいいかな、とお考えなのであれば、入門書「HTMLとスタイルシートによる最新Webサイト作成術」をお勧めします。いまさら入門書なんて、と思われるかもしれませんが、一読の価値があるはずです。
テーブルレイアウトと font 要素の多用は、慣れている人にとっては別にどうってことはないのですが、いったん HTML とスタイルシートを勉強してしまうと、途端に面倒に思えてきます。リニューアルは決定的な場面ですが、日々の更新においても、それなりの利点があります。以下、草薙さんの作成された HTML 文書と同じ表示結果が得られるものを、私が作るとどうなるか、例を示したいと思います。
<html><head>
<title>milk punch</title>
<meta http-equiv="Content-type" content="text/html; charset=Shift_JIS">
<meta name="robots" content="index,follow">
<meta name="keywords" content="オリジナル,マスコット,ネコミミ,オッドアイ,ニーソックス,ギルティギア,カルドセプト,シスタープリンセス,ジャンプ,いちご100%,デスノート,武装錬金,リボーン,Waqwaq,ハリーポッター">
<body bgcolor="white">
<body link="hotpink">
<body vlink="pink">
<body alink="pink">
<body background="wall1.gif">
<table width="500" height="200" align="center">
<tr align="center" valign="middle">
<td background="wall2.gif" align="center">
<img src="top.gif" width="400" height="250"><br><br>
<font color="black" size="2">
<a href="http://candybox.to/" target="_blank">
<img src="dayx_002.gif" border="0"></a>
今日<img src="dayx_003.gif" border="0">
昨日<img src="dayx.gif" border="0"><br>
<font size=2 color="red">キリ番：200000（イラストリクエスト権を差し上げます）</font><br><br>
<font size=2 color="black">↓スマトラ島沖地震・津波の募金を開始されました↓</font><br>
<font size=3><a href="http://bokinpark.com/">★募金パーク（自身に金銭負担はかかりません）★</a></font><br><br>
<font size=2 color="red">
実家に帰省の為、1月5日までサイトの更新を停止致します。<br>
皆様が良い年末年始を迎えられるよう、お祈り申し上げます。</font><br><br>
<font size=2 color="pink">
------------------------------------------</font><br><br>
<font size=2 color="hotpink">
【更新履歴】</font><br>
<font size=2 color="black">
2004/12/30：オリジナルに1枚追加（イラスト）<br>
2004/12/29：日記を更新（絵日記）<br>
2004/11/16：全体的に追加＆修正（管理人）</font><br><br>
<font size=3>
<a href="about.html">当サイトについて（必ずお読み下さい）</a><br><br>
<a href="profile.html">管理人</a>
<a href="diary.html">絵日記</a>
<a href="gallery.html">イラスト</a>
<a href="novel.html">小説</a>
<a href="material.html">素材</a>
<a href="game.html">ゲーム</a><br><br>
<a href="http://chocolate.candybox.to/milkpunch/mkakikomitai/mkakikomitai.cgi">掲示板</a>
<a href="http://chocolate.candybox.to/milkpunch/bbsnote/bbsnote.cgi">絵板</a>
<a href="link.html">リンク集</a>
<a href="http://chocolate.candybox.to/milkpunch/postmail/postmail.php">メール</a>
<a href="under.html">裏</a>
<a href="http://milk.peewee.jp/">入り口</a></font><br><br>
<font size=2 color="pink">
------------------------------------------</font><br><br>
<a href="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?milk0523" target="_blank">
<img src="top-web.gif" width="80" height="80" border="0"></a><br>
<font size=2 color="black">
WEB拍手（公式サイトは<a href="http://www.webclap.com/">コチラ</a>）<br><br>
</td></tr></table>
</center></body></head></html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<meta http-equiv="content-script-Type" content="text/javascript">
<meta http-equiv="content-style-Type" content="text/css">
<title>milk punch</title>
<link rel="stylesheet" type="text/css" href="new.css" media="screen,tv">
</head>
<body>
<h1><img src="top.gif" width="400" height="250" alt="milk punch"></h1>
<p><em><a href="http://candybox.to/" target="_blank" alt="156886"><img src="dayx_002.gif"></a> 今日<img src="dayx_003.gif"> 昨日<img src="dayx.gif"></em>
<strong>キリ番：200000（イラストリクエスト権を差し上げます）</strong></p>
<p><em>↓スマトラ島沖地震・津波の募金を開始されました↓</em>
<a href="http://bokinpark.com/">★募金パーク（自身に金銭負担はかかりません）★</a></p>
<p><strong>実家に帰省の為、1月5日までサイトの更新を停止致します。
皆様が良い年末年始を迎えられるよう、お祈り申し上げます。</strong></p>
<dl>
<dt>【更新履歴】</dt>
<dd><em>2004/12/30：オリジナルに1枚追加（イラスト）
2004/12/29：日記を更新（絵日記）
2004/11/16：全体的に追加＆修正（管理人）</em></dd>
</dl>
<p id="menu"><a href="about.html">当サイトについて（必ずお読み下さい）</a>
<a href="profile.html">管理人</a> <a href="diary.html">絵日記</a> <a href="gallery.html">イラスト</a> <a href="novel.html">小説</a> <a href="material.html">素材</a> <a href="game.html">ゲーム</a>
<a href="http://chocolate.candybox.to/milkpunch/mkakikomitai/mkakikomitai.cgi">掲示板</a> <a href="http://chocolate.candybox.to/milkpunch/bbsnote/bbsnote.cgi">絵板</a> <a href="link.html">リンク集</a> <a href="http://chocolate.candybox.to/milkpunch/postmail/postmail.php">メール</a> <a href="under.html">裏</a> <a href="http://milk.peewee.jp/">入り口</a></p>
<p><a href="http://www.webclap3.com/cgi-bin/clap3/clap.cgi?milk0523" target="_blank">
<img src="top-web.gif" width="80" height="80"></a>
<em>WEB拍手（公式サイトは<a href="http://www.webclap.com/">コチラ</a>）</em></p>
</body>
</html>
*
{margin:0; padding:0; font-size:100%; color:#000; font-weight:normal; font-style:normal; border:none;}
html
{background:#fff url(wall1.gif); padding:20px;}
body
{padding:0 20px 20px; width:460px; margin:auto; background:transparent url(wall2.gif); text-align:center;}
dl,p
{margin:1em;}
dt
{padding:1em 1em 0; border-top:1px dashed #ffc3ce;}
dd,p
{white-space:pre;}
p#menu
{padding:0 0 1em; border-bottom:1px dashed #ffc3ce;}
em,strong
{font-size:small;}
strong
{color:#f00;}
a
{color:#ef9e9c; text-decoration:underline;}
a:link,dt
{color:#ff69b5;}
現時点では詳細は理解し難いと思いますが、原本と比較すると、再現案の HTML ソースがスッキリしていることはご理解いただけるだろうと思います。デザイン情報を CSS ファイルに分離した成果です。分離された CSS ファイルは他の文書からも参照できますので、今後、文書を増やす場合には、スッキリした HTML 文書だけ増やしていけばよいわけです。
サイト内の全文書が、ひとつの CSS ファイルからデザイン情報を参照している場合、サイトのリニューアルは非常に簡単です。みなが参照している、ひとつの CSS ファイルを書き換えるだけですむからです。
……とまあ、このように、HTML やスタイルシートについて勉強すると、日々の更新やサイト全体のリニューアルがいっそう楽になるのは事実です。しかしながら、勉強に時間と気力の要ることもまた事実です。そのあたりを天秤にかけて、今後の進路を決めていただきたいと思います。
業者の宣伝書き込みは削除した方がよいと思います。