document.getElementById('choice').textContent はい、よくわからないの出た。 本で勉強していると理解していなくてもすいすい進んでしまうので今のうちにきちんと理解しようと思います。 1．getElementByIdについて 1-1．getElementByIdメソッドとは getEl…

for ( let i = 0; i < 3; i++ ) なんかProgateでいきなり出てきたfor文。 配列した値を繰り返し表示させるための構文です。 なんじゃこれ・・・という構文ですが定型文のようなもので基本的に変わるのは真ん中の緑の部分だけだそう。 説明なしで「この構文で…

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

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

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

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

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

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

企業のホームページでよく見るニュースリストの作り方を調べたところ、ざっと以下の3つの方法を見つけました。 <ul><li>タグを使う <dl><dt><dd>タグを使う <table>タグを使う 正直どれが一番良いのか分からないのですが、数の多かった<ul><li>タグを使う方法を備忘録に残しておこうと思います。</li></ul></table></dd></dt></dl></li></ul>…

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