「Webサービスを（少しずつ）構築する」 第1回

1. ページデザイン

道具

• pug を使う
  • そのために node.js も必要だろう
• CSS で

手順

1. 道具の準備
2. pugでソースを書く（エディタで入力）
   • 保存時に（メモ帳やTeraPadの人は） 日本語の文字コードに注意
3. HTMLに変換
4. ブラウザで表示させて確認
   • 結果を見て、2. に戻る

サンプル

以下のように（簡便に）書いてみた。 その結果が右図。

doctype html
title おためし画面
h1 おためし画面
textarea(rows="4" cols="40") 今日のメモ
button 送信
hr
table
  tr
    th 日付
    th 内容
  tr
    td 10月30日
    td まずは使ってみました
  tr
    td 11月1日
    td 今日はいい天気でした

改良の必要性：

• tableの枠線を表示させる、など、見やすくする工夫は必要だろう。

• そのために CSSをいくつか挟む必要がある。

  style.
    th,td {border:1px solid #8800ff;}
    table {border-collapse: collapse;}
  

  • styleタグの、中身をそのままHTMLファイルに転写させる （pugは加工しない）ために、style. という書き方をしていることに着目。

サンプルの pugソース と 変換結果のHTML

• 上記サンプルでは、文字化けを防ぐために、 ２行目に以下の行を挿入してあることにも留意されたい。

  meta(charset='utf-8')