サイトの表面の大部分は主にテキストと画像で構成されています。文字として情報を正確に伝えるテキストデータも大事ですが、ロゴ・ボタン・商品・アイコン・バナー・背景等、見栄えだけでなく情報を分かりやすく伝えるために画像データも欠かせません。

スマホやデジカメといった撮影ツールを誰もが所有し、個人がSNSに日常的に画像を公開している現代では誰もが毎日当たり前のように画像データを取り扱うようになってきています。人によっては毎週・毎日、何かしらの写真や動画を撮影しているのではないでしょうか。

カメラのスペックとしてよく挙げられている要素です。画像編集ソフトで拡大縮小すると分かりますが、一般的なデータ形式の画像は色のついたドット（四角いマス）が細かく並べられる形で構成されています。一定サイズの中にこのマスが細かく大量に並んでいれば人の目には曲線も滑らかに自然に認識することができますが、逆にこのマスが少なく密度が低い場合は曲線もカクカクして見えたり、モヤっとした荒い画像として認識されます。

テレビの性能の基準の一つとして『2K』・『4K』・『8K』といった言葉がよく聞かれます。これはマスにあたるピクセルが画面内で横に並べられる最大の数を示していて、『1920』・『3840』・『7680』ピクセルといった数値になっています。数字を見ただけではピンとこなくても、実際に見比べた時に感じる見やすさ・見にくさから解像度による違いを実感することができます。

サイトで主に使用されてきている形式（拡張子）は『jpg』・『gif』・『png』・『webp』などです。保存するデータ形式は求められる性能・特徴・データ容量などから判断するのが良いでしょう。

データ 形式	表示 色数	背景 透過	データ 容量
gif	256色	可能	小さめ
jpg	1677万色	不可能	大きめ
png	1677万色	可能	大きめ
webp	1677万色	可能	小さめ

特にpngはデータ容量が大きい傾向がありますが、現在は通信速度が速くなってきていることもあり、容量をそこまで意識しなくても良くなってきているので、最近ではjpgだけでなくpngが使用される割合も以前よりは高くなっています。Google開発で圧縮による劣化が少ないにもかかわらずデータ容量が小さいwebpも使用されるサイトが増えてきていますが懸念点は対応していないブラウザ・バージョンがまだ現役で使用されていることです。

会員限定のページなどで簡易的な認証の仕組みとしてベーシック認証を使用する場合があります。ベーシック認証とは特定のディレクトリに対してアクセスした際に、ユーザ名とパスワードの入力を要求される設定・処理を施して、限られた人だけにページを見せるための仕組みです。

しかし、パソコン・スマートフォン問わず、OSやブラウザのバージョンアップは随時行われており、その影響でiPhoneでのサイト閲覧時、ベーシック認証がかかったページへのアクセスでログイン用のダイアログが開かずに真っ白なページが表示されるという現象が出る場合があります。

この現象が見られた際、iPhoneを使用している全ての方が遭遇しているわけではありませんでした。サイト立ち上げ当初は問題が無かったことからもアップデートなど何らかの環境の変化によるものだと判断できます。色々と確認してみるとiPhoneのなかでも標準ブラウザであるsafariを使用している方のみで発生しているようでした。

調査・検証の結果、認証をかけたディレクトリを別タブで開こうとしている場合に、この現象が起きる可能性があることがわかりました。セキュリティに関するアップデートか何かで、この動作に対して制限がかけられたことが原因のようでした。

ベーシック認証をかける方法については複数あり、htaccessファイルなどを手作りで用意して該当ディレクトリにアップすれば機能するサーバと、直接の認証設置は出来ずサーバの設定画面の機能としてしか使用できないサーバ等もあるため、利用中のサーバ環境に合わせて作成または設定する必要があります。単独ページに対して、プログラムで認証処理を入れるといったことも可能ですが、ディレクトリに対してとなると悩ましいところです。

当現象については、別タブで開こうとしている場合に限定されているようなので、この開き方の指定を外したところ、問題なくログインのダイアログが表示されました。ページ遷移としての開き方に変わるものの、認証機能が動作することのほうが優先のため、この形で対応完了としました。

使用しているHTMLのフォーマットルールに則って正しくコードが書かれているか、本来必要な記述が抜けていたりしないかなど、ページソースとなるHTMLのデータチェックを行うことを指します。エディタにも簡易チェッカーがついているものもありますし、ネット上にもURLやコードを直接ペーストすることでエラーの数や詳細を教えてくれる便利なツールが存在します。

ネット上のツールにはHTML5のみを対象としたものもあれば、HTML4やXHTMLを対象としたものもあるので、チェックしたいソースのバージョンにあったツールを探して使用することになります。バージョンが異なると記述ルールが異なり、エラーを拾ったり拾わなかったりして正確な状態が確認出来ないので必ず、バージョンに対応するツールを使用するようにしましょう。

ブラウザでの確認でレイアウトの崩れやリンクの不具合といった症状が出た際に何らかのエラーがある場合が多いですが、数百行から数千行におよぶコードの中から目視でその原因を特定するのはかなり大変です。そんな時にソースチェックを機械的に行えば、場所をある程度特定出来たり原因の見当がついたり、対処する際の時間短縮などにも繋がります。

また、画面上では正常に見えても、実はソースには間違いがあって、問題を起こす原因が潜在してしまっている場合も多いのですが、これを見つけられる機会にもなります。正しい形で組まれたページは検索エンジンからも内容や構造を判定しやすいため、正当な評価を得られる可能性も高まります。

前述の通り、不具合の原因が埋もれていることに気づけないことが大きなデメリットになります。画面で普通に今表示されているのだから、いいじゃないかと思うかも知れませんか、眼に見えないところでペナルティを受けている場合も有ります。

特にアップ後に問題が起きた時は必要以上に焦ってしまい、なかなか解決できないものですのでアップ前にしっかりチェックをしておいたほうが安心です。エラーが大量になってから対応するよりも、こまめにチェックしてエラーを排除していくほうが難易度が低く負担も小さくて済みます。エラー数が多い状態だと構造上、深い位置にあるエラーが外側で出ているエラーの原因になってしまっている場合もあるので、対応する順番によって、解消できるまでの時間も変わってきます。

本来表示されているはずの位置から要素がズレていたり、画像が画面の外にはみ出していたり、ページがガタガタになっていたりするサイトがたまにあります。いわゆるレイアウト崩れです。本来見せたいコンテンツが画面に表示されないようなことも起こり得ます。

最近はレスポンシブデザインのサイトも一般化しており、要素が多く並んでいるようなところで崩れを起こしているサイトもたまにあります。個人サイトであればまだしも、企業サイトでこれが起きてしまっていると大ダメージです。情報としての信用はもとより企業としてのイメージにも影響することは否めません。

幅の指定値が間違っているという単純な設計ミスが原因の一つとして考えられます。
以下のような場合です。
＜コンテンツ全体幅＞1000px
＜コンテンツ左側幅＞300px
＜コンテンツ右側幅＞750px
全体が1000pxであるにもかかわらず、左右にレイアウトしている中身の合計幅が1050pxでオーバーしています。入りきらないので、『300pxのボックス』の下に『750pxのボックス』が押し出されてしまいガタガタなレイアウトでページが表示されます。

ブラウザによってはある程度の値オーバーは補完して正常な表示にしてくれる場合もありますが、正確に再現する本来の処理では壊れたようなページ表示になります。古いバージョンのブラウザでは補完が弱いだけでなく、値を正しく認識出来ないバグの影響を受けて崩れたりする場合もあります。

HTMLだけでなくCSSやJavaScript、PHPにも『文字コード』の指定があります。これが意外な落とし穴で、ローカルの自分のPCのいつものブラウザでは正常に表示されていたのに本番環境へアップしたら突然ページが壊れて驚くというケースもあります。

CSSを正常に読み込めないとレイアウトの指定が全て機能しないので、崩れはもとより色などの装飾の指定も全て無効になってしまいます。本番環境でレイアウト崩れを起こしている場合、もしブラウザでCSSのソースを表示して文字化けしてしまっていたらデータの一番上に『charset～』という記述をしているかチェックしてみると良いでしょう。文字コードが適切に指定されておらず、文字化けが発生すると思わぬ記号類になってしまう文字もあり、以後の記述がコメント化されてしまったり、記述の区切りが正しく認識されないことが崩れの原因になっている可能性があります。

アスペクト比とは、テレビやモニタ、動画などの映像の縦横の比率を指します。アナログテレビが主流だった頃のアスペクト比は「4：3」でしたが、地デジに切り替わってワイドな画面が一般的になった現在は「16：9」という横長なアスペクト比が一般的です。

具体的な例として、ディスプレイの解像度の値が「1920×1080」といった値になっているのをよく見かけるかと思います。これを最大公約数の120でそれぞれ割ると、アスペクト比が「16：9」であることが分かります。

アスペクト比は映画などから、大きな影響を受けていると考えられています。当初は映画のアスペクト比も4：3でしたが、表現や迫力を増すためにどんどん横幅が広がっていき、横が縦の2倍以上となる「2.35：1」という域にまで達してしまったそうです。

映画も時間が経てばテレビで放送されますが、4：3のテレビに映そうとすれば、横長な映像を映した結果、上下に何も映らない無駄な部分が出てしまいます。そこで、様々なアスペクト比の中間としてバランスをとった値が「16：9」ということになり、現在に至るそうです。

現在はPCやテレビ、スマートフォン等で閲覧されるのが主流であるホームページ。PCなど横長の画面のアスペクト比は「16：9」です。しかしPCでブラウザを画面いっぱいに広げてホームページを見ることはありません。現在のページの幅の主流が1000px～1200px程度なのはそれを加味した見やすい幅を意識してのことです。

対してスマートフォンは縦横比率がほぼ逆転した縦長で、ブラウザが画面いっぱいに表示されることが前提なので、表示される要素が画面幅いっぱいにレイアウトされるようにレスポンシブ対応されています。スマートフォンで表示した場合の見え方も意識した画像データの作成やレイアウトが必要です。