デザインの学校 ウェブデザイン 実戦編 第1回

さぁ!ついに今日から、ウェブデザインスタジオ山梨の実戦編が始まります!
受講生のみなさんは、すでにいくつかサイトの制作もしているデザイナーさんやイラストレーターさんばかり
なので、実戦編では、仕事にすぐ役立つ内容をお勉強しちゃうんです
その分、専門的だったり難しかったりで上手くお伝えすることができないかもですが、おつきあいよろしくお願いします
さて、今日はHTMLの組み方についてです。 
ウェブには数多くのサイトが存在するわけですが、例えレイアウトがとても似ていても、その組み立て方法が同じとは限りません。
どう組み立ててあると、後で編集しやすいのか、とか、どこまでHTMLをシンプルにできるのか、など色んな観点でのHTMLの組み方があると思います。
例えば、テーブルなどは編集しやすさ・シンプルさの両方の観点から、幅などの数値を指定しないほうがより編集しやすく、かつシンプルと言えます。
また、同じ数値の入力でも%の指定の方がより柔軟であるということは、わかっていただけるのでしょうか?
という感じで。
今回は、手元にある我らがウェブデザインスタジオの現行のサイトの一部を使って、HTMLの組み方を考えました
実戦編に至るまでの間に、ウェブサイトをつくるのに必要な基礎的知識を学び、デモンストレーション的にHTMLを記述してきました。
でも、やっぱり練習と実戦は別物
やっぱり現場のHTMLを触らなきゃ始まりませんね!
ではでは行きましょー
今回特にやったのはサイトのこの部分
    ↓↓↓
≪ Befoer ≫

≪ After ≫

下がソースコードです。
変わっているところわかりますか??
≪ Befoer ≫
<table width="315" height="300" border="0" align="left" cellpadding="0" cellspacing="0" bgcolor="#E4E4E4">
<tr>
<td height="22" valign="top"><img src="images/top_class_web_basic.gif" alt="WEB DESIGN – ウェブデザイン [ 基礎 ]" width="315" height="22"></td>
</tr>
<tr>
<td><table width="300" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><table width="300" align="center" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="100" height="125" align="left"><a href="design_basic.html"><img src="images/top_photo_basic.jpg" width="100" height="125" border="0"></a></td>
<td width="10" height="125">&nbsp;</td>
<td width="190" height="125"><font size="-3"><a href="design_basic.html"><strong class="font-txt-3">WEB デザイン [ 基礎編 ]</strong></a><br>
<a href="design_basic.html"><img src="images/arrow_detail.gif" alt="WEB DESIGN [ 基礎編 ] 詳細" width="100" height="20" vspace="5" border="0"></a><br>
Webサイト構築講座 初心者クラス。<br>
Webデザインツールの業界標準となるDreamweaver、Fireworks、Illustrator、Photoshopの操作・機能を中心に学ぶ。制作現場で最初に必要とされる基本的な制作知識・スキルを習得する。</font></td>
</tr>
<tr>
<td height="1" colspan="3" align="left" valign="top">&nbsp;</td>
</tr>
<tr>
<td height="120" colspan="3" align="left" valign="middle" bgcolor="344628">
<table width="300" height="120" align="center" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF">
<tr>
<td bgcolor="#FFFFFF"><table width="278" height="99" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_level.gif" width="97" height="17"></td>
</tr>
<tr>
<td height="20"><font size="-4">全くの初めての方/趣味として始めたい方</font></td>
</tr>
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_charge.gif" width="97" height="17"></td>
</tr>
<tr>
<td height="20"><font size="-4">[入]
21,000円 [受] 105,000円</font></td>
</tr>
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_lesson.gif" width="97" height="17"></td>
</tr>
<tr>
<td height="20"><font size="-4">1.5ヵ月,10回,3時間/回
【 全30時間 】</font></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
≪ After ≫
<table width="315" border="0" cellpadding="0" cellspacing="0" bgcolor="#E4E4E4">
<tr>
<td height="22" valign="top"><img src="images/top_class_web_basic.gif" alt="WEB DESIGN – ウェブデザイン [ 基礎 ]" width="315" height="22"></td>
</tr>
<tr>
<td valign="top"><table width="100%" border="0" cellpadding="10" cellspacing="0">
<tr>
<td valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr valign="top">
<td width="100"><a href="design_basic.html"><img src="images/top_photo_basic.jpg" width="100" height="125" border="0"></a></td>
<td width="10">&nbsp;</td>
<td><a href="design_basic.html"><strong class="top-txt-class">WEB
デザイン [ 基礎編 ]</strong></a><br>
<a href="design_basic.html"><img src="images/arrow_detail.gif" alt="WEB DESIGN [ 基礎編 ] 詳細" width="100" height="20" vspace="5" border="0"></a><br>
<span class="top-txt-normal">Webサイト構築講座 初心者クラス。<br>
Webデザインツールの業界標準となるDreamweaver、Fireworks、Illustrator、Photoshopの操作・機能を中心に学ぶ。制作現場で最初に必要とされる基本的な制作知識・スキルを習得する。</span></td>
</tr>
<tr>
<td height="10" colspan="3" valign="top"><img src="images/spacer.gif" width="100%" height="10"></td>
</tr>
<tr>
<td colspan="3" valign="top"><table width="100%" border="0" cellpadding="5" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#999999">
<tr>
<td bgcolor="#FFFFFF"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="top-txt-detail">
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_level.gif" width="97" height="17"></td>
</tr>
<tr>
<td>全くの初めての方/趣味として始めたい方</td>
</tr>
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_charge.gif" width="97" height="17"></td>
</tr>
<tr>
<td>[入] <span class="top-txt-money">21,000円</span> [受] <span class="top-txt-money">105,000円</span></td>
</tr>
<tr>
<td height="13" bgcolor="9195A2"><img src="images/top_contents_lesson.gif" width="97" height="17"></td>
</tr>
<tr>
<td>1.5ヵ月,10回,3時間/回 【 全30時間 】</td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
どうでしょう?
長かったですね…
以前のソースコードと比べると、新しいソースコードでは余分なテーブルタグが一つ消えています。
そして、スタイルシートをきちんと定義したのでフォントタグが無くなりました。
その他にも、幅や行揃え、上下の指定などが減っています
見える結果に大差が無くても、ソースコードにはこんな違いがあるのが、お分かりいただけたでしょうか。
ソースコードがシンプルになることで、**デザインの学校*ウェブデザイン 応用編 第4回**でもお話したSEO的にも検索ロボットが重要なキーワードにより到達しやすい状況が作れます
それにつくる人にも見やすいですよね
今回、自分以外の人がつくったHTMLを編集しみて、編集する人間が同じとは限らない以上、私もできる限り編集しやすいソースコード、ユーザーのアクセシビリティやユーザビリティ、SEOなどいろんな観点で有効なソースコードでかけるようにならなければ!と思いました

 

WEB(ホームページ)デザイン上級者向き 山梨県デザインスクール ウェブデザインスタジオ山梨

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

*

PAGE TOP