[リニューアル] HTML＆CSSコーディング

うかブログ »

ウェブデザイン »

[リニューアル] HTML＆CSSコーディング »

画像上で素案を作り、それを切り出してパーツを作れば下準備完了。コーディング作業に入っていきます。なんですが、全部のパーツを作ってからコーディングを始めると、途中で画像の修正が必要になったり面倒なことが起きるので、私はコーディングを進めつつ、そこで必要になるパーツを随時作っていく方法をとってます。

Dreamweaver、使ってます

で、そのコーディング。Dreamweaverを使ってパカパカ手打ちしてます。（DWのバージョンは「8」ですが。）

ソフトを使っているのに手打ちとは何ともアレなんですが＾＾；、本来Dreamweaverというソフトは、ホームページビルダーなんかと同様にワードで図を描くのと同じような感じでページを作り、ソースが勝手にできちゃうYO！という便利なソフトなんですが、イマイチ使い方が分かってないので単なるテキストエディタとしてしか使ってません。。。

使い方をちゃんと覚えればもっと便利なソフトなんだろなー。

構造を意識してdivタグで囲う

で、CSSレイアウトするにあたって多用するのがdivタグ。以前は何も考えずポコポコとdivタグを並べてたんですが、最近はHTMLの構造を意識しつつdivタグで囲うようになりました。

例えばこんな感じ。

<div id="Header">
     <h1>タイトル</h1>
     <p>アレアレコレコレなサイトですよーという説明</p>
     <ul id="Menubar">
          <li>メニュー(1)</li>
          <li>メニュー(2)</li>
          <li>メニュー(3)</li>
     </ul>
</div>

みたいな。ま、ソース見ただけじゃ何を意識してるのか分かったもんじゃありませんが＾＾；、一応「Header」という大きなくくりの中にタイトル、サイトの説明、それと「Menubar」というくくりがあり、「Menubar」の中に各メニューが収められていると、そんな感じです。（分かりづらいな＾＾；）

ひとつひとつのくくり＝構造を意識しながらHTMLをコーディングしていくと、CSSの指定がしやすくなったり、後で修正を加えたりするときに分かりやすかったりするのがポイントかなーなんて思ったり思わなかったりｗ

リンクシェアのソースがいい感じです

で、こーゆースタイルのコーディング術をとる中でとっても参考になるのがリンクシェアのサイト。私が「構造」というものを意識し始めたきっかけになってるのがコレなんですが、とってもキレイなソースで素敵です☆

サイトを作るときって表面ばかりを参考にしようとしちゃいますけど、HTMLやCSSのソースを覗いてみるといろいろと参考になることが多かったりします。

手前味噌ではありますが、このブログのソース（特に個別ページ）はそんなことを意識しつつ作ったソースなので、比較的キレイにできていると思います。よかったらご参考に♪

「MTサイトのリニューアル」関連記事

• サイトのリニューアル・リデザイン
• [リニューアル] コンセプトを整理する
• [リニューアル] レイアウトを考える
• [リニューアル] Photoshopで素案作成
• [リニューアル] WEB2.0的デザインのパーツ作り
• [リニューアル] HTML＆CSSコーディング
• [リニューアル] MTテンプレートの作成
• [リニューアル] リニューアル完了

△ページトップに戻る