pagetaka

写真、PC、ネット、岡山、旅の話題をお届けします

HTML:レイアウト調整に「空白」を使わない

小学校区連合町内会のHTMLサイトの見直し作業中です。ある意味「神経戦」のような様相。多少でも「プログラム」がらみとなると無味乾燥なソースコードの荒野に放り出された状態でなんとか本旨をくみとり、合理的な解決を図りたいという格闘戦が始まる。

「空白」を正しく使う

半角と全角では、HTML上での扱いが異なります。いずれにしろ意味のある「空白」を使いたいものです。

半角空白は、連続して入力しても結果的に1字分になります。文字位置の調整に「空白」は使いにくい状態がネットのデフォルトであります。

空白自体に意味がない場合、つまりレイアウト調整に用いる場合、ネット上では無意味な文字情報ということにもなり、情報量はあるのに、質的に意味がない、ともなります。

人間が見てわかる、ということと、ネット上の情報を端末表示した時のPCなりスマホなりの「理解」はかならずしも一致しないのだと…。
日本文の最初の空白1字についても、ネット上ではそれを自動的に削除する、という機能もあります。狭い画面に情報表示するのに先頭空白1文字分がもったいない、ほとんど意味はない、というスタンスです。ことの当否はともかく、こういった「合理的発想」(ある意味違和感もあるんですけどね)で、結果的にスマホなどは利便性を高めているわけです。

ヒトサマがどんな端末で表示しているか不明

似たような例だと「改行」のあつかいも気になります…ええ。

「改行」は、HTML記述者の画面表示の際、行揃い、とりわけ行端処理などを「見栄え」良くするために使ったりすることがかつてありました。しかし、閲覧者側で表示するとレイアウトが崩れる、ということはよくあったのでした。表示文字サイズが違えば、収まりが悪くなるというのは容易に想像がつきます。あわせて、スマホタブレットなどの普及により、HTML記述者側が意図した画面表示とは異なる環境で閲覧している人の存在は当たり前にもなっています。
柔軟性のある画面表示を取り入れない限り、ある意味、現代のネット上の情報発信に後れをとる、とも言えそうです。

その際、文字サイズ、色など「装飾」より、テキストを中心とした情報そのものと、その文章上の位置づけが重要になっている、というのは「検索エンジン」などの並び順をみればわかりそうです。

閲覧者が表示を選ぶ

PC用の画面、スマホ用画面を選択できるサイトもたくさんあります。閲覧者側がそれを選択する時代、ということです。
旧来のPC用設定にばかりこだわることなく、これらの利便性にも目を向け、柔軟な画面設定がネットを通じた情報提供者側に求められていると言えそうです。そうでなかれば、スマホ閲覧者に選択されない、という時代なのだとも…言えるかもしれません。

装飾はCSSで

見栄えは、まあ「装飾」ということですがヒトサマがわかる「赤文字だから強調点」「大文字だから大切なコト」というのは、ネット上ではあまり意味がないのだろうと思います。
HTMLタグで、どういう価値を持つ情報なのかとすることがポイントです。あわせて、飾り部分はCSSに思い切って任せる、ということかと…はい。
HTMLソース内を可能な限りシンプルにし、タグ内部に直接装飾関係の記述をしない方向性を選択する、という時代なのかと…。できれば外部ファイルでCSSをつかう!

小学校区連合町内会サイト、ここ何年かに書かれたHTMLソースを見ても、「CSSが有効に使われている」「HTMLがシンプル」 、という例はあまり見えません。
www.htmq.com

古典的技術である「フレーム・セット」、これはHTML5では使わない方向であり、わずかに「インナー・フレーム」が面影を残すにとどまる、という状況にかなり前からなっている、という…ええ。

ともあれ、現実にあるサイト内のHTMLファイルには貴重と思える情報が一杯です。技術で解決できるものはそのように対応して、なんとか、より世間に届きやすくしたいものだと、力戦奮闘中の爺でありました(≒ほぼフりだけ…)

追記

これも気になる「こちら」「コチラ」というリンクの不思議
d.hatena.ne.jp
爺、4年位前にすでに書いてた。

これも気になる…昔よりずいぶん減ってるけど。
d.hatena.ne.jp
d.hatena.ne.jp