0. はじめに
HTMLとCSSは、12.9インチiPad pro横画面に最適化して作成しています。
その理由は簡単。ふだんもっとも良く使うコンピュータ画面だからです。
12.9インチiPadは、13インチMacBook Airと同じくらいの大きさです。A4ファイルを収納できるかばんがあれば持ち運べるちょうど良い大きさです。2024年3月末には低価格の12.9インチiPad airも発売とのうわさがあり、12.9インチiPadの機種は最高性能のproと低価格普及版のairの2機種になりそうです。12.9インチiPad pro&airは、MacBook Airと同じ高性能かつ低消費電力のApple Siicon Mを採用した究極のタブレット型コンピュータです。
これからも12.9インチiPad横画面に最適化して作成していきます。
1. 段落タグ(p)
段落タグ(p)では、ウェブサイトの本文を記述します。
pタグは、文章に段落を付けて文章を読みやすくするものだそうです。しかし、日本人である自分にはどうしてもそう思えません。
日本語の段落は、国語の授業で改行後に１文字分字下げすると習いました。しかし、pタグは、改行はしてくれますが、字下げはしてくれません。字下げの代わりのつもりなのでしょうか、次の段落との行間が多めに空きます。これは大きなお世話です。なので、line-heightなどのタグを調整して行間を空かないように直します。しかも、字下げをしてくれないので、自分で字下げしなければなりません。全角スペースを１個挿入するのです。半角スペースなら2個ですね。
要するに、pタグは改行しかしてくれません。なので、pタグは使わないで、改行のbrタグを使い、自分で字下げをすることで段落を作成できます。実際、HTMLについて初心者のころは、pタグを使わないで文章を作成していました。
HTMLについて学んでいくうちに、pタグはGoogleなどの検索エンジンにコンテンツの構造を伝えるため使用すべきことを知りました。
人間ではない検索エンジンに段落であることをわからせるためにわざわざpタグを使うのは納得いかないですが、検索がまったくされないのも困るので仕方なく使うことにしました。
pタグを規定のまま使うと、字下げのない文章となり、段落と段落との間が空きます。実際のウェブサイトでこういった正しい日本語の文章からかけ離れた乱れた文章が多くなっているようです。これはpタグの規定が日本語の段落の書き方になっていないことに原因があると思います。
HTMLは世界で使う言語なのでしかたありません。HTMLとCSSの記述をこまめに工夫して、できるだけ日本語向きに近づけようと思います。
いろいろ調べると、段落を示すために字下げするのは日本語だけではなく、他の言語でも行われているようです。プログラミング言語のPythonでは、字下げは重要な文法として定められています。以前はDelphiの言語であるPascalも字下げを推奨していましたから、構文の構造を表すための字下げは極めて有効だと考えます。
HTMLを開発している人々は、主要なプログラミング言語を知らないわけはないので、見習ってこのへんの改善をしてもらいたいと考えます。
HTMLの開発は、最近、HTML5を開発していた団体ではではなくなったというニュースを目にしました。組織のゴタゴタはユーザーには無関係なことであり、こりごりです。新たにHTMLの開発をすることになった方々には、ユーザーの利益になる正しい方向にかじ取りしてもらいたいと考えます。よろしくお願いします！
もし私がHTML開発責任担当になったら、PythonやDelphi(最新の構造化Pascal)のシステムに丸ごと置き換えます。
厳しい意見を述べましたが、HTMLはPythonやDelphiに比べて明らかに劣っている言語と言わざるを得ません。
HTML開発者には、ブラウザ表示という極めて重要なアプリ開発を担っているのだという自覚を持って、HTMLの改善に取り組んでもらいたいです。少なくとも、HTML5までは1年単位での改善だったそうですから論外です。今までのHTML5開発者ではない新しいHTML開発者の皆さんも大変でしょうが、HTMLを良くしようとする方々は応援します。改善を期待しますので、どうかよろしくお願いします。
1.1 段落タグ(p)のフォントサイズの検討
本文を記述する段落タグ(p)のフォントサイズについて検討します。
後で検討する見出しタグ(h1〜h6)のフォントサイズは、段落タグ(p)のフォントサイズと同じかそれ以上に設定します。本文の文字サイズより見出しの文字サイズを小さくしてはいけないということです。
ウェブサイト全体の文字サイズに影響するので、段落タグ(p)のフォントサイズは慎重に検討しなければなりません。
フォントサイズの単位は、紙に印刷する文書ではpt、ウェブサイトではpxを使います。なので、pxを使います。
まずは、ネットで本文のおすすめフォントサイズを検索します。
次に、実際のサイトで本文のフォントサイズを調査します。
最後に、12.9インチiPadに最適なフォントサイズを決定します。
1.1.1 本文のおすすめフォントサイズは16〜18px
参考にしたサイト
URL：https://japan-design.jp/design/0052/、タイトル：フォントサイズのベストな設定は？可読性の高いWEBデザインのポイント、著者：(株)日本デザイン、閲覧日：2024-01-14(日)
には、「読みやすさを優先させ、特別な場合をのぞいては16px〜18pxの間で調整しましょう。」、「Googleが推奨しているのも16px」、「子供向けや高齢者向けのサイトであれば、17px～18pxで設定することがおすすめ」と記載されています。ちなみに、この参考にしたサイト自体のフォントサイズは18pxでした。
本文のおすすめフォントサイズは16〜18pxということです。
1.1.2 ニュースサイト本文は15〜18pxで平均17px
多くの人が読むであろうニュースサイトの記事本文のフォントサイズを調べて、本当に16〜18pxなのかを確かめてみました。結果は以下のとおりです。
(1)フォントサイズ15pxのサイト
(ⅰ)Yahoo!ニュース
(ⅱ)ウェザーニュース
(2)フォントサイズ16pxのサイト
(ⅰ)朝日新聞デジタル
(ⅱ)東京新聞 TOKYO Web
(ⅲ)NHK News Web
(ⅳ)あなたの静岡新聞
(ⅴ)@niftyニュース
(ⅵ)日本農業新聞
(ⅶ)日刊工業新聞
(ⅷ)テレ朝ニュース
(ⅸ)FNNプライムオンライン
(3)フォントサイズ17pxのサイト
(ⅰ)日経XTECH
(4)フォントサイズ18pxのサイト
(ⅰ)読売新聞オンライン
(ⅱ)毎日新聞デジタル
(ⅲ)日本経済新聞
(ⅳ)産経ニュース
(ⅴ)TBS NEWS DIG
(ⅵ)CNN
調査結果をまとめると、15〜18pxでした。内訳は、15pxが2件、16pxが9件、17pxが1件、18pxが6件でした。
全部で18件。平均は、(15×2＋16×9＋17×1＋18×6)÷18≒16.611≒17pxです。
1.1.3 本文のフォントサイズは17pxを採用
おすすめは16〜18pxとのことですが、平均の17pxは１件のみときわめて少ないです。17pxのニュースサイトがなかなか見つけられないので、調査範囲を広げて日経XTECHをニュースサイトとして扱いました。そうでなければ、17pxのニュースサイトは皆無となっていました。また、奇数が3件に対して偶数が15件と圧倒的に多いです。偶数なら16pxか18pxとなります。
奇数だとどうしてもだめな理由が不明なので、本文のフォントサイズはあえて人気のない奇数の17pxを採用することにします。テクノロジーのサイトである日経XTECHが採用する17pxなので心配ないでしょう。
1.2 段落タグ(p)のフォントの検討
本文を記述する段落タグ(p)のフォントについて検討します。
本文も見出しも全て明朝体にして、サイト全体を統一感あるものにします。見出しやキャプションは太字のゴシック体が推奨されていますが、最近は太字の明朝体でも美しいものが入手できるようになりました。
1.2.1 段落タグ(p)のフォントに源ノ明朝を採用
段落タグ(p)のフォントは、きれいな明朝体で太さがいろいろそろっている源ノ明朝(Source Han Serif)を採用しました。iPadのSafariでは、代わりにヒラギノ明朝ProNで表示されます。同じ明朝体なので、違和感はあまりありません。
index.cssファイルには、下記を追加しました。
p { font-family: "Source Han Serif"; padding:0; margin:0; line-height: 1.5; font-size: 17.0px; font-weight: 400; style="margin-bottom: 0;"}
1.3 １行の文字数の検討
・１行の文字数は12〜40文字
・Split View＋ステージマネージャ対応を配慮
本文の１行の文字数について検討します。
１行の最大文字数は、全角で40文字とのネット情報が多いです。実際論文の書き方では40文字だったと記憶しています。
最小文字数については、いろいろな情報がありますので、特に制限はないようです。新聞の12文字が最小だと思います。
したがって、１行の文字数は12〜40文字ということになります。
１行の文字数の検討をするにあたって、左右に同じサイズで表示したマルチウインドウでも崩れず表示できることは重要なことです。
iPadのマルチタスクのマルチウインドウ機能は、Split Viewです。マルチタスクに対応した２つのアプリを左右に並べて表示できます。
WindowsやMacのマルチウインドウに比べると、２つしか同時に表示できないなど機能は劣りますが、タブレットであるiPadで２つ画面を表示できるようになったことは画期的なことなのです。
ただし、Split Viewが利用できるiPadは最近の機種に限られます。最近利用できるようになったステージマネージャーにいたっては、さらに利用できるiPad機種は限られます。
Split Viewやステージマネージャーを快適に利用するためには、12.9インチiPad proか、今後発売がうわさされる12.9インチiPad airをおすすめします。
１行の文字数の検討をするにあたって、Split View＋ステージマネージャ対応を配慮すべきということです。
1.3.1 １行の文字数を37に設定する案
・Split View＋ステージマネージャの場合
フォントサイズは17pxに設定したので、12.9インチiPad横画面1366pxには１行最大80文字表示可能です。
ここで、17pxというのはCSSの設定であり、実際にはRetinaディスプレイなので２倍の34pxです。1366pxもCSSの設定であり、実際にはRetinaディスプレイなので２倍の2732pxです。
１行の文字数が80では長すぎるので、コンテンツを表示する画面幅を制限することになります。80は40のちょうど２倍なので、画面の半分に表示すれば良いです。
コンテンツを表示する画面幅を制限するには、divタグを使います。コンテンツの表示幅を640px(width: 640px;)、境界線の幅を7px(border:7px solid #FFC0FF;)にしてみました。
640px÷17px≒37.6
１行の文字数は37文字に設定されます。
このように設定したところ、Split Viewを利用して２つのブラウザを崩すことなく左右に表示できるようになりました。とても便利です。
なお、ステージマネージャを使うと、各アプリの画面がやや小さくなりますが、Split View＋ステージマネージャを想定したので、画面は崩れることなく表示できます。
1.3.2 １行の文字数を40に設定する案
・Split Viewのみの場合
divタグを使います。コンテンツの表示幅を680px(width: 680px;)、境界線の幅を1px(border:1px solid #FFC0FF;)にしてみました。
680px÷17px＝40
１行の文字数は40文字に設定されます。
Split Viewのみを利用し、ステージマネージャを使用しなければ、37文字よりも3文字多い40文字表示できます。
1.3.3 １行の文字数は37がおすすめ
以上より、
Split View＋ステージマネージャの場合
１行の文字数は37文字まで設定可能
Split Viewのみ場合
１行の文字数は40文字まで設定可能
であることがわかりました。
ステージマネージャだと、ウインドウのまわりにすきまがあるので、ウィンドウの幅が少々狭くなります。１行の表示文字数は40から37と３個減ります。
どちらがおすすめかは、表示の見栄えを重視したりウインドウを２個を超えて利用したい人と、プログラマのようにウインドウは２個だけでいいから画面に表示する情報量をできるだけ多くしたい人でわかれます。
表示される文字数がわかるように、以下のような全角数字列を表示します。
０００００００００１１１１１１１１１１２２２２２２２２２２３３３３３３３３
１２３４５６７８９０１２３４５６７８９０１２３４５６７８９０１２３４５６７
この全角数字列が崩れず(勝手に改行されないで)表示できてるか確認します。
Split Viewのみ場合でも、Split View＋ステージマネージャの場合でも、どちらでも崩れず表示できる１行の文字数が37文字がおすすめでしょう。
なお、37文字から40文字への切り替えは、HTMLの簡単な変更(640px→680pxなど)で可能です。
2. 見出しタグ(h1〜h6)
2.1 見出しタグ(h1〜h6)のフォントサイズ案
見出しタグ(h1〜h6)のフォントサイズ案です。
各タグ(h1, h2, h3, h4, h5, h6, p)のフォントサイズは等比数列とします。等幅表示の利便性を考慮して、h1/h5、h2/h6、 h3/pを２倍にしました。本文の段落タグ(p)のサイズを17pxとして、隣接するタグのサイズ比を２の４乗根倍に設定します。
表1に見出しタグh1〜h6と段落タグpのフォントサイズを示します。
h1, h2, h3, h5, h6は、小数点以下を丸めて整数にしました。
Fig.1 Heading tags(h1-h6) font-size
┌─────────────┬──┬──┬──┬──┬──┬──┬──┬──┬──┬──┐
│heading tags │h1│h2│h3│h4│h5│h6│h7│p │h8│h9│
├─────────────┼──┼──┼──┼──┼──┼──┼──┼──┼──┼──┤
│font-size[px]│48│40│34│28│24│20│17│17│14│12│
└─────────────┴──┴──┴──┴──┴──┴──┴──┴──┴──┴──┘
下記に、フォントサイズを設定した各タグによる表示例を示します。
h1(48px)｜タイトル
h2(40px)｜サブタイトル
h3(34px)｜1. 章
h4(28px)｜1.1 節
h5(24px)｜1.1.1 小節、項
h6(20px)｜(1)小々節、目
h7(17px)｜本文と同じサイズの見出し
p (17px)｜本文
h8 (14px)｜本文よりやや小さいサイズ
h9 (12px)｜本文より小さいサイズ
※ h7タグ, h8タグ, h9タグは、規定の見出しタグではありません。拡張見出しタグです。キャプション、脚注、著作権表示などの本文のフォントサイズ以下で太字で表示します。
Copyright ©︎ 2024 Appli Ponto All Rights Reserved.
