高機能なスライダーを設置できる”Swiper”(v11)の使い方
“Swiper”を利用することで、色々なエフェクトのついたスライダーを簡単に実装したり、ブレイクポイントを設定してレスポンシブなスライダー表示にも対応させることができます。 今回は現行のバージョンについて設置の方法から、設定方法、簡単なカスタマイズ例まで紹介していきます。
CSSのclip-pathプロパティを使って三角形、矢印などの図形を作る方法
webサイトのページ内でよく使用する矢印や三角形などの図形を、画像を読み込むのではなく、CSSを利用して設置したい場合もあると思います。よく使われそうな図形である三角形、矢印、大なり記号、チェックマーク、吹き出し、ステップ表示をCSSのclip-pathプロパティを利用して作成する時の記述例などを紹介します。
CSS変数（カスタムプロパティ）の使い方
CSS変数（カスタムプロパティ）について簡単に使い方などを紹介します。CSS変数とはCSSファイル全体を通してプロパティを再利用できる仕組みのことで、これを利用することで同じプロパティの値を何度も繰り返し記述することを避けたり、1箇所のCSS記述を変更することでサイト全体を編集することができるなどのメリットがあります。
CSSでグラデーションのテキストを作る
グラデーションのかかったテキストをCSSを利用して作成する方法を紹介します。CSSの「background:linear-gradient();」「 -webkit-background-clip: text;」「 -webkit-text-fill-color: transparent;」などのパラメータを利用します。
Font AwesomeをWordPressサイトで利用する方法
Font AwesomeのFree版を利用して、WordPressで制作したWebサイト内にアイコンを設置する方法について紹介します。WordPressのプラグインを利用する場合と、利用しない場合とに分けてFont Awesomeのアイコンを使うための準備の方法から、実際にアイコンを設置する方法まで紹介していきます。
Font Awesome Animationの使い方
Font Awesomeと合わせて使用することでアイコンを簡単にアニメーション表示させることができるFont Awesome Animationの使い方を紹介します。
Font Awesome(v6)の使い方
Font Awesomeの中でも無料で利用できるFree版の使い方やアレンジの方法について、初めてFont Awesomeを利用する方でもわかりやすいように紹介していきたいと思います。Font Awesomeは簡単に利用でき、無料で利用できるFree版でも豊富な種類のアイコンを利用することができ、多くのサイトで利用されています。
画像の圧縮形式変換やファイルサイズ圧縮ができる”Squoosh”の使い方
今回は、画質の変化を確認しながら画像のファイルサイズを圧縮したいときなどに便利な”Squoosh”を紹介したいと思います。“Squoosh”とは、ブラウザ上でも動作するGoogle製の画像圧縮・変換ツールです。
CodePenを利用してコードや実行結果の埋め込みをホームページに表示させる
CodePenとは、ブラウザ上でHTML,CSS,JavaScriptのコードを記述し、その実行結果を確認したりすることができるサービスです。記述したコードや実行結果は、保存したり共有したりすることができます。今回は、CodePenで記述したコードや実行結果をホームページに埋め込む方法について紹介していきます。