JavaScript [ JavaScript 基礎 ] 配列内のオブジェクトを操作する(値の取得/値の更新) 本記事では、JavaScriptで複数オブジェクトが格納されている配列から特定のオブジェクトを取り出す方法、オブジェクトから特定の値のみを取り出す方法、オブジェクトから取り出した特定の値を変更(更新)する方法についてご紹介してます。(mapメソッドとfilterメソッドを使用) 2023.06.03 JavaScript
JavaScript [ JavaScript 基礎 ] Cookieにデータを保存 / データの取得(参照) 今回は、JavaScriptを用いて、Cookie(クッキー)にデータを保存する方法(document.cookie)と保存したデータを参照する方法についてサンプルコードを用いながら解説しています。デベロッパーツール上でのCookieデータの確認方法も載せてます。 2023.05.06 JavaScript
JavaScript [ JavaScript 基礎 ] parseメソッド, stringifyメソッドの使い方 今回は、JSON形式の文字列をJavaScriptのオブジェクト、JavaScriptのオブジェクトをJSON形式の文字列に変換する方法(parseメソッド, stringifyメソッドの使い方)についてサンプルコードを用いながらご紹介してます。 2023.05.05 JavaScript
JavaScript [ JavaScript 基礎 ] window.print : 印刷ダイアログを表示&印刷範囲の変更 今回は、JavaScriptでボタンを押した際に印刷画面(印刷ダイアログ)を呼び出せるようにしたいと思います。印刷する範囲を指定する方法(印刷用CSSを記述する方法)と詳細設定の初期値を変更する方法もあわせてご紹介していきます。 2023.05.04 JavaScript
Next.js Next.js + Tailwind CSS : 導入及び使い方 本記事では、Next.jsの環境でTailwind CSSを導入するまでの手順と基本的な使い方について簡単に解説してます。 代表的なCSSのフレームワークとして、BootstrapやBulma, MUIなどが挙げられますが、Tailwind CSSもその一つです。スタイルの変更をHTML上で完結, 開発速度の向上を目指せるなどのメリットをもつフレームワークになります。 2023.04.18 Next.js
React.js [React] Sass(.scss)を導入する方法 (検証用のサンプルコードあり) 本記事では、Reactの環境へSassを導入する方法についてご紹介してます。 これからReactを学んでいかれる方やReactのバージョンを更新するうえで、Sassを適切に使っていきたい方にオススメの内容になっておりますので参考になれば嬉しいです。 2022.12.20 React.js
React.js 【React hooks】useReducerの基礎を習得 – カウンターアプリ 本記事では、React hooksで提供されている関数であるuseReducerの使い方やuseStateの主な違いなどを解説しております。実際にuseStateを用いて作成したカウンターアプリをuseReducerで書き換えますので、処理の流れや具体的なコードの書き方を理解するきっかけになればと思います。 2022.10.31 React.js
React.js 【React hooks】useState・propsの基礎を習得 – カウンターアプリ 本記事内では、React hooksで提供される関数の一つである「useState」と「props」の基礎的な使い方をカウンターアプリを作成しながら解説していきます。React初心者の方やStateやpropsの処理の流れに不安がある方向けに書いております。 2022.10.28 React.js
WordPress cocoon : タブに関するCSS(背景色・文字色・枠線・文字のフォント)をカスタマイズする方法 WordPressの無料テーマの中でも多くの方に使用されている「cocoon(コクーン)」で、フロントページの表示形式を「タブ一覧」に設定した際のタブの背景色・文字色・枠線・文字のフォントをカスタマイズする方法についてご紹介してます。実際に操作している動画も掲載してますので、参考になればと思います。 2022.09.04 WordPress
WordPress [ WordPress 既存テーマ ] 検証ツールを用いて、CSSを独自でカスタマイズする方法 本記事では、WordPressの既存テーマを用いたコードカスタマイズ(今回は主にCSSデザイン)の際に、ブラウザの検証ツールを用いて現状で要素に割り当てられているCSSを確認/修正していく方法を各種ブラウザ( Safari , Google Chrome ...)における検証ツールの開き方に加えてご紹介させて頂いております。 2021.10.30 WordPress