HTML備忘録 / 記述メモ4

  • 2003年7月18日：作成
  • 2018年10月26日：全面改訂

縦書き {writing-mode:vertical-rl}

CSS3では縦書も可能であるが、ブラウザの対応状況は非常に芳しくない。なお、コメントアウトしたベンダープレフィックスも参考に付けているが、現行ブラウザもその有無で表示は変わらないので現時点（2018年）では既に意味が無いと思う（つまり正式対応してこの有様・・・と ^_^;）。

2022.01.10 追記　理由は不明だがWebフォントの導入で多くのブラウザで完全ではないがかなりマシになる事を確認した。つまり、Webフォント未導入の場合はもっと悲惨な表示となる。

.tate {height:200px; width:400px; 
    /* -webkit-writing-mode: vertical-rl; 	Apple prefix */
    /* -ms-writing-mode: tb-rl;		MS prefix */
    writing-mode:vertical-rl; 		/* 縦書き指定 */
    border-style:solid; border-width:1px; border-color:#00ff00;}

<h3>CSSによる文章の縦書き。

<p>縦書き指定したDIVコンテナ内部に配置。

全角（１）　半角(1)

<pre>で成形
全角　スペース　で
行　末　を　揃えた
Ｚｅｎ　　ｋａｋｕ
H　a　n　k　a　k　u

<del>による削除

<ins>による追加

<sup>本文上付き

<sub>本文下付き

.tate_hosei {height:200px; width:400px;
    -webkit-writing-mode: vertical-rl;
    /* -webkit-writing-mode: vertical-rl; 	Apple prefix */
    /* -ms-writing-mode: tb-rl;		MS prefix */
    /* -webkit-text-orientation:upright;	Apple prefix */
    text-orientation:upright;		/* 半角補正 */
    border-style:solid; border-width:1px; border-color:#00ff00;}

<h3>CSSによる文章の縦書き。

<p>縦書き指定したDIVコンテナ内部に配置（半角の向きを補正）。

全角（１）　半角(1)

<pre>で成形
全角　スペース　で
行　末　を　揃えた
Ｚｅｎ　　ｋａｋｕ
H　a　n　k　a　k　u

<del>による削除

<ins>による追加

<sup>本文上付き

<sub>本文下付き

<table>と組合わせる場合、すべて全角だと非対応でも（結果的に1em改行で？）それっぽく表示できることもあるが、全角半角混在だと一気に変になる。

以下は<td>セル単位で指定した表示例、<tr>でも結果は同じ、セル内の要素に指定してもさらに変になるだけ。<table>で指定すると表が崩壊するので論外。

幅を1emに指定
あいうえお 12345ABCDE 混在123ABC あいうえお 12345ABCDE 混在123ABC
セル内で改行
指定なし
あいうえお 12345ABCDE 混在123ABC あいうえお 12345ABCDE 混在123ABC

セル幅指定は必須だが、1em指定の表示例で右側にはみ出しているのは改行折返し部分。そこまで考慮して指定しなければならず、フォントサイズの異なる全環境に的確に対応するのは・・・ムリ！

また、縦書イメージでセルは右から始まってほしいが左から表示され、これを嫌って逆順で記述すると文書処理上問題が起こると思う。

2018.10.27 追記　表崩壊ブラウザで見ている場合は、ここ↑の意味は判らないと思うので、別のブラウザで確認されたし。

ここ「時代おくれ」では表の縦書き見出しにワンポイントで使用しているが、現時点ではCSS縦書は安心して使える機能ではないと思う。

因みに、Iceweasel 38（Linux）とOpera 12（Windows/Linux）はほぼ非対応で、<div>指定を横書きで表示し、テーブルの場合は完全崩壊、可読不能になる。Chrome 48は単純な<div>縦書指定のみ対応で、ワンポイントの1セル縦書も機能せず縦書きの表は崩壊する。SafariとInternet Explorer 11も対応に問題があり、通常縦書きは何とかなり、1セル縦書きには対応できるものの、表は崩壊する。

2018.10.27 追記　表見出しのワンポイント縦書きは、上下左右が通常セルであるためその影響（巻添え？）で表示されているだけかもしれない。結果、表示できているので良い事にする、深くは考えない (^_^;)

縦書きが使えなくても「時代おくれ」的には特に困らないのだが、職場サイトで古文書の紹介に使おうと考えている（いた、になるかも）。性質上、英数字（半角文字）は不要なのでそれは都合がよいが、それでも文面等を工夫しないと難しそう。

こんなに使えないのでは、4.01時代の必殺技「<pre>横書きのフェイク縦読ませ」の方が確実な表示と言う意味ではマシな気がする (^_^;)

画像 <img> <figure>

HTML5では<img>の体裁に関わる属性は全て廃止されており、必要な場合はCSSで指定する。また、HTML5では<figure>、<figcaption>と<img>を組合わせる事で、キャプションを付ける事もできる。

画像と背景の境がある方が見やすいので、機械的に1pxのGray枠を付けてある。

<figure>

概ね、幅400pxを超える画像は中央表示とする（これがデフォルト）。

figure {display:table; 
	margin:0 auto; margin-top:0em; margin-bottom:1em;}
figcaption {color:#00ffff; text-align:center;}
figure img {border-style:solid; 
	border-width:1px; border-color:#808080;}
故意にピントをずらした海辺の公園。ピントは奥側の海に合っており、手前のオブジェはピンボケとなり、その結果、反射望遠特有のリングボケが発生している。
画像（大）は中央表示

<figure class="right">

概ね、幅400px以下の小画像は右寄せとする。

figure.right {float:right; margin: 0.3em 0em 0em 1em;}
打ち上げ花火の写真、4～5発が重なっている
画像（小）は右寄せ

なお、画像のalt属性は必須ではなくなったが、私は徹底抗戦する、これは省略可能なものではないはずだ。W3C的には“不要な場合には”を含ませていると思うが、省略化にしたら省略されてしまう。

画像のalt文にはキャプションを流用する事が多いが、それは情報のダブリに過ぎず、スクリーンリーダーでは鬱陶しいと思う。そこに、何が写っているか？など画像の内容を書込めば音声化できる情報量を増やすことができる。

また、この画像のキャプションとalt文が「夏の思い出」であった場合、ロボットから（今のところは）花火の画像とは認識されないが、これを「打ち上げ花火の画像、4～5発が重なっている」とする事で検索にも良い影響があるハズだ。

円グラフなどの場合に透過Gifを使用すると、別背景で表示したとき隠し文字になってしまうなど問題が発生する（CSSなしだと白背景白文字になる）。閲覧側で再成形したときに不細工ではあるが、画像は透過ではなく背景黒で提供する。

音声 <audio>

ここ「時代おくれ」的にはほとんどメリットではない (^_^;) が、HTML5で導入された<audio>は、プラグイン不要で音声再生を可能にする。

サンプルのお題は「懐かしのHC-20セーブデータ」 (^^ゞ

Wavサンプル

MP3サンプル

HTMLだけで完結し、非常に簡単であるが、Opera 12（Windows/Linux）がmp3に、Internet Explorer 11がWavに対応していない。両方提供するのが望ましいが、現実的判断では「mp3」統一か？

なお、ブラウザによって表示体裁とサイズがまったく異なるので、プロパティで縛る、レイアウトを工夫するなど工夫が必要（私的には野放し、もアリ ^_^;）。

動画 <video>

ここ「時代おくれ」的には全く意味はない (^_^;;) が、HTML5で導入された<video>はプラグイン不要で動画再生を可能にする。

サンプルのお題は「着陸、滑走中の空自のファントム（2007.10.03 Naha）」、著作権的問題はクリアしているが、別の問題が起こると困るので映像の直リン・転載は禁止！とする。

直リン・転載禁止
直リン・転載禁止！

HTML 4.01時代に動画再生に苦労したのがウソのよう、HTMLだけで簡単に動画コンテンツを提供できる。残念ながら、mp4にFirefox 48/52（Windows）とOpera 12（Windows/Linux）が対応せず、webmにSafariとInternet Explorer 11が対応していない（Linux版Firefox 52はmp4対応なので、Windows版非対応はバグかもしれない）。

現時点では、どちらかに統一するのは影響が大きいと思う。

なお、動画形式には「規格のゆらぎ」ってか各社独自仕様ばかやろ～があり、同じ動画形式でも再生可否が分かれるので、このサンプルは参考に過ぎない。ちなみに、提供サンプルはCraving Explorer 1.9.11で Canonコンデジのavi → webm → mp4の順番で変換したものであるが、直接aviからmp4に変換すると全対象ブラウザで再生不能になるのは謎。よって、動画UP時には対象環境での確認は必須である。

対象環境から抜いたのでどうでもよいが、Android 4.0.4標準ブラウザはwebmが再生できない。何考えてんだGoogle 凸(~_~メ)

2018.10.31：Android 4.0.4のChrome42とOpera 29は<audio> <video>共に非対応 (ToT)

項目の目次に戻る サイトのトップに戻る