ヘッダー固定時のページ内リンクスムーススクロール

デモページはこちら ページ内リンクへの移動をスムーススクロールで実装します。ヘッダーは上部に固定しています。以下のhtml構造でテストします。 ページ内リンクの…

CSS疑似要素のcontentプロパティにcounter関数で連番を指定

デモページはこちら CSS疑似要素のcontentプロパティに、CSSのcounter関数で連番を指定します。JavaScriptは使用せず、CSSのみで実装し…

プロパティに変数でマイナス値を設定

プロパティに変数でマイナス値を設定するケースです。例えばマイナスmarginを設定する場合、値が単独の場合は以下のように記述すれば問題ありません。 ですがプロパ…

インターポレーションの利用

インターポレーションは変数が参照できない場所でも使うことができるようにする機能です。通常Sassの変数はプロパティ値から参照して使用します。この場合インターポレ…

npm updateでパッケージのバージョンを更新

npm updateでパッケージのバージョンを更新します。更新を確認するためにまず、jqueryの古いバージョンである2.2.0をインストールします。 実行が完…

gulp 4.0で導入されたseriesとparallelについて

gulp4.0から新しくseriesとparallelが導入され、タスクの処理の順番を制御できるようになりました。 seriesは直列に処理を実行する同期処理で…

gulp

npm lsでインストールされているパッケージの情報を表示

プロジェクトのディレクトリでnpm lsを実行するとインストールされているパッケージの情報を表示できます。lsコマンドはlistコマンドの短縮形です。 例えばプ…

パッケージのバージョン指定インストールとpackage-lock.json

パッケージインストール時にパッケージ名の後に@を付けると、パッケージのバージョンの指定ができます。以下はjqueryのバージョン3.4.1インストール時の指定で…

npm initによるpackage.jsonの作成とパッケージのインストール

プロジェクトを作成するディレクトリでnpm initを実行してpackage.jsonを作成します。対話形式で作成しますが何も入力せずEnterキーで進めていく…

npxでgulpを実行

npmはNode.jsインストール時に付属するパッケージ管理マネージャで、Node.jsのパッケージの管理や実行を取り扱うものです。Node.jsをインストール…

gulp

JavaScriptで文字列・配列を切り出し（slice・substr）

デモページはこちら JavaScriptで文字列または配列を切り出すメソッドのまとめです。sliceは文字列と配列、substrは文字列の切り出しができます。 …

トップへ戻るボタンをフッターの上部に表示

デモページはこちら jQueryでフッターの高さを取得し、ユーザーがページ最下部までスクロールしても、トップへ戻るボタンをフッターよりも上部に表示します。 フッ…

imagesLoadedを利用した画像のローディング

デモページはこちら 画像読み込みの管理ができるJavaScriptライブラリ、imagesLoadedを利用して画像の透過度が変化して見えるローディングを実装し…

CSSロードアニメーションの実装【円の一部分の色を回転】

デモページはこちら 円の一部分の色が回転する動作のCSSロードアニメーションを実装します。ローダーの見た目は全てCSSで実装するため、svgは使用しません。 h…

CSSアニメーション

Photoshopのスクラブズームについて

Photoshopのスクラブズームはデフォルトでオンになっています。ズームツールで拡大したい箇所を右にドラッグするとその箇所が拡大し、縮小したい箇所を左にドラッ…

PhotoshopでWebカラー（6桁の16進数）を確認する方法

PhotoshopでWebカラー（6桁の16進数）を確認する方法です。カラーピッカーを使わずに確認します。まず情報パネルで以下のように設定します。 情報パネル→…

プラグインを利用せずにjQueryで実装する高さ揃え

デモページはこちら jquery.matchHeight.jsのようなプラグインを利用せず、jQueryのみでhtml要素の高さ揃えを実装します。プラグイン利用…

inline要素のマージン

デモページはこちら inline要素にCSSでマージンを設定した場合の挙動です。以下のhtml構造のspanタグでテストします。 inline要素に左右のマージ…

Twitterボタンの設置とカスタマイズ

デモページはこちら Twitterボタンの設置とカスタマイズのまとめです。ボタンのソースコードは以下の公式サイトから生成できます。ただし、jsの読み込みが必要に…

Twitter

JavaScriptで文字列を検索（indexOf・search・match・test）

デモページはこちら JavaScriptで文字列を検索するメソッドのまとめです。それぞれ記述の仕方と戻り値に特徴があります。 以下のhtmlの構造でテストします…

JavaScriptのsplitメソッドで要素を分割し配列に格納

デモページはこちら JavaScriptのsplitメソッドで要素を分割し配列に格納します。 以下のhtmlの構造でテストします。 splitメソッドは指定した…

JavaScriptのpushメソッドで配列に要素を追加・joinメソッドで配列の要素を連結

デモページはこちら JavaScriptのpushメソッドで配列に要素を追加し、joinメソッドで配列の要素を連結して文字列を生成します。 以下のhtmlの構造…

JavaScriptのreplaceメソッドで文字列を置換

デモページはこちら JavaScriptのreplaceメソッドで文字列を置換します。空文字に置換することで対象文字列の削除も可能です。また全ての対象文字列の置…

svgロードアニメーションをCSSアニメーションで実装【グラデーションの線を回転】

デモページはこちら グラデーションの線を回転する動作のsvgロードアニメーションを、CSSアニメーションで実装します。 svgタグで表示エリアをwidth="6…

CSSアニメーション

jQueryのイベントオブジェクトのメソッド（preventDefault・stopPropagation）

デモページはこちら jQueryのイベントオブジェクトのメソッドであるpreventDefaultとstopPropagationの動作をテストします。また、処…