javascript

配列の要素がオブジェクトの場合、キーの値でソート・抽出する方法【Javascript/filter/sort】

配列の要素がオブジェクトの場合、キーの値でソート、抽出する方法を調べたのでメモ。今回操作する配列には、このようにオブジェクトが格納されているとします。それぞれのオブジェクトには、id、画像名、日付、グループ名をキーとして登録します。 ...
2021.06.22
javascript

ローカルストレージとプロキシの使い方についてまとめました【JavaScript/LocalStorage/Proxy】

LocalStrage(ローカルストレージ)とProxy(プロキシ)についてまとめたのでメモ。 LocalStrage(ローカルストレージ)とは LocalStrageは、キーと値の組み合わせをブラウザに保存する仕組みです。ブ...
css

floatでキャプション付き画像にテキストを回り込ませる【CSS】

floatでテキストを画像に回り込ませるサンプルを作ったのでメモ。 floatでテキストを回り込ませるデモ(デモ) ブラウザの幅を小さくすると、画像にテキストが回り込みます。PC版、SP版でも同じコードが使えます。 PC...
css

ルビ(ふりがな)の位置を調整する方法【CSS】

ウェブページの漢字にルビ(ふりがな)をふる機会があったのですが、普通に表示させるとブラウザによって表示がずれます。今回、ずれない方法で表示させたのでメモ。 ルビをふるコード こちらがルビをふるタグです。<rt>タグの部分...
2021.06.12
css

ページ全体に色違いの背景パターンを表示する方法【CSS】

ページ全体にパターンを表示させて、色違いの背景色を重ねたい時のサンプルを作ったのでメモ。 完成したページを確認する(デモ) こちらが完成したページです。背景のパターンは透過pngで作成しています。画像を差し替えれば色々なデザイ...
javascript

ステップ式フォームを作成する【javascript/hashchange】

長いフォームをステップ式で作成したのでメモ。ステップ式といってもフォームの一部を非表示にして、ソレっぽく見せているだけです。切り替えの判定はURLの#(ハッシュ)値です。ハッシュが変更されたら表示を切り替えています。 完成したフォー...
javascript

ラジオボタンみたいに1つの要素だけ選択する【JavaScript】

フォームのラジオボタンは、グループ内で1つの要素しか選択できません。今回、同じ挙動をラジオボタン以外の要素で実装したのでメモ。 完成したラジオボタン風の動作を確認する(デモ) 動作デモ 今回、ブラウザの背景を切り替えるサ...
javascript

FlexSliderでカウントアップ(現在数/総数)を表示させる【javascript】

スライダー表示にjQueryプラグインのFlexSliderを使っているのですが、カスタマイズしたのでメモ。 作業した内容は次の通りです! を表示させる(←今ここ)(←今ここ) 画面が全て読み込まれるまでローディングアイコ...
2021.05.07
Linux

Gitのブランチをマージする手順についてまとめました【Git】

クライアントソフトでGitを使っていますが、コマンドでも操作できるようになりたいので一連の操作をメモしておきます。 作業する時、まずブランチを作成&切り替えます。最終的には作業したブランチを元のブランチにマージします。 ...
2021.05.03
javascript

チェックした要素の数をそれぞれカウントする動きを実装しました【javascript/Observer】

Observer(オブザーバー)の勉強として、チェックした要素の数だけカウントする動きを実装したのでメモ。例としてイン●タグラム風のページを用意しました(笑)。「いいね」や「ブックマーク」のアイコンをチェックすると、実行結果のアイコン...
2021.04.29