CSS floatが適用されない(CSSが反映されない)問題

グリッドレイアウトページの作成

現在HTMLとCSSを用いて、参考書を見ながらグリッドレイアウトページを作成しています。
画像をfloatを用いて各セクションの6枚の画像を

以上のようにしたいと考えております。

発生している問題

CSSが反映されておらず、floatが適用できていません。

該当のソースコード

html
1</head>
2<body id="photograph">
3  
4  <!-- header始まり-->
5  <header>
6    <div class="logo">
7      <a href="index.html"><img src="images/logo.png" alt="SNAPPERS"></a>
8    </div>
9    <nav>
10      <ul class="global-nav">
11        <li><a href="portfolio.html">Portfolio</a></li>
12        <li><a href="about.html">About</a></li>
13        <li><a href="contact.html">Contact</a></li>
14      </ul>
15    </nav>
16  </header>
17  <!-- header終わり-->
18  
19  <!-- wrap始まり-->
20  <div id="wrap" class="clearfix">
21    <div class="content">
22      <div class="main">
23        <h1>Photograph</h1>
24        <p>これまでに撮影した写真作品を撮影シーン別に掲載しています。</p>
25        <section id="city">
26          <h2 class="icon">City</h2>
27          <ul class="cleafix" class="photograph-list"> <!--このセクション内画像がうまく適用されない-->
28            <li><img src="images/photograph-city-01.png" alt="駅への階段"></li>
29            <li><img src="images/photograph-city-02.png" alt="自転車とシャッター"></li>
30            <li><img src="images/photograph-city-03.png" alt="スケートパーク"></li>
31            <li><img src="images/photograph-city-04.png" alt="エアポート"></li>
32            <li><img src="images/photograph-city-05.png" alt="雑貨を扱う店舗"></li>
33            <li><img src="images/photograph-city-06.png" alt="ストリートバスケ"></li>
34          </ul>
35        </section>
36        <section id="beach" >
37          <h2 class="icon">Beach</h2>
38          <ul class="cleafix" class="photograph-list"> <!--このセクション内画像がうまく適用されない-->
39            <li><img src="images/photograph-beach-01.png" alt="海水浴場"></li>
40            <li><img src="images/photograph-beach-02.png" alt="ビーチへと続く道"></li>
41            <li><img src="images/photograph-beach-03.png" alt="離れ小島"></li>
42            <li><img src="images/photograph-beach-04.png" alt="岩場と波"></li>
43            <li><img src="images/photograph-beach-05.png" alt="ヤシの木"></li>
44            <li><img src="images/photograph-beach-06.png" alt="波打ち際"></li>
45          </ul>
46        </section>
47        <section id="forest" >
48          <h2 class="icon">Forest</h2>
49          <ul class="cleafix" class="photograph-list"> <!--このセクション内画像がうまく適用されない-->
50            <li><img src="images/photograph-forest-01.png" alt="池と小舟"></li>
51            <li><img src="images/photograph-forest-02.png" alt="可憐な花"></li>
52            <li><img src="images/photograph-forest-03.png" alt="森の小径"></li>
53            <li><img src="images/photograph-forest-04.png" alt="清流をカップで掬う"></li>
54            <li><img src="images/photograph-forest-05.png" alt="焚き火台"></li>
55            <li><img src="images/photograph-forest-06.png" alt="新芽と若葉"></li>
56          </ul>
57        </section>
58      </div>
59      <aside class="sidebar">
60        <section>
61          <h2>Photograph</h2>
62          <ul>
63            <li><a href="photograph.html#city">街-City</a></li>
64            <li><a href="photograph.html#beach">海-Beach</a></li>
65            <li><a href="photograph.html#forest">森-Forest</a></li>
66          </ul>
67        </section>
68          <h2>Video</h2>
69          <ul>
70            <li><a href="video.html#movie">Movie</a></li>
71            <li><a href="video.html#short-film">Short film</a></li>
72          </ul>
73        <section>
74        </section>
75      </aside>
76    </div>
77  </div>
78  <!-- wrap終わり-->
79  
80  <!--footer始まり-->
81  <footer>
82    <small>(C)2020 Razphyxia-studio.</small>
83  </footer>
84  <!-- footer終わり-->
85  
86</body>
87</html>

css
1#photograph {
2  background-image: url(../images/bg-photograph.jpg);
3  background-repeat: no-repeat;
4  background-position: center top;
5  background-attachment: fixed;
6  background-size: 100% auto;
7}
8
9#photograph .photograph-list li {
10  float: left;
11  list-style: none;
12}

使用エディタ：Brackets
使用ブラウザ：Google Chrome

よろしくおねがいします

行動規範の内容に同意します

回答3件

とりあえず下記の間違いを修正しましょう。

css
1 <ul class="cleafix" class="photograph-list">

一つのタグに、class を２つ設定する場合は、下記のように半角空白で区切ってください。

css
1 <ul class="cleafix photograph-list">

あと、画像のサイズやレイアウトをどうするのか不明瞭なのですが、レスポンシブ対応にするなら、
float で横並びにするより Flexbox か Grid を使うのがおすすめです。

投稿2020/03/05 07:38

hatena19

総合スコア33715

Razphyxia

2020/03/05 07:44

回答ありがとうございます。 >classを2つ設定する場合は... この通りに行ったところ無事、CSSが適用されました。ありがとうございます。 Flexboxはまだ触ったことがありませんが(htmlの勉強を今日開始したものでして...)レスポンシブデザインに興味があるので、それについても学習していけたらいいなと思います。ありがとうございます

Erunoa

2020/03/05 08:18

私も始めたばかりなので勉強になりました。

行動規範の内容に同意します

html
1 <ul class="cleafix" class="photograph-list">

...となっているのを

html
1 <ul class="cleafix photograph-list">

...とするとphotograph-listが効くようになります。
クラスを複数書く時は半角スペースを空けて書くのがよろしいかと。
一応自分で試してみたところ問題無かったので、多分これで大丈夫です。

…と思ったらタイミングかぶっちゃいましたね。
kiddayoさんのやり方が良いと思います。

投稿2020/03/05 07:34

編集2020/03/05 07:39

tmyk1979

総合スコア145

Razphyxia

2020/03/05 07:39

あああああ、できました、ありがとうございます......すごく初歩的なミスでした...ありがとうございます。

行動規範の内容に同意します

ベストアンサー

<ul class="cleafix" class="photograph-list">

を以下みたいにして

<ul class="cleafix photograph-list">

styleのところを

.photograph-list li {
            width: 33%;
            float: left;
            list-style: none;
        }

こんな感じしたらうまくいかないですかね？？

でもflexbox使った方がいいかと思います！
そこは調べてもらえると！！

投稿2020/03/05 07:32

kiddayo

総合スコア240

Razphyxia

2020/03/05 07:41 編集

flexboxはまだ手を出していないので、すごくきになります、調べてみます！ <ul class="cleafix photograph-list"> にすることで、無事うまく反映されました。ありがとうございます！

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

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

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