itスポンサーリンクパソコン・スマホ・タブレット端末、今やいろんなサイズの画面からブラウザを見るのが当たり前になりました。最近のWordpressテーマであれば、はじめから対応してくれていることも多いです。!この度、ブログ記事で表(table要素と呼ぶこともある)を作ったところ、うまく表示されずとても困りました!自力でどうにもならなかったので、3日ほどかけて調べたら「なーんだそんな簡単なことか!」とびっくりするほどラクな解決法が見つかったので、対処法と「なんで表がおかしくなってしまうのか?」について解説します。その他、参考にした記事の紹介ブログのtable(表)が変・スマホではみ出る理由は幅(width)のせいまず今回の表がおかしくなる問題で困ったところは以下の2点。PC用に合わせて表や項目の幅を調整したら、スマホでは記事のレイアウトが崩れて表が「うにょーーーん」とブラウザの端まで突き抜けてしまうかたや、スマホにあわせて表を小さくするとパソコン上で小さすぎて見づらい...原因を調べたところ、同じような悩みに遭遇した人がやっぱりいたようで、どうやら、この不具合(?)は<table>タグに含まれる、幅を示す「width」という値が悪さをしているために発生しているとわかりました。私が参考にした記事をご紹介しておきます。【WordPress】作成した表がスマホ表示した時に枠外へはみ出る件【対処法】ちぇむにぃ【WordPress】作成した表がスマホ表示した時に枠外へはみ出る件【対処法】https://chemney.com/table-style/最近のWordPressのテーマはレスポンシブデザインに対応しているものが多いですね。...このブログ「ちぇむにい」さんの記事を見て頂くと、どうやら記事作成の際にテーブルから出したまま何もいじっていなければしっかり画面内に収まってくれるようです。この何もいじっていないというのはこんな感じにドラッグして枠のサイズを変更したりすることです。(画像略)これをしてしまうと、幅指定(width指定)がpxで書き込まれてしまいます。先ほどの場合、テキスト表示するとこんな感じになっていました。719.88px;”>』このwidth指定がどうやら悪さをしているようです。解決法は、widthのピクセル(px)指定を消せば良いわけです。ピクセル指定を消しただけだと、今度はPC版表示で厄介なことが起きました。こちらの図を見てください。なんだか片方の要素だけやたら大きいのがわかると思います。tableタグはデフォルトの状態だとすべてのセルのサイズを内容に合わせて調節して表示してしまう仕様になっているので、こうなってしまったようです。上記のような、右側の説明のほうが大事な部分であっても、下部に長めの文章のあるセルがあるためかいびつな形をしてしまっています。見やすさとしては正直微妙...直したい...と思いますよね?ご安心ください。それもめちゃくちゃ簡単なコード一つで解決しました。答えとなるコードが書いてあったページから引用します。このtable-layoutプロパティは、table要素に対して指定しますから、実際に使う際には、例えば以下のようにCSSソースを記述します。100%;}同一ページ内にtable要素が複数ある場合は、適宜class名やid名などを付加して、装飾対象の表を限定して下さい。表全体の横幅(widthプロパティの値)は自由に指定できます。上記のように「100%」を指定すれば横幅いっぱいに広がります。そのほか、「400px」などのようにピクセル数で固定しても構いません。どの場合でも、「表示に使える空間」に対して各列の幅が均等に配分されます。(style.css))の中にコピペするだけです。こんな感じでセルの幅が均一化され、綺麗な表になります。テーマの編集をするとサイトがおかしくなる可能性あるけど良い?って聞いてくると思いますが、OKして貼り付けます。不安な場合はCSSコードを全コピーしてテキストファイルにでもバックアップを取っておきまカスタムCSSが使えるテンプレートを使っている人や、プラグインを導入している場合は、オレンジの太字のコードを当てはまる「カスタムCSS」の欄に貼り付ければOKです。この方法だとテーマ編集のようにサイトのレイアウトが乱れる心配もないので、よりラクです。このサイトと同じ、カスタムCSSの使える「TCD」製のテンプレートを使っている場合は、ワードプレス編集画面の左サイドバーにある「外観」→「CSS編集」→「追加CSS」の方に入れると、大元のCSSを改変することなく表のレイアウトを整えることが出来ます。AboutHTML+CSSで、table(表)の列幅を均等に設定する方法https://allabout.co.jp/gm/gc/24011/table要素を使って表を作ると、標準では各セルの内容量に応じて自動的に行や列のサイズが決定されます。その結果、列幅が揃わずにバラバラになることがあります。列幅を均等に配分した方が見た目が良い場合もあるでしょう。100%;」は何を示している?どういう意味?専門的な解説はHTML+CSSで、table(表)の列幅を均等に設定する方法を見て頂くとして、ここでは簡単にこの2つのコードがどういう役割を果たしているか説明します。fixed;」tableのセルを、内容にかかわらず同じ幅にしてくれます。デフォルトではfixedのところが「auto」になっています。冒頭でも出てきましたが、要素の幅を指定するものです。デフォルトでは「auto」になっていて、表が大きいと画面からはみ出ることがありますが、100%にしておくと親要素(≒画面の表示サイズ)に合わせて変形してくれます。表の項目名の幅だけ小さくしたい場合は上記2つの方法で、スマホでもパソコンでも表が綺麗におさまるすべてのセルを、内容にかかわらず同じ幅にするこれは達成出来たと思います。これだけでもかなり見やすくはなりますが、もうひと手間加えて、表の左側にある項目名の幅のみ小さくすることもできます。こんな感じの表が作りたいときに使えるテクですね。fixed;」を用いた場合、項目名のようなあまり重要でないセルも、内容部分のセルと同じサイズになります。先程とは逆に「幅」のピクセル数を指定してやります。することで、項目名のセル「だけ」にピクセル指定がされ、表示されます。fixed;」の仕組みの都合上、1つめのセル以外のサイズを変えることはできないので注意が必要です。・カスタムCSS機能のあるWordpressテンプレートを提供している「TCD」と、カスタムCSSの解説記事このサイトもこちらのテンプレート「Opinion」を使っています。CSS(プラグイン)プラグインのほうが良い方はこちら。・table要素をスマートフォン画面の幅に合わせる時に使うCSShttp://webcommu.net/phone-table-css/表の中に文字が多く、隣のセルの文字と重なって表示されてしまう場合の対処法。しても表にしたほうがわかりやすい内容ってあると思いますが、スマホ・パソコン両方で綺麗に見せる方法がわからず、とても困っていました。似たような悩みに突き当たった人のお役に立てば幸いです。@sengokulife1059テーマ別の「特集コーナー」や「このサイトについて」もどうぞ。protected]まで。投稿者プロフィール「戦国らいふ」は校倉が管理しているブログです。ブログと管理人についての詳細はこちら。protected]まで。PR】同人印刷所「メディバンファクトリー」まとめ。送料込み1冊印刷&W...2019/11/29コツ・豆知識・メモ楽天ペイ(アプリ版)ではKyash等3Dセキュア非対応クレジットカードは...2019/10/23コツ・豆知識・メモFirefoxでPrimeVideoとAmazonMusicが見れない!...2019/10/19コツ・豆知識・メモ【キャッシュレス】AppleStoreではKyashなどプリペイド系クレ...関連記事Indesignで漫画・小説が混在している同人誌を作る時のコツま...戦国大名は領土拡大を必ずしも望んでいなかった?-「日本中世の自由...注意!楽天ペイのオンライン決済(非アプリ)で楽天ポイントを使うに...【同人誌】キンコーズで全自動中綴じコピー本(A5)を作る方法まと...発達障害に多い聴覚・視覚過敏の気付き方と対策!自分では気付けない...コメントトラックバックは利用できません。(0)この記事へのコメントはありません。特定の感覚が通常の人より敏感なため、街や日常...2016/9/1少部数かつ安く同人誌を印刷したい場合のおすすめ印刷所まとめ(2020年版)同人誌を作るとき、コピー本やキンコーズも悪くはないけど、印刷所も使ってみたい。【PR】同人印刷所「メディバンファクトリー」まとめ。校倉ゲーム・創作活動・歴史などが好き。記載されている会社名・製品名・システム名などは、各社の商標、または登録商標です。protected]まで。