ウェブページのコードを手っ取り早くチェックするには？

教育

今、ウェブページを作る授業の成績をつけています。で、授業で作った作品の評価、とくにコードがきちんと書けているかを評価するには、どういうツールを使えばいいかと結構迷いました。

結局、次のようなツールを使っています。

どういう風に使うかというとですね…

  1. 作品のファイル群を１つのフォルダに放り込む
  2. HTMLファイル（複数）を指定して、Firefoxにドラッグ＆ドロップ
    • Firefox上に、タブごとにウェブページが開かれる
  3. Web Developerのメニューから、「Miscellaneous」→「Edit HTML」
    • 左側にHTMLのコードが表示
  4. Firebug起動
    • 下側にHTMLのツリー構造と、対応するCSSのコードが表示
    • この部分は、Web Developerでもいいかも（「CSS」→「Edit CSS」）
  5. HTMLとCSSの両コードをチェック
    • で、点数をつける
  6. タブを閉じて、別のウェブページをチェック
    • 表示されているHTMLのコードを再読み込みする

ちょっと面倒なように思えますが、手持ちのFirefoxでサクサクっとチェックできました。

ちょいスケ

書籍

先日本屋にいったときに面白い本を2冊見つけました。ちょいスケ（ちょいとスケッチ）の本。本格的に絵を描くということではなく、気軽に気になったものを描こうというないようです。購入してから気がついたんですが、著者が同じでした。

スケッチは3分 (光文社新書)

スケッチは3分 (光文社新書)

新書なのに、スケッチの話。しかも、3分〜5分で描く。身のまわりにある、モノ・人・風景などをスケッチするポイントやテクニックが紹介されています。うまくスケッチできるようになる、練習方法なんてのも紹介されています。個人的に、下のようなポイントが良かったです。

  • 手前にあるものから描く
  • 面はできるだけ1本の線で描く（継ぎ足しして描かない）
  • 適度に省略して描く

1分スケッチ！

1分スケッチ！

読んだのはこちらが最初。こっちは1分でできるスケッチを紹介。上の本よりも、もっと基本的なことが書いてあって、絵が苦手な人向きといってもいいかもしれません。個人的には、上の本と合わせて読んだら、すごく絵が描けそうな気になりました（笑）この本でよかったのは、手の描き方と地図の描き方。とくに地図の描き方のほうは、地図関係のデザインの参考になります。

どちらの本も、作例がしっかり載っています。しかも描く順が書いてあります。描く方向が矢印つきで（笑）もっと面白かったのは、手順（つまり分解図）が書いてあるのですが、一つひとつの絵は、コピーじゃなくて、全部手書き。著者の熱意が感じられました。