HTML/CSS

HTML/CSS

要素が重なって表示されてしまう(position による影響編)

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

ロゴを中央寄せに

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

CSSでアニメ―ションを表現する

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

画像のサイズが変わらない(親要素の影響編)

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

floatとflexboxの違い

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

ブロック要素とインライン要素を同じ行に表示し、それぞれ位置指定をしたい

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

margineの相殺

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

NEWSリスト(更新情報)の作り方

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

CSSで画像を丸く切り抜く方法

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

flex: コンテンツの中で要素の幅を割合で決める

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