質問編集履歴

2 修正コード

mercurian-teto score 71

2019/02/10 18:55  投稿

(はてなブログ）画像にキャプション付けると、スマホのサイトだと画像が勝手に改行して表示する

画像にキャプションを付けてそれを複数並べてようとしています。

はてなブログ内でこのソースコードを記述したのですが、

パソコンのサイトは何の問題もなく表示されるのですが、

スマフォのサイトでは画像のサイズに関係なく、2，3枚目の画像が下に勝手に改行してしまいます。

スマフォサイトでキャプション付きの画像を複数並べるときの

定石ってあるのでしょうか。

はてなブログでスマフォサイトとパソコンサイトに両方とも

パソコンサイトに対応させる設定があったのですが、適応させても全く反応しないので、コードで解決しようとしています。

最終的にはPCサイトで表示されている通りの並びをそのままスマフォサイトに適用させたいです。

image  image  image

caption caption caption

って表示されていたら、スマフォでも同様にその並びで表示されるようにしたいです。(縮小してもかまいません。)PCサイト版で表示されているものをスクショして

もとのところを消して貼り付ける程度の方法しか思い浮かびません。

なんとかコードで解決したいです。

回答お願いします。

```html

<div class="imagearea">

<figure><img src="" alt="写真" width="141" />

<figcaption></figcaption>

<figcaption></figcaption>

<figcaption></figcaption>

</figure>

<figure><img src="" alt="arrow" width="80" />

<figcaption></figcaption>

</figure>

<figure><img src="" alt="えええ写真" width="183" />

<figcaption>  </figcaption>

</figure>

</div>

```

下のソースコードがcssのものです。

※はてなブログだとダッシュボードの選択画面でしかcssファイルを編集することができません。styleタグをhtml中に記述すると自動的にコメントアウトされます。

```css

<style>

figure {

float: left;            /* 左に寄せて後続を右に回り込ませる */

margin: 0px 3px 3px 0px; /* 外側に余白を加える(右に7px・下に7px) */

/* 背景色 */

}

figure img {

display: block;         /* 余計な余白が出ないようにする */

margin: 0px 0px 3px 0px; /* 下側にだけ3pxの余白を追加 */

}

figcaption {

font-size: 0.9em;       /* 文字サイズを90%に */

text-align: center;     /* 中身をセンタリング */

}

div.imagearea:after {

content: "";     /* ※Clearfix */

clear: both ;

display: block;

}

</style>

```

#追記1

修正コード(idを付けたもの)

```

<div id="gazou">

<figure id="gazou"><img id="gazou" src="" alt="" width="200" />

<figcaption>figcaption</figcaption>

</figure>

<figure id="gazou"><img id="gazou" src="" alt="" width="200" />

<figcaption>figcaption</figcaption>

<figcaption></figcaption>

</figure>

<figure id="gazou"><img id="gazou" src="" alt="" width="200" />

<figcaption>figcaption</figcaption>

</figure>

<figure id="gazou"><img id="gazou" src="" alt="" width="200" />

<figcaption>figcaption</figcaption>

</figure>

</div>

<p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>

<style><!--

div#gazou {

display: flex;

}

figure#gazou{

margin: 3px;

}

figure img#gazou {

display: block;

width: 100%;

max-width: 100%;

}

figcaption{

text-align: center;

}

--></style>

```

HTML 13896 questions HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。 Myタグに追加 CSS 9284 questions CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。 Myタグに追加 Webサイト 1593 questions 一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。 Myタグに追加

1 伝えたい内容を追加

mercurian-teto score 71

2019/02/10 02:45  投稿

(はてなブログ）画像にキャプション付けると、スマホのサイトだと画像が勝手に改行して表示する

画像にキャプションを付けてそれを複数並べてようとしています。

はてなブログ内でこのソースコードを記述したのですが、

パソコンのサイトは何の問題もなく表示されるのですが、

スマフォのサイトでは画像のサイズに関係なく、2，3枚目の画像が下に勝手に改行してしまいます。

スマフォサイトでキャプション付きの画像を複数並べるときの

定石ってあるのでしょうか。

はてなブログでスマフォサイトとパソコンサイトに両方とも

パソコンサイトに対応させる設定があったのですが、適応させても全く反応しないので、コードで解決しようとしています。

最終的にはPCサイトで表示されている通りの並びをそのままスマフォサイトに適用させたいです。

image  image  image

caption caption caption

って表示されていたら、スマフォでも同様にその並びで表示されるようにしたいです。(縮小してもかまいません。)PCサイト版で表示されているものをスクショして

もとのところを消して貼り付ける程度の方法しか思い浮かびません。

なんとかコードで解決したいです。

回答お願いします。

```html

<div class="imagearea">

<figure><img src="" alt="写真" width="141" />

<figcaption></figcaption>

<figcaption></figcaption>

<figcaption></figcaption>

</figure>

<figure><img src="" alt="arrow" width="80" />

<figcaption></figcaption>

</figure>

<figure><img src="" alt="えええ写真" width="183" />

<figcaption>  </figcaption>

</figure>

</div>

```

下のソースコードがcssのものです。

※はてなブログだとダッシュボードの選択画面でしかcssファイルを編集することができません。styleタグをhtml中に記述すると自動的にコメントアウトされます。

```css

<style>

figure {

float: left;            /* 左に寄せて後続を右に回り込ませる */

margin: 0px 3px 3px 0px; /* 外側に余白を加える(右に7px・下に7px) */

/* 背景色 */

}

figure img {

display: block;         /* 余計な余白が出ないようにする */

margin: 0px 0px 3px 0px; /* 下側にだけ3pxの余白を追加 */

}

figcaption {

font-size: 0.9em;       /* 文字サイズを90%に */

text-align: center;     /* 中身をセンタリング */

}

div.imagearea:after {

content: "";     /* ※Clearfix */

clear: both ;

display: block;

}

</style>

```

HTML 13896 questions HTMLとは、ウェブ上の文書を記述･作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像･リスト･表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。 Myタグに追加 CSS 9284 questions CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。 Myタグに追加 Webサイト 1593 questions 一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。 Myタグに追加