WordPress [ WordPress 既存テーマ ] 検証ツールを用いて、CSSを独自でカスタマイズする方法
本記事では、WordPressの既存テーマを用いたコードカスタマイズ(今回は主にCSSデザイン)の際に、ブラウザの検証ツールを用いて現状で要素に割り当てられているCSSを確認/修正していく方法を各種ブラウザ( Safari , Google Chrome ...)における検証ツールの開き方に加えてご紹介させて頂いております。
HTML
WordPress 
WordPress Welcart Basic : トップページに追加した商品が表示されるようにする方法
本記事では、ECサイト制作にて多く用いられているWelcartの無料テーマ「Welcart Basic」を利用する上でトップページに追加した商品を表示させるための方法について、商品の追加方法 / プラグインのインストールなどもあわせて、ご紹介させて頂いております。
CSS [ CSS ] box-shadowプロパティ デザインサンプル7選
本記事では、CSSプロパティの一つであるbox-shadowでHTML要素に影をつけたい場合に..どのように設定をすればいいかをサンプルコード(コピペ使用可能)を用いて、ご紹介させて頂いております。Web制作をしていく上で参考になればと思います。
Bootstrap Bootstrapで提供されているアイコンを自身のページで利用する上での手順
本記事では、CSSのフレームワークとしても多くのWebサイトやWebアプリケーションにて使用されているBootstrapにおいて提供されています「Bootstrap Icons (アイコン) 」を活用する方法をご紹介させて頂いております。 アイコンを設定したいが、手短かに準備したいと考えている方へオススメ致します。
Bootstrap Bootstrapの無料テンプレートを使用し、オリジナルテーマを作成する方法
本記事では、Bootstrapの無料テンプレートのダウンロード手順から、テンプレートを使用し、WordPressのオリジナルテーマを作成する方法までご紹介させて頂いております。また、ローカル環境につきましては、Local by fly wheel, MAMP, XAMPPのいずれも作業手順(リンク)を載せています。
CSS @font-face{} : 外部で公開されているフリーフォントをサイトへ適用させる方法
本記事では、様々なフォントを掲載している各サイトと外部で公開されているフリーフォント(Webフォント)をダウンロードし、「めもわーる」というフォントをサイトへ反映させる方法(@font-face{})をサンプルコードを交えながらご紹介させて頂いております。
CSS Gridを使って30分未満でオリジナルなレイアウトを作成する方法
本記事では、CSSにて公開されているGrid Layout(グリッドレイアウト)という技術を用いて、より効率的にサイトレイアウトを作成するための方法とサンプルコードを掲載させて頂いております。 通常のレイアウトの書き方に加えて、活用していくことで独自性のあるレイアウト作成が可能になります。
HTML HTML : table要素を用いて、サイト上に表を作成する方法 & サンプル有り
本記事上では、HTML上で使用する要素の一つである「table」に関連する要素を活用した表の作成方法について、サンプルのコードも交えながらご紹介させて頂いております。
table以外にもtrやtd, t...
CSS [ モバイルファースト] WebサイトにレスポンシブWebデザイン適用する手順
本記事では、サイト制作をしていく上では必須ともいえるレスポンシブデザインの活用方法についてご紹介させて頂いております。 メディアクエリって何?? 使い方は?? など実際に講座を通して受けた質問内容を元に簡潔にまとめ、...
CSS AOSの使い方 : オシャレなスクロールアニメーションをサイトに実装する
本記事上では、サイトへAOS(Animate On Scroll Library)を活用したスクロールアニメーションの実装方法について、概要からサンプルコード/DEMOページの公開まで掲載させて頂いております。
...