ホームページのデザイン(1)

私自身、ホームページ作成の経験は7年以上になると思うが、一向に理解して作成していると思えず参考サイトからの情報を継ぎはぎし、取りあえずなんとか見れるホームページができるものだからこれで満足していたが、もっと基本的な技術を習得したいと思い、テーマとして「ホームページのデザイン」とし備忘録としてまとめていこうと思う。
ホームページはWebページとも言いますが、デザインの手始めは色々なコンテンツ(情報)をどのように並べるかが重要です。 これを段組みと言われています。
wordでちらしや案内状を作成したり新聞を作成したりする場合段組みをどうするか考えて作成する事と同様です。
ただ、Webページ作成は、HTMLとCSSで作成しますが、この点考慮されていません。
その昔、ホームページビルダーで作成していた頃、教えてもらったやり方はtableタグによる段組みです。
この方法はすごく簡単でexcelに例えて言うなら、excelのセルをいくつも作成しこのセルを結合したりし色々な大きさのボックスを作成しこの中に情報を埋め込むやり方で、tableタグのセルそのものをボックスと考えこのボックスの並べ方で目的の段組みを構築していました。 すべてHTMLで記述できるのがすごく重宝しました。
しかし、デザインはHTMLと分離してスタイルとして作成することが推奨されるようになります。
スタイルシートではボックスをブロック要素(主にdivタグ)で作成し、並べ方をFloatで左詰めとか右詰と指定し横並びにしたりします。もちろんfloatを解除して縦並びもできます。
所が、Webページの閲覧がスマホ/タブレットとデバイスの種類多岐に渡ってくるとこのfloatによる属性だけでは画面の見た目の位置や大きさをデバイス毎に合わせるのは難しくなってきました。
スタイルシートの仕様もCSS3となり、flexboxが追加されました。
これはデバイスの変化にも対応できるとのことです。
要は当初tableタグで色々工夫していたことがマルチデバイス対応含めてCSSで実現できるようになったわけです。 次回は色々な段組みの方法を記述していきます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)