Technical Blog

技術ブログ

WordPressで継続して書いてきた技術記事・開発記録をまとめています。 学習内容、開発で詰まったこと、実装の理解を言葉に残しています。

Blog 2022-09-19

タブ切り替えなどを実現するJavaScript

当サイトのトップブログセクションのタグをクリックするとそのタグの記事のみが表示されます(本記事執筆時点) 例えば技術ブログの「#HTML/CSS」をクリックすると、HTML/CSSというタグを持つ記事のみが表示されます。 こんな感じで何かの要素をクリックしたときに、対象の要素の表示・非表示が切り替わる仕組みをJavaScriptで実現するにはどうすればいいのかについて書いていき …

JavaScript
Blog 2022-05-27

YouTubeのポップアップモーダルを作成する方法

現在取り組んでいるLPコーディングで、YouTubeをポップアップモーダルで表示するという仕様を実現したので、それについて書いていきます。 「modaal」というモーダルウインドウのプラグインを使用しました。 デモサイト デモサイトはこちらです。 デモサイトにある画像をクリックすると、以下のような、YouTubeのポップアップモーダルが表示されます。 以下の手順で作成しました。 …

JavaScript
Blog 2022-05-08

LPコーディングで使用した「jQuery」

先日、クラウドワークスの「XDデータからのLPコーディング案件」に応募したところ、ありがたいことに、ご依頼いただけました。 納品完了したので、今回使用した技術について書いていきます。長くなりそうなので、今回は、jQueryに絞って書いていきます。 ページスクロール ナビゲーションをクリックしたときに、特定のセクションに飛ぶようにしました。 「aタグをクリックしたら、変数elmH …

JavaScript
Blog 2022-04-19

TypeScriptとJavaScriprの挙動の違いなど

前回の記事でTypeScriptを学び始めました。今回はその続きをやっていきます。 TypeScriptとJavaScriprの挙動の違い 以下のコードは、数値の配列に対して、文字列に使用するtoUpperCase()を用いています。 TypeScriptの場合、エディタ上で「プロパティ ‘toUpperCase’ は型 ‘number&#8 …

JavaScript