2022年10月16日URLをコピーしました!最近よく聞くdisplay:contentsを使ったレイアウトを学習しました。作成していて、学んだことを備忘録としてまとめていきます。テキストの横並びにするレイアウトを作成しました。いったレイアウトをする場合、普通にdisplay:flex;を指定するだけでは難しいと思います。今回は、display:contents;を使った実装を書いていきます。</body></html>HTML上では特に変わったことはしておらず、一般的なメディア型パーツのコードを記述しました。}}「.p-meida__inner」にdisplay:contents;を指定しました。orderプロパティを使って要素の並び替えをして、今回のレイアウトを実装しました。display:contents;は、IE以外の主要なブラウザに対応しているのでスマホの時だけ指定すれば、IEの対策を考えなくても大丈夫です。まとめ今回学んだことは、display:contentsを指定された要素が存在しない扱いになることです。便利なので今後も使用する機会があれば、使っていきたいです。MDNによるとブラウザーのバグにより、現在のところ、この値を使用するとアクセシビリティツリーから要素を削除します。読み上げソフトは中に何があるかを見ません。詳しくは後述のアクセシビリティの考慮の節をご覧ください。MDNとあるので注意が必要です。最後まで読んでいただきありがとうございました。