質問: クラス付けしたul(4つのliの塊)をヘッダー内の右寄せにしたいのですが、上手くいきません。 というのも、CSSでセレクタ(.select)を指定しているにも関わらず、右寄せに出来ないどころか、文字を大きくしたり、色を付けようとしても反映されないため、どこかに間違いがあるのだとは思うのですが理由がわかりません。 なぜ、クラス付けしたulへのCSS一括指定が反映されないのか、理由をご教授いただけますと助かります。 よろしくお願いいたします。 ``` コード Airbnbcopy ホストをはじめる ヘルプ 登録する ログイン 今のところ、ギフトカードはアメリカ居住者のみご購入いただけます。アメリカにお住いの場合は、アカウントの設定から居住国を更新してください。 × 旅を贈ろう。 Airbnbギフトカードで、世界をぐんと身近に ``` ``` コード .logo { float: left; } .home { padding-top: 5px; } .glass { size: 10%; } .header-container { padding: 25px; padding-bottom:15px; height: 50px; } .header-container { display : flex; } .select { text-align: right; color: red; font-size: 100px; } .selector { color : red; } .link { color: black; margin-left: 15px; text-align: left; text-decoration: none; } .search { padding-top: 10px; ```
回答: 掲載されているHTMLとCSSをまるっとコピーしてローカルで表示してみましたが、 少なくともセレクタは効いています。 (CSSの内容はAirbnb.cssとしてindex.htmlと同じ階層に保存) `ul.select`の指定だけが全く効かず、その他のスタイル指定は反映されているのでしょうか? それともul.selectの指定に限らず、自分で書いた全ての指定が反映されないのでしょうか? 自分で書いた全ての指定が反映されないということなのであれば、 CSSファイルへのパスが間違ってる可能性が一番高いです。 > > > > > このように記述されているので、 ・HTMLファイルと同じ階層にCSSファイルを配置しているか? ・CSSのファイル名はちゃんとHTMLで指定している「Airbnb.css」になっているか? あたりをよく確認してみてください。 もし、他のスタイル指定(※bootrstrapで指定されているものではなく、自分で書いたCSS)が効いているのに `ul.select`へのスタイル指定だけが全く反映されないということであれば、 セレクタ名が間違っている可能性が高いです。 ただその場合、掲載されているHTML・CSSと、質問者さんの手元にあるHTML・CSSが同じものではない ということになるので、これ以上は判断できません。 ちなみに `.header-container`を`display:flex`にしているようですが、 そのままだと直下の子要素が左詰めで横並びに配置されるだけなので、 `ul.select`のブロックはヘッダー内で右寄せにはならないですね。