やってみる

アウトプットすべく己を導くためのブログ。その試行錯誤すらたれ流す。

HTML文書をつくる6 テキストの強調・重要・関連(em, strong, mark)と、CSS代用系(b, i, u)

 テキストの強調について。このマークアップも悩みやすい所。

要素一覧

要素 概要 使用例
em テキストを強調する 日本語だと傍点(圏点)をつける部分
strong 重要であることを示す 読者に重要度や緊急性が高いことを伝える
mark 関連があることを示す 検索したときにヒットした箇所をハイライトするなど

 以下は使い方に困りそうなもの。

要素 概要 困る
b 読み手の注意を引きたい 意味づけとしての価値がほぼない
i セリフや慣用的なテキスト 使われていることが少ない
u 非テキストの注釈(中国語の固有名詞のマーク)やスペルミス ほぼ使わない。emなどほかの要素を使う

em

 emはアクセント部分を強調することで、主張したいことを変えるときに使うらしい。強調によって意味が変わる。

 まずはマークアップしない文章。たんなる事実を述べただけ。

私は天才である。

 つぎは「私は」を強調した。これにより、相対するライバルに向かって暗に「お前は天才じゃないけどな! バカだしな!」と嫌味ったらしく言っているかのように、含みをもたせた言い方になる。と察させたくて強調させているつもり。

<em>私は</em>天才である。

 つぎは「天才」を強調した。だれかに「変態」と言われてしまったので、訂正する意味をこめて、天才であることを強調したと思われる。

私は<em>天才</em>である。

 視覚効果としてはイタリック体になる。でもこれは英語圏の習慣である。日本語圏なら傍点で表示する。そのためにはCSSを書かねばならない。lang="ja"のときは自動的にそうしてくれたら嬉しいのだが。

strong

 strongは重要性、深刻性、緊急性を示す。

性質 概要
重要性 文章のうち重要な部分を示す
深刻性 警告や注意を示す
緊急性 早く確認すべき部分を示す

重要性

<h1>第一話 <strong>ガンダム、大地に立つ</strong></h1>
<figcaption>図1 <strong>仕事と自殺の相関図</strong><figcaption>

深刻性

<p>
<strong>警告!</strong><br>
なんかヤバイですよ!
</p>

緊急性

<strong>緊急地震速報:9時20分頃に地震がありました。</strong>

<p>本文<p>

 なんというか、あまりにも意味が広すぎて、意味付けできている気がしない。それぞれ専用のタグを作ったほうがいいのでは? 強いとか弱いではなく、その部分が何なのか、もっと明示しないと伝わらないよ。性質だって3つもあって共用しているし。

 視覚効果としては太字になる。<b>と同じため区別がつかない。

mark

 markは別の文脈と関連した部分を示す。参照することを目的にマークする。文書の著者ではなく、検索エンジンや読者によってマークされる。

 たとえば以下のHTMLがあったとする。

<p>山田さんはC言語が好き。</p>

 検索エンジンで「C言語」でヒットし、閲覧すると、以下のようにマークされる。

<p>山田さんは<mark>C言語</mark>が好き。</p>

 検索エンジンで「山田」でヒットし、閲覧すると、以下のようにマークされる。

<p><mark>山田</mark>さんはC言語が好き。</p>

 大抵、ハイライトされるのは一時的。スクロールしたりすると消える。

 視覚効果としては、背景が黄色くなる。ノートに黄色い蛍光色のマーカーで線を引いたような感じになる。

b

 bは注意をひく。意味付けが弱く、視覚効果としての意味合いが強い。それはCSSの分野だと思う。なので使いたくない要素。

 視覚効果としては太字になる。英語圏ではstrongと同じ。つまり重要性、深刻性、緊急性がないけれど、目立たせたいときに使う。個人的には、急に太字になったりイタリックになったりすると読みづらい。全体のラインがガタガタになるせいだと思う。

こいつを見てくれ。<b>こいつ</b>をどう思う?

i

 iは読みやすくするために使う。通常の文脈から区別するために使う。声(セリフ)、用語、感想など。font-awesomeではアイコン画像を表示するときに使っている。

 用語なら<dfn>で定義すべきでは? <i>とどっちを使うべきなの?

 ところで、小説では地の文と会話文がある。その中間として、主人公が考えていることがある。地の文において、事実を説明している文脈と、主観による感想を述べている文脈がある。これは<i>タグで区別すべきなのだろうか? 以下のように。

<p>スマホは携帯型の電話機である。
しかしもっぱらコンピュータとして使うことが多い。
メールやチャットもその機能のうちのひとつだ。
<i>まあ、俺は無職ぼっちだから連絡する相手なんてひとりもいない。無用の長物かもしれないが。</i>
とにかくスマホは便利である。</p>
<p>山田は男の中の男だ。<i>道は俺が切り開く!</i>といって、俺たちを導いてくれた。じつに頼もしい。</p>
<p>いますぐ伝えなければ。俺は廊下を駆け抜けた。
いきおいよく教室のドアを開き、自席で田中としゃべっている山田に向かって大声で言い放った。</p>
<i>「今日の給食、カレーだってよ!」</i>
<p>直後、山田の顔に花が咲いた。</p>

 よく小説で「」()『』【】で囲うような部分を<i>にすべきだということかな? でもそれだと、わざわざHTMLやCSSマークアップせずとも、直接テキストでその文字を使えばいいだけでは? いまいち<i>の使いどころがわからない。

 戯曲のようにセリフと状況描写を分けるときに使うとか?

 あるいは、新しい読みやすくなるようなスタイルを考案し、CSSで実装すべき?

 視覚効果はイタリック体になる。文字が少し斜めになる。でも、日本語圏にはそういった習慣がない。むしろ、読みづらくなるのでは? emもイタリック表示になるので区別がつかない。

u

 uは、ほぼ使わない。非テキストの注釈として使う。たとえば中国語において固有名詞をマークするとき。またはスペルミスとして示すとき。

 日本語においては、誤字・脱字・衍字・誤用などで使うのだろうか? 赤ペン先生に原稿を校正してもったとき、その箇所に<u>でマークしてもらうのか? そんなことは一言もかいていない。でも、スペルミスを示すのと似た用途で使うなら、そういうことだと思うのだが。どうなの? でも、<del><ins>を使って正しい修正も示してくれたほうが良くない?

 そもそも「非テキストの注釈」とかいう説明がわからん。非テキストってなに? もしや発話したときの音声を指しているのか? 中国語について知らないので説明が理解不能

 注釈といえば、日本語圏なら以下のように使われるけど。それのこと? スペルミスと全然用途が違うと思うのだが。あれ、脚注だっけ? 言葉の定義がわからん。

パソコン[1] を使った。

[1] 個人用コンピュータのこと。

 視覚効果としてはアンダーライン。それはアンカー(ハイパーリンク)と同じであり、混同しやすい。ならなおさら、いつ、どう使うんだ? 使わないのが正解だと思う。

HTMLに書いてみた

 わけわからんので、とにかく色々試してみた。

<!-- 文中文脈系 -->
<em>強調表示</em><br>
<strong>重要、深刻、警告</strong><br>
<mark>別文脈との関連</mark><br>
<b>重要ではないが注意を引きたい</b><br>
<i>声(セリフ)や専門用語など</i><br>
<u>非テキスト注釈。</u><br>

<!-- 情報源系(引用、細目、用語) -->
<q>行内引用</q><br>
<cite>作品名</cite><br>
<small>細目</small><br>
<dfn>用語</dfn><br>
<abbr>略語</abbr><br>

<!-- 訂正系 -->
<s>すでに正しくないテキスト</s><br>
<del>削除済みテキスト</del><br>
<ins>追加したテキスト</ins><br>

<!-- 機械可読系 -->
<time datetime="2000-01-01T00:00:00+09:00">2000年1月1日</time><br>
<data value="1234">山田太郎</data><br><!-- マイナンバーID -->

<!-- ルビ系 -->
<ruby>漢字<rp></rp><rt>かんじ</rt><rp></rp></ruby>

<!-- 環境文脈系 -->
<code>console.log('Hello world !!')</code>
<var>x</var>
<samp>Hello world !!</samp>
<kbd>Ctrl</kbd>

 ちがう要素なのに、同じ視覚効果を使っているものがたくさんある。結局、テキストそのものから文脈を読み取るしかないのでは? だったらマークアップの意味なくね? CSSを作り込まねばならないの? でも、文書によっては様々な視覚効果があると逆にごちゃごちゃして分かりにくくなりそう。どうしたらいいんだ……。

会話

 会話をHTMLで示すときのマークアップ方法。

 インスタント・メッセンジャーにおける会話をHTMLで書いてみる。

<p><time datetime="2022-01-01T00:00:00+09:00">00:00</time><b>山田</b> おっすおっす</p>
<p><time datetime="2022-01-01T00:01:03+09:00">00:01</time><b>木村</b> こんばんちは</p>
<p><time datetime="2022-01-01T00:02:06+09:00">00:02</time><i><b>山田</b> が退室しました。</i></p>
要素 用途
p 1回あたりのメッセージ
b 話者名
i システムメッセージ

 以下のほうがよくない? その文脈ごとに専用のマークアップ言語を作ったほうが可読性もあがるし短く書けると思うのだが。でもそれを言ったらHTMLの存在を否定することになっちゃうのか。

<msg user="山田" datetime="2022-01-01T00:00:00+09:00">おっすおっす</msg>
<msg user="木村" datetime="2022-01-01T00:00:00+09:00">こんばんちは</msg>
<msg datetime="2022-01-01T00:00:00+09:00"><user id="1">山田</user> が退室しました。</msg>

 おそらく以下のような流れがよいのだろう。

  1. XSDで文脈ごとに適したXMLのサブセットを定義する
  2. XSDに従ってXMLを書く
  3. XMLをXTSLでHTMLに変換する
  4. CSSで見た目を調整する

 あまりに大変すぎる。そんなこと、やってらんない。だから手を抜いて雰囲気でHTMLを書く。

使うために必要なこと

  • どの要素を使うか選別する
  • どう表示するかCSSを考え実装する

 デフォルトのままだと英語圏の慣習に従った表示方法になる。とくに<em>強調に関しては傍点にしたい。その用意が面倒。

所感

 面倒くさい。HTMLは曖昧。文脈によって、どの要素を、どういう用途で使うか考えねばならない。統一せねばならない。でもだからといって、きっちり定義するとXSD、XML、XTSL、CSSもやらねばならない。面倒くささMAX。できるだけ手を抜きたくて、雰囲気でHTMLを書く。だから一生曖昧なコードしかかけずイライラする。

 今は我慢だ。最低限の知識さえないのだから。いずれ完璧なコードを書いてやる。でもそこに注力しすぎて沼にはまったのがSGMLXML系なんだよなぁ。完璧をめざしてもキリがない。かといって手抜きをして曖昧にしても思わぬ罠にハマるし、調べ判断するのが大変すぎる。だったら完璧にして自動化したほうがよくない? 結局、大変でも完璧をめざすのが最短だと思う。

 完璧に至るまでは雰囲気でHTMLを書くことに甘んじよう。いつもその曖昧さや適当さにストレスを感じ続けていよう。いずれ完璧なコードを書くために。

 言語学習しているのに、こういう考えを整理しなくちゃいけないのも面倒くさい。でもやらないと投げ出しちゃう。

 もういいよ。em,strong,markでさえ書かなくていいよ。pだけでいいよ。重要じゃないテキストなんて書くなよ。全部strongなんだよ。そうでないとこの文章が駄文でありいらない子だと言われているようじゃないか。やめてくれ。そんな悲しいこと言わないでくれ。それが重要かどうかは読者にゆだねればいいんだよ。ぶっちゃけ、重要でも深刻でも緊急でもない。そんなの書かないほうが一番いい。強調もマークもいらない。強調なんてしなくても文章を読んで察せるような、巧妙なライティング技術をみにつけるほうが先だ。マークなんてグーグル先生がつけてくれる。もうお前ら皆いらないんだよ。私の書いた文章とおなじくらいいらないんだよ。

対象環境

$ uname -a
Linux raspberrypi 5.10.63-v7l+ #1496 SMP Wed Dec 1 15:58:56 GMT 2021 armv7l GNU/Linux