じゃんぬねっと日誌

ネタと雑記と時々プログラミング

目次

Blog 利用状況

ニュース

不況すぎる件。

スポンサードリンク

運営サイト

  • C# と VB.NET の入門サイト

書庫

span 要素はどうマークアップすべきなのだろうか?

私は自分のサイトや Blog などでコードを書く時は、その言語にあった標準的な色付けをするようにしています。そういった場面では、構造的な意味を補強するという意味で span 要素を使い、付属される情報を CSS 側に定義しています。これは、一般的な手法でしょう。常識的に考えて・・・

このあたりで半年ほど前からくだらないコトで悩んでいます。悩んでいるのは、同じような色づけがスペースを挟んで 2 語続いている時の span 要素のマークアップの仕方です。


span 要素のブルース♪ span 要素のブルース♪ span 要素のブルース♪ 聞いてくれ~♪

span 要素でソースに色づけをする時の話なんやけど、「面倒だから」ってことで、

HTML

<span class="key">private static int</span> MosaMosaAA() {
    <span class="key">return</span> 0;
}

間にある空白も含んで一度にマークアップしちゃうのか。それとも... 「いやいや、単語ごとに意味があるんやから」と、

HTML

<span class="key">private</span> <span class="key">static</span> <span class="key">int</span> MosaMosaAA() {
    <span class="key">return</span> 0;
}

単語ごとにマークアップするかは... ジャジャジャジャジャジャジャジャジャジャジャジャジャジャジャジャ、ジャ... 自由じゃないかもしれない。

span 要素 is not freedom♪ span 要素 is not freedom♪ span 要素 is not freedom♪ span 要素 is not freedom♪

ちなみに、em 要素や strong 要素やったら、間違いなく単語単位でマークアップするで♪


span 要素でも「単語単位での修飾する」という考えの方が、冗長かもしれないですけど無難かなぁなんて思いました。見方次第だとは思うのですが。

HTML では、どの要素がどんな役割を果たしているのか、見た目以外の部分も見ておく必要があると考えています。見た目だけを重視した結果の問題といえば、blockquote 要素をインデントさせるためだけに用いるというお話が有名ですよね。Web サイトを作成支援している Web サイトでさえも昔は間違いだらけでした。

投稿日時 : 2007年4月23日 8:50

コメントを追加

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 9:26 かずくん

「単語ごとにマークアップ」に一票

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 9:31 じゃんぬねっと

理由があれば理由も合わせてお願いします。(*_ _)

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 13:32 oyama

冗長さの問題のほかに、1要素に押し込んだ時のメリットは何がありますかね?

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 13:35 じゃんぬねっと

>oyama さん
文書構造上の「意味合い」というメリットがあると思います。
人間に対する視覚的な変化はありません。

# ついでにいうと、blockquote 要素ならぬ、blockcode 要素の適用まだぁ?

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 13:36 シャノン

> 「単語ごとにマークアップ」に一票

もう一票。
理由としては、

> 「いやいや、単語ごとに意味があるんやから」

かな。
あと、(吹聴するばかりで全然実現の目処が立っていないのだけど)XMLで原稿を書いて、XSLTでHTMLに仕立てるってことを、いつかやりたいと思ってる。
例えば、C#のコードをXML風に書いたとき、

<method access="private" static="true" returnType="int">MosaMosaAA</method>

みたいにしたものを、XSLTで機械的に処理すると、結果的に、単語ごとにする方が楽だろうなぁ、と。

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 13:38 シャノン

> 文書構造上の「意味合い」というメリットがあると思います。

???
1つの span に押し込むと、そういうメリットが出てくるの? 逆じゃないかなぁ…

> blockcode 要素の適用まだぁ?

<code> じゃダメなんですか?

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 13:57 じゃんぬねっと

>シャノンさん
> 1つの span に押し込むと、そういうメリットが出てくるの? 逆じゃないかなぁ…
ああっと、逆のことを仰っているのかと勘違いして思いました。
(なので、返答も逆になってしまいました...)

> <code> じゃダメなんですか?
インライン要素なんですよね。
よって、本来の使い方をすると細かい単位で括る必要があります。
blockcode はブロック要素であって、サンプルコードとなれば後者が適切かと思われます。

現状だと「整形済みテキスト」という意味で pre 要素を使うことにしています。

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 14:18 シャノン

> インライン要素なんですよね。
> よって、本来の使い方をすると細かい単位で括る必要になります。

「本来の使い方」って?
あと、ブロック要素とインライン要素って、なんでそんな分類があるんだろうと思う。
確かに HTML DTD の中には block と inline ってのが登場するけど、あれは単に、個々の要素をたくさん書くのを避けるためであって、意味的にブロック要素とインライン要素っていう区別は無いものと考えています。
別にインライン要素だからって、改行をまたいで使っちゃダメってことはないんじゃないかな、ということ。

ちょっとびっくりだったのが、

http://www.asahi-net.or.jp/~sd5a-ucd/rec-html401j/struct/global.html#h-7.5.3

> リスト要素を行内スタイルにするなど、ブロック要素を行内スタイルでレンダリングすることが適当であるような場合もある。
> しかし一般的に言って、著者はHTML要素の慣習的解釈を上書きするようなことはしないよう求められる。

…そうだったんだ。

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 14:43 かずくん

> 理由があれば理由も合わせてお願いします。(*_ _)
理由は、↓がすべてを語っている。
>「いやいや、単語ごとに意味があるんやから」

あえて後付けで理由を考えると、
ソースコードの場合、パースしたツリーからXML -> XHTMLまで自動化できるかもしれない。
単語ごとに括っておくと、細かな制御を付け足すことができるかもしれない(将来の拡張性のため)
ってところか?

だめだ、あまり良い理由が思い浮かばない。OTL

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 14:59 じゃんぬねっと

大体、私の思想は間違っていないようですが、困るのがこれですね。

If True Then

End If

If, True, Then はそれぞれ別のキーワードなので問題ないとして、'End If' は、"End If" というステートメント レベルで見るべきなのか、それとも 'End' と 'If' というキーワードとして見るべきなのか...

C# だとこういったことがないのですけどね。

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 15:01 じゃんぬねっと

個人的には、<span class="key"> としている以上、つまりは、色づけという意味合いしかないのであれば、End と If を割ってマークアップすべきだと思っています。

どうでしょう?

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 15:08 シャノン

個人的には End If でまとめるに1票。
それにあたって、key というクラス(keywordの意味だよね)が適当でないというなら、クラス名の変更も考える。
俺としては、「End If」で1つのキーワードとしても違和感はない。
ちなみに、俺なら「else if」も1つにしちゃう。

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 16:06 じゃんぬねっと

色づけ主眼でなければ、VB はそうかもしれません。
ただ、C# に限っては else if は、ひとつのステートメントとは言えないと思います。
あれは、配置上 else if になっているだけという解釈です。

今回は色づけ主眼なので、それぞれで囲もうと思っています。
em や strong となれば、また少し考えが変わるやもしれません。

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 16:47 nico

「単語ごとにマークアップ」に一票

private // こんな類のコメントを
static // 喜ぶ人は少ないだろうけど
int // 教材なんかでは許されると思うので。
MosaMosaAA() {
return 0;
}

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 17:40 nico

なんか話題に遅れてる私。
目標を「キーワードが色づけできればそれで十分」とするか、「構文をマークアップで表現したい」かで大違いになりますね。
VBの「継続行」まで考慮しようとすると…ぐぇ。

「ブログとかなら、色づけだけで十分」と思う私は、やっぱり「単語ごと」で十分かな、と思います。

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/23 21:08 じゃんぬねっと

>nico さん
いえいえ、ご意見ありがとうございます。
とりあえず、ほとんどの方と同じような認識で安心致しました。

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/24 9:32 シャノン

> ただ、C# に限っては else if は、ひとつのステートメントとは言えないと思います。
> あれは、配置上 else if になっているだけという解釈です。

たとえ言語規格上そうであろうと、俺の脳内では「else if」で1つなのですw

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/24 9:43 じゃんぬねっと

えー、そんな言い方シャノンさんらしくない。
オレ定義がお好きなあの方じゃあるまいに...

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/24 12:49 シャノン

「if、for等の後に、ステートメントが1つである場合でも、必ず {} で囲む」という俺ルールがあります。
else if をそれぞれ別とみなすと、else if ではなく、else { if } と書かなければならなくなってしまいます。
俺ルールに「ただし、else if の場合は例外とする」と例外条項を追加するより、「else if は別々と考えない」方がすっきりするんです。

#「if や else の後の {} は省略しない」というルールを定めているのに、「else if」の場合にはそれが「徹底」されていないのは、ソフトウェアの「深刻な問題」であると言っているのです。
#そもそも「数学的構造」が云々…
#とか言ってみるテスト。

# re: span 要素はどうマークアップすべきなのだろうか? 2007/04/24 13:04 じゃんぬねっと

すみません、マジでそれっぽく聞こえるんですがw

タイトル  
名前  
URL
コメント