(X)HTMLについてのネタです。ずっと気になっていて、モヤモヤしていたことなんですが、ブログでマークアップを実践している方に是非伺いたいです。
「どうやって」マークアップしていますか？
先日少し触れた、エントリー内でのマークアップをすべきかとか、なぜマークアップするのかという"Why"に当たることではなくて、どんな方法・ツールで、どのような過程でマークアップしていますか？
考えられる方法はいくつかあると思うんですが、思いつく限りで挙げてみます。
- ブラウザの編集枠に直接打ち込む。
- 手打ち直線型。『<→p→>→いろはにほへと→<→/p→>』と進んでいく。左から右へ進む直線型。手数が多く先を考えていないと面倒。シンプルなので慣れれば一番早いか。
- 手打ち本文優先型。タグがあると文章構造が把握しづらいので、先に本文を書き、その後タグで挟み込む。本文は作成しやすいが、タグ挿入位置を探して入力するのは面倒。『いろはにほへと』→『<p>いろはにほへと</p>』
- 辞書登録直線型。IMEのユーザー辞書によく使うタグを登録する。直線型は上と同じ。手数が少し減る。
- 辞書登録本文優先型。同様。本文を先に書き、タグで挟み込む。
- HTMLエディタ（あるいはテキストエディタ）を使ってローカルで編集し、コピーする。
- 手打ち直線型。HTMLエディタの場合、色分け・入力支援・文法チェックなどが働くものが多いので入力の手間が省け、間違いが防げる。
- 手打ち本文優先型。上記参照。
- 辞書登録直線型。HTMLエディタを使うなら辞書登録する必然性は低いか。
- 辞書登録本文優先型。上記参照。
- タグ優先型。入力支援ボタンなどで先にタグを記述し、次に本文を書く。『<p></p>』→『<p>いろはにほへと</p>』
- タグ後付型。先に本文を記述し、範囲選択してタグで挟み込む。『いろはにほへと』→範囲選択→『<p>いろはにほへと</p>』
もちろん、どれか一つに決まるわけではなくて、いろんな場面でいろんな方法を使い分けていると思いますが、おそらくそれでも基本的な方法がそれぞれにあると思うんです。手打ち直線型は玄人っぽいですね。実際にはエディタを用いて書いている人が多いのではないかと想像します。
多くのHTMLエディタには直線型、本文優先型、タグ優先型それぞれに対応できるように便利な機能がついています。<aと入力したら、href=を親切に出してくれたり、本文の選択範囲をタグではさむボタンがあったり、本文を選択していない場合は先にタグを用意し、開始タグと終了タグの間にカーソルをあわせてくれたりするなどです。
でも、そのどれも僕にはいまいちピンと来ない。というか無理してそういう機能を使わざるを得ないという風に感じてしまいます…。（未熟なのか…!?)
文章を書くとき、やっぱり人は先に言葉と文章ありきだと思うんです。そのあとこれは段落にしたほうがいいな、これは定義リストにできるなとか、マークアップのことを考えるのではないでしょうか？ その意味で、先に入力すべきタグ・要素を考えるのは不自然な気がします（直線型、タグ優先型）。
また、文章を書いていて、その後タグを挿入するために範囲選択する手間は非常に面倒です（本文優先型）。<div>や<strong>などある特定の範囲を指定して特別な意味を与える役割を持つものは別として、<p>や<li>などのよく使い、かつ用法が限定されている（つまり開始時点と終了時点がある程度機械的に処理できる）要素は、もっと手際よくマークアップできたらいいのにと思います。
この「思考過程と実際の手順の乖離・不一致」が、HTMLって難しそうだな、面倒だなと感じさせる要因のひとつになっているのではないかと僕は個人的に思っています。（僕の周りにはWebページをホームページビルダーやワードで作るのが当たり前だと思っている人がまだたくさんいます。彼らは多くの場合、実際にはごく限られたタグの使い方を覚えればいいということを知らないし、知ろうとしてくれない…）
もっと言えば、これだけブログが流行している今、本文マークアップをしない人が多いのは「分からない・知らない」「分かってていてもマークアップする気がない」などの理由に加えて「面倒、手間がかかる」という理由があると思うんです。
そこで、皆さんが"どんな方法・手順で"効率よく（或いは主義を貫いて）本文マークアップをしているのか教えてください！
P R Fで議論されているものもValidのもののようですし（今久しぶりにフォーラムを読んでみたらものすごく難しいことがいっぱい書いてあってビックリしました。レベル高い…。いいものが出来るといいですね）。あとは本文をValidにマークアップしよう！ということで(^_^;)
因みに…僕は長いエントリーを書く場合はSTYLE NOTEかHTML Project2を使っています。タグ後付型です。
上で述べたようなタグ後付型の問題を解決する方法として、パソコン遊戯さんのHTMLエディタを使ってみようが非常に参考になります。こういうマクロボタンがデフォルトになってしかるべきだと思うんですが^^; いいものをご存知の方教えてください(*^^)v
短いエントリーの場合は辞書登録直線型です。結構これだけで書けたりもします。僕がユーザー辞書に登録しているものを少し紹介します。
| 読み | 変換候補 |
| ｐ | <p> |
| ｐｐ | </p> |
| おｌ | <ol> |
| おｌｌ | </ol> |
| うｌ | <ul> |
| うｌｌ | </ul> |
| ｌ | <li> |
| ｌｌ | </li> |
| ｄｌ | <dl> |
| ｄｌｌ | </dl> |
| ｄｔ | <dt> |
| ｄｔｔ | </dt> |
| ｄｄ | <dd> |
| ｄｄｄ | </dd> |
| ｂｑ | <blockquote></blockquote> |
| ＆ | & |
| ＜ | < |
| ＞ | > |
| ” | " |
| りんく | <a href=""></a> |
| ねいびー | navy & ivory（&を参照表記） |
謎な読みで登録しています^_^; IME日本語入力ONのままで感覚的に分かりやすく最低限のタグの開始を終了を…。なるべく覚えやすく、かつ速く入力できるように最後のキーを2回押すとそれに対応する終了タグが出てくるようにしています。
みなさん、どうしていますか？
- CSS・HTML
-
2005/07/27 Wed 19:31:04
-
Comment:6
-
Trackback:4
≪台風と、ライブ・イベントのメモ
How do you MARK UP? (2)≫
-
履歴を辿ってきました。
自分は”ローカルエディタ＋手打ち辞書登録直線型”の変形で、辞書には開始タグ閉じタグを一度に登録してます。
＞その意味で、先に入力すべきタグ・要素を考えるのは不自然な気がします
これに当てはまってしまいます。段落・リンク・イメージくらいしか使わないので、テキストと要素を同時進行で考えちゃいます。長文や凝った構成向きではないですね。
2005/07/27 Wed 22:25:48 [ Edit ]
-
初めまして。R'styleといいます。
私の場合はどれとも微妙に違って、編集枠に手打ちで、先ず「<>」を必要な数だけ並べて、要素名を入れて、内容を書いていきますね。
「<><>」→「<p></p>」→「<p>内容</p>」
という感じで。
まぁ、内容に応じて後でいっぱい修正しています（笑
2005/07/27 Wed 23:11:40 [ Edit ]
-
おぉ！カリスマの方々からコメント・トラックバックが付いている…恐縮してしまいますが(^^;)本当にありがとうございますm(__)m
＞sugさん
春木屋のsugさんですよね？ はじめまして！コメントありがとうございます！ ときどきブログを読ませていただいています。綺麗なデザインで惚れ惚れしています(^^)
なるほど、辞書で開始と終了のタグを同時に出してから、本文の入力をなさってるんですね。「辞書登録タグ優先型」を考えていませんでした。追加しておこうと思います！
そうですね、先にタグで括っておくと閉じ忘れがなくなる利点がありますね。
＞その意味で、先に入力すべきタグ・要素を考えるのは不自然な気がします
自分でこう書きましたが、そうですね実際にはきっちりと前後関係がわけられるものではなく、
＞テキストと要素を同時進行で考えちゃいます。
というのが、実際のところなのではないかと僕も思います。
これだ！といえるスマートな方法がもしあったら良いなと思っているんですが、実は微妙な部分なのかもしれませんね。他の方の入力方法を知る機会がなかなかないので参考になります。
＞R'styleさん
はじめまして！コメントありがとうございました。
第三者の視点から見て、PRFは大変有意義な企画だと思います。大変勉強になっています！
＞「<><>」→「<p></p>」→「<p>内容</p>」
まったく思いつかなかった方法です(+_+)すごい着想だと思います。
なるほど〜こういう考え方もあるんですね。メモしておこうと思います！( ..)φメモメモ
ありがとうございました！
2005/07/28 Thu 01:59:44 [ Edit ]
-
すみません、トラックバックしたものの、タイトル入れ忘れてました。
http://bittersweetdreams.blog9.fc2.com/blog-entry-296.html
ココに仰業な文章を書いたのですが、コメントで。
sugさんの「段落・リンク・イメージくらいしか使わないので、テキストと要素を同時進行で考えちゃいます。」
これですね。まだまだ覚えてる途中ですが、皆さんのように適切なマークアップができるように精進します。
2005/07/28 Thu 06:52:46 [ Edit ]
-
私の場合、２−６のパターンです。
プレーンなテキストには「紙2001」というソフトを使っています。
この段階で、形式段落は改行、パラグラフは改行２回（改行＋空白行）となるように整形しておきます。
次に本文をez-HTMLにコピペ。範囲選択→タグ挿入という手順を行ってますが、私の場合長い文章では、例えば同じpでもtitleとかclassとか色々属性をつけることが多いので、この手順が一番効率良いのかなと思っています。
ez-HTMLでは殆どショートカットキーで操作できるので、そう苦でもありません。
あと、短い文章でpとbrくらいしか必要でないエントリーの場合はブログのマーク付け機能に任せて、プレーンテキストのまま投稿します。
ほとんどのブログは改行をbr要素に、連続改行をp要素に変換する機能ってついてます…よね？
2005/08/01 Mon 06:11:39 [ Edit ]
-
hal*さんはじめまして！コメントありがとうございましたm(__)m
すくなくともFC2ブログでは連続改行をp要素にしてくれる機能はないと思います。
改行はなぜか<br />となるんですが、imgタグにはスラッシュがつかないとか微妙に謎な仕様です…。そのあたりの基本的なタグが自動的に変換する機能があるといいんですけどね(^^♪
ez-HTML人気ですね。既にインストールはしているんですが使い込みが甘いです^^;
ショートカットキーが便利なのか…φ(..)メモメモ
試してみたいと思いますね！
2005/08/04 Thu 02:14:53 [ Edit ]
Trackback
- Trackback URL
- http://silverring.blog6.fc2.com/tb.php/40-cf3c52b6
- - by sugar pot
-
Silver RingのSHUNさんが、How do you MARK UP?と、とても興味深い問いかけをされている。(X)HTMLについてのネタです。ずっと気になっていて、モヤモヤしていたことなんですが、ブログでマークアップを実践している方に是非伺いたいです。「どうやって」マークアップしていま
2005/07/27 Wed 22:59:38
- 記事を書く、そしてマークアップする - by Primary Planet
-
How do you MARK UP? - Silver Ring文章の内容に脳を集中させて書く。そしてマークアップにはオンラインソフトを駆使してできるだけ楽をする。このように私は、2つをまったく別のものとして分けて考えています。普通に XHTML 文書を書く時も、ブログに投稿する時も、私はいつ
2005/07/31 Sun 09:00:25
- ブログのエントリを記述する時のマークアップの仕方 - by あの頃のように…
-
How do you MARK UP?そこで、皆さんが"どんな方法・手順で"効率よく（或いは主義を貫いて）本文マークアップをしているのか教えてください！Silver Ringとの事ですので面白そうなので勝手ながら回答しようと思います。他の詳しい内容については上記サイトのエント�
2005/08/01 Mon 02:14:53
- Re: How do you MARK UP? - by 行動記録
-
論理構造は脳内で考えるのでoutput時には決定していますよね。
2005/08/07 Sun 18:46:00