よく検索されるキーワード
ブログカード
TOC
初心者向け
トラブル対処
RWD
Validation
SEO
Tips
Smartphone
Responsive
Playground
上級者向け
Log In
Index
Categories
テンプレート (172)
配布中テンプレート (70)
ブログ内限定配布 (7)
リリーステンプレート早見表(表示タイプ別) (1)
配布終了・旧作 (25)
テンプレ不具合・修正など (69)
利用上のお願い (1)
よくあるご質問「お困りですか?」 (3)
ご質問の前に (2)
FC2不具合情報 (28)
割と重要なお知らせ (33)
カスタマイズ (171)
HTML, CSS, JavaScript (100)
遊び (19)
SNS (4)
FC2ブログのあれこれ (149)
webのあれこれ (66)
他社ブログ (9)
webツール (13)
マガブロ (1)
雑記 (6)
テスト用非公開 (6)
未分類(個人的テスト等) (23)
ホーム
コメントの編集
表が「ずれる」というのはどういった意味合いでしょうか。 画面からはみ出す、ということかしら (´・ω・`) tableはそうですね。それがtable(表)の特徴です。 Alternativeはレスポンシブデザインですので、タブレットやスマホではコンテンツの幅をリサイズする設定になってます。 tableへの横幅設定に600pxという具体的数値を用いられますと、スマホの横幅は600pxありませんので当然はみ出します。 tableはdivと異なり、自身の外側のサイズを重視しません。 tableは外ではなく内側のサイズ(セル内容)によって横幅が決定します。 例えば600pxと指定していても、仮にセル内容が改行なしで600pxの幅を超えた場合 全体幅は指定の600を無視してどんどん大きくなります。 (このソース内容では、という意味です。回避する方法はあります。) ですからtable自体がレスポンシブに向いていないというのは事実です。 回避策 ① max-width: 100%; を指定 これはブラウザ依存です。 600pxの指定だけれども、画面の100%が600pxに満たない場合にはそこで広がりをストップ。 という指定。 正確なCSS解釈としては 「tableにmax-width」は効かない」 というのが正しいですが、iPhoneのSafariなどでは効きます(笑) パソコンでもChromeやFirefoxでは効きません。 で、今「パソコンでは大丈夫」とのことですが、ブラウザがChromeやFirefoxであれば画面縮小ではみ出すはずです。 tableへのmax-width, min-widthはたぶんie11では効くかも(確認してません) でもまあ、とりあえずiPhoneでは(今のところ)効きます。 この方法を用いるのならばCSSソースをCtrl+Fキー検索されますと table { word-break: break-all; } という項目がありますので、一部追加で以下の通り。 table { word-break: break-all; [太字] max-width: 100%;[/太字] } この方法の利点 = 作業が簡単(笑) デメリット = 本来は正しくない挙動 ② tableへの横幅指定に%を使う これが一番良い方法です。 テンプレートのソースを編集するのではなく、記事内ソース(今みなみさんが掲載されている内容)を修正します。 width="600" を width="100%" あるいはそれ以下に設定します。 100%にしておくとスマホ画面で横幅いっぱいになり、画面幅を超過することはありません。 デメリット = 600px指定がなくなるので当初の見た目が思い通りにならない。 あるいは①の内容を踏襲して以下の修正も可能(正確なCSSでないというデメリットも受け継ぎます) <table style="width: 100%; max-width: 600px; border-spacing: 0; border-collapse: collapse;"> <tr> <td style="padding: 0;"> ちょっと難しいかもしれませんが ^^; 掲載されているソース内容自体がhtml4の古い記述方式です。 html5に則した内容は上記です。 cellspacingやcellpadding, border という属性は既に廃止されています。 ③ オーバーフローでスクロール こちらはtableが超過してしまったら横スクロールバーを出してテンプレ全体の横幅が崩れないようにする方法です。 テンプレではなく記事内ソース修正。 [太字]<div style="width: 100%; overflow-x: auto;">[/太字] ここにtable内容 [太字]</div>[/太字] こうしてdivで囲います。 今は改行してわかりやすく書いていますが、実際の記述時は <div><table>〜〜〜</table></div> と横繋ぎで書いてください。 (FC2エディターの表作成ツールを利用している・改行をhtmlタグに限定していない、というのを前提に) デメリット = スマホだとスクロールバーが出ていることに気がつきにくい。 --------- tableはちょっと難しいですよね (´・ω・`) 新エディターから表作成が削除されているのも無理からんことです。 こちら当ブログ内参考記事です。 http://vanillaice000.blog.fc2.com/blog-entry-246.html
管理者にだけ表示を許可する
送信
削除