更新のしやすいサイトについて
最近お客様でご要望が多いのは自社で更新ができないかということが多くなっています。
その際に制作会社として考えることはやはり、いかにシンプルなコードを書くかでしょうか。
テーブル組みで
<table>
<tr>
<td>10月1日</td>
<td>更新しました</td>
</tr>
<tr>
<td>10月2日</td>
<td>更新しました</td>
</tr>
<tr>
<td>10月3日</td>
<td>更新しました</td>
</tr>
</table>
| 10月1日 | 更新しました |
| 10月2日 | 更新しました |
| 10月3日 | 更新しました |
こんな感じになってしまうのは少し分かりにくいし、コードの読みにくさもあります。
<dl>
<dt>10/01</dt>
<dd>更新しました</dd>
<dt>10/02</dt>
<dd>更新しました</dd>
<dt>10/03</dt>
<dd>更新しました</dd>
<dt>10/04</dt>
<dd>更新しました</dd>
</dl>
このように定義型のリストを使うと非常にシンプルで分かりやすいコードになります。
- 10/01
- 更新しました
- 10/02
- 更新しました
- 10/03
- 更新しました
- 10/04
- 更新しました
あとはスタイルシートで<dd>要素のマージンを
dd{
margin-left:10px;
}
としてやれば「更新しました」の部分が左に寄りますね。
このdl、dt、ddを使った定義リストは案外メジャーなコードではありませんが、
なかなか使えるコードなのです。
うちのサイトのリンク集はすべてこのコードで書いてありますので誰でも更新が簡単にできるんです。
リストアイテムはもっとシンプルですね。
これらは最近CSSと組み合わせてナビゲーションに使ったりしますが確かにスタールシートなしでは使いにくいタグだとは思います。
<ul>
<li>更新情報</li>
<li>更新情報</li>
<li>更新情報</li>
<li>更新情報</li>
<li>更新情報</li>
<li>更新情報</li>
<li>更新情報</li>
</ul>
とてもすっきりです。
こんなかんじですね。
- 更新情報
- 更新情報
- 更新情報
- 更新情報
- 更新情報
- 更新情報
- 更新情報
わたしもリストアイテムタグはいろいろなところに使っています。
display:inline;
list-style-type: none;
padding-right: 3px;
padding-left: 3px;
こんな感じでCSSを指定してやると横になりますね。
大変分かりやすく更新がしやすくなります。