【VSCode】Next.js、TypeScript、Sass、ESLint、Stylelint、Prettierで開発環境を作る手順
今回はVSCode上でNext.jsとTypeScript、ESLint、Prettier、Sass、Stylelintで開発環境を作る手順について説明します。 前提条件は以下 基本はcreat-ne...
ー 【ウェブ制作】に関する記事
vwとrem、カスタムCSSを使ってレスポンシブなサイトを作成する手順
今回はvwとrem、カスタムCSSを使ってレスポンシブなサイトを作成する手順について説明します。 デモサイト 前提条件は以下 rootでフォントサイズにvwを指定大きくなりすぎないように一定のサイズで...
CSSのみでアコーディオンメニューを実装する - 実務で使えるのか検証する
今回はJavaScriptを使用せず、アコーディオンメニューをHTMLとCSSだけで実装する方法と実務でも使えるのか検証します。 デモページ 前提条件は以下 HTMLとCSSのみで実装開閉のときにアニ...
CSSのみでタブの切り替えを実装する - 実務で使えるのか検証する
今回はCSSのみでタブメニューの切り替えを実装する方法と実際の実務で使えるのか検証してみます。 デモサイト 前提条件は以下 CSSのみで実装１ページにタブメニューを複数設置しない 説明環境は以下 ma...
【WordPress】カスタム投稿を使った絞り込み検索をプラグインなしで実装する - ページネーション有り
今回はWordPressでカスタム投稿とタクソノミー、タームを使った絞り込み検索をプラグインなしで実装する方法を紹介します。 サンプルページ 前提条件は以下 １つのカスタム投稿に紐づく複数のタクソノミ...
【JavaScript】「ページ内スクロール」と「トップに戻る」を同時に実装する方法
今回は「ページ内スクロール」と「トップへ戻る」を同時に実装する方法を説明します。 デモで確認する 前提条件は以下 jQueryは使わないリンクが#のみだと画面トップまで戻るリンクが設定されていても、ス...
【JavaScript】Vimeo動画をポップアップで表示させる方法
今回はJavaScriptを使って、Vimeo動画をサイト上でポップアップ表示させる方法について紹介します。 ポップアップを確認 実装内容は以下 テキストをクリックするとVimeo動画をポップアッ...
【React】react-helmet-asyncを使ったheadの設定方法 - URLごとに切り替える
今回はreact-helmet-asyncを使ってheadの設定方法について説明します。 前提条件は以下 VSCode上でcreat react appを使ってReact、TypeScriptの環境で...
【React】React Router v6の使い方 - URLによって表示を切り替える
今回はReact Router v6の基本的な使い方について説明します。URLによって表示を切り替えるときに必要な機能です。 前提条件は以下 VSCode上でcreat react appを使ってRe...
【React】状態管理をRecoilを使って行うチュートリアル
今回はReactの状態管理をRecoilを使って行う方法について説明します。Recoilはまだ実験段階のライブラリですが、Zennなどいくつかのサービスで利用されはじめています。 前提条件は以下 VS...
