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

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

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

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

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

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

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

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

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

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

ただ、スマホによる閲覧をあまり重視していなかった自分は、サイトの大外枠にも暗号を使って、760ピクセルに固定していました。
なぜ760だったかというと、CSSを学ぶときに参考にしたサイトの例が「760」だったから。
いかにも付け焼き刃ですが、年末を使って3日程度勉強したら、ある程度作れるようになってきました。
そこで、山ガハを現在の形に改装しようと考えついたのです。
スポンサーサイト

コメントの投稿

非公開コメント

お仕事のお問い合わせ
カレンダー
09 | 2017/10 | 11
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