Mac好きのアラフォーweb製作者ののんびりブログ

Mac好き、iPhone好きのアラフォーのWEB製作者がその日覚えたこと、気がついたことを備忘録的に淡々とつづるブログです。自分が忘れないために残したものが誰かのお役に立てれば…。

せっかくはてなブログを始めてみたのでMarkdown方式について調べてみたら…。

タイトルの通り、せっかくはてなブログを始めてみたので、ダッシュボードをいろいろ見ていて気になった、「設定」メニューにある「Markdown記法モード」が気になっていろいろ調べてみました。

せっかくのはてなブログなのに、なんで「はてな記法モード 」じゃないんだ!というツッコミはナシで…。
「Markdown」っていうのは、以前にも見聞きした記憶があったのにスルーしてたので。

さて、突然ですが普段コーディングをする際には、どうもDreamweaverが重かったり意図しないことが起きたりするのが嫌で(ソフトのことをしっかり把握するほど使い込んでいないのもあるとは思うのですが…)panicのcodazen-codingプラグインを入れて使っているのですが、どうしても苦手なのがテーブル部分(表組み)のコーディング。

デザインと見比べながら

table>(tr>th+td*3)*4

とか書いてzen-codingで展開してできた要素の中に中身を放り込んだり、先に中身をプレーンなテキストに書いた上でWrap With Abbreviation!!とやってみたりと試行錯誤をしていますが、デザインの見た目では左から右に並んでいる項目が、ソース上では上から下へと記述していくからなのか、どうも直感的に書けてない気がして、表組み部分があると、一瞬「さあ、やるか!」と気合を入れて書き始めることが多々ありまして…。

Markdown記法について調べていると、確かに<h1>ほにゃらら</h1>と書きたいところを# ほにゃららと書くだけでいいから楽だなとか、リンクを書きたいときに[アンカーテキスト](http://hoge.com/link-text.html)と書けたりするのも簡単だなぁ、とも思いましたが、ここまでなら慣れてるzen-codingでも手間は変わらないなぁ、と言う印象でしたが、テーブル要素の記述方法を見たとたん衝撃が走りました…。

f:id:kazzpapa3:20150124135245j:plain

みたいなやつを作りたいときに、

|商品名|価格|販売状況|
|:--|--:|:-:|
|りんご|290|販売中|
|みかん|200|売り切れ|
|メロン|5000|入荷待ち|

と書くだけで、表組みになるじゃないですか…。 で書いてみた。

商品名 価格 販売状況
りんご 290 販売中
みかん 200 売り切れ
メロン 5000 入荷待ち

項目の並び方もまさしく見たまま。直感的ですね。

基本的な書き方は各項目(セル)をパイプ文字|で囲んであげるだけ。 これを表組みの見た目の通り行ごとに改行して書いてあげるだけ。

|見出し1|見出し2|見出し3|見出し4|

一つ特殊な部分は1行目と2行目の間に3つ以上の-をパイプ文字|で囲んで作った行を含めてあげると

|見出し1|見出し2|見出し3|見出し4|
|---|---|---|---| ← ---を|で囲んであげた行を作る
|項目1|項目2|項目3|項目4|

1行目が見出しとしての行<thead>として扱われる仕組みのようです。

そして、パイプ文字で挟む---の部分を:と組み合わせることで、文字揃えの指定もできるとのこと。

  • :--で左揃え
  • :-:で中央揃え
  • --:で右揃え

試しに

|右揃えにしてみる|中央揃えにしてみる|左揃えにしてみる|
|--:|:-:|:--|
|あいう|かきく|さしす|

と書くと、

右揃えにしてみる 中央揃えにしてみる 左揃えにしてみる
あいう かきく さしす

こうなる。

複雑なrowspan="2"とか、colspan="3"といった入り組んだ表組みには向かないでしょうが、見せたい並びの順の通りに書けるMarkdown方式で表組みの書き方は使えそうです。

zen-codingでの書き方と、Markdownでの書き方とのうまい使い分けができると仕事もはかどりそうです。