CSS【CSS、JS】付箋をはがすようなアニメーション
付箋やポストイットをはがすようなアニメーションです。 See the Pen メモはがし by 3rdcom (@3rdcom) on CodePen. クリックではがしたり戻したりできるようになって...続きを読む
Javascript
CSS
CSS【CSS,JS】jqueryなしでスムーズスクロール（アンカーでのスクロールをアニメーション）
jqueryなしでjavascriptのみでアンカークリックによるスムーズスクロールの実装方法です。 See the Pen smooth_scroll by 3rdcom (@3rdcom) on ...続きを読む
CSS【コーディング】スクロールでセクションごとに固定エリアの内容を変える
スクロールをすると固定エリアが表示して、スクロール量（セクションに入ったら）によってテキストの内容を変えるHTMLとCSS、jsです。 See the Pen scrollblock by 3rdco...続きを読む
Javascript【javascript】パラメータ付きの同一ページ遷移するリンクでアンカーリンクを設定する方法
パラメータ付きの同一ページ遷移するリンクでアンカーリンクを設定する方法です。 別ページですとパラメータ＋アンカーリンクで問題ないのですが、下記のように <a href="./?id=111#secti...続きを読む
Javascript【JS、HTML】「前」「次」ボタンでページ内にコンテンツを切り替えるエリアを作成する
「前」「次」ボタンでページ内にコンテンツを切り替えるエリアを作成する方法です。 スライダーのようなものですが、表示の切り替わりかたは表示、非表示で切り替える方法です。 各コンテンツ内を自由に変えられる...続きを読む
CSS【コーディング】overflowでスクロールするようにした要素のスクロールできることを知らせるテキストを挿入する（スクロールすると消える）
レスポンシブ時にoverflowでスクロースできるようにしたテーブルやブロックを作成することがあるかと思います。 ただ、そのままだとスクロールできることが分かりにくい場合があります。 そこでスクロール...続きを読む
Javascript【javascript】複数あるclassに対して処理を行う
javascriptで要素を取得する時、idで指定すると１つの要素を指定して処理が行われますので簡単なのですが、classは複数存在する可能性があるものですのでループ処理を行う必要があります。 idの...続きを読む
Javascript【JS】slick.js｜サムネイル付きで縦に配置する
スライダー機能を簡単に導入できるslick.jsを使う場合、通常は下にサムネイル挿入されているものがほとんどです。 ですが、サムネイル付きのスライダーは２つのスライダーを使用しているので自由に位置の変...続きを読む
Javascript【javascript】クリックでその要素のスタイルを変え、対応する別の要素のスタイルも変える
onclickでその要素のスタイルを変えて、加えて対応する要素をスタイルを変更するコードです。 フィールドをクリックするとその要素の背景を白くして、対応するパンくずを太字にします。 対応する要素に関し...続きを読む
Javascriptスライダーをslick.jsを使用して実装する方法
スライダーを導入する時に全て自作でとなると相当大変な上に変な動きになったりしてしまい、上手くいかないことが多いかと思います。 そんな時はツールを使うと簡単に実装することが出来ます。 ここではslick...続きを読む
Javascript【jquery】現在あるメニューをモーダルメニューにする
ハンバーガーメニューを作成する時に現行サイトの修正だとサイトによって記述を変えることがあるので、汎用的なハンバーガーモーダルメニューを作成してみました。 1つのメニュー領域だけでなく複数のメニュー領域...続きを読む