React.js [ Reactで学ぶ ] TypeScript 基礎 : 配列・オブジェクトの型定義方法 本記事では、React.jsのプロジェクト内でTypeScriptでコーディングをする際に、配列・オブジェクトでどのように型定義をすれば良いのか解説してます。サンプルコードも載せておりますので、学習・開発の参考になればと思います。 2023.02.01 React.js
React.js [ React hooks ] useRefの使い方・サンプルコード (useStateとの違いも解説!) 本記事では、React hooksの一つである「useRef」についての使い方からuseState・useReducerとの違いまで解説しております。また、「カウンター機能」と「ref属性の活用」の2本立てでサンプルコードを掲載しておりますので、学習の参考にしてもらえたらと思います。 2023.02.01 React.js
JavaScript [ JavaScript 基礎 ] Null合体演算子の使い方 & 注意点 本記事では、JavaScript・TypeScriptの構文であり、&&(AND)や||(OR)と同じ論理演算子の1種である「Null合体演算子」の使い方や注意点について、ご紹介しております。if文やswitch文など条件分岐に適した他の構文と比較したサンプルコードも載せてますので、参考になればと思います。 2022.12.26 JavaScript
React.js 【React hooks】useContextの基礎を習得 – カウンターアプリ useContextを使うことで異なる階層であってもデータの共有が出来るようになるため、コンポーネント間で同じデータ(State)を共有したい場合や機能や用途に応じてデータの管理をしたい時にとても便利です。また、propsの受け渡しも最小限に抑えることが出来る点に加え、useReducerとあわせて使用されることが多い関数になります。 2022.11.16 React.js
WordPress [ WordPress 既存テーマ ] 検証ツールを用いて、CSSを独自でカスタマイズする方法 本記事では、WordPressの既存テーマを用いたコードカスタマイズ(今回は主にCSSデザイン)の際に、ブラウザの検証ツールを用いて現状で要素に割り当てられているCSSを確認/修正していく方法を各種ブラウザ( Safari , Google Chrome ...)における検証ツールの開き方に加えてご紹介させて頂いております。 2021.10.30 WordPress
WordPress Welcart Basic : トップページに追加した商品が表示されるようにする方法 本記事では、ECサイト制作にて多く用いられているWelcartの無料テーマ「Welcart Basic」を利用する上でトップページに追加した商品を表示させるための方法について、商品の追加方法 / プラグインのインストールなどもあわせて、ご紹介させて頂いております。 2021.10.20 WordPress
CSS [ CSS ] box-shadowプロパティ デザインサンプル7選 本記事では、CSSプロパティの一つであるbox-shadowでHTML要素に影をつけたい場合に..どのように設定をすればいいかをサンプルコード(コピペ使用可能)を用いて、ご紹介させて頂いております。Web制作をしていく上で参考になればと思います。 2021.08.10 CSS
Bootstrap Bootstrapで提供されているアイコンを自身のページで利用する上での手順 本記事では、CSSのフレームワークとしても多くのWebサイトやWebアプリケーションにて使用されているBootstrapにおいて提供されています「Bootstrap Icons (アイコン) 」を活用する方法をご紹介させて頂いております。 アイコンを設定したいが、手短かに準備したいと考えている方へオススメ致します。 2021.08.02 Bootstrap
Bootstrap Bootstrapの無料テンプレートを使用し、オリジナルテーマを作成する方法 本記事では、Bootstrapの無料テンプレートのダウンロード手順から、テンプレートを使用し、WordPressのオリジナルテーマを作成する方法までご紹介させて頂いております。また、ローカル環境につきましては、Local by fly wheel, MAMP, XAMPPのいずれも作業手順(リンク)を載せています。 2021.07.27 Bootstrap
CSS @font-face{} : 外部で公開されているフリーフォントをサイトへ適用させる方法 本記事では、様々なフォントを掲載している各サイトと外部で公開されているフリーフォント(Webフォント)をダウンロードし、「めもわーる」というフォントをサイトへ反映させる方法(@font-face{})をサンプルコードを交えながらご紹介させて頂いております。 2021.06.10 CSS