HTML/CSS

divの高さを指定しているはずが、したのdivが上に上がってきてしまい要素が重なって表示されてしまいました。 重なって表示された状態（「Home」以下ナビゲーションの上に「松山」に関するコンテンツが表示されてしまってます。） 理想の...

画像の中央寄せ。 ただ真ん中に配置するのは簡単ですが、他の要素の上だったり別の画像の親要素にposition: relative; を入れていたり、急にロゴ画像が画面いっぱいにものすごくビッグになったりと格闘が続いています。 なんでこん...

最近よく見かけるトップページのアイキャッチ画像が自動で切り替わるアニメーションを実装したく、チャレンジしてみました。 理想はこちらのサイト 東京 日本橋 | 日本文化の今と昔を体験できるまち、東京・日本橋 さすがにここまでは無理で...

CSSで確かに画像のサイズ指定をしているのに変わらない・・・！ 結構悩んでいろいろと調べたのですが、結局親要素の幅指定を引き継いでいる影響で子要素に対するCSSが効いていない状態でした。 ディベロッパーツールで確認したものの、最初は...

要素を横並びにしたいときにいつも悩んでいたfloat？flexbox？どっちがいいの問題。 いい加減頭を整理しようと思います。 二つの違い float 要素の高さが無くなる（認識されなくなる、浮く） clearfixでの回り...

練習でサイト模写をしていて解決できずじまいなのがこちらの仕様。 <h2>と<a>を同じ行に表示 <h2>は中央寄せ、<a>は右寄せ やったこと

margineでコンテンツ上部に余白を作ったはずなのにぴったりくっついてる・・・ 何故・・・？となったので勉強した記憶を掘り起こし「相殺」について思い出しました。 CSSの記述 .news {     margin: 90px 0 9...

企業のホームページでよく見るニュースリストの作り方を調べたところ、ざっと以下の3つの方法を見つけました。 <ul><li>タグを使う <dl><dt><dd>タグを使う ...

画像を表示させる際にサイズや表示する形の変更をCSSで行いたい！ 今回は四角い画像を丸切り抜いて表示させたい！ Photoshop等で画像そのものをリサイズや切り抜くこともできますが、面倒ですよね・・・やっぱり四角のままでよかった！なん...

練習でとあるサイトの模写に挑戦したところ、ある section の中に画像が3枚横並びになっていて、ウインドウのサイズとともに伸縮するものがありました。 ディベロッパーツールを見ると flex: 2; という見慣れないCSS記述が。 ...