レスポンシブデザインテンプレートでの画像の横並べがちょっとコツが要るんですね (´・ω・｀)
htmlコード的コツと併せて 思考のコツ も必要です。今回は画像の並列htmlソースコードをいくつか提案しようと思います。
2020.4.29
iOSでのバグ回避のために若干コード内容を変更しています。また説明も随時追加しています。
レスポンシブでの画像掲載の特徴
まず、なんでこんな記事を書いているかというところから。レスポンシブは横幅が常に一定ではない という点を忘れてはいけません。いかなるデバイスでも画面幅にフィットさせることを目的としていますので横幅を固定するわけでにはいきませんよね。という理由でこういうことが起こります。
レスポンシブ初心者さんはここで戸惑う方が非常に多いのだなぁ、と感じています。物理的には当たり前のことなんですが、html(及びCSS)の内容とも絡んでいますのでなかなか理解しづらいようです。
レスポンシブでは常に「方針」を決める
レスポンシブデザインでは「どうしたいのか」の明確な指針を持たないと大抵失敗します。先の章の「2枚並べるつもりだったのに勝手に上下になる！」もそうです。
画像並べではまず 横幅が広いときと狭いときの状態を同じにするのか変えるのか を決めないければいけません。面倒でもこういったことは常に考える癖を付ける。なにせ パソコンからスマホまで をサポートすることになるのですから、どちらか一方だけ考えれば良いというわけにはいきません。
【パソコンでの様子】
【スマートフォンでの様子】
スマートフォンというのは元々デバイス自体の横幅が狭いですよね。その狭い中でパソコンと同じように横並びを維持するのか、それともそれぞれを上下に並べ替えて横幅を有効に利用するのか。この点はよく考えないといけませんね。
どちらが良い、とは一口に言えないと思います。例えばいくつもの画像が掲載されており、あるものは大きく1枚で、あるものは2枚を横に並べて… というレイアウトもよく見かけます。並べ方による対比がデザインになる、というものです。スマホで並びを解除すると全ての画像がほぼ同じサイズで掲載されますから、自分が意図したデザイン、というか全体的な「雰囲気」ですよね。それが壊れてしまうこともあります。
あるいは「狭いのに横に並べたら見づらいじゃないか」と感じる人だって居ます。どちらの考えを重んじるかは管理人次第 (´・ω・｀)
そしてその方針をちゃんと決めておかないと コントロール ができないよ。ということです。
結局「困った」「こんなの嫌だ」となるのは自分が意図しない状態になっているからであって、それはつまり「自分が操っているのではなく操られている」ことに他ならない(笑)
並べで注目すべき点
- 並びをスマホでも維持するのかどうか
- 画像間の余白(左右と上下)をどうするか
①については前章で触れました。②の 余白 について。サンプル画像をもう一度。
画像同士の上下辺がぴったりくっついて隙間がありません。これは img要素 への vertical-align というCSS指定がどうなっているかによります。bottom が指定されているとサンプルのようにくっつきます。
余白を設けるのに vertical-align を変更するのか、それとも margin で余白を作るのか、これも一考する必要があります。vertical-align指定はテンプレートというかテンプレート作者の方針次第なので統一されていません。bottom指定はパズル的掲載をしたいときに役立ちます。事のついでにvetical-alignに関する記事へのリンクを掲載しておきます。
画像の横で改行した時に画像下に隙間ができる原因「vertical-align」
私のテンプレートではなりませんけれども (´・ω・｀) 「画像の横で改行した時にできる下の隙間をなんとかしろやFC2。」 といった主旨のコメントを見かけましたのと、Q&Aで頻出質問ですので記します。 なんとかするのは誰か、それはFC2ではなく自分です。 というか自分でやってしかるべき。 なんでもかんでもFC2に「やれ」じゃなく(笑)...
画像の上下左右の余白は意識しておかないと「意図しない結果」にまた悩まされます。コントロールが目的ですから本章で上げた2点について頭に置くようにしましょう。
意図しない結果を招くhtml内容
ほとんどの方がこういうhtmlコードで書いているのではないでしょうか。
<img src="左画像URL" alt="" style="数値px;"> <img src="右画像URL" alt="" style="数値px;">
アカン点は緑部位と紫部位。紫の は半角スペースを可視化したもので、実際にはスペースキー押下だろうと思います。このコードの思考を分析すると、
- パソコンで見た記事部分の横幅を調べる(仮に800pxとする)
- 画像間の余白は 半角スペース を利用する
- 800pxから画像間半角スペース(どんぶり勘定で20pxとする)を引き、さらにそれを2等分する
(800 - 20 ) ÷ 2 = 390 - 画像1枚につき width: 390px を指定する
こういう感じだろうなぁ、と思います。ところがこれはレスポンシブでは全部アウト。
横幅を調べる必要などない
レスポンシブで何かを計算する必要というのはまず生じません。記事幅なんて調べなくても良い。調べたところで 流動(不定) なのですから、せいぜい「最大でどのぐらいかなぁ」を掴むために知っておけば良い、という感じ。
半角スペースの横幅はフォント種によって様々
Arialフォントだと大体 0.2em とかそのぐらい。Courier Newだと 0.6em
といったようにフォント種(font-family)によって変わってしまうのですからアテにしてはいけません。
em という単位は相対単位なんですが、参照するのは「親要素のフォントサイズ」です。スペースはフォント種だけでなくフォントサイズの影響も受けてしまいます。 半角や全角スペースでの余白調整は絶対に失敗に繋がります ので行わないようにしましょう。画像並べに限らず、です。
流動する要素に有効な単位はpxではなく%
px というのは絶対単位です(実際は相対ですが、解像度による固定という意味で) から、仮に記事幅が800pxのときに width: 390px を「記事幅の半分」だと思ったとしても、実際には記事幅は流動なのですから、記事幅が500pxになったらばその画像は「記事幅の半分ではなくなる」ということです。
「画像が横に並ばなくなっちゃう！」とお嘆きの方はこれがその理屈ですよ。画像に px で数値指定をしているのでそういう結果になるのです。だって画像2枚と余白を足して記事の横幅を超えたら収まらないのですから。そのために相対単位の % を利用するんです。
「相対」というのは「何かを参照する」という意味で、この場合に参照元となるのは「親要素の横幅」つまり「記事範囲の横幅」です。記事の横幅を100%とし、それに対し横50%、という意味ですね。レスポンシブでは%という単位の使いこなしがポイントです。
結局一番のネックはここなんですね。これまで 固定幅テンプレート しかご存知なかった方、例えばYahoo!ブログなんかだと記事幅は 560px と決まってますから、等分すると280px、半角スペースを入れるため大雑把で10px引いて270pxに指定する、とかそんな感じ。レスポンシブでこの考え方は通用しません。
ここまでが理屈の世界。次章は雛形htmlをいくつかご紹介します。
コード掲載の前に注意
FC2ブログはテンプレートの仕様が様々ですから、全てに共通する内容というのは提供できません。範囲がグッと狭くなってしまいますが、以降の内容は「弊テンプレート(Akira製作)の場合は」という但し書きつきです。すみません。
旧投稿画面 の利用を前提とします。新投稿画面のデフォルトモードは「コードを書く」ことには適していません。上級者は新投稿画面のhtmlモードを利用できるとしても、初心者の方にはかなり厳しいと思います。リアルタイムプレビューなどもありませんし。なので旧の方をおすすめ。
旧投稿画面は改行の扱いを2種から選べます。今回は 改行の扱い「HTMLタグのみ」 を想定したソースコードです。「自動」に設定する方は コード間にある全ての改行を取り除き、横一列に 修正して記載してください。最初から横つなぎになっているものはそのままでOKです。
img要素というのはふるまいが inline-block と同じなので、img要素間で改行すると隙間が生じてしまいます。改行の扱いを「HTMLタグのみ」に指定している場合でもimg同士の間でコード改行は行わないようにしてください。
img要素間で改行
<img src="" alt=""> <img src="" alt="">
img要素間で改行なし
<img src="" alt=""><img src="" alt="">
一部 メディアクエリ を利用するものについては、独自クラスの利用 という形になります。
* メディアクエリ = 画面サイズに応じてCSSを切り替える手法
メディアクエリはインラインCSSでは利用できませんので、「htmlは記事編集画面に記載、CSSはスタイルシートに記載」という形を取ります。
インラインCSSの方はリアルタイムプレビューで実際の描画を確認できますが、独自クラスの場合は「プレビュー」か「記事を保存」を行わないと確認できません。その代わり同じスタイルを「よく利用する」という場合には独自クラスの方が一括管理できて便利です。
また独自クラスの場合は テンプレート変更時にCSS内容の移植が必須 であることもお忘れなく。移植しないとスタイルが失われます。
スマホで並びを維持するパターン
- 画像の実寸は横600px程度
広い画面で横に並んだとき、横幅が250pxとか400pxとか小さくなりはするんですが、実寸はやはり600px程度あった方が良いでしょう。何故かは以下の記事を参照。
スマートフォンで画像がぼやける際の対処と画像容量削減
スマホだと画像がぼや〜っと不鮮明になってしまう場合の原因と対策ですー (´・ω・｀) そしてもうひとつ、画像がスキっと表示されずに上からベロベロ〜って感じでゆっくり表示されてしまう場合の原因についても(後者は「ついで」的にですが)...
また、サムネイル対象画像(OGP画像, アイキャッチ画像, 「本文」最初の1枚目)の実寸推奨は 1200px です。理由は以下の記事を参照。
2018年時点でサムネイル画像・OGP画像は横1200px以上が最適解
OGP画像 というのがありますよね。 各記事の「代表的画像」と表現しても良いかもしれません。 各種SNSシェアなどでもこのOGP画像がサムネイルとして表示されます。 FC2ブログ的に言い換えると トップページや関連記事リスト、新着記事リストなどで表示されるサムネイル画像 = OGP画像 その画像のサイズは一体どのぐらいが適切なのか。 2018年4月現時点で最低でも 横1200px が回答ということで良いと思います。...
横並びにする画像はサムネイル対象「ではない」と仮定して推奨600pxです。
img要素のみで構成, 余白を%で指定
【インラインCSS】--- 記事編集画面に記載
html 画像リンクなし
<img src="左画像URL" alt="" style="width: 49%; margin-right: 1%;"><img src="右画像URL" alt="" style="width: 49%; margin-left: 1%;">html 画像リンクあり
<a href="左画像URL" target="_blank"><img src="左画像URL" alt="" style="width: 49%; margin-right: 1%;"></a><a href="右画像URL" target="_blank"><img src="右画像URL" alt="" style="width: 49%; margin-left: 1%;"></a>画像同士の高さが異なる場合の垂直位置合わせは、右に配置する画像のstyle属性に vertical-align: 位置; を追加してください。弊テンプレートのデフォルトは bottom の下辺合わせなので、指定する値は top middle のいずれかになります。
①【独自クラス】--- html(markup)は記事編集画面に、CSSはスタイルシートに記載
html 画像リンクなし
<img class="left-img" src="左画像URL" alt=""><img class="right-img" src="右画像URL" alt="">html 画像リンクあり
<a href="左画像URL" target="_blank"><img class="left-img" src="左画像URL" alt=""></a><a href="右画像URL" target="_blank"><img class="right-img" src="右画像URL" alt=""></a>CSS 画像リンクあり・なし共通
.left-img,
.right-img {
width: 49%;
}
.left-img {
margin-right: 1%;
}
.right-img {
margin-left: 1%;
}このコードの特徴は2つの画像を49%に指定して合計98%、余った2%をそれぞれ左画像への右marginに1%、右画像への左marginに1%を振り分け、合計で100%に。つまり画像間の余白が2%で、左画像の左辺は文頭と同じ位置、右画像の右辺は文末と同じ位置になります。つまり両端が綺麗に揃うということですね。
また、画像間余白も%指定ですからパソコンでは広めに、スマホでは狭めの余白になります。
画像同士の高さが異なる場合の垂直位置合わせは、.right-image のルールセットに vertical-align: 位置; を追加してください。指定する値は top middle のいずれかになります。
img要素のみで構成, 余白をpxで指定
【インラインCSS】--- 記事編集画面に記載
html 画像リンクあり
<img src="左画像URL" alt="" style="width: calc(50% - 8px); margin-right: 8px;"><img src="右画像URL" alt="" style="width: calc(50% - 8px); margin-left: 8px;">html 画像リンクなし
<a href="左画像URL" target="_blank"><img src="左画像URL" alt="" style="width: calc(50% - 8px); margin-right: 8px;"></a><a href="右画像URL" target="_blank"><img src="右画像URL" alt="" style="width: calc(50% - 8px); margin-left: 8px;"></a>画像同士の高さが異なる場合の垂直位置合わせは、右に配置する画像のstyle属性に vertical-align: 位置; を追加してください。指定する値は top middle のいずれかになります。
②【独自クラス】--- html(markup)は記事編集画面に、CSSはスタイルシートに記載
html 画像リンクなし
<img class="left-px-img" src="左画像URL" alt=""><img class="right-px-img" src="右画像URL" alt="">html 画像リンクあり
<a href="左画像URL" target="_blank"><img class="left-px-img" src="左画像URL" alt=""></a><a href="右画像URL" target="_blank"><img class="right-px-img" src="右画像URL" alt=""></a>CSS 画像リンクあり・なし共通
.left-px-img,
.right-px-img {
width: calc(50% - 8px);
}
.left-px-img {
margin-right: 8px;
}
.right-px-img {
margin-left: 8px;
}8pxに設定していますが任意変更可能。余白のサイズを固定したい場合にはこの方法で。
画像同士の高さが異なる場合の垂直位置合わせは、.right-px-img のルールセットに vertical-align: 位置; を追加してください。指定する値は top middle のいずれかになります。
div要素でimg要素を包含【おすすめ】
【インラインCSS】--- 記事編集画面に記載
html 画像リンクなし
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<img src="左画像URL" alt="" style="width: 49%;">
<img src="右画像URL" alt="" style="width: 49%;">
</div>html 画像リンクあり
<div style="display: flex; justify-content: space-between; align-items: flex-start;">
<a href="左画像URL" target="_blank" style="width: 49%;"><img src="左画像URL" alt=""></a>
<a href="右画像URL" target="_blank" style="width: 49%;"><img src="右画像URL" alt=""></a>
</div>画像同士の高さが異なる場合の垂直位置合わせは、雛形では align-items: flex-start の上辺揃えにしてあります。中央にする場合は値を center に、下辺揃えにするには値を flex-end に変更します。
③【独自クラス】--- html(markup)は記事編集画面に、CSSはスタイルシートに記載
html 画像リンクなし
<div class="flex-img-wrapper">
<img src="左画像URL" alt="">
<img src="右画像URL" alt="">
</div>html 画像リンクあり
<div class="flex-img-wrapper">
<a href="左画像URL" target="_blank"><img src="左画像URL" alt=""></a>
<a href="右画像URL" target="_blank"><img src="右画像URL" alt=""></a>
</div>CSS 画像リンクなし
.flex-img-wrapper {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.flex-img-wrapper img {
width: 49%;
}CSS 画像リンクあり
.flex-img-wrapper {
display: flex;
justify-content: space-between;
}
.flex-img-wrapper a {
width: 49%;
}画像同士の高さが異なる場合の垂直位置合わせは、雛形では align-items: flex-start の上辺揃えにしてあります。中央にする場合は値を center に、下辺揃えにするには値を flex-end に変更します。
親要素をひとつ作ることによって全体幅の調整がしやすくなります。例えば親のボックス(.flex-img-wrapper)に style="max-width: 数値px;" を加えたり style="width: 数値%;" を加えたり、あるいは両方を加えて style="width: 数値%; max-width: 数値px;" など。コントロールがより容易になります。
例えば原寸横200pxしかない画像を記事幅800pxで50%表示したら単純に400px弱ですから拡大表示されてしまいますよね。そんな場合に親要素に max-width: 400px としておけば拡大されずに済みます。この場合は親要素に対して50%表示ですから、画像は200px弱で表示されることになります。
また、親要素をflexで仕上げると各画像へのmargin指定も不要になりますし、親要素に display: flex が指定されている場合はimg要素間(またはa要素間)の改行もOKになりますのでソースコードの可読性にも優れています。
スマホで並びを解除するパターン
解除する場合は「維持するパターン」で紹介した各々「独自クラス」の方を採用し、以下のCSSを追加します。
①の独自クラスに追加
@media screen and (max-width: 420px) {
.left-img,
.right-img {
width: 100%;
}
.left-img {
margin-right: 0;
margin-bottom: 10px;
}
.right-img {
margin-left: 0;
}
}②の独自クラスに追加
@media screen and (max-width: 420px) {
.left-px-img,
.right-px-img {
width: 100%;
}
.left-px-img {
margin-right: 0;
margin-bottom: 10px;
}
.right-px-img {
margin-left: 0;
}
}③の独自クラスに追加
画像リンクあり・なし共通
@media screen and (max-width: 420px) {
.flex-img-wrapper {
display: block;
}
.flex-img-wrapper img {
width: 100%;
margin-bottom: 10px;
}
}スマートフォンでは画像は上下並びになり、かつ横100%表示になります。もちろん100%でなく80%などを指定してもOKです。ともかく記事幅に対してどの割合で表示させるかを指定します。
まとめ
独自クラスで処理する場合にはCSSはスタイルシートに一度追加するだけ。記事を書くときにはhtmlのソースコードをすぐに適用できるよう別途メモ書きを準備しておくとか、そこは自身で工夫してください。よく利用するならば独自クラス化しておく方が効率が良いと思います。ただしリアルタイムプレビューはできません。
こうしてみるとやはりレスポンシブデザインというのは固定幅と比べて難易度はUPしますね。特殊なことをしようと思えばそれなりに頭をひねる必要が出てきます。とはいえ雛形さえあれば応用は効くはずですから、この機会に「考え方」に重点を置いて、いざやろうと思ったときに戸惑うことのないようにしておく、と。
最後についでですが3枚並べるにはどうするか。flexを利用する雛形。
html 画像リンクなし
<div class="flex-img-wrapper3">
<img src="左画像URL" alt="">
<img src="中央画像URL" alt="">
<img src="右画像URL" alt="">
</div>html 画像リンクあり
<div class="flex-img-wrapper3">
<a href="左画像URL" target="_blank"><img src="左画像URL" alt=""></a>
<a href="中央画像URL" target="_blank"><img src="中央画像URL" alt=""></a>
<a href="右画像URL" target="_blank"><img src="右画像URL" alt=""></a>
</div>CSS 画像リンクなし
.flex-img-wrapper3 {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.flex-img-wrapper3 img {
width: calc(97% / 3);
}CSS 画像リンクあり
.flex-img-wrapper3 {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.flex-img-wrapper3 a {
width: calc(97% / 3);
}
最初に100%から余白に使いたい分(ここでは3%)を引いておき、それを3等分します。自分で計算せずともブラウザが即座に計算してくれます。3%の割当は画像間の余白は2箇所ですから1.5%づつ間隔が空くわけですね。多くの場合厳密に計算する必要はないだろうと思いますので、大体の数値を引いておけばOK
2枚並べでこの方法を取っても良いですよ。つか、これが最強かもしれんな (´・ω・｀) ←
同じ要領で4枚でも5枚でも簡単に応用できます。なので何枚並べるにしろ、ひとつ要素が増える(親要素のdiv)点を容認できるならばflexで並べるのがおすすめです。応用するときは クラス名の変更 を忘れずに。2枚並べのときの親要素のクラス名、3枚並べのときのそれ、4枚並べの〜とそれぞれ別のクラス名にしておく必要がありますので注意。
3枚並びとなるとスマホではちょっと厳しいと思いますので、解除するCSSを追加しておくと良いですね。
There are no comments yet.