今回は『画像』と『テキスト(文章)』を横に並べる表現方法を、レスポンシブであること を基準に雛形として掲載します。
主旨・用途
例えば以下のようなもの。
何かしらの商品紹介などでよく見受けられるレイアウトです。全体にボーダーをつけておくとこの前後の内容との区別にもなり、画像とテキストの間に関連があることもよくわかるようになりますね。
一見単純な並びですが、レスポンシブを念頭に、考慮すべき注意点がいくつかあります ので、ソースコードと合わせて簡単に説明します。
考慮すべき点
- スマートフォンでも横並び配列を維持するのかどうか
- 画像のサイズをどうするか
- フォントのサイズをどうするか(配列維持の場合)
これらをよく考えずに単純なコードを作ってしまうと、サンプルはスマートフォンでこんな感じになってしまいます。
画像上下の無駄な余白が気になりますし、文章の折返しも非常に多くて読みづらく、画像・テキスト両者の見た目バランスも悪いですよね。これらの対策をどうするかは個人の選択です。解決策としては
- ブレイクポイントの設定
- フォントサイズの調整
- positionの調整
などがあります。以降の章を読んでそれぞれどうするのが自分に最適かを決めてください。
基本のソースコードと応用
markup は 記事を書く際、記事編集画面にその都度記載します。
CSS は テンプレートのスタイルシート最終に追加します。
CSSをスタイルシートで管理しますので、追加したことを忘れないよう /* プロダクトカード */ というコメントを付けてありますが、ご自身のわかりやすいコメントに変更しても構いません。
htmlの方の注意点は、画像原寸を書き入れるときに単位を付けないことと、代替テキストをきちんと書き換えること。altが特に重要でないと思われる場合は alt="" と空でも構いませんが、alt属性自体を消してしまわないよう注意。ソースコードが長いので恐らく辞書登録へはバイト数制限で記録できません。以下の記事を参照するなど工夫して雛形管理をしましょう。
【Clipy】HTMLモードで記事を書くときの強力な助っ人アプリ
FC2ブログの管理画面のデザインが刷新されまして、これまで以上に WYSIWYG(見たまま編集)とHTML編集の選択 がはっきりするようになったのではないかと思います。今回はHTML編集モードでの記事作成に便利なツールをご紹介します。...
基本コードによる表示状態を説明したのが以下の画像です。
先にお伝えしたように、この基本コードだけではスマートフォンの見た目が非常によろしくありませんので、以降の内容について選択的対処を行うようにします。
① 全体横幅
プロダクトカード全体の横幅を示しています。デフォルトは 記事領域100% です。
全体横幅に制限を設けたい場合は、
.card__f {
max-width: 横幅px;
}を基本CSSソースコードよりも後に記載します。PCの最大横幅を確認し、それ 以下 の数値を指定しないと意味がないので注意。また、単位は px を利用するようにしてください。% で指定しないよう注意。
② 全体高さ
画像とテキストの高さが同一になることは稀です。全体の高さはいずれか大きい方の高さに倣います。ここは説明だけで特にコード追加などはありません。
③ 画像の大きさ
デフォルトでは画像の収まるボックスの横幅は全体横幅の 40%、テキストは 100%から40%を引いた数値に自動的になるよう指定しています。このバランスを調整したい場合はCSSの /* 画像の横幅専有パーセンテージ */ を変更します。
スマートフォンでの見た目や可読性を考えると、画像の専有は 30%〜50% が妥当かと思います。横並び配列を維持する場合は画像専有が50%を超えてしまうとテキストの折返しが多く読みづらくなります。仮に自身所有のデバイス横幅が414pxあったとしても、現役最小機種320pxを忘れないようにしてください。
画像がボックスよりも大きい場合
また、この画像用ボックスに収まる実際の画像については、原寸を参照します。比較的新しめのテンプレートの場合はよほど起こらないと思いますが、仮に親の画像用ボックス横幅よりも子の画像横幅の方が大きい場合に
- 画像が親ボックスをはみ出す
- 画像の縦横比が壊れる
いう場合には、
.card__f-image img {
max-width: 100%;
height: auto;
}を基本コードよりも後に記載します。これが発生する方は テンプレートの技術が古い可能性が高い ので、この機会に利用テンプレートの再検討をされても良いかもしれません。
画像がボックスよりも小さい場合
上下左右中央に配置されるのがデフォルトです。
上で合わせたい場合はガイダンスに従って align-items: center; を align-items: flex-start; に変更します。
一見したところ不格好ですが、場合によって利用価値があります(後述)
みなさんパソコンで作業をされると思います。画像が親ボックスよりも小さいと思っても、上の章の「画像の方が大きい場合」と注意点は同じです。デバイスの大きさは様々ですから、1300pxのパソコンではボックスよりも画像が小さくとも、768pxタブレットやあらゆるスマートフォンなどでは逆転するかもしれません。それがレスポンシブデザインです。
画像とテキストの横幅配分
掲載する画像の寸法がまちまちで、テキストとの横幅配分を一概に決められない、ということもあるかもしれません。その場合はhtmlの方に直接以下のような形式で配分指定を行います。CSSを修正する必要はありません。
<div class="card__f">
<div class="card__f-image" style="width: 数値%;">
<img src="画像URL" width="画像原寸横幅" height="画像原寸高さ" alt="代替テキスト" loading="lazy">
</div>
<div class="card__f-text">
<div class="card__f-text-cont">文章</div>
</div>
</div>htmlの style属性 を用いて直接操作する方法です。style属性がある場合はそれに従い、無い場合はスタイルシートでの指定に従います。
スマートフォンでの調整
まず考えるべきは 横幅の狭いデバイスでも横並び配列を維持するかどうか です。
【配列維持】
- ブレイクポイント設定 + フォントサイズ熟考
【配列維持しない】
- ブレイクポイント設定
スマートフォンで横並びを維持
フォントサイズが大きければ当然折り返しの機会も多くなります。フォントサイズの違いによる見た目の変化は以下の通り。
* 便宜上サンプル文章量を減らしています。
フォントサイズが大きければ大きいほど不格好に。この場合は割り切ってスマートフォンではフォントサイズを小さくすると良いでしょう。ただし Googleが最も推奨するのは16px であり、12pxを下回ると警告される というのが現状ですから、見た目に囚われすぎて11px, 10pxなどといった極小のサイズを指定すべきではありません(9px以下はかなり強く警告されます)
極力、「最小でも12px」を心がけましょう。
また、line-height の調整をするのも若干ですが有効です。デフォルトは 1.5 としてありますが、この数値を小さくしても良いかもしれません。ただしこちらも最低でも 1.2 を確保したいところです。
追加コード(CSS)は以下の通り。基本コードよりも後に記します。
@media screen and (max-width: 767px) {
.card__f {
font-size: 1.2rem;
line-height: 1.2;
}
}デバイス横幅が 767px までは、という指定です。一般的なタブレット、例えばiPadは 768px ですから、タブレットでは元のフォント指定に戻ります。緑部位は変更可能です。適切なポイントを指定するようにしてください。
スマートフォンで横並びを解除
横並びを解除する場合は画像とテキストが当然ですが縦に並びます。この際に画像が大きすぎると『画像とテキストのセット』という印象が薄れてしまいますので、画像を横100%取らせずに制限したほうが良いと思います。以下の内容を基本コードよりも後に追加。
@media screen and (max-width: 767px) {
.card__f {
display: block;
}
.card__f-image {
width: 60%;
border: 0;
}
.card__f-text {
border-top: 1px solid rgb(200,200,200);
}
}
もちろんフォントサイズを変更してもOKです。その場合は .card__f のルールセットに指定します。
画面topに画像を滞在させる
ボックス全体がまだ画面内に残っている間は画像がスクロールで上に移動してしまわないようにする方法です。これが有効なのは 文章量が多いことが予めわかっている場合 など。デバイス幅が大きいとスクロールで画面内からボックス全体がすぐに居なくなりますので、こちらもスマートフォン限定にすると良いかもしれません。そして大前提として
- 横並びになっており、ボックス全体の高さが大きい(文章量が多い)
- 画像の垂直位置が align-items: flex-start; になっている
画像を常に参照できる状態で文章情報を読んでほしい、という場合に有効な方法です。画像での説明が難しいのでこちらのサンプルは実物でごらんください。追加CSSは以下の通り。基本コードよりも後に記載。
@media screen and (max-width: 767px) {
.card__f-image img {
position: sticky;
top: 20px;/* テンプレートによって要調整 */
}
}top の数値ですが、ナビゲーションが上部で固定されるタイプのテンプレートで 0 を指定してしまうとナビゲーション下に隠れて見えませんので、適宜調整を。デフォルトは上から 20px の位置で固定されるようになっています。
The Boondock Saints
Tired of the crime overrunning the streets of Boston, Irish Catholic twin brothers Conner (Sean Patrick Flanery) and Murphy (Norman Reedus) are inspired by their faith to cleanse their hometown of evil with their own brand of zealous vigilante justice. As they hunt down and kill one notorious gangster after another, they become controversial folk heroes in the community. But Paul Smecker (Willem Dafoe), an eccentric FBI agent, is fast closing in on their blood-soaked trail.
【Director】Troy Duffy
【Writer】Troy Duffy
【Stars】Willem Dafoe, Sean Patrick Flanery, Norman Reedus
文章でp要素を利用したい場合
以下の内容を基本コードよりも後に記載。
.card__f-text-cont > p {
margin: 1em 0;
}
.card__f-text-cont > p:first-of-type {
margin-top: 0;
}
.card__f-text-cont > p:last-of-type {
margin-bottom: 0;
}画像にLuminousを適用したい場合
超軽量画像拡大スクリプトLuminousをFC2で使う方法
画像拡大スクリプト と言えば Lightbox(ライトボックス) や Colorbox(カラーボックス) などが有名どころですが、今回おすすめするのは Luminous(ルミナス) です。...
ソースコード中の
<img src="画像URL" width="画像原寸横幅" height="画像原寸高さ" alt="代替テキスト" loading="lazy">の部位をLuminous用のソースコードに変更。
滞在型を使いたい場合は追加コードのセレクタ .card__f-image img を .card__f-image .luminous に変更
まとめ
floatを行いたい場合は以下の記事を。
floatをスタイルシートで管理する
個人的には おすすめしません が、お困りの方が多いようなので方法をお伝えしようと思います。...
table要素を利用したい場合、その特徴と注意点などは以下の記事を。
tableの使い方を理解してスマートフォンでも見やすくする
なんでここでtable使うかなぁ (´・ｪ・｀) というレイアウトをよく見かけます。 例えば「商品紹介」「映画などのレビュー」「スポーツのスコア」など。それらがスマートフォンでどんな風に見えるか確認をしていますか？ というわけでtableの使い方と用途別提案など。...
単純なコードを書いてスマートフォンの見た目は知らんぷり、という方が結構多くてですね。今の時代だとまず真っ先に確認すべきはスマホでの見た目です。パソコンで作業をしているとなかなか意識が向きませんが、必ず目視確認するようにしてくださいね。これ以上のカスタマイズに関しては自己責任・自力でお願いします (ノﾟｪﾟ)
* 大急ぎで作成した記事なのでミスがあるかもしれません。お気づきの方はお知らせ頂ければ幸いです。
There are no comments yet.