アクセシビリティの観点でNGというわけです。何が問題かは、スクリーンリーダーでどう読み上げられるかを想像していただければわかるかと思います。『表、見出し〇〇、・・』という感じになります。そもそも、どのセルがどの見出しに対してのものなのか、がわかるように記述してないと、もはやハチャメチャ(なコーディングがほとんどなのが実態)なのですが、脱線するのでその話はここでは置いておきます。気になる方はアクセシビリティのカテゴリーの記事を見てください。floatでのレイアウトこれは今でもよく見かけます。冒頭、Flexboxも使い慣れてない方いらっしゃいますか?と言いました。Gridがある現在においては、floatを本来の用途以外のために使用するのはやはりアクセシビリティのために避けるべきと言えます。floatは対象要素を左ないしは右に寄せ、他の要素を回り込ませる、という用途において用いるためのものです。FlexboxFlexboxの概要Flexboxは、その直下の子要素同士に対して以下のような指定ができます(他にも指定可能なプロパティがあります)。横並び/縦並び縦方向の揃え方(上揃え/中央揃え/下端揃え/均等揃えなど)横方向の揃え方(左揃え/中央揃え/右揃え/均等揃えなど)また、orderプロパティを用いることで、HTMLの記載順とは異なる順番で表示するということも可能です。Flexboxのシミュレータープロパティ値の変更でどう変わるかを確認しやすいようにしてみたので、ぜひいじってみてください。外枠の幅80%gap10pxflex-directionrowcolumnflex-wrapnowrapwrap※表示崩れ防止のためスマートフォンなど幅の狭い端末ではwrapで固定されます。PCでご利用ください。align-contentcenterflex-startflex-endspace-betweenspace-aroundspace-evenlystretchjustify-contentcenterflex-startflex-endspace-betweenspace-aroundspace-evenlystretchalign-itemscenterflex-startflex-endstretchbaselineFlexboxシミュレーションbox-01box-02box-03box-04box-05あまり知られてない?flexプロパティ上のシミュレーターにも入れてないのですが、Flexboxには、flexプロパティというのがあります。flexプロパティは、displayプロパティをflexにした要素の子要素に対して付けるプロパティで、各子要素の幅の比率を定めることができます。2;}このようにすると、box-01とbox-02の幅の比率は、1:2で横に並びます。Gridは、その直下の子要素を格子状にグリッドで分け、各マス(グリッドトラックと呼びます)の配置について以下のような指定ができます。横、縦にそれぞれいくつのグリッドトラックを並べるか各グリッドトラックの大きさ各グリッドトラック内の配置Flexboxと同様に、orderプロパティを用いることでHTMLの記載順とは異なる順番で表示するということも可能です。Gridのシミュレーターこちらもシミューレータ―ご用意したのでお試しください。Gridのプロパティです。100px;のようにカンマ無しで並べます。以下のそれぞれについて、上のシミュレーターでいじりながらどういうことか把握してみてください。frfrは比率でグリッドトラックの幅を指定することができるものです。1frと書けば、横に並ぶグリッドトラックは2つとなり、それぞれ100%を等幅で分ける、つまり50%ずつとなります。3frと書くと、横に並ぶグリッドトラックは2つで、100%の幅を2:3の比率で分けます。1frと書くと、横に並ぶグリッドトラックは2つで、1つ目幅は200px、2つ目は残りの100%となります。repeatrepeatは、何度も同じ内容を書くのを省略するためのものです。グリッドトラックの幅)のように書きます。1frと同じになりますので、分かりやすくなります。1fr)と書くと、そのグリッドトラックは最小値100px、最大値1frとなります。1fr))をそれぞれ選んだ時の状態です。Chromeの開発ツールで選択すると、このようにグリッド、グリッドトラックの状態が視覚的に把握できます。auto-fillは親要素の幅にスペースが余る場合、そこにグリッドトラックが作られた状態で、各グリッドトラックが等幅になります。auto-fitは、親要素の幅にスペースが余る場合、グリッドトラックの幅がその分広がり、各グリッドトラックが等幅になります。いずれも、メディアクエリ―を使わずにレスポンシブデザインを実現するのに適していると言えます。grid-template-rowsプロパティもあり、grid-template-columnsが横方向の並び方を決めるプロパティであるのに対して、縦方向に同様に配置することができるプロパティです。gridを適用した要素直下の子要素それぞれについて、1つずつ配置を指定できるのがgrid-columnプロパティとgrid-rowプロパティです。Gridを用いて雑誌風レイアウトをした本サイトのページを、Chromeの開発ツールでgridの状態を示したキャプチャです。これは横に5つ、縦に3つのグリッドトラックを作り、各要素をgrid-columnプロパティとgrid-rowプロパティを使って配置しています。Chromeで示されている数字は、各グリッドトラックの開始点と終了点を示します。2;と指定されています。grid-columnプロパティの値「4/6」の4は、横方向の4を開始点とすることを、6は横方向の6を終了点とすることを指定しています。grid-rowプロパティの値「1/2」の2は、縦方向の1を開始点とすることを、2は縦方向の2を終了点とすることを指定しています。?」と書かれた部分の要素は、以下の指定で配置しています。Gridは共に、本来縦に並ぶ要素を横に並べ、またプロパティの設定により幅に応じて回り込ませることができる、という点では似ています。Gridはgrid-columnとgrid-rowで、要素の並び順を変えられる点も似ているところと言えます。wrap;にすると幅に応じて回り込みます。これは私としては使いづらいです。回り込まなくていいよ、という幅でも回り込んでしまい、幅に応じて要素の幅を変えるという風にはならないからです。1fr));このプロパティ設定により、Flexboxよりも簡単に思ったようなレスポンシブデザインにすることができます。Gridの方がより細かい指定ができるといえますが、Flexboxでないとできないこともあります。次の図のような違いが生じます。Gridはグリッドが生成され、そのグリッド同士でレイアウトされるという違いです。これで見て分かる通り、Flexboxは2行以上となるグリッド表示にしたときに、全体は中央寄せにしつつ、1行目と2行目の左端の要素について、左の端を揃えるということができません。Gridを用いることによって可能です。Gridを用いることが私は多いです。以下のような用途では私はFlexboxを用います。GridよりもFlexboxを使うケースの方が圧倒的に多いです。Gridを使うべき場面もありますし、私は少なからず使っています。Gridの方が自由が効くというのがあります。Gridの場合できます。1fr;の記述で2列を横に並べることになりますので、メディアクエリ―を使って、特定の幅からこの指定を行えばよいわけです。上述の雑誌風レイアウトは2の「各要素を細かくレイアウトする場合」の例に当たります。GridとFlexBoxについて比較しました。それぞれのレイアウトをシミュレーションできるようにしましたので、徹底的に比較していただけるかと思います。してほしいなど、ご意見あれば(対応のお約束はできませんが・・)お気軽にお問い合わせください。Inada)2003年から大手総合電機メーカーでUXデザインプロセスの研究、実践。UXデザイン専門家の育成プログラム開発。SEOにおいても重要なW3Cが定めるWeb標準仕様策定にウェブアクセシビリティの専門家として関わる。保有、数年間ウェブアクセシビリティ基盤委員も務める。その後、不動産会社向けにSaaSを提供する企業の事業開発部で複数サービスを企画、ローンチ。CMSを提供し1000以上のサイトを分析。顧客サポート、サイト運営にも関わる。2022年3月にBringFlowerを開業し、SEOコンサル、デザイン、ウェブ制作を一手に受ける。グッドデザイン賞4件、ドイツユニバーサルデザイン賞2件、米国IDEA賞1件の受賞歴あり。検索ノウハウ一覧カテゴリーSEO69ホームページ制作67アクセシビリティ6WordPress32HTML&CSS12JavaScript16PHP4その他6UX4同じカテゴリーの他の記事HTMLとCSSとは?仕組みから理解することで今後の理解を深めるHTMLとCSSを勉強しようとする方は、おそらくインターネットで調べて覚えていく方が多いかと思います...CSSで画面の幅に応じてフォントサイズを変える画像やdiv要素の幅はブラウザの幅に応じて変えられても、フォントサイズはメディアクエリ―を使うしかな...HTMLとCSSのみでWebサイト用のタブ切り替え(タブパネル作成)タブパネルをCSSのみ(JavaScriptなし)で作成する方法についてご紹介します。