[B! css][Webデザイン] tsugのブックマーク

tableをレスポンシブでも破綻しないようにする簡易的な1手法 – WEBUTUBUTU

レスポンシブテーブルテストレスポンシブ設定は便利なものです。1ソースでいろいろな幅の画面(=デバイス)に対応できますから、サイトがブログであればメリットがあります。 WordPressにもレスポンシブ設定が施されているものもありますし、自分でカスタム、あるいは一からテーマ作成すれば同様に利用できるでしょう。もちろん、WordPressにこだわる必要もなく、何らかの手段で画面サイズをブレークポイントとして可変可能であれば成立します。が、これは構造部分だけの話で、HTMLタグの種類によっては実現の難しいものもあります。今回は代表的なtableについて少々。なお、特に目新しい方法ではありませんので、「その程度か」というレベルです。 [2015.1.1追記:「記事に手を入れずに対応する方法」を追記] [2015.1.1修正:コード内のscrollをautoに変更] 簡易的な方法でtable

tsug 2015/12/21

リンク

レスポンシブのテーブルをcssで作ってみた（2列のみ）STINGER5対応

主婦があれこれ日常のことや趣味のサイト作成のことなどを節操なく書き綴っているブログの運営です。また、一歳半になる娘のお世話も重要な仕事であります。 PCでの表示 PCではおなじみの表示です。スマホでの表示スマホではこのように1列になり、幅の狭い画面でも見やすくしました。 HTML部分 <div class="res-table"> <table> <tr> <th>左側1</th> <td>右側-1</td> </tr> <tr> <th>左側2</th> <td>右側-2</td> </tr> <tr> <th>左側3</th> <td>右側-3</td> </tr> </table> </div> css部分 /*-------------------------------------- スマホでの表示 --------------------------------------

tsug 2015/12/21

リンク

スマートフォンのtable要素をレスポンシブにできない問題 | 高橋文樹.com

この投稿は 11年半前に公開されました。いまではもう無効になった内容を含んでいるかもしれないことをご了承ください。最近レスポンシブデザインという言葉が流行っています。あまり深く考えたことはありませんが、個人的にはこんなところがいいなーと思ってます。ワンソースで済む Googleが推奨してる駄目だなーと思うところはこんなです。 PHPのように動的なサイトの場合、非表示の要素でも演算対象になる古いAndroidブラウザが怖いまあ、Webプログラミングの場合は携帯サイトを作っていたわけで、スマートフォンだからどうこうということでもないかなと思います。ちなみにこのサイトは一応スマートフォンとPCで表示が変わりますが、CSSのメディアクエリはほとんど使ってなくて、bodyタグにデバイス種別のクラスをつけることで対処してます。Nginxのプロキシキャッシュはデバイスで分けてます。さて、

tsug 2015/12/21

リンク

CSSのみでレスポンシブ対応したテーブルデザインを作る３つの方法 | Neganin(ネガニン)

Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary.php on line 77 Warning: "continue" targeting switch is equivalent to "break". Did you mean to use "continue 2"? in /home/users/1/neganin/web/neganin/wp/wp-content/plugins/jetpack/_inc/lib/class.media-summary

tsug 2015/12/21

リンク

CSSのみでレスポンシブなテーブルデザインを。

サンプルページまずはサンプルから。内容としてはCSSだけでモバイル環境の場合にテーブルのデザインを変えるというもの。 >>REDLINE MAGAZINE | レスポンシブ対応テーブルサンプルネタ元のCODEPENページ。 >>A Pen by Captain Anonymous ソース自分とこのサンプルからソース部分を。まずはhtmlソース。 <table> <thead> <tr> <th>イベント名</th> <th>開催日</th> <th>場所</th> <th>料金</th> </tr> </thead> <tbody> <tr> <td data-label="イベント名">なんたらイベント</td> <td data-label="日時">2015/04/08(水) </td> <td data-label="場所">大阪府大阪市どこどこ</td> <td data

tsug 2015/12/21

リンク

表の各列幅を均等にする

HTMLで作成したテーブルの列幅が均等になるよう指定するには、CSSのtable-layoutプロパティを使えば良いだけなのでとても簡単です。すべてを均等に配分できるだけでなく、特定の列幅だけを任意のサイズに固定した上で、残りの列幅を自動で均等に割り振ることもできて便利です。そこで今回は、HTMLのtable要素で作成した表の列幅を、CSSを使って自在に指定する方法をご紹介いたします。【目次】幅を計算しなくても自動で均等にできるtable-layoutプロパティ均等配分例1：テーブル全体で均等な列幅を指定均等配分例2：特定の列は横幅を固定し、残りに均等な幅を指定 table-layoutプロパティの値は、自動(auto)か固定(fixed)かテーブルの列幅を均等にするtable-layoutプロパティの書き方備考：特定の列だけ横幅を固定したい場合の注意列の均等表示例と具体的