質問編集履歴

2 修正コード

mercurian-teto

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で作成されています。

  • CSS

    9284 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Webサイト

    1593 questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

1 伝えたい内容を追加

mercurian-teto

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で作成されています。

  • CSS

    9284 questions

    CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

  • Webサイト

    1593 questions

    一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る