【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動画をポップアッ...
サブディレクトリに配置したWordPressをメインドメインとして表示させる
今回はサブディレクトリに配置したWordPressをメインドメインとして表示させる方法について説明します。 前提条件は以下 レンタルサーバーにXserverを使用サブディレクトリにWordPress本...
【WordPressとGatsby】headのtitleやmeta情報をページごとに設定する手順
今回はWordPressとGatsbyを連携したサイトを、ページごとにheadのtitleやmeta情報を設定する方法を紹介します。 説明する環境は以下です。 macOS Catalina v10.1...
WordPressとGatsbyを連携して高速なサイトを作る - 環境構築から基本的なページ作成まで
今回はWordPressとGatsbyを連携して高速なサイトの作る手順について説明します。 説明する環境は以下です。 macOS Catalina v10.15.5Visual Studio Code...
