idを指定してデータを取得するdocument.getElementById とテキストを取得する.textContent

JavaScript

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

2021-01-23

繰り返し表示させるfor文

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

2021-01-09

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

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

2021-01-06

ロゴを中央寄せに

HTML/CSS

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

2021-01-03

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

HTML/CSS

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

2021-01-02

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

HTML/CSS

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

2021-01-02

floatとflexboxの違い

HTML/CSS

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

2021-01-01

margineの相殺

HTML/CSS

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

2021-01-01

NEWSリスト（更新情報）の作り方

HTML/CSS

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

2021-01-01

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

HTML/CSS

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

2020-12-31

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

HTML/CSS

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

2020-12-30

div と section の使い分け

HTML/CSS

HTMLをマークアップしていて div と section ってどう使い分けるの？全部 div じゃだめなの？という疑問が湧いてきたためググりました。簡単にまとめると div 他に適切なタグがない時の最終手段特に意味を持たない CSSのマークアップでグループを作りた…

2020-12-30

マウスをホバーしたときに画像をふわっと白くする方法

HTML/CSS

最近よく見る a 要素にマウスをホバーするとふわっと白くなるデザイン。あれをやりたい！ a: hover のCSSで以下のような記述をするのかな？画像の上に同じ大きさの半透明の白いボックスを出現させる単に画像を半透明にする光らせる（明度を上げる）ググ…

2020-12-29

li へのリンク設定と id

HTML/CSS

id タグを使って1ページ内の移動をさせたい時のHTMLの記述方法 <li><a href ="#home">HOME</a></li> <li><a href ="#item">ITEM</a></li> <li><a href ="#conact">CONTACT</a></li> ※この時「＃」を付け忘れるときちんと飛びません。各飛び先のhタグに id を付与 <h2 id="item" class="item-title">ITEM</h2> こんな簡単な基本的なことなのにすぐ分からなくなってしまう・・・まだまだ前途多難で…