質問編集履歴

2 追記修正

mercurian-teto

mercurian-teto score 71

2019/02/11 12:25  投稿

(はてなブログ)htmlのflexbox画像が(flex_test_item内で横に空白付けないでほしい)
はてなブログ内でウェブサイトを作成してます。
[flexbox](https://www.sejuku.net/blog/56401)を適用したのですが、画像の表示がおかしいです。
PC版サイトだと
画像がflex_test_item内に下の画像のように横に空白を作ってしまいます。
(赤い矢印)
空白を作らず、画像の横幅を拡大させたいです。
スマフォ版のサイトだと下のようにならないのです。
![イメージ説明](2acedf3881e0c9dfc5ba507001f3254b.jpeg)
回答お願いします。
下がソースコードです。
※なぜか、styleタグをコメントアウトされていてもはてなブログでは適用されてしまいます。
```
<div class="flex_test-box">
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="えええ写真" width="191" />
<figcaption></figcaption>
<figcaption>aaaaaaaa</figcaption>
<figcaption></figcaption>
</figure>
</div>
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="えええ写真" />
<figcaption></figcaption>
<figcaption>aaaaaaaaaaaaaaaaa</figcaption>
<figcaption>ffffffffffff</figcaption>
</figure>
</div>
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="写真" />
<figcaption></figcaption>
<figcaption>aaaaaaaaaaaaaaaaaa</figcaption>
<figcaption>dfafadsffffffff</figcaption>
</figure>
</div>
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="えええ写真" />
<figcaption></figcaption>
<figcaption>fだふぁfだf</figcaption>
<figcaption></figcaption>
</figure>
</div>
</div>
<style><!--
.flex_test-box {
   background-color: #eee;    /* 背景色指定 */
   padding: 1px;            /* 余白指定 */
   display: flex;
   
   
}
figcaption {
   font-size: 0.8em;       /* 文字サイズを90%に */
   /* text-align: center;     */
}
.flex_test-item {
   padding: 1px;
   color: #fff;              /* 文字色 */
   margin: 1px;             /* 外側の余白 */
   border-radius: 1px;       /* 角丸指定 */
   width:50%;
}
.flex_test-item:nth-child(1) {
   background-color: #2196F3; /* 背景色指定 */
}
.flex_test-item:nth-child(2) {
   background-color: #2196F3; /* 背景色指定 */
}
.flex_test-item:nth-child(3) {
   background-color: #3F51B5; /* 背景色指定 */
}
.flex_test-item:nth-child(4) {
   background-color: #00BCD4; /* 背景色指定 */
}
--></style>
```
#追記1一端スタイルシートをリセット
reset.cssのコードを追加しました。  
![イメージ説明](44fda35abda0224b212fcd5bab4d1f51.jpeg)
  • HTML

    13827 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9243 questions

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

1 追記

mercurian-teto

mercurian-teto score 71

2019/02/11 12:20  投稿

(はてなブログ)htmlのflexbox画像が(flex_test_item内で横に空白付けないでほしい)
はてなブログ内でウェブサイトを作成してます。
[flexbox](https://www.sejuku.net/blog/56401)を適用したのですが、画像の表示がおかしいです。
PC版サイトだと
画像がflex_test_item内に下の画像のように横に空白を作ってしまいます。
(赤い矢印)
空白を作らず、画像の横幅を拡大させたいです。
スマフォ版のサイトだと下のようにならないのです。
![イメージ説明](2acedf3881e0c9dfc5ba507001f3254b.jpeg)
回答お願いします。
下がソースコードです。
※なぜか、styleタグをコメントアウトされていてもはてなブログでは適用されてしまいます。
```
<div class="flex_test-box">
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="えええ写真" width="191" />
<figcaption></figcaption>
<figcaption>aaaaaaaa</figcaption>
<figcaption></figcaption>
</figure>
</div>
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="えええ写真" />
<figcaption></figcaption>
<figcaption>aaaaaaaaaaaaaaaaa</figcaption>
<figcaption>ffffffffffff</figcaption>
</figure>
</div>
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="写真" />
<figcaption></figcaption>
<figcaption>aaaaaaaaaaaaaaaaaa</figcaption>
<figcaption>dfafadsffffffff</figcaption>
</figure>
</div>
<div class="flex_test-item">
<figure><img src="https://cdn-ak.f.st-hatena.com/images/fotolife/p/poyone/20190208/20190208113450.jpg" alt="えええ写真" />
<figcaption></figcaption>
<figcaption>fだふぁfだf</figcaption>
<figcaption></figcaption>
</figure>
</div>
</div>
<style><!--
.flex_test-box {
   background-color: #eee;    /* 背景色指定 */
   padding: 1px;            /* 余白指定 */
   display: flex;
   
   
}
figcaption {
   font-size: 0.8em;       /* 文字サイズを90%に */
   /* text-align: center;     */
}
.flex_test-item {
   padding: 1px;
   color: #fff;              /* 文字色 */
   margin: 1px;             /* 外側の余白 */
   border-radius: 1px;       /* 角丸指定 */
   width:50%;
}
.flex_test-item:nth-child(1) {
   background-color: #2196F3; /* 背景色指定 */
}
.flex_test-item:nth-child(2) {
   background-color: #2196F3; /* 背景色指定 */
}
.flex_test-item:nth-child(3) {
   background-color: #3F51B5; /* 背景色指定 */
}
.flex_test-item:nth-child(4) {
   background-color: #00BCD4; /* 背景色指定 */
}
--></style>
```
```
#追記1一端スタイルシートをリセット
![イメージ説明](44fda35abda0224b212fcd5bab4d1f51.jpeg)
  • HTML

    13827 questions

    HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

  • CSS

    9243 questions

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

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