ホームページデザインのベースとなる枠組みの基礎知識

ホームページを誰でも簡単に作れるようになるために、最初に覚えることは枠組みの作り方。どんなに素晴らしいデザインのイメージが頭の中にあってもそれを表現出来なければ意味がありません。デザインを作る上でどうしても避けて通れないのが枠組みなのです。逆に言えば、枠組みさえできるようになれば、ホームページの制作はほぼできるようになったと言えるでしょう。

それだけ重要な枠組み。昔と違って今は簡単に作れるようになりました。難しく考えずにとりあえずやってみようの精神で取り組んで見てください。きっとすぐに考え方をマスターできるはずです。

基本となるタグのご紹介

ホームページを作ろうと思って最初に躓くのが、文字や思った場所に表示できないという問題。ワードやテキストエディタでは、好きな場所にスペースを作ったり、見やすく文字を移動させたり、大きく拡大したり、直感的に変更が可能でした。しかし、ホームページのベースとなるHTMLタグというのは、基本的にデザインのことは考慮されていません。そのため、通常の方法では上から下に左から右に表示しかできないのです。

しかも、昔はtable（テーブル）というタグを使って無理やりデザインぽくしていましたので、作るのも大変でしたし、変更や修正するのも面倒になっていました。なので、古いホームページを見ると文字が羅列されているだけの素っ気ないデザインが多かったのです。

それから十数年と時間がたち、ホームページ制作の環境も大きく変わってきました。なによりも進化したのがデザイン周りの環境です。昔は無理やりtableタグを使ってデザインを作っていましたが、今ではより簡単にデザインができるようになっています。そのベースとなっているのが「display: grid;」です。

これを使えば、スマホとPCで表示を変えたり、気分で並びを逆にしたりが簡単に行えます。「display:flex」を使えば、似たようなことができますが、オプションが多く覚えるコトが大変です。「display: grid;」であれば、オプションを設定しなくても手軽にデザインを作れます。簡単にデザインが作れるということは、運営管理も簡単になるということです。

display: gridの基本

それでは早速使い方をご紹介します。

コンテンツ
コンテンツ



#oowaku {
display: grid;
width: 1100px;
grid-template-columns: 1fr 1fr;
grid-template-areas:
"areaA areaB";
}
#migi { grid-area: areaA; width: 300px;}
#hidari { grid-area: areaB; width: 800px;}

これだけで枠を作り左右に配置することができます。よく見かける右か左にメニューのあるブログタイプのホームページなら、これを使えば数分でベースを作ることができるでしょう。「width:」が横サイズを指定していますので、こちらをお好きな数字に変えれば、希望の大きさで作ることが可能です。

display: gridの考え方

基本がわかればかなり簡単に組めるようになっているのが、「display: grid;」の魅力です。大枠（oowaku）のdivで囲った場所をフリースペースにし、「grid-area:」で各divを配置していく形です。

左右どちらかにメニューのある2カラムだけでなく、「”areaA areaB”」の部分を「”areaA areaB areaC”」にすれば、左右にメニューのある３カラムのデザインでも簡単に作れます。「display: grid;」は掘り下げるとかなり凝ったデザインにも対応していますので、興味を持った方は複雑なものにも少しずつ挑戦していきましょう。

display: gridでレスポンシブ化もラクラク

簡単に配置ができるということはタブレットやスマホでアクセスしたときに表示を変える（レスポンシブ化）も簡単にできます。ウィンドウサイズで「”areaA areaB”;」の部分を「”areaA” “areaB”;」と変更するようにすれば、縦列に2つの枠が並びます。

@media screen and (max-width:768px) {
#oowaku {
display: grid;
width: 100%;
grid-template-columns: 1fr;
grid-template-areas:
"areaA" "areaB";
}
#migi { grid-area: areaA; width: 100%;}
#hidari { grid-area: areaB; width: 100%;}
}

「meta name=”viewport”」の部分をheadに追加することで、訪問者のウインドウサイズを判断することできるようになります。そこでウインドウサイズが768px以下の場合、今回のものにデザインが変更されるというわけです。非常にシンプルなものですが、基本として覚えておくことはこれだけで十分でしょう。あとはホームページのコンテンツにあわせて表示を変更するだけで、お好みの表示にできるようになります。

まとめ

「display: grid;」の便利さはわかっていただけましたでしょうか。ホームページを作るだけなら、tableでのデザインはともかく「display:flex」でも、大きな問題はありません。しかし、長く付き合っていくとなると、ホームページの修正や変更が必ず出てきます。長く付き合っていれば、だんだんとデザインもくずれていくモノです。

デザインが一度くずれてしまうと、tableタグだと修正に丸一日かかったりしました。「display:flex」でも数時間はかかるでしょう。しかし、「display: grid;」でデザインを作ってしまえば、くずれてしまっても直感的に修正ができるので、修正にもそれほど時間を必要としません。長い目で見れば「display: grid;」で作っておくべきです。

もしも、まだ使ったことがないと言う人は、この機会にぜひ「display: grid;」を試してみて下さい。制作を長く続けてきた人ほど、その便利さに驚いてしまうはずです。スマホ対応のレスポンシブのこの機会にぜひ導入しておきましょう。