HTML/CSS 要素が重なって表示されてしまう(position による影響編) divの高さを指定しているはずが、したのdivが上に上がってきてしまい要素が重なって表示されてしまいました。 重なって表示された状態(「Home」以下ナビゲーションの上に「松山」に関するコンテンツが表示されてしまってます。) 理想の... 2021.01.09 HTML/CSS
HTML/CSS ロゴを中央寄せに 画像の中央寄せ。 ただ真ん中に配置するのは簡単ですが、他の要素の上だったり別の画像の親要素にposition: relative; を入れていたり、急にロゴ画像が画面いっぱいにものすごくビッグになったりと格闘が続いています。 なんでこん... 2021.01.06 HTML/CSS
HTML/CSS CSSでアニメ―ションを表現する 最近よく見かけるトップページのアイキャッチ画像が自動で切り替わるアニメーションを実装したく、チャレンジしてみました。 理想はこちらのサイト 東京 日本橋 | 日本文化の今と昔を体験できるまち、東京・日本橋 さすがにここまでは無理で... 2021.01.03 HTML/CSS
HTML/CSS 画像のサイズが変わらない(親要素の影響編) CSSで確かに画像のサイズ指定をしているのに変わらない・・・! 結構悩んでいろいろと調べたのですが、結局親要素の幅指定を引き継いでいる影響で子要素に対するCSSが効いていない状態でした。 ディベロッパーツールで確認したものの、最初は... 2021.01.02 HTML/CSS
HTML/CSS floatとflexboxの違い 要素を横並びにしたいときにいつも悩んでいたfloat?flexbox?どっちがいいの問題。 いい加減頭を整理しようと思います。 二つの違い float 要素の高さが無くなる(認識されなくなる、浮く) clearfixでの回り... 2021.01.02 HTML/CSS
HTML/CSS ブロック要素とインライン要素を同じ行に表示し、それぞれ位置指定をしたい 練習でサイト模写をしていて解決できずじまいなのがこちらの仕様。 <h2>と<a>を同じ行に表示 <h2>は中央寄せ、<a>は右寄せ やったこと 2021.01.02 HTML/CSS
HTML/CSS margineの相殺 margineでコンテンツ上部に余白を作ったはずなのにぴったりくっついてる・・・ 何故・・・?となったので勉強した記憶を掘り起こし「相殺」について思い出しました。 CSSの記述 .news { margin: 90px 0 9... 2021.01.01 HTML/CSS
HTML/CSS NEWSリスト(更新情報)の作り方 企業のホームページでよく見るニュースリストの作り方を調べたところ、ざっと以下の3つの方法を見つけました。 <ul><li>タグを使う <dl><dt><dd>タグを使う ... 2021.01.01 HTML/CSS
HTML/CSS CSSで画像を丸く切り抜く方法 画像を表示させる際にサイズや表示する形の変更をCSSで行いたい! 今回は四角い画像を丸切り抜いて表示させたい! Photoshop等で画像そのものをリサイズや切り抜くこともできますが、面倒ですよね・・・やっぱり四角のままでよかった!なん... 2021.01.01 HTML/CSS
HTML/CSS flex: コンテンツの中で要素の幅を割合で決める 練習でとあるサイトの模写に挑戦したところ、ある section の中に画像が3枚横並びになっていて、ウインドウのサイズとともに伸縮するものがありました。 ディベロッパーツールを見ると flex: 2; という見慣れないCSS記述が。 ... 2020.12.31 HTML/CSS