FooBar

note to self

JavaScript

MacでGulpを導入する方法

こんにちは。本日はgulpのインストールと簡単な使い方についてです。 タスクランナーのgulpを使えば定義した処理を自動で行ってくれます。 フロントエンド開発では最早鉄板のツールになっているので、簡易的ではありますが導入方法を残しておきます。

【コピペOK】JavaScriptでコピーライトの年号を自動で更新する方法

こんにちは。本日はサイトのフッターのコピーライト部分で、© 2019 のような年号を年が変わるたびに自動更新する方法を紹介します。 自分のサイトやブログを持っている人はコピーライトの部分をきちんと書いていますか? 毎年、年が変わるごとに手動で修正し…

nodebrewを使ってnode.jsをインストールしてnpmの設定する

こんにちは。本日はnodebrewを使用してnode.jsをインストールする方法です。 node.js自体は様々な方法でインストールできますが、プロジェクト毎にバージョンが違うなど、複数のバージョンを共有したり切り替えたい場合があると思います。 今回はnode.jsの管…

JavaScriptでページ内の遷移を実装する

こんにちは。本日はページ内移動をJSで実装する方法です。 縦長のレイアウトなwebサイトの場合、ナビリンクをクリックするとその場所まで自動でスクロールしながら移動できる機能をつけたいと思うことがあるかと思います。 JS自体も複雑なことを書くわけでは…

JavaScriptでナビバーをスクロール時にトップに固定する方法

こんにちは。本日はスクロールしてページ途中にあるグローバルナビがトップにきたら固定する方法です。 ナビバーがサイト途中部分にあって、上にスクロールするとサイト最上部に固定されるレイアウトのサイトがありますよね。 比較的簡単にできたので一緒に…

jQueryでclickイベントを使ってみる

こんにちは。本日はjQueryのclickイベントである要素をクリックした時に文字列が消えるようにしてみたいと思います。 jQueryではclickイベントと呼ばれていて、基本的でかつ簡単なよく使うテクニックの一つです。 ==== バージョン htmlファイルの編集 cssフ…

jQueryでhoverイベントを使ってみる

こんにちは。本日はjQueryを使って簡単なhoverイベントをつくりたいと思います。 hoverイベントはある要素にマウスをかざした時に、テキスト(文字)などが現れるテクニックです。 よくwebページなどでリンクや文字列をかざした時にユーザーに知らせるために現…