Javascript– category –

スクロールしたらヘッダーの色が変化する実装をしたい。 今日はサイト制作でよく出てくる、画面をスクロールしたらヘッダーの色が変化する実装についてです。 初見だと少し難しく感じますが、意外とシンプルに実装できます。 【実装例】 早速実際のコード...

textareaに文字数カウントをつけたい。 画像のように入力する度に文字数がカウントされる実装。 初見だと悩んでしまう実装ですが、Javascriptを使えば結構簡単に実装できます。今日は文字数カウント機能についてまとめます。 【実装例】 早速実装例です。R...

テキストエリアのリサイズボタンのデザインを変えたい。 テキストエリアを伸ばしたり縮めたりする機能であるリサイズ。下記のように右下のデフォルトのボタンから縮めることは可能です。 See the Pen Untitled by 勇飛高松 (@ngcorrsc-the-solid) on CodeP...

今日はjs基礎の5回目です。今回のテーマは「要素をコピーする方法」です。 ボタンを押すとinput要素がそのままコピーされるページってありますよね。今回はその方法について解説します。 【コード実装例】 下記が実装例です。「Result」タブから追加ボタン...

今回で4回目となったjs基礎シリーズ。今回はFAQをふわっと開閉させる実装です。以前の記事で、単純にボタンクリックで開閉する実装は紹介しました。仕組みとしてはこれで良いのですが、動きがカクカクとしいてなんかダサい。ということで今回は開閉時にふ...

今回で3回目のjs基礎。今日はこれまた頻出のFAQの作り方を説明します。FAQは多くのWebサイトに配置されるため、頻出で使います。仕組みを理解すれば、素早く実装できるのでおすすめです。 【FAQの作り方】 さて早速FAQの作り方です。 See the Pen Untitled...

昨日はボタンをクリックしたら、テキストの色を変えるという実装を紹介しました。今回はそれを応用して、ボタンをクリックしたらモーダルを開くという処理をします。ヘッダーのハンバーガーメニューや、画像の詳細などでモーダルはよく使うので、参考にな...

最近Javascriptでの実装が増えてきました。ということでアウトプットも兼ねて、jsについてまとめます。まずは全てのベースとなる、ボタンをクリックしたらテキストの色を変えるよ〜〜 【ボタンクリックでテキストの色変えるよ〜〜】 See the Pen Untitled ...

目次を自動スクロールってどうやれば良いんだろう。 前回実装したハイライト機能の実装。一つ問題がそれは本文をスクロールして行った時、目次が見切れてしまうとハイライトが見えなくなってしまうこと。 See the Pen ハイライト機能 by YT (@YT-the-scrip...

スクロール位置に合わせて、目次がハイライトされる実装をしたい。 zennの目次のように、スクロール位置に合わせてサイドバーの目次のハイライト位置が変わる実装。https://zenn.dev/nondescript/articles/72aabaaeda4e39前回の記事では、本文から目次を動...