Web技術

Web技術

【JS】同じクラスで複数のモーダルを表示する方法

今回は同じクラスを使って複数のモーダルを表示させる方法を紹介する。 See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.
Web技術

【CSS】蛍光ペンのようなunderlineの実装方法

今回はcssで蛍光ペンのようなアンダーラインの実装方法を紹介する。 See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.
Web技術

【CSS】水平方向にスクロールするカードデザイン

flexとgridを使って実装するこのデザイン See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.
Web技術

【JS】Swiper.js リンク先に遷移しない時の解決方法

Swiper.jsを使って実装していた時にハマってしまったことがあった。それは、Androidのブラウザでaタグに設定したリンクにクリック/タップしても遷移しなかったことだ。そこでjsに「watchSlidesProgress: true」...
Web技術

【CSS】CSSでテキストの上下余白を正しく計算する方法

今回は正確に上下の余白をCSSで計算する方法をメモしておく。正確ではないCSSも記載しておくので、ぜひ比較してほしい。 See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.また、以下のように...
Web技術

【CSS】CSSのみでスムーズスクロールをする方法

以前までは、jQueryやJavaScriptでコーディングしなければいけなかったスムーズスクロールだが、CSSのみで実装することができるようになった。しかもCSS1行でできてしまう。 See the Pen Untitled by 山崎毅...
Web技術

buttonタグをクリックした時に新しいウィンドウで開く方法

buttonタグをクリックした時に新しいウィンドウで開く方法をメモしておく。 See the Pen Untitled by 山崎毅 (@nbudjgzu) on CodePen.
Web技術

【JavaScript】最後までスクロールしたらチェックボックスからdisabledを外す方法

今回はJavaScriptで最後までスクロールしたらチェックボックスからdisabledを外す方法を紹介する。 See the Pen by 山崎毅 (@nbudjgzu) on CodePen.
Web技術

【JavaScript】複数選択したチェックボックスをボタンをクリックして全て外す方法

とある案件で複数選択したチェックボックスをボタンをクリックして全て外すというコーディングをしたのでメモしておく。CSSは今回設定していないので、好みにカスタマイズしていただければと。 See the Pen by 山崎毅 (@nbudjgz...
Web技術

【Vue.js】FullCalendarを使ってカレンダーを実装してみた。

Vue.jsのFullCalendarを使ってカレンダーを実装してみた。まずは、head内にfullcalendarのcssとjsを読み込む。今回は、一番簡単なCDNでの読み込み方法を記載しておく。デモ外部ファイル読み込み<link hre...