SEO対策・ホームページ制作ならお任せください
〒940-0086 新潟県長岡市西千手1-1-1
TEL:0258-31-5005 FAX:0258-37-7301
さて、このコーナーも第２回です。
長くやってもしょうがないので、今回は大詰めです！
こんな感じで ↓ 効果を出しちゃいましょう(⋈◍＞◡＜◍)。✧♡
晴れボタンを押して、「今日は晴れです。アイスクリームが食べたいです。」
を出しちゃいましょう。
まずは、ソースをべた張り。
※ソーリー 文字化けが生じます
下のコードを、メモ帳を開きまして、</html> まで張り付けまして、保存する際に「全てのファイルを選択」して、ab.html, a.htmlでも、拡張子をhtmlにしてください。
そして、htmlファイルができますので、ブラウザを開いて、ファイルをドラック＆ドロップでブラウザにダイブせさてください。
動作は大丈夫でした。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {font-family:sans-serif;line-height: 1.6;font-weight: 700;}
#content_2 {visibility: hidden;min-width: 150px; height: 40px; background-color:#498BF4; color: #fff; }
p {background-color:#fff; padding: 8px 15px; border:4px solid #000;transition:all ease 0.4s;
color: #000;text-align: center;}
</style>
</head>
<body>
<p id="kumori">晴れ</p>
<p id="content_2">今日は晴れです。アイスクリームが食べたいです。</p>
<script>
(function(){
'use strict';
var getE = document.getElementById('kumori');
var con_2 = document.getElementById('content_2');
getE.addEventListener('click', function(){
if(con_2.style.visibility === "hidden"){
con_2.style.visibility = "visible";
} else {
con_2.style.visibility = "hidden";
}
});
})();
</script>
</body>
</html>
上の</html>までをコピペして、メモ帳に張って、a.htmlで、保存します。（.htmlのaの部分はローマ字で任意で大丈夫です）
そのファイルを、ブラウザに張り付けてみましょう。クリックして、閉じる処理のものが出来上がります。
処理の流れをみてみましょう。
これを利用して、「もっと読む」ボタンや、「開く」「閉じる」ボタンなど、応用は色々できます。
１：クリックする
２：クリックしたら、コンテンツが出てくる
３：コンテンツを閉じたいので、もう一度クリックする
大まかに分類したら、以上の処理ですね^0^
では、まず１の部分。
・クリックをする前に、コンテンツが出ていたら嫌ですよね。
なので、コンテンツ部分：今日は晴れです。アイスクリームが食べたいです。の部分を消します。
・そこで、登場するのが、
id
idの名前はなんでも良いです。マークみたいなものです。それを
CSS
ホームページなどを、装飾する言語を使って、消しちゃいます。
・visibility: hidden 消す、非表示
・visibility: visible 出す、表示
.という意味です。覚える必要はありません。忘れたら検索すればいいです。
ただ、こういうものがあるといのだけは忘れないでください。全て忘れたら検索できませんからね＾０＾
では、JavaScriptにいきましょう
まずは function
これは、「これからやるぜって感じです。走るぜってイメージでいいです」厳密にいうと、関数処理、処理をまとめたものなど、イメージでわかっていればいいです。
そして、'use strict';
これは、流行りです。厳密にエラーチェックをして、処理が高速化されます。
10回くらい書けば、覚えます。忘れたら、検索しましょう。
document.getElementById（’’）;
これは、('')の中にidを入れてあげると、その要素をいじって遊べます。
var getE ※getEの名前はなんでもOK.
var は変数宣言。毎回、document.getElementByIdを書くのは面倒くさいですよね。
なので、getEの中に入れちゃいましょう。
下の var con_2も同じです。
文章が長くなってきたので、もう一度イメージしましょう。
「晴れ」と書かれて囲まれているのは、
var getE = document.getElementById('kumori');
です。なぜかid名はくもり。多分、晴れ、曇り、雨で分岐してやろうと思ったのですが、失敗しました。気にしないでください♪
要は、id名はボタンが晴れというテキストだろうが、kumoriでいいんです。なんでも、大丈夫ってことです。
「今日は晴れです。アイスクリームが食べたいです。」
は、
var con_2 = document.getElementById('content_2');
です。
絵をイメージしたら、
処理に進みましょう。
・getE.addEventListener('click', function()
上を訳すと、
getE に
イベントをつけます addEventListener どんな？
クリックだよ。click
どんな？は独り言です・・・
その後にfunctionが続きます。走りますよ。
そして、分岐処理です。
if(con_2.style.visibility === "hidden"){
con_2.style.visibility = "visible";
} else {
con_2.style.visibility = "hidden";
}
・styleとは上で言っていた,
cssの状態です。
・「今日は晴れです。アイスクリームが食べたいです。」が、出ていないときは、
「今日は晴れです。アイスクリームが食べたいです。」を表示しましょう。
それ以外は
消しましょう。
そして、即時間数で忘れがちなもの
最後の
})();
の
();部分
}); だと動きません。
ちょっと長くなってしまいましたが、お付き合い有難うございました。
これを利用して、色々な事に応用できますので、試してみてください。
この話題は今回で最終回ですね・・・
寂しいですが、またすぐにお会いしましょう＾０＾
