Web プログラミング

【もりけん塾30日目】画像をクリックするとテキストが表示される方法【JavaScript】

初めてのLP制作依頼の作業をしている、ねこらのん(@nekoranon256)です。

 

画像をクリックしたら下にテキストが表示する方法について調べていきました。

 

  • アコーディオン
  • input
  • bootstrapで教えてくださったタブの作成
  • JavaScriptでする方法

が候補かなと思いました。

 

ここでもりけん先生に相談しました。

 

するとJavaScriptを使う方法を教えてくださったので解説していきます。

JavaScript【結論:onClickを使う】

もりけんさんに相談するとJavaScriptのonClickを使用するということでした。

 

ここでもりけんさんがTwitterで画像をクリックしたらテキストが表示されるコードを送ってくださいました!

 

 

※画像をクリックしたら画像が以下のように切り替わります。





 

画像をクリックすると内容というテキストが下記に表示されるようになっています!

 

 

内容はcodesandboxにあるので画像を貼り、調べてまとめていきます。

 

もりけんさんのコード解説

もりけんさんのcodesandboxには以下の3つがありました。

  • html
  • css
  • package.json

 

この順番に見ていこうと思います。

 

html

まずはhtmlから。

1行づつみていきます。

 

head内

head内から見ていきます!

 

以下の内容は省きます。

 html
<!DOCTYPE html>
<html lang="en">
<head>
<metacharset="UTF-8" />
~~~~
<link rel="stylesheet" href="style.css" type="text/css" />
<title>TerraceTechフロントエンドエンジニア養成所</title>
</head>

 

 

以下の行からみていきます。

 

レスポンシブデザインのサイトを作るためのviewport設定タグ。

 html
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

PCやスマホ、タブレットなど個人が持っているデバイスは異なります。

各個人が持っているデバイスに適したレイアウトにするための方法がレスポンシブデザイン。

 

 

古いIEを使っていてデザインが崩れないようにするためのタグ。

 html
<meta http-equiv="X-UA-Compatible" content="ie=edge" />

 

body内

次はbody内。

 

これはもりけんさんのブログです。

 html
<a href="https:kenjimorita.jp/">blog</a>

もりけんさんの『武骨日記』へ

 

 

これはwrap。

idを使う理由はclassよりもidの方がCSSの優先度が高くなることが特徴のようです。

 html
<div id="wrap">

wrapの意味は内包するで、containerの意味的に使用することが多いようです。

参考:【イラスト解説】divに付いているidとclassの意味と使い方,CSSのクラス名を決めるときに使うリストをつくりました

 

 

次に画像です。

 

 html
<img
src="https://kenjimorita.jp/wp-content/uploads/2020/08/img_3032-672x372.jpg"
alt="すみれ"
width="300"
/>

 

それぞれの意味です。

  • src:画像のurl
  • alt:画像が表示されなかった場合などにおいて代替えのテキストとして表示
  • width:画像の幅

 

 

次はクリックすると表示されるテキスト。

 

こちらもclassではなくidを使用されています。

 html
<div id="text">内容</div>

 

scriptタブ

最後はscriptタグ内です。

 

 html
<script>
document.querySelector("#wrap").addEventListener("click",openText);
functionopenText(){
consttextDom=document.querySelector("#text");
textDom.classList.toggle("open");
}
</script>

 

 

それぞれの意味です。

  • <script>:JavaScript を実行するために使用
  • document.:文書全体
  • querySelector:JavaScriptから任意のHTML要素を検出・取得することができるメソッド
  • ("#wrap"):#は番号記号でナンバーサイン、wrapは<div id="wrap">のwrap
  • .addEventListener:JavaScriptからさまざまなイベント処理を実行することができるメソッド
  • ("click",openText);:ボタンクリックでイベント処理が発動してテキストが表示される
  • functionopenText(){:functionは関数の定義、openText(){はテキストファイルを分析して読み込む
  • const textDom:constは定数で値が変わらない、textDomはDocumentオブジェクトを通してテキストを取得・操作する
  • consttextDom=document.querySelector("#text");:textDomは文章「text」を検出する
  • textDom.classList.toggle("open");:textDomにopenがあればopenを除去し、openがなければ追加

参考:【JavaScript入門】addEventListener()によるイベント処理の使い方!

 

メソッドはオブジェクトのプロパティに代入された関数のこと

 

引用:ゼロから始めるJavaScript講座Vol14 オブジェクトの基礎

参考:記号の読み方と基礎知識

 

 

ここまでHTMLについて調べてまとめていきました。

 

css

次はCSSです。

 

CSSは3行だけでした!

 

 html
.open {
display: none;
}

 

textDom.classList.toggle("open");のopenで表示しないという意味かと…!

 

 

package.json

最後にpackage.jsonです。

 

 html
{
"name": "",
"version": "1.0.0",
"description": "",
"main": "index.html",
"scripts": {
"start": "serve"
},
"repository": {
"type": "git",
"url": "git+https://github.com/codesandbox-app/static-template.git"
},
"keywords": [],
"author": "Ives van Hoorne",
"license": "MIT",
"bugs": {
"url": "https://github.com/codesandbox-app/static-template/issues"
},
"homepage": "https://github.com/codesandbox-app/static-template#readme",
"devDependencies": {
"serve": "^11.2.0"
}
}

 

 

これらについて調べていきます!

  • "name":モジュール(プログラミングの部品)の名前
  • "version": "1.0.0",:モジュールのバージョン
  • "description": "",モジュールの説明
  • "main": "index.html",:モジュールの中で最初に呼ばれるスクリプトファイルを指定。
  • "scripts": {:任意のshell scriptを実行するエイリアスコマンドを定義できる。
  • "start": "serve"},:startは予約語
  • "repository": {"type": "git",:ソースコードが管理されている場所を指定する。
  • "url": "git+https://github.com/codesandbox-app/static-template.git"},:url
  • "keywords": [],:?
  • "author": "Ives van Hoorne",:authorは一人だけを指定
  • "license": "MIT",:ライセンス情報。
  • "bugs": {"url": "https://github.com/codesandbox-app/static-template/issues"},:プロジェクトの問題やバグ追跡を見る url とそれらの報告を行う email アドレス。
  • "homepage": "https://github.com/codesandbox-app/static-template#readme",:プロジェクトのホームページURL。
  • "devDependencies": {:npmに公開するモジュールを開発するときに必要なものを定義
  • "serve": "^11.2.0"}}:?

参考:package.jsonの中身を理解する

 

ちょっとまだわからないところが多いですが、一旦これで。

おわりに

JavaScriptわからないところが多い…!

 

本を読んで該当する場所を読もう。

 

もりけん塾(@terrace_tech

Thanks:もりけんさん

 

もりけんさんの『武骨日記』へ

 

-Web, プログラミング

© 2020 Mayu_Yamada