どうも、チャーさんです。
あなたはcssでテーブルをレスポンシブにし、
かつ縦並びにしたい、と思っていませんか？
この記事では、テーブルを縦並びにする方法を、
紹介しています。
なので、あなたがこの記事を読めば、
テーブルをレスポンシブにし、かつ
縦並びにできるでしょう。
ということで、レスポンシブ縦並びにしたいのなら、
このまま下にスクロールし読んでみてください。
スポンサードサーチ
cssでテーブルを縦並びにする方法
*テキストで説明する前に一言。
cssでテーブルを縦並びにする方法を、
動画でも説明してます。
これ見れば縦並びできます。
あなたが動画で学ぶ派の場合どうぞ。
テキストに戻ります。
で結論からです。
cssでテーブルをレスポンシブ縦並びにする、
その方法はかなり簡単です。
メディアクエリに、display:block;と記述するだけです。
(*メデイアクエリ: レスポンシブ時に使うもの、
レスポンシブの仕方をあなたが知らない場合、
以下の記事を読むと、レスポンシブできます。）
で、話戻しましてdisplay:blockをつける理由を説明します。
というのも、display:block;とは、
要素をブロックにします。
要素をブロック、
つまりこれをthやtdタグに指定してやると、
これらが全部ブロック要素扱いになり、
要素が全部縦に並ぶことになるのです。
わかったようなわからないような、
と思ったことでしょう。
ということで、論より証拠なので、
実際に具体例を見てみましょう。
まず以下の画像はtdタグだけで、
作った表です。
このように２カラムです。
そしてこのtdタグに、
display:block;を指定してやると、
はい、このように全部縦に並びましたね。
なのでレスポンシブで縦並びにするには、
メディアクエリで、
display:block;をつけてやると良いのです。
display:block;を指定する際の注意
で、縦並びにするには、上記のように
display:blockをつければいいのですが、
注意点として一応補足しますと、
セル全てに対してdisplay:blockをつけましょう。
例えば、この記事でいうとこのセルは、
tdタグです。
なのでtdタグ全てにdisplay:blockつけてます。
例えばこれが１つのtdタグだけに
display:blockつけたりすると、
１つだけ縦に並んで変になります。
なので全部にdisplay:blockを
指定するのが大事です。
これがthが混ざっていても同じことです。
thに対してもdisplay:blockです。
とにかくテーブルのセルを縦に並べたい場合は、
全部のセルにdisplay:blockをつけましょう。
すると縦並びになってくれます。
上記のことを意識して、
あとはメディアクエリにdisplay:blockで完了です。
スポンサードサーチ
まとめ
それではまとめに入ります。
cssでテーブルをレスポンシブにし、
セルを縦並びにさせたい場合は、
display:block;を指定しましょう。
すると、縦並びになります。
さて、ということでこれであなたは、
テーブルをレスポンシブにして、
縦並びにする方法がわかったと思います。
ということで、あなた自身で、
早速実践してみましょう。
するとあなたのweb制作スキルが上がり、
仕事獲得できたりします。
で、まずはテーブルを用意しましょう。
<table>
<tr>
<td>項目</td>
<td>項目</td>
<td>項目</td>
</tr>
</table>
みたいなやつです。
次にテーブルを用意したら、
メディアクエリを書きましょう。
@media screen and (max-width:500px){
}
上記のやつです。
で、次にdisplay:block;を
指定してやりましょう。
そうすれば縦並びになりますよ。
ということで、以上でテーブルを
レスポンシブにし縦並びにする方法でした。
それでは、読んでもらってありがとうございました。
チャーさん
