こんにちは、シュウです。
時代の流れとともに、生活も仕事も、従来の考え方は次から次へと破られていきます。
これまでの「常識」が崩れ、昔では考えられないことが新しい「当たり前」になります。
Webサイトのコーディングの技術も日進月歩で、どんどん進化しています。
今日はWebコーディングの技術においての遷移を辿ってみます。
2000年代の後半まで、テーブルタグを使ってWebサイトのレイアウトを組み合わせていました。
テーブルのボーダーを非表示にして、Excelのようにセルを合併したり分割したりすることで、Webサイトのレイアウトを作成していました。自由度が低いですが、テーブルを使うことは当たり前だったようです。
さらに、スタイルを定義するCSSはまだまだ普及していませんでした。CSSに対応するブラウザが少なかったため、HTML属性を使って見た目を設定するところがまだ多いです。幅と高さはもちらん、文字サイズ、カラー、背景色などもほとんどHTML属性を使って定義していたそうです。
AdobeのDreamweaverというソフトの誕生によってレイアウト設計作業の可視化も可能になりましたが、表示する仕組みが違うので、ブラウザとの表示結果が微妙に異なっていました。
スタイルを定義するCSSが本格的に使われるようになった時代でした。
CSSは1996年誕生し、HTML見た目を担当する定位があったものの、普及したのは10何年も後のことでした。
CSSでより自由にレイアウトを組めるため、テーブルタグでレイアウトを組む時代が終結しました。
しかし、floatでレイアウトを作る手法は、扱いにくくレイアウトが崩れやすいというデメリットがあります。
floatはclearを使って、回り込みの効く範囲に制限をかける必要があります。
他の指定に影響されることが多いので、間違ったり、忘れたりすると、地獄だと言われました。
positionは位置の指定にとても便利ですが、使い過ぎると、親子一連に影響が出てしまい、修正しにくくなるそうです。
スマホ普及が普及になり、パソコンよりもスマホでウェブサイトを見るのが主流になってきました。
そのためスマホ対応が重要視されました。わざわざスマホ版を作るよりも、画面サイズに合わせてレイアウトが自動的に変わるレスポンシブの作法がメインになりました。
レイアウトの変更が便利にできる「flexbox」がメインに使われるようになりました。
今までも、flexboxを使ってレイアウトを組むサイトが多数です。
flexboxではクリアの指定を考える必要も、繁雑な計算をする必要もなくなりました。
レイアウトの組み合わせがより簡単にできるようになりました。
これまでの制作は、ページごとにCSSファイルが存在し、同じスタイルでも2度手間で作成することが一般的でした。
制作の効率を上げるために、同じようなデザインのコンテンツは2度作成せずに、使い回せるのではないかという考えが出てきました。
Sassの普及やレイアウトが簡単に組める「flexbox」が主流になったことで、その手法が現実になりました。
ページ間の隔たりを破り、重複して使うことが可能な部分をパーツとして作成します。
そして、CSSを改めて定義せず、HTMLのマークアップを組み合わせて中身の文言だけを書き換える作り方がメインになったそうです。
最近「Grid」でレイアウトを組むサイトが増えてきて、人気になっていると言われます。
行単位か列単位で順番に並んでいく「flexbox」と違って、子要素に対して自由に配置することが可能になります。
自由度がより高くなり、レスポンシブと相性も良いそうです。
これからは「Grid」の出番が一層広がっていくのではないでしょうか。
アウラでも、時の流れに追って、Webサイト仕上げの品質と、作業の効率を向上させるために、常に改善策を考えております。
日々の試みを重ねて、より良くWeb制作に携わるサービスの提供を努めています。
