[801] ユニバーサルデザインとCSS

~スマホが変えたHTML文【ピクニックを始めたコンテンツたち】~

前回、
「スマホが登場するまでのホームページは、『テーブル』という見えない枠によってデザインされていた」
ことをお話ししました。
いわば、大きさの決まったキャンバスへ画を描くようにして、コンテンツが並んでいたのです。

ところがスマホの登場により、閲覧環境に変化が起きました。
横幅は、一般的なPCモニターの約3分の1しかありません。
スマホユーザーには、一枚の画の、わずか左上の部分しか見えていないのです。

そこで、CSSを使った「ユニバーサルデザイン」の必要性が問われ始めました。
これは、ホームページに文字と画像しか置かず、その配置を端末に決めさせるというもの。
視認性の悪い横スクロールを発生させないことで、ユーザビリティを高めたのです。
しかし、その代わりに、以下のような状況が起きてしまうことに。

ユニバーサルデザイン
山ガハで多用していた、横並び3コンテンツのイメージ

例えば、「ノーマル吉野家」「青い吉野家」「白い吉野家」の対比をしたかったとしますよね。
PS前提なら・・・というか、自分にはこの発想しかなかったのですが・・・横並びで表現できます。
ところが、画面幅を狭めていくと、「白い吉野家」だけ下に落ちてしまうのです。

これは自分に、強烈なアレルギーを引き起こしました。
そこまでして、スマホユーザーをちやほやすべきなのかと。
むしろ、「山ガハ」はPCで見ろと。
つまり、せっかくCSSを導入したのに、横幅を760ピクセルで固定してしまったんです。
もちろん、コンテンツの横幅を250にせず、「閲覧画面の3分の1」と指定することもできます。
これならデザインが崩れないものの、画像はかなり小さくなります。
ですから、パーセンテージの指定は行いませんでした。

もし、これ以上ページを増やすのであれば・・・。
お株だった「横並び3コンテンツ」という発想は、どうやら捨て去らないといけないようです。
であれば、いっそのこと、全くコンセプトの異なったサイトを一から立ち上げようか。
なんとなく「YMGH」を残したかったので、じゃあ、ライティングワークをテーマにした「YM我報」にしよう。
これが、現「山ガハ」です。
そして、横幅指定をなくした別サイトの建設を、新たに始めようと考えました。
スポンサーサイト

[801] テーブルに乗せられた山ガハ

~スマホが変えたHTML文【ピクニックを始めたコンテンツたち】~

突然ですが・・・。
木曜日のテーマを、しばらく替えることにしました。
その中身は、「ホームページを作成する際に必要な構文」についてですが、専門的なことをアレコレと書くつもりはありません。
石器時代のスキルでヨシとしていた自分が、改めて最新事情を知り、悪戦苦闘していくリアルストーリーになります。

なぜなら、
「スマホが登場して、何もかもが変わった」
という、衝撃的な事実に直面したから。

そこで比較として、「スマホ登場前のサイトがどんな姿をしていたか」というところから始めてみようと思います。
それは、こんなイメージでした。

テーブルを使ったサイトのイメージ
「テーブル」という「見えない枠」を利用したデザイン概念図

例えば、画像の左にテキストを流し込みたい場合、画面をテーブルで区切ってから、それぞれのアイテムを入れ込んでいたわけです。
単純に並べてしまうと、閲覧者の画面の大きさによっては、縦に並んでしまうことがあるんです。

この状態を防ぐために、先に「大外枠」で横幅を固定し、それより狭い閲覧環境では「横スクロールを発生させる」という工夫も必要でした。
ちなみに旧・山ガハのサイズは800ピクセル。
一般的な解像度であるワイド1024ピクセルのモニターなら、何ら問題がありません。
ウィンドウが全画面ではなく、横幅800未満になっていた場合は、横スクロールをするか縮小して見ていただくと。
ちなみに、この枠のことを「テーブル」と言います。

では、現代チックなデザインの場合、レイアウトをどうまとめているのでしょう。
その答えが「CSS」という、仕様書のようなブツになります。
例えば、仕様書の中で、”左寄せ”という暗号を決めておくとしますよね。その際、横幅を300ピクセルと固定することもできます。
すると、この暗号の付いたテキストは、何もしなくても左に寄せられて、幅300の中で収まることになります。

つまり、ページ自体を枠でデザインしないのです。
特殊な暗号をいっぱい作っておいて、テキストや画像を、その暗号で制御する・・・というのかな。
配置、大きさ、文字色、背景色、マウスオーバーしたときの効果・・・これらは、「CSS」という別の仕様書にまとめておく。
ページには、原則として、暗号の付いたテキストと画像しか置かない。
標題にある「ピクニックを始めたコンテンツたち」という意味は、この、テーブルから離れた状態を指します。

ただ、スマホによる閲覧をあまり重視していなかった自分は、サイトの大外枠にも暗号を使って、760ピクセルに固定していました。
なぜ760だったかというと、CSSを学ぶときに参考にしたサイトの例が「760」だったから。
いかにも付け焼き刃ですが、年末を使って3日程度勉強したら、ある程度作れるようになってきました。
そこで、山ガハを現在の形に改装しようと考えついたのです。
お仕事のお問い合わせ
カレンダー
04 | 2017/05 | 06
- 1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31 - - -
プロフィール

てつまる

Author:てつまる
神奈川県を中心にフリーで活動しているライターです。
超IT系を除き、医療・各士業・経営者・アスリートへの取材、アーティストプロモート(情報発信)、イベントレポなどを手がけています。

最新記事
カテゴリ
お世話になっているサイト様
最新コメント
最新トラックバック
コトバカウンター
special thanks to
検索フォーム
RSSリンクの表示
ブロとも申請フォーム

この人とブロともになる

QRコード
QR