Ul li 表 レスポンシブ
「section」には「節」や「章」という意味があり、見出しを伴う文書の章や節目、区間であることを表現する際に使用します。
今回の方法は、IE9未満では一部の方法でしか対応できないです…
もしレスポンシブじゃなく、スマホのみでいいなら display:box も使用出来るので、もう少しスマートな記述で済んだりする箇所もございます。
navタグの中には、ul、liタグなどを用いてメニューを作ります。
インラインで表示するため、横並びになります。
こういった感じの、シンプルな2カラムの表を作成したいなーと思いました。
次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。
基準となるセル要素に、右方向への連結の場合は colspan 属性を、下方向への連結の場合は rowspan 属性を記述します。col は列(column)を、row は行(row)を表し、span が区間を意味します。連結数を属性値に指定します。
最後に引用についても触れておきます。引用とは、他の情報源(書籍やウェブサイト)から文章や図表などを転載することです。ここでは文章の引用を取り上げます。
「tr」は「table row(テーブルロー)」の略で、表なかの行を作成する際に使用します。
まず全体を table 要素で囲い、その下に「行」を表す tr 要素が二つ、そして各 tr 要素の下に「セル」を表す td 要素が三つずつ書かれています。これで 2 行 × 3 列の表となります。
table 要素と tr 要素はただの入れ物(コンテナ)で、実際に文字(コンテント)を記述するのは td 要素の中であることがわかります。
HTML では下図のように テーブルの範囲 > 1 行の範囲 > セル という 3 層構造でこれを表します。先に “行” で区切ってから、そこにセル(列)を入れていきます。
2列のテーブル場合は、スマホ表示時にth要素とtd要素をdisplay:block;にすればほぼ完成です。と説明されることが多いのですが、実際にはそれだけでは、見栄えよくデザインできない場合もあります。その辺りも含めて一緒に見ていきましょう。
最近のウェブサイトでは表を使う機会が減ってきましたが、HTML は文書を共有・閲覧するための仕組みとして生まれたため、テーブル用の HTML 要素や属性がかなり細かく用意されています。ここではその一部のみを取り上げます。
なお、table 要素に border=”1″ という属性が設定されていますが、これは表に罫線を表示するための古い記述方法です(罫線の見た目はブラウザによって変わります)。table 要素は初期状態では罫線が表示されないので、border 属性を記述しないとテーブルに見えません。テーブルの罫線は CSS で指定するのですが、ひとまず border 属性(本来は非推奨です)を付けておくことにします。
このページの目的は、テーブルのレスポンシブ対応を理解していただいて、今、お手元にあるテーブルがうまくスマホ対応できるようになることです。そのため、コードをコピーしたいだけの方にとっては説明が長く感じるページになっていますので予めご了承ください。