斜体(イタリック)スタイルは読みづらく、訪問者に対してものすごい労力をかけるだけでなく、
二度と来るもんかという気にさせるので、斜体文字を基本のスタイルとするウェブページ構築はやめよう。
とまあ、上記のような文章がページ全体とか考えると、もう本当に読む気が失せますよね。
中には、「文章がかっこよく見えるから」という理由で斜体を採用しているという本末転倒な謎の人がいます。
文字はかっこよく見えるかどうかはさておき、文章がかっこよく見えるかどうかは見栄えではなく内容に依存しますので、
いたずらに文字装飾を施しても意味がありません。
近くでこれを採用している人がいたら「ヴァ○じゃあないの？ キミ、キ○ガイか何かでしょ？」
「なんて書いてあるかわからないんですけど(＾＾；」などと、やさしく諭してあげましょう。
(ただし、当サイトのCSSでのフォント指定は基本的に斜体とは無縁のメイリオさんなので、
当サイトのCSSを使用して閲覧している場合は反映されていないと思います。
ブラウザによってもそういうブラウザもあるので効果がないものもあります。)
ちなみに、斜体を表現する要素に<i>と<em>の2つがあります。
ブラウザ上の動作ではどちらもだいたい同じなのですが、実際には違うものなので、
効果がまったく異なるブラウザも稀に存在します。
<i>はイタリック体を表すので、文字スタイルが斜体となります。
<em>は弱めの強調を表すので、斜体とは限らない可能性があります。
強調は強調なので、目的に応じて使い分けるようにしましょう。
私はほとんどの場合、通常の文字スタイルとは違うようにしたいという意図で使用するので、
主に強調(<em>)のほうを使用します。(ただし、上記は一応<i>のほうを使用しています。)
太字(ボールド)スタイルは強調を表します。
斜体と違って読めるほうではありますが、これも推奨されません。
ほかに特別強調を使う意図がなければ気にならないかもしれませんが、
中には、強調を色だけで表現しようという人がいます。
残念ながら、ブラウザによっては色ですら動作が左右する対象となるので、かえってよくない可能性があります。
もちろん、太字ですら機種依存ですが。。。
なので、強調なら強調で用途を別にしたほうがいいかもしれません。
丁寧な人は、強調スタイルにあえて文字色を変えている人も中にはいらっしゃるぐらいです。
ちなみに、太字を表現する要素に<b>と<strong>の2つがあります。
ブラウザ上の動作ではどちらもだいたい同じなのですが、実際には違うものなので、
効果がまったく異なるブラウザも稀に存在します。
<b>はボールド体を表すので、文字スタイルが太字となります。
<strong>は強いほうの強調を表すので、太字とは限らない可能性があります。
強調は強調なので、目的に応じて使い分けるようにしましょう。
私はほとんどの場合、通常の文字スタイルとは違うようにしたいという意図で使用するので、
主に強調(<strong>)のほうを使用します。(ただし、上記は一応<b>のほうを使用しています。)
行書体。
明朝体。
創英角ポップ体。
ゴシック体。
教科書。
メイリオさん。
メイリオさん(Mr.Meiryo UI)。
さて、どれが見やすいのでしょうか。
私的には、一番ストレスがないのはゴシック体か教科書体、またはメイリオさん(個人的推奨値)あたりかと思いますが、どうでしょうか。
ただし、フォントは、それぞれみなさんのPcにインストールしているフォントに依存しますので、
正しく表示されていない方もいらっしゃるのではないでしょうか。
(実際、「行書体」「明朝体」「教科書」の動作を確認していないまま編集しています。
Microsoft Officeのソフトがインストールされるとこれらのフォントファミリも同時にインストールされるため、正しく反映されます。)
また、フォントデータをアップロードなどしたり、サーバ側でフォントデータが提供されていれば、
それを使用してスタイルシートに組み込むなどもできます
(この場合はサーバ上のフォントを優先して使うので、ユーザがそれぞれ用意しておく必要はない)。
それでも、見やすいフォントや見にくいフォントがあるので、気をつけましょう。
<h1> 彩りの大地<br> <br> <a href="URL">掲示板</a><br> <br> <a href="URL">何かデータ</a><br> <br> <a href="URL">外部リンク</a><br> <br> ……<br> <br> てゆーか、<br> <br> よい子のみんなは<br> <br> こんな悪いサイトの構築の仕方は<br> <br> 絶対にやっちゃダメだよ<br> <br> 約束してね。<br> </h1>
もう、はっきり言っていいですか。
あほなんちゃうん？
って言いたいほどの大間違いなのですが、
見出し要素(<h1> - <h6>)
はフォントサイズを変更するための代物ではありません。
いや、これはもうｓｙレにならんっしょ。(またしても某B語)
それぞれの要素による特有の効果は、ブラウザ上に描画するための代物である「レンダリングエンジン」に依存します。
つまり、ブラウザごとに違う見栄えを定義していてもおかしくはないので、すべてのブラウザで同じように見えるわけではありません。
極端な話、見出し要素(<h1> - <h6>)の文字サイズに変化を与えないブラウザというのもあっておかしくはないことでもあります
(特にポータブル端末系は普通だけど、デスクトップ系にも少なからず存在して当たり前)。
フォントサイズを定義するのなら<font>要素、またはスタイルシートを使用しましょう。
見出し要素には特に文字サイズを変えるための効果はなく、
その「レンダリングエンジン」というものの挙動によって変化を与えているだけなのです。
というのも、これについては「推奨値」というものが勧告なされており、「レンダリングエンジン」を開発するに当たり、
通常のフォントサイズよりも大きい値(見出しレベルによってサイズの値も固定されている)が奨励されているためです。
もちろん、これは強制ではなく、あくまで推奨しているだけなので、
推奨の設定値も異なれば、逆に、<h5> - <h6>なんかは特に通常のフォントサイズよりも小さくなるという怪現象を起こしているというのが現状なのです。
一方で、フォントプロパティの設定では、フォントサイズは使用する単位ごとにだいたい統一されている(主に絶対単位ですが)ため、
レンダリングエンジンがサイズ情報を搭載しているものであれば、どのブラウザでも同じように描画されます。
「セーフカラー」とは、どのプラットフォーム・グラフィックボード・ブラウザからみても、
ほぼ遜色ないカラーで見れる色で、全部で216色あります。
たとえば、8000京通りぐらいの色が再現できるとかいう超高精度カメラがあったとしましょう。つーか、何色ですか。ｗ
しかし、たとえ高精度のカメラがあっても、
それを映像として寸分の狂いなく放映できるTVがなくては意味がありません。
そう、指定した色を表現できるディスプレイがなければ、どんな超高画質に作成した色の表現もそこまで伝わることはありません。
それが、ウェブページにももちろん当てはまることで、
どれほど細かい色の設定でも、表現力の低いディスプレイで閲覧している人にはそこまで伝わりません。
そこで「セーフカラー」という概念が登場します。
基本的にウェブページでは、赤が256通り×緑が256通り×青が256通りの全部で16777216通りの色(24ビット・トゥルーカラー )が再現できますが、
それを再現できないスペックの端末を使用している人もいらっしゃいます。
基本的に色というものはブラウザやOSのスペックではなく、
Pcに搭載している「グラフィックボード(ビデオカード)」に依存しますので、
ブラウザごとの動作を判別するというのも正直ムリな相談です。
(OS・マザーボードによってはグラボの性能の限界もあるので、正しく描画されるにはディスプレイや、最悪Pcを買い換える必要性さえある。)
しかし、セーフカラーは赤が6通り×緑が6通り×青が6通りの全部で216通りの色だけで、
色が表現できる媒体であればだいたい同じ色の表現ができる媒体ばかりなので、ユーザの端末スペックを気にせずに使用できます。
12ビットカラー表記(#000～#FFF)のセーフカラー #FFF #FCF #F9F #F6F #F3F #F0F #CFF #CCF #C9F #C6F #C3F #C0F #FFC #FCC #F9C #F6C #F3C #F0C #CFC #CCC #C9C #C6C #C3C #C0C #FF9 #FC9 #F99 #F69 #F39 #F09 #CF9 #CC9 #C99 #C69 #C39 #C09 #FF6 #FC6 #F96 #F66 #F36 #F06 #CF6 #CC6 #C96 #C66 #C36 #C06 #FF3 #FC3 #F93 #F63 #F33 #F03 #CF3 #CC3 #C93 #C63 #C33 #C03 #FF0 #FC0 #F90 #F60 #F30 #F00 #CF0 #CC0 #C90 #C60 #C30 #C00 #9FF #9CF #99F #96F #93F #90F #6FF #6CF #69F #66F #63F #60F #9FC #9CC #99C #96C #93C #90C #6FC #6CC #69C #66C #63C #60C #9F9 #9C9 #999 #969 #939 #909 #6F9 #6C9 #699 #669 #639 #609 #9F6 #9C6 #996 #966 #936 #906 #6F6 #6C6 #696 #666 #636 #606 #9F3 #9C3 #993 #963 #933 #903 #6F3 #6C3 #693 #663 #633 #603 #9F0 #9C0 #990 #960 #930 #900 #6F0 #6C0 #690 #660 #630 #600 #3FF #3CF #39F #36F #33F #30F #0FF #0CF #09F #06F #03F #00F #3FC #3CC #39C #36C #33C #30C #0FC #0CC #09C #06C #03C #00C #3F9 #3C9 #399 #369 #339 #309 #0F9 #0C9 #099 #069 #039 #009 #3F6 #3C6 #396 #366 #336 #306 #0F6 #0C6 #096 #066 #036 #006 #3F3 #3C3 #393 #363 #333 #303 #0F3 #0C3 #093 #063 #033 #003 #3F0 #3C0 #390 #360 #330 #300 #0F0 #0C0 #090 #060 #030 #000
24ビットカラー表記(#000000～#FFFFFF)のセーフカラー #FFFFFF #FFCCFF #FF99FF #FF66FF #FF33FF #FF00FF #CCFFFF #CCCCFF #CC99FF #CC66FF #CC33FF #CC00FF #FFFFCC #FFCCCC #FF99CC #FF66CC #FF33CC #FF00CC #CCFFCC #CCCCCC #CC99CC #CC66CC #CC33CC #CC00CC #FFFF99 #FFCC99 #FF9999 #FF6699 #FF3399 #FF0099 #CCFF99 #CCCC99 #CC9999 #CC6699 #CC3399 #CC0099 #FFFF66 #FFCC66 #FF9966 #FF6666 #FF3366 #FF0066 #CCFF66 #CCCC66 #CC9966 #CC6666 #CC3366 #CC0066 #FFFF33 #FFCC33 #FF9933 #FF6633 #FF3333 #FF0033 #CCFF33 #CCCC33 #CC9933 #CC6633 #CC3333 #CC0033 #FFFF00 #FFCC00 #FF9900 #FF6600 #FF3300 #FF0000 #CCFF00 #CCCC00 #CC9900 #CC6600 #CC3300 #CC0000 #99FFFF #99CCFF #9999FF #9966FF #9933FF #9900FF #66FFFF #66CCFF #6699FF #6666FF #6633FF #6600FF #99FFCC #99CCCC #9999CC #9966CC #9933CC #9900CC #66FFCC #66CCCC #6699CC #6666CC #6633CC #6600CC #99FF99 #99CC99 #999999 #996699 #993399 #990099 #66FF99 #66CC99 #669999 #666699 #663399 #660099 #99FF66 #99CC66 #999966 #996666 #993366 #990066 #66FF66 #66CC66 #669966 #666666 #663366 #660066 #99FF33 #99CC33 #999933 #996633 #993333 #990033 #66FF33 #66CC33 #669933 #666633 #663333 #660033 #99FF00 #99CC00 #999900 #996600 #993300 #990000 #66FF00 #66CC00 #669900 #666600 #663300 #660000 #33FFFF #33CCFF #3399FF #3366FF #3333FF #3300FF #00FFFF #00CCFF #0099FF #0066FF #0033FF #0000FF #33FFCC #33CCCC #3399CC #3366CC #3333CC #3300CC #00FFCC #00CCCC #0099CC #0066CC #0033CC #0000CC #33FF99 #33CC99 #339999 #336699 #333399 #330099 #00FF99 #00CC99 #009999 #006699 #003399 #000099 #33FF66 #33CC66 #339966 #336666 #333366 #330066 #00FF66 #00CC66 #009966 #006666 #003366 #000066 #33FF33 #33CC33 #339933 #336633 #333333 #330033 #00FF33 #00CC33 #009933 #006633 #003333 #000033 #33FF00 #33CC00 #339900 #336600 #333300 #330000 #00FF00 #00CC00 #009900 #006600 #003300 #000000
説明不要な状態ですが、見ての通り、00・33・66・99・CC・FFだけ
(24ビットの場合。12ビットは0・3・6・9・C・F)でそれぞれ色を表現するのがこの方式です。
なお、rgbで表現する場合は0・51・102・153・204・255という風に51の倍数だけで表現することとなります。
また、32ビットカラー表記(rgba、このaはalphaチャンネルの意で、色情報自体は24ビットと同)はセーフカラーに反するため、
使えません(厳密には使用できるけれども、セーフカラーを実現するための第4パラメータは1.0(完全に不透明)固定なので無意味)。
ただし、24ビットで色を表現しても、216色しか表現できないようなスペックの端末でも、
基本的には216の中の近似色が反映されますので、
どうしてもセーフカラーでなければいけないということはなくなっているようです。
それに、昔とは打って変わって、それほど意識することも少なくなりましたしね。
ただし、古い端末のことを意識すると、できるだけ近似色だけで構築されているような状況
(というか、背景色≒文字色という状況)だけは避けたいです(そういうサイトもなかなかないような気がしますが……うっ、うちのサイトがそうだって？爆死)。
広いサイズのディスプレイに対応させるべきか、それとも、狭いサイズのディスプレイに対応させるべきか。
答えは簡単です、大は小を兼ねる、つまり、広いほうに対応させたほうがまず間違いないといえる。
ページを描画する際に、大きいほうに合わせて作成すれば、
広い解像度に対しても描画部分がないだなんてことはなくなるので、まずは広いほうにあわせて作るべきそうすべき。
かといって、とにかく高解像度にあわせるのが最善かといえば、そうでもない。
特に、スクロールが長いページはあまりよくない。
まあ、縦スクロール程度なら「PageDown」キーや「↓」キー、
さらにはマウスのホイールなんかも最近はメジャーなので、
縦スクロールに関しては特に問題にしなくてもいいと思う。
んで、問題は横スクロール。
縦か横かとるならどっちといわれて、日本人なら縦はおｋだけど横は却下という方が大半なハズなので、
横スクロールがあまり必要ないようなウェブページ構築を心がけたいところ。
横幅が可変なリキッド・レイアウトというのも考えたけれども、
テーブルや文字位置などを考えると、表示位置に一意性がなくなり、必ずしもいいとは言い難く。
だからむしろ、表示幅を固定して、ディスプレイのどこに描画させるかと言う発想に行き当たる。
画像サイズがちょっと気になりそうだけれども、
レイアウトを意識する際に、背景画像は描画されていない領域を埋めるためにも、
リピートしても違和感なく描画するものか、
高解像度向けの画像を用意しておくのがいいと思われる。
当サイトではこれを踏まえた、以下のような5パターンの背景画像がある。
当サイトでは解像度1440×900として設計しているため、
画像の縦横のサイズもこれに準拠する(実際には1024×768用のサイズを引き延ばして描画している)。
この解像度の理由については後述。
テキストを通常の左寄せで描画するのならまったくもって問題にならないのだけれども、
問題は、右寄せや、センタリングを使用した場合の描画位置。
基本的に、センタリングするにしても右寄せするにしても、一定の位置を文書の右端とするのなら、
それ以降はいくら余白があっても気にしないのが普通だ(と思われる)けども、ウェブページではそれを気にする。
ウェブページは何の指定もなければ右端を常にウィンドウの右端として認識するため、
高解像度となると、それこそまさしくウィンドウのど真ん中だけにテキストが現れるような形となる。
こういうのをやる人はたいていポータブル系の端末を意識していてのことだろうから、
たいていは低解像度向けの描画サイトなんだろうけれども、
ユーザ視点ではそのサイトのためだけにわざわざウィンドウサイズを狭めるというのは現実的ではない。
かといって、ウィンドウサイズを変更するスクリプトを仕掛けるなどというのは言語道断、
迷惑だからやめろといわれてもおかしくはない。
対処方法は超簡単、右端を指定してやればいいだけのこと。
もっと言えば、横幅の描画サイズを予め絞ってやればいいということになる。
こうすることで、どこからどこに対してのセンタリングなのかもウェブページ的にも把握できるし、
高解像度端末ユーザ的にも、どこに描画されるのかが一目瞭然となる。
ちなみに、インライン要素にはテキストの描画位置を指定するスタイルが効かず、
必然的にブロック要素からインライン要素の描画位置を決める形をとるため、そういう点においても、
如何に「インライン要素はブロック要素に含まれなければならない」
という仕様となっているのかがお分かりいただけるであろうか。
掲題の通り、2つの理由から1440×900向けになっている。
1つ目は、基本的に、ウェブページを作成するに当たり、
1024×768向けに作るのが最もよいとされている点が挙げられる。
え、サイズ違うじゃあないかって？ まあ、そうなんだけど。ｗ
そう、1440×900とは言うけれども、このサイトのテキストの基準解像度は、実質1024×768だったりする。
この1024×768というのは、一番出回っているPcの中ではもっとも多いサイズだからだそうで、
ならば、もっとも多く出回っているものにあわせて作るのが一番いいといえる。
だけど、世の中、それがすべてではないので、
ほかのサイズに対しても柔軟に対応できる仕様としておくべきであることは言うまでもない。
さらに言えば、世の中にはもっともっと広いサイズの解像度(8192×4320なんていうの)もあるけれども、
じゃあ、それにあわせて作成しないといけないのかというのはあまり現実的とはいえない。
そもそも、Pcはマルチタスクの時代、
それほどの広さであれば、ウェブを見ながら余ったスペースでWordなどを開いて別の作業というのが考えられるので、
画面いっぱいにウェブブラウザということ自体が考えにくい。
大解像度で画面いっぱいにウェブブラウザで見るというのならばむしろ、ブラウザの機能で拡大描画をするのが普通なので、
基礎となる大きさはその大解像度にあわせる必要などない。
そして、2つ目の理由は……彩りの大地を作り直していた時期の自宅Pcのディスプレイサイズが1440×900だから。ｗ
より高解像度にも対応させるのであれば1024×768ピッタリよりも少し余裕があったほうがいい。
たとえば、ディスプレイサイズは1440×900だけど、ブラウザは1024×768ピッタリで見てくれているとは限らない。
そのための余裕として基準になったのが我が家のPcサイズで、画像はこれ向けにしてある。
だけど、それでもテキスト描画は1024×768向けとして作られているのは代わりがないので、
背景画像は余計に描画されていてもそうなんだと思っていただいて。
<p>をよく、スペースが一行空くタグとして紹介したりという不届きなサイトもあるけれども、
それは大きな間違い。
<p>は「段落」なので、こちらも、標準ではスペースが一行空くという効果を持っておらず、
やはり、「推奨値」として備わっているレンダリングエンジンの機能なので、
スペースが一行空かないように動作している可能性も十分にありえる。
なので、スペースが一行空くタグとして紹介するのは間違いというのもあれば、
スペースが一行空くタグとして使用するのも間違った使い方。
基本的に、終了タグが必要なものなんだと考えれば、
インライン要素を囲うブロック要素なんだということが見えてくる。
「リンクを作成する」ところで書いたとおりなのでここでは詳細は割愛。
えっ、そんなの知らない……って言う人はやり直し。
とにかく、これは終了タグの省略が可能だと勘違いしている人がいます。
これだと、ブラウザによっては不具合を起こしかねないので、あまりよくありません。
特に、なんでもない文章の上にマウスカーソルが乗っかっただけで文字色や背景が変わったりする場合、
このタグが閉じられていないことがほとんどです。
※セレクタa:hoverが反応しているため。閉じていないので、ページの最後(？)までこのスタイルが反映されている。
逆に、閉じられてはいるけれども、マウスカーソルの乗っている部分をピックアップするために、
そこのインライン要素ごとくくっている場合もありますけどね。
あん？ テメェ、ケンカ売ってんのかゴルァ！
……そういうのはいらないですか。ｗ
正直、使用ブラウザを固定するようなサイトはろくなサイトでないことが上げられます。
どんなブラウザを使おうとユーザの勝手ですからね。
それなのに、こういう文言を掲げているサイトは、人に見せる気がないのも同然です。
特に、IEはWindows標準のクセに、一番不具合が起こりやすい特殊なブラウザなので、
これ中心にサイト構築するのは非常にマズイです。
正直、IEはクソブラウザ。
さらに、同じIEでもバージョンによってレンダリングエンジンも改良されており、
それぞれで動作は意外と違ってきています。(標準化団体の仕様に沿ってはいるので全然違うわけではありませんが。)
なので、IE縛りでも、残念ながら全然違うインタフェースになる可能性は十分ありえます。
(というか、使っているグラボの性能も描画力に大きく関わるので、これを変えろというのもあまりに現実的とはいえない話です。)
サイト運営者の間で、「当サイトはIEオンリーです。」はNGワードです。
それがたとえ個人運営サイトでも使うのはご法度です。
なので、せめて、「当サイトはIEでの動作を確認しております。」ぐらいにしておきましょう。
大量のブラウザを用意して、全部で見てみろというわけではありません。
動作確認ブラウザを用意するにしても、レンダリングエンジン別にメジャーなやつ程度で十分です、
インストールする分には対して労力は使いませんので。
※私的に、2013年現在のレンダリングエンジンは、
Trident(IE)・Gecko(Firefox)・Blink(＝Webkit、Google ChromeやOperaなど)あたりがメジャーな感じです。
ほかにもこれがあるよという人はそれということで。気になったら確認確認。
2022年6月、いずれのプラットフォームにおいてもIEのサポートが終わるので、この文言は古いものとなります。
だからといって新標準の「Edgeオンリー」などもただの自己満足文です、やめましょう。
いくらChromiumだから多数派だからと言ってもみんながみんなEdgeやちょろめの使い手であるわけではないのでそのあたりに留意しましょう。