時代おくれ

HTML備忘録 / 記述メモ2

文字修飾

色と背景色 {color} {background-color}

文字の色と背景色は構造とセットで決めており意味があるので、思い付きで文字個別に変更することは（今のところ）無い。

{color:#000000; background-color:#ffffff;}　白反転

2018.11.08：透過色も指定可能で、サイドメニューのズレを防ぐ「非選択ダミー枠」に透明色（不透明度0％）を導入した。透明なので本来なら何色でも関係ないが、Opera 12が非対応なので背景色を指定している。色はRGB値（0～255）で指定し、不透明度は1（100％）～0（0％）で調整する。

{border-style:solid; border-width:1px; border-color:rgba(1, 1, 1, 0);}

サイズと太さ {font-size} {font-weight}

文字のサイズと太さは構造とセットで決めており意味があるので、思い付きで文字個別に変更することは（たぶん）無い。

{font-size:1.5em; font-weight:bold;} 1.5em太字

font-weight  normal/bold/lighter/bolder

ルビ <ruby>

HTML5で正式採用され、<rb>タグは廃止された。

<ruby>人類補完計画<rt>先にストーリーを補完しろ！</rt></ruby>　人類補完計画先にストーリーを補完しろ！

Opera 12は非対応、かつ非対応代替表示用の<rp>（</rp>も表示されないため「人類補完計画先にストーリーを補完しろ！」の様にベタ表示される。つまり<rp>を記述しても（対象環境の）誰も救済されないので省略可とする。

上付き下付き <sup> <sub>

<sup>は^{上付き文字}を<sub>は_下付文字を表し、装飾目的で使用しない。厳密な数学的マークアップでなければ<sup>や<sub>で代用してもよい。

なお<sup class="mark">を、脚注記号として^*や⁽¹⁾の様に使用している。<sub>は今のところ使用していない、算数嫌いだし (^_^;)

sup.mark {color:#00ff00; font-weight:bold;}

その他 <b> <u> <i> <s>

HTML5で<b>は単なる太字に、<i>は単なるイタリック^*に変更された。テキストを目立たせたいなら<mark>など別の意味のある方法を使う。<s>は既に正確ではなくなった内容に変更されたが、同じ打消し線でも、<del>の方がより明示的に表せる。<u>は廃止され、アンダーラインは<ins>に割り当て直されている。

と言うことでこの4タグは使用禁止、少なくとも単独では使わない。

^*えっ、意味が無いって？学名には意味あるぞ～ (~_~)/

構造的修飾

強調 <mark> <strong>

単に目立たせるなら<mark>を、強調の場合には<strong>を使い、日本語の斜体は好きでないので強勢の<em>は個人的に廃止した。<strong>は太字でない方がすっきりしているが、色情報なしでも強調が示せるように太字のままとしている。

mark {background-color:#008080; color:#ffffff; padding:1px;}
strong {background-color:#ffff00; color:#000000; padding:1px;}
strong rt {font-weight:normal; color:#ffffff; /* ルビ対策標準白文字に戻す */}

ルビ非対応のOpera 12で隠し文字（黄背景白文字）になる (T_T)

2020.01.20：強調の背景に角丸border-radius: 4px;を追加した。ほんの少しだけ上品になった、かもしれない (^_^;)

2020.01.21：角丸で文字欠けのように見える（事がある）のでpadding-right:3px; padding-left:3px;を追加して、前後に余白を作った。さらに少しだけ上品になった、様な気がする (^_^;;)

規定の色

一時的な色指定用にclass="white"（白・文字色）、"black"（黒・背景色）、"gray"（中間色）を設定している。

.white {color:#ffffff;}
.black {color:#000000;}
.gray {color:#808080;}

追加 <ins>

<u>はHTML5で廃止され、アンダーラインは<ins>追加された部分であることに割り当て直されている。

下線が目立ち過ぎない様に<ins>本来の下線を消し、borderで白（文字色）から変えて引き直している。その結果、意図した事ではないが文字と下線が微妙に離れ、本物より見栄えが良い (^_^)

<ins>追加された部分</ins>
ins {color:#ffffff; text-decoration:none; 
	border-bottom:solid 1px #008080;}

2018.10.29：段落を挿入する場合には、2em下げにして本文と区別しやすくした。

<p class="ins"><ins>挿入する段落</ins></p>
ins {color:#ffffff; text-decoration:none; 
	border-bottom:solid 1px #008080;}
p.ins {text-indent:0em; padding-left:2em;}

削除 <del>

個人的に廃止した<s>ではなく、<del>であれば削除された部分である事を明示できる。消線を強調し文字は目立たなくしているが、<del>一発で対応する方法を考え中。CSSの::beforeや::afterではタグ挿入できないのか？jQuery様の出番なのか？

<del><span>削除された部分</span></del>
del {color:#ff00ff;}
del span {color:#808080;}

コメント .comment

補足、注釈や本筋から外れた部分に枠囲みのclass="comment"を割当てる。同じ事を文字ポイントを落として表現する事も多いが、ここ「時代おくれ」でそれは禁忌事項。

.comment {width:543px; margin:0 0 0 25px;  /* ←原始の力 */
     border-style:dotted; border-width:1px; 
     border-color:#808000; padding:0px 5px 0px 5px; 
     margin-top:10px; margin-bottom:10px; border-radius: 8px;}

.caution {border-style:dotted; border-width:1px; 
     border-color:#ff00ff; padding:0px 5px 0px 5px; 
     margin-top:10px; margin-bottom:10px; border-radius: 8px;}

.history {border-style:dotted; border-width:1px; 
     border-color:#808000; padding:0px 5px 0px 5px; 
     margin-top:10px; margin-bottom:10px; border-radius: 8px;}
.history ul {margin:5px; margin-left:-1em;}

整形済みテキスト <pre> <code>

スペース、改行やタブを含む「整形済みのテキスト」をそのまま表示するのが<pre>で、これと組合わせてプログラムコードなどである事を宣言するのが<code>。

Chromeは<pre>のデフォルト文字サイズが小さく、かつそのサイズを<pre>の1emとするため、サイズのem指定は他ブラウザとの間で問題が起こる。そのためpx指定しなければならないが、Internet Explorer 11は、そのpx指定の文字サイズがなぜか大きく同じ大きさの文字で表示することはできない。トライアンドエラーでfont-size:14pxとしているが、Internet Explorer 11以外では小さくて読み辛いと感じる (-"-)

この文字サイズ（とタブ幅？）の違いが原因で、他ブラウザで表示できていてもInternet Explorer 11では画面から溢れ（表示されないので）読めない場合もあるが、これは実際にIE11で表示確認するしかなさそう。

また、SafariとInternet Explorer 11では全角半角混在で整形できなくなり、Safariはどちらに統一しても等幅フォントが適用されないため、微妙に揃わず美しくない (-"-)

2022.01.10 追記　Webフォント導入でInternet Explorer 11は正しく成形できるようになった。

pre {line-height:150%; font-family:monospace; font-size:14px;}

正しく整形できていれば行末が揃う
Hankaku ス  ペ  ー  ス  で  調整
Ｚｅｎｋａｋｕ　スペースで　調整
Ｚｅｎ Han  混  　在　  で　調整
混在すると変になるブラウザがある
日本語含むSource code は整形困難

Internet Explorer 8の表示もすごかったが、（幸いにも ^_^;）SSL足切で対象環境から外れた。

アンカー／リンク <a>

HTML5で<a>のname属性は廃止されid属性に統一された。また、要素のインライン／ブロックの概念が廃止されたため、<a>をインタラクティブコンテンツ以外の全ての要素に使用できる (^_^)/

基本方針で示したように、リンクに使用する場合は例外なしの黄色下線付きを使用している。また、カーソルが重なった時に反転する、タブレット系では無意味だが・・・。

a:link {color:#ffff00;}
a:visited {color:#ffff00;}
a:hover {color:#000000; background-color:#ffffff; 
     text-decoration:none;}
a:active {color:#ffff00;}

2020.01.21：反転時背景に（強調にならって）角丸border-radius: 4px;を導入した。