レスポンシブデザインで要素がはみ出す原因はwidth指定

せっかくレスポンシブデザインを選んでも 要素がはみ出しては台無しです

これは見た目や使い勝手の問題も大きいですが、Googleセンセがはみ出し大嫌いです。その理由だって結局のところ「ユーザビリティ」の問題ですけども。

レスポンシブテンプレートを選んだのだから、モバイルフレンドリーだね ♪ と思ったら大間違いです。テンプレート製作者の手の届かない領域「記事内容」までしっかり管理しましょう。

レスポンシブデザインとモバイルフレンドリーの関係

レスポンシブのなんたるかは以下の記事をご参照ください。

今更だけど「レスポンシブ」ってなんぞ?

今更だけど「レスポンシブ」ってなんぞ?

超いまさらですけれども (´・ω・`) 私が製作しているのは レスポンシブデザインテンプレート です。意味をおわかりの方も、そうでない方もご利用ありがとうございます(笑) ちょちょいとググればそれこそわんさか情報は出てくるのですが。私の方からも主観など交えつつ記してみようと思います。...

モバイルフレンドリーの条件は以下の通りです。

  • 携帯端末では一般的でない Flash などを掲載していないこと
  • ズームしなくても判読できるテキストを使用していること (10px以下はダメ。11pxも非推奨)
  • 目的のリンクをタップできるよう、それぞれのリンクが十分に離れていること
  • ユーザーが横にスクロールしたりズームしたりする必要がないよう、コンテンツのサイズが画面と一致していること

最後の「横にスクロールしたり〜」を簡単に言うと
何かがはみ出してたらアカンよ
ってことです。その話しをこれからしようとしています。

ユーザーの意識外ではみ出すモノ

レスポンシブテンプレートユーザーの意思とは無関係に勝手にはみ出すものをまず挙げておきます。

  • FC2検索バー --- タブレットではみ出します。故にいつも非表示を推奨しています
  • スマートフォンで表示 のグレーの上部バー

2なんですけども。
レスポンシブを採用する方は基本的にこのバーは非表示でお願いしますね (´・ω・`)
どうしてもスマホ版が必要だ、という方でもこういう状態になっていることがあります ↓

正しい状態

ちょっとこちら私のテンプレではないのでコンテンツ範囲は赤くして伏せます。

ただこちらのバーはみ出しに関しては、このバーが出ているということは「スマートフォン版」を「設定している」ということでしょうから、モバイルフレンドリーの査定はモバイル版で行われますので関係ないっちゃー関係ないです。でもあんま気持ち良くはないわね (´・ω・`)
PC ← → モバイル を行ったり来たりする際に目にするわけだから。(ちなみにこのはみ出しはFC2さんの責ではありません)

FC2検索バーについては、簡単に修正できるんですけどテンプレート製作者(及びユーザー)がCSS操作を行ってはいけない、ってことですので、製作者側ではどうしようもないです (´・ω・`)
実際ここに何かが被さってたり、意図的にCSS操作すると審査を通過しません。リジェクト対象。この検索バー、他にもいろいろ不都合の多いレイアウトになってます。非表示が許可されていますので、どうしても必要、という方以外は非表示設定をおすすめします。
(つか、直せば良いのに )

記事幅からはみ出すことは即ち画面幅の超過になります

レスポンシブでの記事幅はモバイル端末、特にスマートフォンでは画面幅とほぼ同等になります。パソコンから閲覧した際には右やら左やらにサイドメニューが居たりするのですが。モバイルでは基本的にシングルレイアウトに変更になります。

パソコン
スマートフォン

ね (´・ω・`)
だから 記事幅(コンテンツ幅)からはみ出したものはモバイル画面を超過します。画面幅を超過するとどうなるか。

  • スクロールする度に画面が左右へグラグラ = ユーザビリティ低下
  • モバイルフレンドリーとして認めてもらえない

実際にコンテンツ超過が起こっているページをテストしてみると…
モバイルフレンドリーテスト

合格
不合格 (クリック拡大)

この「不合格」のページですけど。「レスポンシブ」を謳っているページで取得しました。4番目に書いてありますね。「レスポンシブ ウェブ デザインを使用する」と良いよ(はぁと) って。コンテンツ超過ページは レスポンシブであるとさえ認めてくれない んです。

で、3番目見てください。すんごく大事なヒントが書いてある。ってゆーか、答え

レスポンシブデザインでは絶対値指定を避ける

絶対値・相対値ってのはわかりますかね (´・ω・`)
「相対」というのは相手があって初めて「相対」です。「絶対」というのは相手は関係ありません。全ては己のみ。

例えば、
「ケイトちゃんの体重はトニー君の半分(50%)です。」
と言った場合。
トニー君の体重が60kgならばケイトちゃんは30kgです。
トニー君が70kgならばケイトちゃんは35kg。
痩せすぎ。飯食え。
「ケイトちゃんの体重は45kgです。」
と言った場合には、トニー君の体重など関係ありません。
45kgっつったら誰の体重がどうであろうと関係なく45kgです。
女の自己申告は当てになりませんけど。

絶対値 = px, em など

相対値 = %

上記が代表的な 絶対単位相対単位 です。

「px や em なんて使ってない…。でもはみ出す… 。(゚うェ´゚)゚。」

という方はこのパターン ↓

<img src="アドレス" width="900" height="500" alt>

width も height も単位ついてないですよね。単位はついていませんが、これらは絶対数値指定です。htmlの width属性 と height属性 は px がデフォルトで省略されているだけです。

ここから「私のテンプレートでは」という但し書きつきです。画像掲載の img というhtml要素については、絶対数値指定を行ってもはみ出さないように処理をしています。記事幅を超過したら自動で縮尺がかかります。勝手に小さくなって嫌だなぁ…。と思うかもしれませんが、強制的に小さくなります(笑)

画像の横幅を 700px に指定

<img src="アドレス" width="700" height="auto" alt>
記事幅が700px以上
記事幅が700px以下

この自動縮尺が私のテンプレートではデフォルトです。他製作者様の作品についてはわかりません。仮にこういった仕様になっていないのならば、記事幅が700pxを下回ったらはみ出します。ところで、この時点で「せっかく大きく載せたのに勝手に小さくなっちゃ困るんだけど! (# ゚Д゚)」
と思う方はレスポンシブテンプレートを選んじゃダメですYO

私のテンプレートでも画像がはみ出すパターンがあるんです。どういう時かというと…
img を div あるいは table などで囲っており、そのdivあるいはtableに widthの絶対数値指定が行われているとき
こういうの ↓ * imgの一部属性は省略します

<div style="width: 700px;"><img src="アドレス"></div>
<table width="700">〜省略〜<img src="アドレス">〜省略〜</table>
結果(divの結果ですがtableも同じです)

記事範囲から見事にはみ出てサイドメニューと重なってしまいました。絶対値というのは画面幅がどうであろうと700pxと指示されたら700pxを保持しますので、横320pxしかないスマホ画面でもやはり700pxです。380pxの超過ですね。画面は右へ左へ。閲覧者はイライラ。モバイルフレンドリーではないので検索順位も上がりません。

divやtableで囲うことなんてない?いやいや〜。ありますでしょう?最も多いパターンは ランキングバナー。img であるところのバナーを横に並べて div で囲って px で数値入れてません?あるいは体裁を良くするつもりで table で囲って width="●●" って入れてません?

絶対値指定にはこういった危険があるんですね (´・ω・`)
画像の場合には、
何も気にせず貼り付ける → はみ出る
というのが頻繁に起こりますので、私の方で事前にその対策をしていますが、その画像でもdivやtableで囲ってそちら側に絶対数値指定されてしまった場合には効力がありません。みなさんがどのようなhtmlを利用し、どのような入れ子をされるか、というところまでは予測がつきませんし、divやtableなどあらゆる要素に縛りをかけてしまうわけにもいきません。そんなことしたらスクロールボックスとか作成できなくなりますし。それはみなさんの自由度を下げてしまうことに繋がります。ですから 記事内要素についてはテンプレート頼みではなく、ご自身で気をつけて頂きたい のです。

レスポンシブデザインの基本はあらゆる要素が可変であること

なので、それを常に念頭に置いてください。今見ているブラウザ画面は1300pxかもしれませんが、それをちょっとマウスで操作すれば1100pxあるいは900px、あるいは逆に1500pxまで拡がるかもしれません。画面が大きくなろうと小さくなろうと綺麗に体裁を保てるのは レイアウト全体が常に可変 だからです。容れ物が可変なのだから、中身も可変にしなければいけません。流動幅の中に固定幅を入れてしまうからはみ出ます。自分の所有パソコン画面が1300pxだからといって、閲覧者のパソコンも同じサイズとは限りません。自分のデバイスだけを考えたサイズ指定をしないことです。レスポンシブテンプレートと上手く付き合うためには、記事をプレビューした際にブラウザの幅を大きくしたり小さくしたり、変更して目視確認しましょう。
ブラウザ幅変更での確認(特に縮小)はレスポンシブでは必須です。

相対数値指定の単位 %

相対の%の場合、何に対しての%かというと、自身の親のサイズを相手にしてその割合(%) です。サンプルのdivやtableの場合、widthを700pxという絶対数値指定から例えば「100%」という相対数値指定に変更すると、相対参照するのはその「親」ですので、通常は 記事幅 ということになります。記事幅が縮小されれば自身もそれを参照して小さくなり、拡大されれば同じく大きくなる、というのが相対数値指定です。

相対単位%を使い、100以下の数値であればはみ出すことはない

この理屈はおわかりですよね。100%を例に取りますと、親を参照して子(自身)の割合が10、つまり100%、つまり「同等」なのですからはみ出したくともはみ出ません。80%を例に取りますと、親が700pxの時には子は560pxに。親が1200pxの時には960pxに。親が300pxの時には240pxになります。度々言いますが、レスポンシブ内の要素は常にサイズ可変 です。何度も言います。刷り込みです((((笑)

自身のひとつ外側にあるのが「親」ですので、
① 画像をそのまま記事内にベタ貼りしたら記事範囲が親です。
② 画像をdivで囲ったのであればそのdivが親です。
③ そして②のdivの親は記事範囲です。

%指定だとマズい場合とその対処法 max-width指定

記事の最大幅が1000pxだとします。掲載したい画像の元サイズが横600pxだとします。この画像の width に100%を指定してしまうと、記事幅が600px以上の状態の時は必然的に 拡大されてしまう ことになります。だって「親と同サイズにしろ」というのが100%指定の意味だから。画像は解像度というのが大事ですので、拡大は避けたいですよね。そういう時に max-width プロパティを利用します。

プロパティですよ (´・ω・`)
プロパティというのはCSSです。先程まで例にあげていた画像のソースコードは以下のようなものですが。

<img src="アドレス" width="700" height="auto">

これね。「単位付いてないけどpxやぞ。」って言ったやつね。この width と height は html属性 です。これから扱う max-width は CSSプロパティ です。で、書き方はCSSで統一されることをおすすめします。画像ならば

<img src="アドレス" style="width: 700px; height: auto;">

こちらは先程の width属性, height属性とは違い、widthプロパティ, heightプロパティです。これからmax-widthを扱いますので、この違いは理解しておいて欲しいところです。じゃないと逆に混乱する (´・ω・`)
たぶんワケワカメになるので、頑張って覚える。
width/ heightプロパティの方は 単位必須 です。

あとですね、FC2のエディターツールから画像を貼り付けると、height に具体的な数字が入ってるじゃないですか。height="300" とか。これは300という数字ではなく auto に変更しておいた方が良いですよ。autoにしておけば常に縦横比を合わせてくれますので、横の数字を変更したら縦横比狂った (;ωq`) といったことが起こりません。

本題の max-width の使い方ですが、こんな感じです ↓

<img src="アドレス" style="width: 700px; max-width: 100%; height: auto;">

この意味は「画像の横サイズは700pxだよ!でも記事の幅が700px以下になっちゃったら、最大でも100%(つまり記事幅と同じ)だよ!」です。記事の横幅が700px以上になった時には画像は700pxです。

記事幅 1000pxの時の 画像は 700px --- width: 700px
記事幅 700pxの時の 画像は 700px --- width: 700px
記事幅 500pxの時の 画像は 最大値である100% (記事幅と同等 = 500px) --- max-width効力

max-width とは 上限値 の設定です

max-width の上限値があるのですから、逆の「下限値 (min-width)」 もあります。

%とpxの入れ替えもできます。

<img src="アドレス" style="width: 100%; max-width: 700px; height: auto;">

100%の方を width に。700pxの方を max-width に変更。この違いわかりますかね?

記事幅 1000px の時の画像は 最大値である700px --- max-width効力
記事幅 700pxの時の 画像は 700px --- width: 100%
記事幅 500pxの時の 画像は 500px --- width: 100%

効力を発揮する場面が違います。前者は「常に700px。でも画面が700pxより小さくなったら記事幅に対し最大100%までに縛る」後者は「常に記事幅に対し100%。でも画面が700pxより大きくなったら最大でも700pxまでに縛る」

前者は700pxという絶対数値ですから、記事幅が700px以下になったらはみ出しちゃいます。だから「最大でも100%」という縛りをつけます。後者は100%という相対数値ですが、記事幅が700px以上になったら拡大されちゃいます。だから「最大でも700px」という縛りをつけます。

見た目には同じですが、目的と方法が違います。どちらに絶対値を設け、どちらを相対にするか。これは上手に使い分ける必要があります。

こうして絶対数値と相対数値を両方同時に設けることで、かなりコントロールできるようになります。

一筋縄ではいかない table

なるほど、じゃあtableにwidthとmax-widthを…。と思いたいところですが、
table に max-width は効きません
max-widthだけでなく、その反対の min-width も効きません。しかしこれがですね、
● Google Chrome だと table の max-width が効かない
● Firefox や Safari だと 効く

と、ブラウザ間で差異があるんです (´・ω・`)
(IEはごめんなさい。どうだか忘れた(笑))
これどっちが正しいかというと、Chromeが正しいです。table は max, min という概念を持たない、というのが本来です。昔はFirefoxでも効かなかったはずですが、最新バージョンでは効くようになってる。

tableというのはいわゆる「ブロックレベル要素」です。
ブロックレベル要素 = 横並びにできない要素 = div, table などが代表的
インライン要素 = 横並びにできる要素 = img, span などが代表的
ブロックレベル要素・インライン要素の別はhtml5で無くなったのでは?という方もいらっしゃいますが、ブロック・インラインの別は元々がCSSボックスモデルですから、「無くなった」というよりも「完全にCSS管理下に差し戻された」と言った方が良いと思います。

ブロックレベル要素のほとんどは 自身にサイズ指定が無い場合、親のサイズに依存 します。つまり width: 100% がデフォルトです。

<div>あいうえお</div>

「あいうえお」というテキストを持つdiv要素ですが、widthの指定がありません。実態変換されたものがコチラ ↓

あいうえお

これではなにがなんだかわかりませんので、

<div style="background-color: rgb(245,245,220);">あいうえお</div>

こうして背景色をつけてみます。変換 ↓

あいうえお

背景は左隅から右隅まで、横いっぱいに付いていますので、div要素の横幅が自動的に width: 100%; であることがわかります。ほとんどのブロックレベル要素がこれです。

ところが table というのは違うんです。

<table style="background-color: rgb(245,245,220);"><tr><td>あいうえお</td></tr></table>

* tbodyは特に必要無いので省いています。table要素にも同じく背景をつけ、width指定無し。変換 ↓

あいうえお

おわかりでしょうか。背景は「あいうえお」の後ろにしかありません。width: 100% のdivと違い、tableは自身の親のサイズに依存しません。自身の子のサイズに依存します。 上記tableの状態は 中身である子の「あいうえお」に拡げられたサイズ です。つまりdivなど他のブロックレベル要素とは逆に 横幅は auto がデフォルトなんです。中身に何もなければ 0(ゼロ) になります。

この table の特性を shrink to fit と言います

shrink to fit = 合わせるために縮む。
言い換えるとそれは
grow to fit = 合わせるために拡大する
でもあります。これが何を意味するかというと、親要素のサイズを基準としない ってことです。相対数値指定というのは「相手が親」でしたよね。ところがtableはそもそも親のサイズを重要視しません。絶対値は相手が要らないんでしたよね。だからみなさん table に絶対値を付けてしまうんです。中身のサイズが小さい時、tableもそのサイズに依存するので見た目がこじんまりしてしまうんですね。それが嫌で絶対数値を設けてしまうですよ (´・ω・`)
でもこれからはそれをやる前にちょっと考えて。Think twice! です。

ただし「100%」という概念が無いとレイアウトは成り立ちませんので、tableであっても「親のサイズに対し 100%」という指定はできるんです。width: 100% は指定できます。 width: 80% なども同様。できないのは max-width や min-width を % で指定すること です。tableは自身のサイズ自体が「中身にどのぐらい入ってるかで変わる」のが特徴。中に入っている要素のサイズが最優先ですから、仮に

<table style="background-color: rgb(245,245,220); width: 300px;"><tr><td>あいうえお</td></tr></table>

こうして絶対値指定 300px としたところで、中身の「あいうえお」がテキストでなく画像に変わったり、フォントサイズ変更で大きくなったりで、300pxを超えてしまった場合、 例え table に 300px の指定があったとしても、中身のサイズに合わせるために 300px を無視して拡大されます。

width指定意味ねーじゃん
そうなんです。tableのこの特性をきちんと理解していないと意味がありません。tableの大きさのコントロールは非常に難しいんです。

ここまででかなりややこしい内容になってますが大丈夫でしょうか ^^;
でもこのハードルを超えないと「table… 難しいから使うのやめる 」ってなっちゃいます。諦める必要はない。理解して使いこなせばオッケー ╭( ・ㅂ・)و
(だからそれが難しいんだろ、って話しだけど)

もうあれですね。ここまでで頭パーンになった方へは「迂闊にtableは使わない方向で。」とオススメするしかない(笑)

tableでできる max-width コントロールは

widthに相対値、max-widthは絶対値

ならば可能。こちらならChromeも融通効かせてくれます。逆はダメです。widthに絶対値、max-widthに相対値 --- 効かない --- はみ出す

X width: 700px; max-width: 100%;
width: 100%; max-width: 700px;

tableサイズコントロールのもうひとつの方法 table-layout: fixed;

tableは中身のサイズに応じ、場合によってはwidth指定を破棄します。というのがここまででわかったことです。その「width指定無視状態」を解除する方法。

table-layout: fixed;

こうやって使います ↓

<table style="background-color: rgb(245,245,220); width: 300px; table-layout: fixed;"><tr><td>あいうえお</td></tr></table>

これを同時に指定しておくと、tableはwidthの指定を無視することはありません。で、結果こうなる ↓

黒い背景がtableのサイズです。赤い背景が中身(子, セル内容)のサイズです。table-layout: fixed; を指定されたパターンのtableは子のサイズによって拡げられず、自身への指定 width: 300px; を守っています。がしかし中身に width: 500px; という指定がありますので中身がはみ出してますわね (´・ω・`)
絶対値指定ってのはこういうもんですよ。外の要素とサイズ上の整合性が無ければ必ずはみ出します。なので基本的に要素はフリー(width指定なし)にしておくのが望ましいですね。レスポンシブの場合には。

ただしtable-layout: fixed; を指定すると セルが強制的に等分化されます

ここまでのサンプルは中身がひとつ = セル内容がひとつ
ですので簡素な例ですが、tableを使いたい理由というのは大抵 「複数の要素を横並びにしたいから」 ですよね。

通常

あいうえおかきくけこさしすせそたちつてとなにぬねの

table-layout: fixed; を指定

あいうえおかきくけこさしすせそたちつてとなにぬねの

この特徴も知っておかないとレイアウトできません。逆に等分にしたい時は便利よ。

他にもtableは他の要素と違って特殊な挙動がてんこ盛りです。そしてそもそも論で FC2ブログエディターで作成するtableソースが古い 既に廃止された属性などで作成しますので、これもなー…。うーん (=`ェ´=;)

tableの書き方やらなんやら、別途専用記事にしないと書ききれません。セルは折り返しが効かないので横並びセル数を考えないといけないよ、だとか。table-layout: fixed; を使いつつ等分を解除するには、とか。tableはホントに煩雑で悩ましい要素なんですが、今回はこのぐらいで。

はみ出しを防ぐ下の手① overflow-hidden;

下の手ですよ (´・ω・`)
親にに overflow: hidden; を指定します。
overflow = 溢れ
hidden = 隠す
はみ出した部位を強制的にカットします カットしちゃえばはみ出しません。はみ出しはしませんが、その部位は見られなくなります

画像のポイントは右側なのに、右側の大部分がカットされて見ることができません。

はみ出しを防ぐ下の手② overflow-x: auto;

overflow-x の x は x軸のことです。つまり「左右」親に overflow-x: auto; を指定すると、いわゆる「スクロールボックス」状態になります。ページ全体がきちんと画面内に収まっており、部分的に横スクロールボックスになっている。これはモバイルフレンドリーとして認められます。が、モバイルでは スクロールバーは表示されません ですから、上手にやらないと横にスクロールできるということも、横にまだコンテンツがあることさえも閲覧者にわかってもらえません。そしてパソコンでも Macのスクロールバーは実際にスクロールを行った時にしか表示されません Windowsは最初から出てますよね。でもMacはスッキリと非表示なんです (´・ω・`)

下の手2つご紹介しましたが、これはもう最終手段ですね。にっちもさっちもいかなくなった時には使っても良いと思います(笑)
例えばですね、過去ログがめっさたくさんあって全部修正なんて無理だよぅ、な時なんか。対象要素を div で囲って overflow-x: auto; を指定。これで一応の対処にはなるかと思います。

まとめ

レスポンシブデザインでは…

要素への絶対数値指定はできるだけ避ける

相対数値指定を使う時は同時に max-widthプロパティを利用する

tableのmax-widthへは相対数値でなく絶対数値を利用する

ビギナーの自覚がある方はなるべくtableの利用を避ける

なんかあんまり上手く説明できなかった気がする。ごめんなさい ^^;

-
2019/03/07 (Thu) 14:15

管理人のみ閲覧できます

このコメントは管理人のみ閲覧できます

vanillaice (Akira)
Akira
2019/03/07 (Thu) 14:22

To リンク切れの件 内緒さん

ご指摘ありがとうございます。修正しました。

コメントに関する注意事項
  • テンプレートに関するご質問は各テンプレート専用記事でのみ受付致します。また、よくある質問をまとめているページも事前にご参照ください。
  • 専門的なご質問の場合、記事内容と明らかに関連の無い内容はお控えください(雑談の場合はその限りではありません)
  • 第三者が不快と感じる内容や論調でのコメントはお控えください(性的,高圧的,暴力的など)