質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.36%

  • HTML

    10256questions

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

  • CSS

    6679questions

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

(はてなブログ)htmlのflexbox画像が(flex_test_item内で横に空白付けないでほしい)

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 57

mercurian-teto

score 53

はてなブログ内でウェブサイトを作成してます。
flexboxを適用したのですが、画像の表示がおかしいです。
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>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のコードを追加しました。
イメージ説明

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • asahina1979

    2019/02/10 17:34


    スタイルタグ内の <!-- --> はその昔 CSSが使えなかったブラウザがHTMLのテキストとして解釈しないためのであってCSSをコメントにする意味ではないです。
    コメント化したいなら /* ~ */ で囲ってください。 (論点はそこじゃない)

    キャンセル

回答 1

checkベストアンサー

0

デフォルトのスタイルシートでfiguremarginがかかっているからかと。
この質問が出るということは前の質問は解決済みになるはずでは。自己解決にでもして置いてください。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/02/10 17:43

    未解決が17件と解決するきがないようにもみえるしね

    キャンセル

  • 2019/02/10 18:35 編集

    <デフォルトのスタイルシートでfigureにmarginがかかっているからかと。
    デフォルトのスタイルシートとは別に読み込まれているcssファイルでしょうか。はてなブログで確認したところ、
    ```
    /* <system section="theme" selected="life"> */
    @import "/css/theme/life/life.css";
    /* </system> */

    /* <system section="background" selected="default"> */
    /* default */
    /* </system> */

    /* Responsive: yes */

    p aa{color:red;}

    figure.gazo-box {
    float: left;
    padding-right: 0.1px;
    }

    body{background:#9e9e9e;}

    #title a {
    visibility: hidden;
    }
    #blog-description {
    visibility: hidden;
    }

    #blog-title {
    background-image: url("https://www.pakutaso.com/shared/img/thumb/171203IMGL0144_TP_V.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    margin:0px;
    padding: 80px 0px 80px 0px;/* -- 左から順に「上、右、下、左」-- */


    .entry-content p { margin:0}

    ```

    となっていました。

    キャンセル

  • 2019/02/10 18:37

    > デフォルトのスタイルシート
    ブラウザが、HTMLの各要素にスタイルを指定しています。

    【各ブラウザーごとのデフォルトスタイルシートについて】
    https://natsutravel.work/code/html-css/user_agent_stylesheet/

    キャンセル

  • 2019/02/11 12:23

    reset.cssのコードを追加した結果、謎の空白が消えました。(追記1)
    これからは、ブログでサイトを作成しているときに
    思い当たらないところがあった場合は
    reset.cssを使うことにします。回答ありがとうございました。

    キャンセル

  • 2019/02/11 12:25

    デベロッパーツールにデフォルト値も出るのでそれを見ることをお勧めします。

    【ChromeデベロッパーツールでCSSをチェックする方法 | なんでものびるWEB】
    https://nandemo-nobiru.com/2944/

    キャンセル

  • 2019/02/11 12:26

    参考にします。ありがとうございます。

    キャンセル

同じタグがついた質問を見る

  • HTML

    10256questions

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

  • CSS

    6679questions

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