白河ま日記(仮)

あたまわるいぶんしょうかくよ

HTML とか CSS とか。実験とメモ

はてなブログは、DOCUMENT宣言が無いに等しい。いろんな利用者がいろんな書き方使い方をするので、あいまいにしておくのが良いとの判断だろうか? まあいいけど。


ページ内目次にはコレ使えたらいいんだろな、<nav>
て、勝手に消されなかったから使えるってことか。多分。なお、はてなブログの編集機能にある「目次」を使うと、自動で見出しを拾ったリンク付きリストを作ってくれる。作ってくれる……のはありがたいが、全ての見出しを拾うので、目次自体に見出しをつけるといったことがはばかられる。うひ。アクセシビリティの観点では、目次自体に「以下に続くのはこの記事の目次ですよ」ということがわかる見出しはあった方がいいのか無い方がいいのか、はたしてどちらなのだろうか。スクリーンリーダー(画面読み上げソフト)にはそれ自体に見出しを拾う機能があるらしいが。あと、リンクを拾う機能もあるとぼんやり記憶しており、だとすれば次の見出しまですっ飛べるように見出し付きの方がいいのかどうだか。わからん。


キーボードでフォーカス移動させたら、「コメントを書く」が無視されるぞオイィィィ!?

italic体と斜体と

2020年4月22日追加

Firefox 75.0 (現在の最新バージョンらしい) は、デフォルトでは <em> の日本語を斜体にするのか。italic体と斜体は別なのだが、まあこれはいいかもな。そして日本語に限らず右に倒れた文字が隣接する文字にくっつき気味になるのな。これはちょっとマズー。とはいえ昔のブラウザは元々そうだったと記憶している。英文では単語なり熟語なり文章なりを italic体 にしても、隣の文字に被らないもんな。空白あいてるから。いつも Chrome を使っていたので知らなかった。ちょろめさんは英数字の italic体と右隣の日本語の間隔を自動的に調整してくれてたもんな。 間違い。Chromeさんも調整はしてない。

italic体と(斜体と)正体の実験

  • 背景色付きが <em>
  • CSS | letter-spacing: normal;
  • 123四角四面
  • 123四角四面
  • 123四角四
  • 123四角四面
  • 123四角四面
  • 123四角四

ありゃ? 特に問題ない??

italic体と(斜体と)正体の実験 : 2

  • さらに bold にしてみる
  • 123四角四面
  • 123四角四面
  • 123四角四
  • 123四角四面
  • 123四角四面
  • 123四角四

見たところ、Chrome, Edge, IE はそんなでもなかった(キャプチャ無し)。しかし。

italic体と斜体の文字が、その傾きにより右隣りに接近。条件によってはくっつく

結論。Firefoxが顕著。 間違い。濡れ衣。すまぬ。

italic体と(斜体と)正体の実験 : 3

  • 今度は背景色をつける場所を揃えてみる。"em" の箇所は実験2までと同じ
  • あと table 使う意味なかったんで caption を見出しにして解体した。
  • 123四角四面 | em 無し
  • 123四角四面 | 数字のみ em
  • 123四角四面 | 最後の「面」以外は em
  • 123四角四
  • 123四角四
  • 123四角四

これブラウザの問題じゃなさそうだ

2020年4月23日追記

Chrome でも、デザインテーマを変更すると上記キャプチャのようになる場合がある。フォントだ、多分フォントの問題だ。検証は気が向いたら。(そして忘れる)