こんにちは！
ここではお問い合わせの多いカリキュラム内容について、数回に分けて就労移行支援事業所リネオス福岡天神で学べることなどを紹介していきたいと思います。
前回の第15回の要素を横並びにする方法ついてはこちらからどうぞ。

今回は”横並びにさせるプロパティ”について書きたいと思います。

横並びさせるプロパティ

タグだけで作成されたHTMLは、その特性上縦並びのレイアウトになってしまいます。縦並びでも良いのですが、情報量が多いとその分縦に長いサイトになってしまい、見る側からするといつまでたっても目的の情報にたどり着かないなどの問題が発生してしまいます。

その問題を解決する方法のひとつに、要素を横に配置することが上げられます。それによって縦長状態を回避できかつデザイン性の優れたサイトを作成することができます。

画像とテキストを横並びにしたいとき、2つの画像を横並びにしたいときなどは、横並びにさせるプロパティを使用する必要があります。

代表的プロパティには「float」「flex」「grid」などがあり、これらのどれかをもちいて横並びのレイアウトを作成していきます。

float（フロート）

数十年前ほどから使われている、横並びにするプロパティの元祖ともいえる存在。
本来はテキスト内に画像を入れたり、テキストを回り込ませるために使用されてましたが、回り込むという性質を利用し、横並びに配置することができます。

＜メリット＞
・古いブラウザでもレイアウトを崩れすに表示させることができる

＜デメリット＞
・複雑な配置は苦手
・回り込みの回避などをしておかないとレイアウトが崩れることがある

flex（フレックス）

CSS3から実装されている縦横に自由かつ簡単に配置することができるプロパティです。
数年前は対応していないブラウザなどがあり使われるシーンは限られてましたが、今では横並びレイアウトで多用されるようになってきています。
flexに付属するプロパティの種類が豊富なため、使いこなすには慣れが必要かもしれません。

＜メリット＞
・縦や横だけのレイアウトだけでなく、表示する順番なども指定できる

＜デメリット＞
・入れ子構造が複雑になってしまう

grid（グリッド）

格子状の見た目（グリッド）に要素を配置し使用するプロパティになります。
グリッドとは、列と行を定義する水平線と垂直線の集合が交差したものをいいます。要素をグリッド上の行と列の中に配置することでレイアウトを作成するものになります。
floatやflexとは少し違い、どこに何を配置するか格子レイアウトを決めておき、配置していくという考え方になります。

＜メリット＞
・自由に配置することができる

＜デメリット＞
・古いブラウザでは表示できない
・行と列が不確定だと複雑な構造になってしまう

どれを使うのか

横並びプロパティの実装された順番で言えばfloatが古くからあり、flexやgridが一番新しくこれから使われることが多いプロパティといえます。
ですがテキストだけの配置などであればfloatで処理するのが簡単だったり、対応しているブラウザの確認が必要など、それぞれの性質を知り適材適所使用するスキルを持つことが望ましいです。

webに関わる仕事では古いサイトの更新や保守などの能力も求められます。floatはもう覚える必要はないなどといわれますが、企業サイトなどではまだまだ使われていることが多いプロパティです。

このようなプロパティを使用する際にもHTMLの記述が大きく影響するため基礎の知識が大切になります。

リネオス福岡天神ではboxの構造やfloatの基本を身に着けてからwebサイトを作成するカリキュラムを準備しています。

お問い合わせでも「初心者ですが利用してもいいのでしょうか？」「経験者でないと難しいですか？」などのお問い合わせもたくさんいただきます。経験の有無は必要ありません。

初心者でも未経験者でも、どなたでも見学や体験が可能です。
興味があればお問い合わせフォームやお電話などからお気軽にお問い合わせください。