–フロントエンドJavaScriptJavaScript【JS】ブレイクポイントを通過する毎にページをリロードする方法PCとSPのブレイクポイントをまたぐ際に、ページを強制的にリロードしたいという場面があるかと思います。JavaScriptのresizeイベントで実装する方法をよく見かけますが...2022年12月21日JavaScriptJavaScriptでtextareaの高さを計算して自動で可変させる方法お問い合わせフォームなどを作成する場合、textareaタグを使用することが多いですよね。文章の長さに応じてtex...2022年6月10日JavaScriptJSとCSSでキラキラ輝く星空エフェクトを実装する方法JavaScriptとCSSでキラキラ輝く星空エフェクトを作成してみましたので、実装コードの紹介とコードの解説をしていきます。jQueryなしプラグインなしコピペのみで実装可...2022年3月30日JavaScript【JS】フォームの「同意する」チェックで送信ボタンを有効化する方法お問い合わせフォームでは、よく「プライバシーポリシーに同意する」や「個人情報の取り扱いに同意する」などのチェックボックスが用意されていることがありますね。こ...2022年2月28日JavaScriptコピーライトなどの年号をJavaScriptで自動更新する方法Webサイトのフッターのコピーライト表記など、今年の年を表示したい場合がありますよね。HTMLでベタ書きしてもよいのですが、そうすると毎年書き直す必要があります。...2022年1月31日JavaScript【Swiper】スライド総数と現在のスライド番号を表示する方法スライダーを作成できるJSプラグイン「Swiper」で、以下のようなスライダーを作成する方法を紹介します。今回はSwiperのカスタマイズ方法として、以下のようなスライダーを作成する方法を紹介します。スライドを1度に3枚表示する中央のスライドは大きく、左右のスライドは少...2021年12月31日JavaScriptJavaScriptで生年月日から現在の年齢を計算する方法ポートフォリオサイトなどで、自身の年齢を表示したい場合がありますよね。高機能なスライダーを実装できるJSライブラリ「Swiper」を使用して、以下のような機能のスライドショーを作成していきます。今回の記事では、モーダルとスライダーを組み合わせて使用する方法を紹介していきます。ページ上のボタンをクリックするとモーダルが開き、その中にスライダーを設置す...2021年11月26日JavaScript開始日からの経過年月を自動で計算する機能をJavaScriptで実装する方法【ポートフォリオに最適】ポートフォリオサイトなどで自身のスキルを示したい時、経験年月を合わせて記載することが多いかと思います。HTMLで年月をベタ書き...2021年11月21日JavaScript【Swiper】サムネイル付きの画像スライダーを実装する方法Swiperとは、スライダー(カルーセル)を簡単に作成できるJSライブラリです。CSS】CSSとJavaScriptを使用して、ホバーするとキラキラが発生するエフェクトを作成しました。以下のボタンにマウスカーソルを当ててみてください。『画面いっぱいに広がる垂直スライダーの中に、全画面の水平スライダーを埋め込むスライド式のサイト』をSwiperで実装する機会がありました。まとめると以下のようなサ...2021年4月23日JavaScript【Swiper】タッチパッドやマウスホイールでスライドを移動させる方法Swiperでスライダーを作成していると、以下のような悩みに直面した方もいるかと思います。縦スクロールで画面いっぱいのスライドを切り替える縦長ページを作成する機会があったので、実装方法を紹介しようと思います。scale()で要素を上下・左右に反転させる方法CSS【レスポンシブ対応】padding-topで要素の比率を保持しつつサイズを可変させる方法CSS起弥フロントエンドエンジニア兵庫県出身のフリーランスフロントエンドエンジニアです。Web制作を通して気づいたこと、学んだことを発信していきます。当サイトに関する質問はこちら»ポートフォリオサイトWeb制作のポートフォリオサイトです。Web制作の実績等はこちらから確認いただけます。Note」を新設しました2022年4月16日パートナーとして一緒に仕事してくださるデザイナー様を募集中です2021年8月5日GatsbyJSでポートフォリオサイトをリニューアルしました。(2)コーディング代行「CodeHive」コーディング代行チーム「コードハイブ」を立ち上げました。