質問編集履歴

2 追記修正

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内に下の画像のように横に空白を作ってしまいます。

(赤い矢印)

空白を作らず、画像の横幅を拡大させたいです。

スマフォ版のサイトだと下のようにならないのです。


回答お願いします。

下がソースコードです。

※なぜか、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>ｆだふぁｆだｆ</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のコードを追加しました。



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

1 追記

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内に下の画像のように横に空白を作ってしまいます。

(赤い矢印)

空白を作らず、画像の横幅を拡大させたいです。

スマフォ版のサイトだと下のようにならないのです。


回答お願いします。

下がソースコードです。

※なぜか、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>ｆだふぁｆだｆ</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一端スタイルシートをリセット



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