Web技術

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...
Web技術

【CSS】videoタグをレスポンシブ化する方法

とあるあんけんでvideoタグをレスポンシブ化することがあったのでメモ。非常に簡単なので、是非参考にして欲しい。HTML<video controls id="video"> <source src="ファイルパス/ファイル名.mp4" t...
Web技術

【JavaScript】input type numberの値を取得し計算する方法

evalという関数を使うとスムーズにinput type numberで入力された値を数値として計算することができる。eval関数を使わないと入力された数値を結合するだけになってします。HTML<form action="" class="...
Web技術

swiper.jsを使ってタブ切り替えを実装する方法

まずはhead内にswiper.cssとswiper.jsを読み込むswiper.jsはからダウンロードHTML<div class="wrapper"> <!--タブメニュー(スライド)--> <div class="swiper-con...
Web技術

inputタグやbuttonタグにonclickを使ってリンクを設定する方法

リンクを設定する方法は<a href="index.html">遷移</a>だが、今回紹介するのは、inputタグやbuttonタグに設定する方法だ。inputタグ<input type="button" onclick="location...
Web技術

【JavaScript】同じクラス名を持つ複数のオブジェクトのクリックを区別する方法

HTML<button type="button" class="btn" id="1">1</button><button type="button" class="btn" id="2">2</button><button type="...
Web技術

【CSS】CSSのみで作るハンバーガーメニュー

ある案件でハンバーガーメニューを作成する機会があったので、メモしておく。 See the Pen RwpZLXx by 山崎毅 (@nbudjgzu) on CodePen.ベースとなる部分だけをメモしてあるので、このコードを基に色々と調整...