Webデザイン勉強ブログ

Webデザイン超初学者の勉強用備忘録です。初学者の方の参考にもなればうれしいです!

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

document.getElementById('choice').textContent 

はい、よくわからないの出た。

本で勉強していると理解していなくてもすいすい進んでしまうので今のうちにきちんと理解しようと思います。

1.getElementByIdについて

1-1.getElementByIdメソッドとは

getElementByIdメソッドはHTML内の特定のidの要素を取得するメソッドです。

・・・要するに

getElementByIdにHTMLの中にあるidをぶっこめば「これやで~」とそのidの部分を持ってきてくれる人です。

1-2.どんな時に使う?

HTMLを書き換えたいときにその要素を取得する時に使う

・・・要するにHTMLの要素をなんかしたいときに使う(使い道がまだうまく言語化できない笑)

1-3.どうやって使う?

HTMLのid名を入力してコードを打って使う。

 

1.textContentについて

1-1.textContentメソッドとは

textContentメソッドはHTML内の要素を書き換えるメソッドです。

・・・要するに

textContentに「このテキストで出しといて~」と言うとHTMLの内容をお願いしたものに書き換えてくれる人

です。

1-2.どんな時に使う?

document.getElementByIdと同じく全く言語化できていないですが、HTMLを書き換えたいときにその要素を取得する時に使う

・・・要するにHTMLの要素をなんかしたいときに使う(使い道がまだうまく言語化できない笑)

誰か言語化して・・・

 

 

上記二つのdocument.getElementById と.textContentを使うと以下のようなことができます。

 

例)

<section>
<p id="choice">今の気持ち</p>
</section>
</div><!-- /.container -->
</main>
<footer>
<div class="container">
<p>JavaScript Samples</p>
</div><!-- /.container -->
</footer>
<script>
    'use strict';
    document.getElementById('choice').textContent ='今日めっちゃ寒い';
    console.log(document.getElementById('choice').textContent);
</script>

表示結果

f:id:lalune_webdedign:20210124114605p:plain

HTMLの<p>には「今の気持ち」としか記述していないのに、textContentで指定した「めっちゃ寒い」というテキストが表示されています。

これはdocument.getElementById で「idがchoiceのとこ引っ張ってきて!」とお願いして、引っ張ってきてもらったidに対してtextContent で「めっちゃ寒いって表示しといて!」と依頼したため、上記のような表示になります。(で合ってますか?)

まとめると

document.getElementByIdは指定のidの要素引っ張ってくる

textContentは指定通りに書き換える

という役割です!

他にも使い方はあると思うのですが、今の私の知識では一旦上記で理解しました!

 

全然違うよ!というご指摘いつでもお待ちしておりますm(_ _)m

繰り返し表示させるfor文

for ( let i = 0; i < 3; i++ )

なんかProgateでいきなり出てきたfor文。

配列した値を繰り返し表示させるための構文です。

f:id:lalune_webdedign:20210123170250p:plain

なんじゃこれ・・・という構文ですが定型文のようなもので基本的に変わるのは真ん中の緑の部分だけだそう。

説明なしで「この構文で・・・」と、「いつも書き方(これがテンプレ)で、○○だけ変えればOK!」と教えられるのでは頭に入るスピード違うのは私だけ?

HTMLの時もそうでしたがタグの意味が理解できないとどうしても覚えられないのです。

でもこれがテンプレ!と言われると急に理解できるから不思議ですね。

 

const animals = ["dog""cat""sheep"];
for(let i = 0i < 3i++) {
console.log(animals [i]);
}

これでコンソールでの表示結果がこうなります!

f:id:lalune_webdedign:20210123171419p:plain

 

また、for ( let i = 0; i < 3; i++ ) を for ( let i = 0; i < animals.length; i++ )と記載すると要素数が変わったときに関係なく要素を順番に繰り返してくれます。

 

まとめ

①定数の定義

②for文の記述(わざわざanimals[1]~[3]を記述しなくてよいようにする)

 1.for文で変数 i を定義(テンプレ)

 2.何回繰り返すか指定

 3.どう繰り返すか指定(だいたいテンプレ)

 

参考にした記事

techacademy.jp

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

divの高さを指定しているはずが、したのdivが上に上がってきてしまい要素が重なって表示されてしまいました。

 

重なって表示された状態(「Home」以下ナビゲーションの上に「松山」に関するコンテンツが表示されてしまってます。)

f:id:lalune_webdedign:20210109112734p:plain

理想の状態

f:id:lalune_webdedign:20210109112844p:plain

※デザインがイケてないのはお許しください・・・

 

まず考えたことが以下の2つでCSSを確認してみました。

  • navの高さを指定していない?
  • navにfloatを使っている?

結果高さの指定もしていて、floatも使っていませんでした。

困った~分かんない~ということでGoogle先生に聞いてみました。

techacademy.jp

固定配置した要素と、その他の要素が重なってしまうので、marginなどを使って固定配置した要素の高さ分避ける必要があります。

・・・なに?

 

teratail.com

position:absoluteを設定すると、その要素(#distinctive)の幅や高さの影響を、他の要素は受けなくなります。

なん・・・だと・・・

全く知らなかったのですがpositionで表示位置を固定すると高さが認識されなくなってしまい、下のコンテンツでmargine-top等を指定する必要があるみたいですね。

全く知らないと言いつつ、確実に過去勉強しているはずなので忘れていることが多いと毎日痛感してます・・・><

 

下の要素にmargine-topを指定したところきちんと表示されました!

 

ロゴを中央寄せに

画像の中央寄せ。

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

なんでこんなに中央寄せ難しいの・・・

今回は先日作ったアイキャッチのアニメーションの上、左右中央にロゴをのせました。

試行錯誤で中央寄せに成功したのはこちら。

 

HTML

            <div class="logo-eyecatch">
                <img src="images/logo_eyecatch.png"> <!--ロゴ-->
            </div>
 

 

CSS

.logo-eyecatch {
    width120px;
    heightauto;
    margin0 0 0 -60px;
    positionabsolute;
    top10%;
    left50%;
    z-index999;
}

 

成功するまでに紆余曲折あり・・・

①アニメーション画像の下に表示される

アニメーションが切り替わる瞬間だけロゴが出てきて、その他は見えないという謎現象に。

z-index: 999; で一番前へ。

 

②中央に行ってくれない

.logo-eyecatch に margine: 0 auto 0; 動かない

position: absolute; top: 10%;  left: 50%; 動いたけどちょっと右・・・

width: 120px; height: auto; margin: 0 0 0 -60px; できた!

f:id:lalune_webdedign:20210106000519p:plain

 

こう書くとかなりあっさりできたように見えますが、30分くらい格闘してました・・・

終わってみると過去にも勉強したことある気がするのにな。

書いたコードの履歴残しておかないと何やったか分からなくなりますね。

 

これからも中央寄せとの闘いは続く気がしますが、その時この記事が役に立てばと思います。

 

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

最近よく見かけるトップページのアイキャッチ画像が自動で切り替わるアニメーションを実装したく、チャレンジしてみました。

理想はこちらのサイト

f:id:lalune_webdedign:20210103235036p:plain

東京 日本橋 | 日本文化の今と昔を体験できるまち、東京・日本橋

さすがにここまでは無理ですが、上記のサイトのようにふわ~っと画像が切り替わるものが理想です。

でもjQueryはまだまったく触れたことがないのでCSSでできないものかと思いググってみたところできるようですね。

CSSってどこまでできるんだろ・・・

 

HTMLの記述

            <div class="eyecatch-photo">
                <img class="img1" src="images/dark-top-dougo-onsen.jpg">
                <img class="img2" src="images/dark-garyusansou.jpg">
                <img class="img3" src="images/dark-oomishimabgidge.jpg">
                <img class="img4" src="images/dark-shimonada.jpg">
            </div>

4枚のアニメーションにしたかったので画像を4枚用意しました。

HTMLの記述はこれだけ。

 

CSSの記述

画像4枚を同じ場所に表示させるため親要素にposition: relative; を。

(アニメーションに関係ないCSSもあります。)

.eyecatch-photo {
    width100%;
    height800px;
    background-colorrgba(0000.5);
    positionrelative;
}

 

4枚の画像に高さを付けるためdisplay: block;

縦横比を維持したまま親要素いっぱいに表示させるためobject-fit: cover;

同じ位置に表示させるためposirion: absolute;とtop: 0; right: 0; を。

.eyecatch-photo img {
    width100%;
    height800px;
    displayblock;
    object-fitcover;    
    positionabsolute;
    top0;
    right0;
}

 

アニメーションの動きを@keyframesで指定

今回は4枚の画像だったので、画像一枚当たりのアニメーションは全体の4分の1(=25%)。

アニメーションの最初と最後(0%と100%)ではopacity: 0;にして透明、その間(8.3%と20%では1に設定しふわっと画像が表示され、消えるように。

もし1% {opacity: 1;} にすればもっと表示される速度が速くなります。

@keyframes eyecatch-photo {
    0% {
        opacity0;
    }
    8.3% {
        opacity1;
    }
    20% {
         opacity1;
    }
    25% {
        opacity0;
    }
}

 

animation-name で呼び出すkeyframeの名前を指定

animariton-duration でアニメーション全体(4枚の画像が表示され終わるまで)の時間を指定

animation-iteration-countで繰り返しの回数を指定(infiniteはずっと繰り返し。)

.eyecatch-photo img {
    animation-name: eyecatch-photo;
    animation-duration20s;
    animation-iteration-countinfinite;
    opacity0;
}

 

animation-delayで画像それぞれのアニメーションが始まるタイミングを調整。

画像を順番に表示→消えるを繰り返したいのでアニメーション全体の20秒を4枚で割り、5秒ずつ表示させるタイミングをずらします。

.eyecatch-photo .img1 {
    animation-delay0s;
}
.eyecatch-photo .img2 {
    animation-delay5s;
}
.eyecatch-photo .img3 {
    animation-delay10s;
}
.eyecatch-photo .img4 {
    animation-delay15s;
}

 

以上!

このブログを書くために半日前に書いたコードを見返したのですが、無駄なコードが多く、少しはきれいにしつつブログを書いたのでちょっとはましになったかな・・・?

 

ただ分からなかったこと、できなかったことが2つ!

  • 画像の切り替えが「画像を消す→表示する」の繰り返しなので切り替えのタイミングで画像が消えるため背景が見えてしまう
  • アニメーションの上から黒いフィルターをかけるようにしたかったができなかったためphotoshopで画像を全て暗く加工

こちらが上記のHTMLとCSSの結果です。


CSSでのアニメーション効果

 

う~難しい・・・!

今回参考にさせていただいたサイトはこちらです。

www.smartllc.jp

www.saaria.info

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

CSSで確かに画像のサイズ指定をしているのに変わらない・・・!

結構悩んでいろいろと調べたのですが、結局親要素の幅指定を引き継いでいる影響で子要素に対するCSSが効いていない状態でした。

f:id:lalune_webdedign:20210102114741p:plain

ディベロッパーツールで確認したものの、最初はなぜ子要素(.category-img )のCSSが打ち消されているのか分からず、HTMLに直接サイズ指定をしたり、「absoluteのせい!?」と何の罪もないabsoluteを消したりごちゃごちゃしてました。

落ち着いてみると思いっきり親要素の幅指定が有効になっているのに気づかないものですね・・・

f:id:lalune_webdedign:20210102114414p:plain

完全なるなんでやねん状態

この時の親要素のCSS

.reportcard img {
    width100%;
}

子要素のCSS(本当に効いていないのか確認したく、極端に幅を5pxにしています。)

.category-img {
    width5px;
    positionabsolute;
}

 

親要素のCSSをmax-width: 100%に修正したところ子要素の幅指定が効きました。

f:id:lalune_webdedign:20210102120837p:plain

 

absoluteで位置指定を行い理想の状態になりました!

f:id:lalune_webdedign:20210102121109p:plain

 

なぜ親要素がmax-width指定だと子要素の幅指定が効くのかについては自分なりに以下の解釈をしました。

  • 親要素がwidth: 100%; だと子要素も width: 100%; 以外認めない
  • 親要素がmax-width: 100%; だと子要素は最大で親要素いっぱいの幅=親要素より小さい場合は幅指定できる

この理解であってるかな・・・?

今回はヒントとなる記事を見つけられなかったので模写しているサイトのコードを参考にしました。

やっぱり自分でググって答えを見つけられた方が嬉しいなぁ・・・

floatとflexboxの違い

要素を横並びにしたいときにいつも悩んでいたfloat?flexbox?どっちがいいの問題。

いい加減頭を整理しようと思います。

 

二つの違い

float

  • 要素の高さが無くなる(認識されなくなる、浮く)
  • clearfixでの回り込み解除が必要
  • 横並びにしたい要素に指定する
  • なんか難しい(個人的な感想)
  • でも分かってる感があってかっこいい(個人的な感想)

f:id:lalune_webdedign:20210102105412p:plain

Webデザインを勉強してたことある方ならだれもが見たことがあると思われるこんな状態になっちゃいがち。

 

flexbox

  • 要素の高さはそのまま認識される
  • 解除などの付随する記述は不要
  • 横並びにしたい親要素に指定する
  • floatにくらべ簡単

 

個人的な感想多めですが、こんな違いかと思います!

こちらの記事がとても分かりやすかったです。

 

nihonsoukou.com