20210427のHTMLに関する記事は6件です。

JavaScriptのEventフェーズについて Eventの発火順番とEventメソッドの正体

はじめに JavaScriptのeventについて重要な概念であるEvent Phasesについてまとめる。 その上でよく使われる以下について、それが何をするものなのかをまとめる。 event.stopPropagation() event.preventDefault() JavaScriptのEvent Phases JavaScriptのイベントにはライフサイクルという概念があり3つに区分される。 Capturing Phase Target Phase Bubbling Phase 引用元:w3.org UI Events 上記の図と合わせてライフサイクルにおける各フェーズの意味については以下。 Capturing Phase:イベントが発生した場合にwindowからイベントターゲットまで下に向かって進んでいくフェーズ Target Phase:イベントターゲットに到達したフェーズ(状態) Bubbling Phase:その後、元進んできた所を順に戻っていくフェーズ JavaScriptのイベントはいつ発火するのか? 上記でみたように、JavaScriptのイベントには3つのフェーズがあるが、実際にイベントが発火するのは、基本的にBubbling Phase※1。 event-phase.js document.addEventListener('click', function () { console.log('The document was clicked'); }); document.body.addEventListener('click', function () { console.log('The body element was clicked'); }); そのため上記のようなevent listenerを定義すると、console上には以下のように出力される。 ※documentとはhtml全体でありhtml > bodyの包含関係である。 The body element was clicked The document was clicked ※1 正確にはaddEventListener()の引数useCaptureがfalseである場合、Bubbling Phaseでイベントが発火する。 addEventListener()の引数useCaptureがtrueである場合、Capturing Phaseでイベントが発火する。 引数useCaptureは省略可能であり、デフォルトではfalseが設定されているものとして動く。 ※モダンなJavaScriptフレームワーク(React、Vue、Angularなど)ではaddEventListenerでイベント定義をする事はなく、falseの状態でイベント定義する事になるので、Bubbling Phaseでイベントが発火すると考えても問題ない(と思っている)。 Eventのバブリング(伝播) spanタグの文字列「反応しないでください」の上でマウスを動かしてイベントが発生する場面を考える。 この時、以下のように複数の要素に対して同じevent listenerを設定している場合、Bubbling Phaseで順番に戻る際にそれぞれのイベントが発火する。 つまり、親(p要素)・子(span要素)という関係で見ていくと、子がイベントターゲットなのでその子のイベントがまず発火。 その後Bubbling Phaseの動きで親要素に移りそこでも同じイベントが定義されているのでそのイベントが発火する、という事が起きる。 ※これを「イベントバブリング」と呼ぶ(日本語では「伝播」と言ったりする)。 event-bubbling.html <html> <body> <div id="parent">マウスをのせて下さい <span id="child">反応しないでください</span> </div> </body> </html> event-bubbling.js document.querySelector('parent').addEventListener('mousemove', function (event) { console.log('マウスをのせて下さい'); }); document.querySelector('child').addEventListener('mousemove', function (event) { console.log('反応しないでください'); }); event.stopPropagation() とは イベントバブリング(伝播)を止める事ができる構文。 具体的には、上記のようなイベントバブリングが起きるケースで、id="parent"のイベントを発火させたくない場合には、event.stopPropagation()を用いる事でそれが実現できる。 ※stopPropagationは直訳すると「伝播を停止する」であり、つまりイベントバブリング(伝播)を止めるという事。 event-bubbling.js document.querySelector('parent').addEventListener('mousemove', function (event) { console.log('マウスをのせて下さい'); }); document.querySelector('child').addEventListener('mousemove', function (event) { event.stopPropagation() console.log('反応しないでください'); }); その他のEventメソッド event.preventDefault() とは HTMLの各要素の既定の動作を止める事ができる構文。 具体的には、<a>要素をクリックした際にリンクへ飛ぶのを止めるという事がevent.preventDefault()を用いる事で実現できる。 ※preventDefaultは直訳すると「デフォルトを妨げる」であり、つまり既定(デフォルト)の動作を止めるという事。 ※既定の動作の例 aタグの要素:クリックするとhrefで指定したリンク先へ飛ぶ inputタグでtype=checkboxの要素:クリックするとチェックが入る event-prevent.html <html> <body> <a id="link" href="https://google.com">Google</a> </body> </html> event-prevent.js document.querySelector('link').addEventListener('click', function (event) { event.preventDefault(); }); 参考文献 https://www.w3.org/TR/DOM-Level-3-Events/
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

JavaScriptのEventフェーズについて Eventの発火順番とEventメソッド

はじめに JavaScriptのEventについて重要な概念であるEvent Phasesについてまとめる。 その上でよく使われる以下について、それが何をするものなのかをまとめる。 event.stopPropagation() event.preventDefault() JavaScriptのEvent Phases JavaScriptのイベントにはライフサイクルという概念があり3つに区分される。 Capturing Phase Target Phase Bubbling Phase 引用元:w3.org UI Events 上記の図と合わせてライフサイクルにおける各フェーズの意味については以下。 Capturing Phase:イベントが発生した場合にwindowからイベントターゲットまで下に向かって進んでいくフェーズ Target Phase:イベントターゲットに到達したフェーズ(状態) Bubbling Phase:その後、元進んできた所を順に戻っていくフェーズ JavaScriptのイベントはいつ発火するのか? 上記でみたように、JavaScriptのイベントには3つのフェーズがあるが、実際にイベントが発火するのは、基本的にBubbling Phase※1。 event-phase.js document.addEventListener('click', function () { console.log('The document was clicked'); }); document.body.addEventListener('click', function () { console.log('The body element was clicked'); }); そのため上記のようなevent listenerを定義すると、console上には以下のように出力される。 ※documentとはhtml全体でありhtml > bodyの包含関係である。 The body element was clicked The document was clicked ※1 正確にはaddEventListener()の引数useCaptureがfalseである場合、Bubbling Phaseでイベントが発火する。 addEventListener()の引数useCaptureがtrueである場合、Capturing Phaseでイベントが発火する。 引数useCaptureは省略可能であり、デフォルトではfalseが設定されているものとして動く。 ※モダンなJavaScriptフレームワーク(React、Vue、Angularなど)ではaddEventListenerでイベント定義をする事はなく、falseの状態でイベント定義する事になるので、Bubbling Phaseでイベントが発火すると考えても問題ない(と思っている)。 Eventのバブリング(伝播) 以下のHTMLがある時、spanタグの文字列「反応しないでください」の上でマウスを動かしてイベントが発生する場面を考える。 この時、以下のように複数の要素に対して同じevent listenerを設定している場合、Bubbling Phaseで順番に戻る際にそれぞれのイベントが発火する。 つまり、親(div要素)・子(span要素)という関係で見ていくと、子がイベントターゲットなのでその子のイベントがまず発火する。 その後Bubbling Phaseの動きで親要素に移りそこでも同じイベントが定義されているのでそのイベントが発火する、という事が起きる。 ※これを「イベントバブリング」と呼ぶ(日本語では「伝播」と言ったりする)。 event-bubbling.html <html> <body> <div id="parent">マウスをのせて下さい <span id="child">反応しないでください</span> </div> </body> </html> event-bubbling.js document.querySelector('parent').addEventListener('mousemove', function (event) { console.log('マウスをのせて下さい'); }); document.querySelector('child').addEventListener('mousemove', function (event) { console.log('反応しないでください'); }); event.stopPropagation() とは イベントバブリング(伝播)を止める事ができる構文。 具体的には、上記のようなイベントバブリングが起きるケースで、id="parent"のイベントを発火させたくない場合には、event.stopPropagation()を用いる事でそれが実現できる。 ※stopPropagationは直訳すると「伝播を停止する」であり、つまりイベントバブリング(伝播)を止めるという事。 event-bubbling.js document.querySelector('parent').addEventListener('mousemove', function (event) { console.log('マウスをのせて下さい'); }); document.querySelector('child').addEventListener('mousemove', function (event) { event.stopPropagation() console.log('反応しないでください'); }); その他のEventメソッド event.preventDefault() とは HTMLの各要素の既定の動作を止める事ができる構文。 具体的には、<a>要素をクリックした際にリンクへ飛ぶのを止めるという事がevent.preventDefault()を用いる事で実現できる。 ※preventDefaultは直訳すると「デフォルトを妨げる」であり、つまり既定(デフォルト)の動作を止めるという事。 ※既定の動作の例 aタグの要素:クリックするとhrefで指定したリンク先へ飛ぶ inputタグでtype=checkboxの要素:クリックするとチェックが入る event-prevent.html <html> <body> <a id="link" href="https://google.com">Google</a> </body> </html> event-prevent.js document.querySelector('link').addEventListener('click', function (event) { event.preventDefault(); }); 参考文献 https://www.w3.org/TR/DOM-Level-3-Events/
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Event Phases(イベントフェーズ)について Eventの発火順番とEventメソッド

はじめに Webの話では必須なEventに関する重要な概念Event Phasesについてまとめる。 その上でよく使われる以下について、それが何をするものなのかをまとめる。 event.stopPropagation() event.preventDefault() Event Phases イベントにはライフサイクルという概念があり3つに区分される。 Capturing Phase Target Phase Bubbling Phase 引用元:w3.org UI Events 上記の図と合わせてライフサイクルにおける各フェーズの意味については以下。 Capturing Phase:イベントが発生した場合にwindowからイベントターゲットまで下に向かって進んでいくフェーズ Target Phase:イベントターゲットに到達したフェーズ(状態) Bubbling Phase:その後、元進んできた所を順に戻っていくフェーズ JavaScriptのイベントはいつ発火するのか? 上記でみたように、イベントには3つのフェーズがあるが、実際にイベントが発火するのは、基本的にBubbling Phase※1。 event-phase.js document.addEventListener('click', function () { console.log('The document was clicked'); }); document.body.addEventListener('click', function () { console.log('The body element was clicked'); }); そのため上記のようなevent listenerを定義すると、console上には以下のように出力される。 ※documentとはhtml全体でありhtml > bodyの包含関係である。 The body element was clicked The document was clicked ※1 正確にはaddEventListener()の引数useCaptureがfalseである場合、Bubbling Phaseでイベントが発火する。 addEventListener()の引数useCaptureがtrueである場合、Capturing Phaseでイベントが発火する。 引数useCaptureは省略可能であり、デフォルトではfalseが設定されているものとして動く。 ※モダンなJavaScriptフレームワーク(React、Vue、Angularなど)ではaddEventListenerでイベント定義をする事はなく、falseの状態でイベント定義する事になるので、Bubbling Phaseでイベントが発火すると考えても問題ない(と思っている)。 Eventのバブリング(伝播) 以下のHTMLがある時、spanタグの文字列「反応しないでください」の上でマウスを動かしてイベントが発生する場面を考える。 この時、以下のように複数の要素に対して同じevent listenerを設定している場合、Bubbling Phaseで順番に戻る際にそれぞれのイベントが発火する。 つまり、親(div要素)・子(span要素)という関係で見ていくと、子がイベントターゲットなのでその子のイベントがまず発火する。 その後Bubbling Phaseの動きで親要素に移りそこでも同じイベントが定義されているのでそのイベントが発火する、という事が起きる。 ※これを「イベントバブリング」と呼ぶ(日本語では「伝播」と言ったりする)。 event-bubbling.html <html> <body> <div id="parent">マウスをのせて下さい <span id="child">反応しないでください</span> </div> </body> </html> event-bubbling.js document.querySelector('parent').addEventListener('mousemove', function (event) { console.log('マウスをのせて下さい'); }); document.querySelector('child').addEventListener('mousemove', function (event) { console.log('反応しないでください'); }); event.stopPropagation() とは イベントバブリング(伝播)を止める事ができる構文。 具体的には、上記のようなイベントバブリングが起きるケースで、id="parent"のイベントを発火させたくない場合には、event.stopPropagation()を用いる事でそれが実現できる。 ※stopPropagationは直訳すると「伝播を停止する」であり、つまりイベントバブリング(伝播)を止めるという事。 event-bubbling.js document.querySelector('parent').addEventListener('mousemove', function (event) { console.log('マウスをのせて下さい'); }); document.querySelector('child').addEventListener('mousemove', function (event) { console.log('反応しないでください'); event.stopPropagation(); }); その他のEventメソッド event.preventDefault() とは HTMLの各要素の既定の動作を止める事ができる構文。 具体的には、<a>要素をクリックした際にリンクへ飛ぶのを止めるという事がevent.preventDefault()を用いる事で実現できる。 ※preventDefaultは直訳すると「デフォルトを妨げる」であり、つまり既定(デフォルト)の動作を止めるという事。 ※既定の動作の例 aタグの要素:クリックするとhrefで指定したリンク先へ飛ぶ inputタグでtype=checkboxの要素:クリックするとチェックが入る event-prevent.html <html> <body> <a id="link" href="https://google.com">Google</a> </body> </html> event-prevent.js document.querySelector('link').addEventListener('click', function (event) { event.preventDefault(); }); 参考文献 https://www.w3.org/TR/DOM-Level-3-Events/
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

HTML,CSS による静的サイトをHerokuにデプロイ

0. はじめに  案件などで稼ぎたいときにエンジニアはポートフォリオを作成するだろう。そして誰もが躓くのが公開(以下デプロイ)だ。今回は無料でサーバを利用できるHerokuでポートフォリオをデプロイする方法について紹介する。デプロイにはgitを用いる。 1. 準備  今回はPHPを用いてデプロイしていく。「PHP使ったことない」という人でも簡単に実装できるから身構えないでほしい。  まずはじめにポートフォリオ用のディレクトリを作らず、他のHTMLファイルなどが混在している場合はポートフォリオ用のディレクトリを作成し、ファイルを入れる。ここで、HTML用、CSS用等ディレクトリを分けている場合は、HTMLファイルポートフォリオ用ディレクトリ直下に移動する。(HTMLファイルが複数ある場合はトップページのファイルのみ)  以下のようなファイル構成にしてほしい。(HTMLやCSS等をディレクトリに分けなくても良い) dir Portfolio/ ├ "ファイル名".html ├ HTML/ │ └ "ファイル名".html(あれば) ├ CSS/ │ └ "ファイル名".css └ JavaScript/ └ "ファイル名".js 2. PHPファイルとjsonファイル作成  PHPのファイルを作成する。ポートフォリオ用ディレクトリ直下にindex.phpというファイルを作成し、以下を入力する。(ファイル名がindex.phpでないとサイトを開くことができない) index.php <?php include_once("'ファイル名`.html"); ?>  次にjsonファイルを作成する。サイトの設定などを記入するファイルである。ポートフォリオ用ディレクトリ直下に'composer.json'を作成し以下を入力する。(ファイル名が'composer.json'でないとサイトを開くことができない) composer.json {} 3. デプロイ  ここから実際にサーバー上にファイルを置きデプロイする。shellを開きカレントディレクトリをポートフォリオ用ディレクトリに移動、以下コマンドを叩く。 shell heroku login heroku create "アプリ名" git init git remote add heroku https://git.heroku.com/<アプリケーション名>.git git add . git commit -m "first commit" git push heroku master  エラーが起こらなければデプロイ完了だ。デプロイしたサイトを開くにはheroku openコマンドで開くことができる。 4. まとめ  今回は静的サイトをHerokuにデプロイする方法を紹介した。ポートフォリオをデプロイする際に参考にしてほしい。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

Flexboxの基礎を徹底的な理解のために中央アフリカ共和国の国旗を作ってみる

Flexboxを使って国旗を作る 今回は中央アフリカ共和国の国旗  黄色の星は省きます 目標:Flexboxの基礎を理解するため テキストエディターはVSCode. ↓下記のFlexboxチートシートを参考 Css Flexboxのチートシート ~codeを書き始める前の準備~ ・構成を考える! 何をどんな風に、どうやって作るのか?  最初にある程度決めておくと後が楽になります。  例 中央アフリカ国旗を調べる    <div>は何個必要なのか?    class属性名はどうしようか?     ここまで出来たらcodeを書いていきます♪ ※head部分は省略 <div class="african1"> <div class="afr"> <div class="africa afr3">box1</div> <div class="africa afr4">box2</div> <div class="africa afr5">box3</div> <div class="africa afr6">box4</div> </div> <div class="afr1">box5</div> <div class="afr"> <div class="africa afr3">box1</div> <div class="africa afr4">box2</div> <div class="africa afr5">box3</div> <div class="africa afr6">box4</div> </div> </div> .african1 { width: 450px; height: 300px; background-color: pink; border: 1px solid black; } .afr3 { width: 185px; background-color: blue; } .afr4 { background-color: white; } .afr5 { background-color: green; } .afr6 { background-color: yellow; } .afr1 { width: 30px; background-color: red; } この状態を一旦ブラウザで確認 ↓ この状態にFlexbox のdisplayboxをつけます .african1 { width: 450px; height: 300px; background-color: pink; border: 1px solid black; display: flex; ※追加 flex-direction: row; ※追加 } boxが横並びになりました ↓↓ 次に『box1,2,3,4 & .afr 』にFlexアイテム(子要素)をつけるため 『box1,2,3,4』の親要素にdisplay: flexとflexコンテナー(親要素)をつけます .afr { display: flex; ※追加 flex-direction: column; ※追加 } flex-direction: column; をつけたので変化なし 『.afr3,4,5,6,1』にFlexアイテムの flex-grow をつけます .afr { display: flex; flex-direction: column; } .afr3 { width: 185px; background-color: blue; flex-grow: 2; } .afr4 { background-color: white; flex-grow: 2; } .afr5 { background-color: green; flex-grow: 2; } .afr6 { background-color: yellow; flex-grow: 2; } .afr1 { width: 30px; background-color: red; flex-grow: 1; } flexコンテナー と、flexアイテム を使って完成しました! 最後に「文字」を消して完成です ↓ まとめ Flexコンテナー と Flexアイテム の両方を使用しました。 Flexアイテム を使うため、敢えて『親要素』にFlexコンテナーを使いました Flexアイテム を使うためにはdisplay: flex; を付ける必要があります 見落としがちで、display: flex; を付けずに Flexアイテム を付けてしまい 挙動が反応しない現象に陥ってしまうので注意が必要です 引き続きFlexbox の基礎を理解して自由に使えたら嬉しいです 今回は以上です! ありがとうございました
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む

background-attachiment:fixed;を使わずにパララックスにする方法(iOS端末、Safari対応)

パララックス背景を実装してiPhoneで見てみたら上手く動かなかったので、調べてみたところ、background-attachiment position:fixed;で背景を固定するやり方は、iOS端末では対応していないことがわかった。 そこで上記のCSSを使わずにパララックス背景にする方法を調べて、上手く実装できた。 パララックス背景とは パララックス(視差効果)は、近年のWEBサイトでよく見る「背景が固定」されているものである。 ChatWorkのサイトでも実装されています。(2021年4月現在) 背景を固定することで、Webサイトに視覚の差異やスピード感・奥行きを演出できます。 おしゃれなサイトにはもってこいの表現技法です。 本題 まず、最初に一般的なbackground-attachiment:fixed;を使ったやり方の場合。 <div class="example"> <p>test</p> </div> .example { background-image: url(./img/example.jpg); background-attachment: fixed; } divに付与したexampleというクラス内で、example.jpgという背景画像を指定。 そこにbackground-attachment:fixed;を置くことで、背景画像を固定していますね。 そのため、スクロールすると背景は動かず周りの要素だけが動くので、不思議な感じになります。 しかし!!!! これをSafariから見ると、なぜか背景はbackground-attachment:fixed;する前の状態のままなのです。。。 調べてみると、下記の記述があるサイトを見つけました。 iOS端末では「background-attachment: fixed」は効かないらしい 「background-attachment」は、スクロールする時に背景画像を固定したままにするか、 スクロールに合わせて移動させるかどうかを指定するためのれっきとしたcssプロパティです。 なので、このプロパティが間違った記述というわけではありません。 ですが、この「background-attachment」と一緒に「background-size: cover」というプロパティを一緒に記述すると、iPhone端末でバグが発生してしまいます。 これは公式でも確認されているiOSの不具合らしいです。 引用元:【パララックス・iOS】background-attachment: fixedがスマホで効かない!?原因と解決法を解説 結構簡単に対応できました 記述し直さないといけないのではないか、と倒れそうになりましたが 結構すぐに対応できました! 擬似要素のbeforeを使用していきます。 まず、先ほどのCSSの一個上に親divを追加。 <div class="example"> <div class="example-children"> <p>test</p> </div> </div> 追加した親divに擬似要素beforeを追加します。 .example::before { content:""; display:block; position:fixed; top:0; left:0; z-index:-1; background-image: url(./img/example.jpg); position: fixed; } 背景をposition:fixedで背景画像固定して、 他の要素が上に重なっているみたいなイメージです。(多分) なので他の要素より一個下に表示させるため、z-index:-1;をつけています。 また、他の要素も、白背景でもきちんとbackground-color: #fffってやらないと 背景画像がずっと見えてる状態になりますのでご注意を。。。 これは一部分だけパララックス背景にする場合に使えます。 複雑にパララックスが入り組んだサイトにする場合は、JQueryとか使う方が早いかもです。
  • このエントリーをはてなブックマークに追加
  • Qiitaで続きを読む