htmlとcssによるweb画面の表示

実現したいこと

pythonにより、webの画像表示の部分を勉強しています。index.htmlに書かれている
mainvisual1.jpg～mainvisual5.jpgについて、メイン画面の下に5分割にして
サムネイルを表示したいです。以下のソースですと画像のように縦並びになります。
メイン画面の下に5分割になる方法をお聞きしてもよろしいですか。
下記のstyle.cssで5分割になると思いましたが、なりません。
縦並びについて、javascriptの画面の切り替えは作動しています。

#thumbnail li {
flex: 1; /* 均等に横並び */
}

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>タイトル</title>
    <meta name="description" content="テキストテキストテキストテキストテキストテキスト">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>
  </head>

  <body>
    <div class="content">
      <div id="mainvisual">
        <img src="{{ url_for('static', filename='img/mainvisual1.jpg') }}" alt="">
      </div>
      <ul id="thumbnail">
        <li><img src="{{ url_for('static', filename='img/mainvisual1.jpg') }}" alt=""></li>
        <li><img src="{{ url_for('static', filename='img/mainvisual2.jpg') }}" alt=""></li>
        <li><img src="{{ url_for('static', filename='img/mainvisual3.jpg') }}" alt=""></li>
        <li><img src="{{ url_for('static', filename='img/mainvisual4.jpg') }}" alt=""></li>
        <li><img src="{{ url_for('static', filename='img/mainvisual5.jpg') }}" alt=""></li>
      </ul>
    </div>
  </body>
</html>

style.css

@charset "UTF-8";

html {
  font-size: 100%;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
ul {
  list-style: none;
}

.content {
  max-width: 1000px;
  padding: 0 20px;
  margin: 20px auto;
}

#mainvisual {
  padding: 10px;
}

/* メインビジュアル */
#mainvisual img {
  width: 100%;      /* 親の幅いっぱい */
  height: auto;
  display: block;
}

#thumbnail {
  display: flex;             /* 横並びにする */
  justify-content: space-between; /* サムネイル間を均等に */
  padding: 0;
  margin: 10px 0 0 0;
  list-style: none;
}
#thumbnail li {
  flex: 1;        /* 均等に横並び */
  padding: 0 5px;            /* サムネイル間の余白 */
}

/*-------------------------------------------
SP
-------------------------------------------*/
@media screen and (max-width: 600px) {
  .content {
    padding: 0 10px;
    margin: 10px auto;
  }

  #mainvisual {
    padding: 5px;
  }
  #thumbnail li {
    padding: 5px;
  }
}

・main.js

$(function(){
  /*=================================================
  画像切り替え
  ===================================================*/
  // サムネイルの画像をホバーした際の処理
  $('#thumbnail img').on('mouseover', function(){

    // ホバーされた画像のパスを取得
    // $(this)はイベントが発生した要素を指すため、1つ目のサムネイルがホバーされた際は1つ目のsrcを、
    // 2つ目のサムネイルがホバーされた際は2つ目のsrcを取得する
    let img_src = $(this).attr("src");

    // メイン画像と同じサムネイルがホバーされた際は画像切り替えを実行しない
    // （メイン画像のsrcとホバーされた画像のsrcが異なる場合のみ実行）
    if($('#mainvisual img').attr("src") != img_src) {

      // メイン画像を0.5秒かけてフェードアウトし、フェードアウトが完了したら
      // メイン画像のsrcをホバーされたサムネイルのsrcに変更して
      // メイン画像を0.5秒かけてフェードインする
      // ※「フェードアウトが完了した後に実行」のように、何かの処理が終わったあとに実行させたい場合は、
      // 今回のようのコールバック関数を使用します。詳しくは「コールバック関数」で調べてみてください
      $('#mainvisual img').fadeOut(500, function() {
        $("#mainvisual img").attr({src:img_src});
        $("#mainvisual img").fadeIn(500);
      })
    }
  });
});

・縦並び

・メイン画面の下に5分割

発生している問題・分からないこと

質問に詳細を記載した。

該当のソースコード

特になし

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

質問に詳細を記載した。

補足

特になし

Lhankor_Mhy

2025/10/22 07:50 編集

当方の環境では5分割になっています。つまり、問題が再現しませんでした。提示されていない部分に原因があるか、問題が上手く共有できていないのかもしれません。 CSSのパスを間違えているのではないかな、という予感がしています（url_for は使わなくていいのですか？）。一応念のため、サンプルを置いておきます。 https://jsfiddle.net/Lhankor_Mhy/4bc0jLne/