2024.11.25 WEBWebデザイン :nth-child()擬似クラスをもっと便利に！ 新構文、”of <selector>”を使って選択要素をフィルタリングしよう 先日、:nth-child()擬似クラスについて下記の記事を投稿しました。 :nth-child()擬似クラスで指定した順番・範囲の要素を取得する :nth-child()擬似クラスの基本的な使い方はこちらを参考にしていただければ幸いですが、もう一つだけお伝えしたい機能がありましたので筆を執りまし [...]
2024.09.20 WEBWebデザイン :not()否定擬似クラスを使ってCSSセレクタに！（否定条件）を追加しよう CSSコーディングをしていると、 一番下の行には線をつけないでください 3つ目の要素は背景画像をとってください といったように、要素の「位置」や「順番」に応じて装飾を除外するような要求を出されることがたくさんあると思います。 CSSセレクタは原則として「当てはまる条件」を連ねて要素を絞り込ん [...]
2024.07.31 WEBWebデザイン :nth-child()擬似クラスで指定した順番・範囲の要素を取得する CSSコーディングを行っていると、要素の位置に依存したコードを書く機会は少なくないと思います。 一番下の行だけ下線をつけたい 偶数の行は背景色を〇〇にしたい 上からn番目の要素だけ△△色にしたい といった、特定の位置に配置される要素に対して特別なスタイルを適用することになりますが、HTML構 [...]
2024.05.23 WEBWebデザイン 脱Sassへの第一歩！CSSでネスト機能（Nested Rules）を使う方法 CSSコーディングを行う際にプリプロセッサのSassを利用しているコーダーは多いと思いますが、Sassの基本機能の中でも特によく使われているのは「ネスト機能（Nested Rules）」ではないでしょうか。 普段Sassを使ってコーディングを行っていると、Sassが導入されていない作業を担当したと [...]
2024.03.21 WEBWebデザイン CSSでもifが使いたい！:has()擬似クラスを使ってCSSセレクタに条件分岐を書く方法 CSSでコーディングをしていると 〇〇のときだけ××したい □□のときは△△してほしい といった「条件」によって「分岐」を必要とするセレクタを書く機会がたくさんあると思います。 CSSはシンプルで柔軟な言語ですので、セレクタを工夫することで大体の条件を満たすことができるのですが、シンプルがゆ [...]
2024.01.26 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（Tickerモード編） jQueryプラグイン「bxSlider」シリーズの6作目となります。 jQueryプラグイン「bxSlider」シリーズ jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（導入編） jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズ [...]
2023.11.28 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（カルーセルスライダー編） jQueryプラグイン「bxSlider」シリーズの5作目となります。 jQueryプラグイン「bxSlider」シリーズ jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（導入編） jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズ [...]
2023.08.16 WEBWebデザイン CSSのmask-imageプロパティとSVGを利用して簡単にアイコンの色を変えてみよう webデザインを作成するにあたってアイコンの利用は欠かせないものですが、CSSでコーディングを行う際に書き出し形式で悩んだ経験がある方もいるのではないでしょうか？ 大昔はアイコン画像の特性よりもブラウザの対応状況を優先しなければならないことも多々ありましたが、最近では利用用途に合わせてPNG形式、 [...]
2023.06.20 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（パブリックメソッド編） jQueryプラグイン「bxSlider」に関する連載も4回目となりました。 前回までの記事 jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（導入編） jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（実践編） jQueryプ [...]
2023.03.29 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（コールバック関数編） 過去2回に渡りjQueryプラグイン「bxSlider」の基本的な使い方についてご紹介してきました。 jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（導入編） jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（実践編） 今 [...]
2023.03.17 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（実践編） 前回の記事、「jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（導入編）」ではCDNを利用してbxSliderを導入する方法をご紹介しました。 今回は引き続き、bxSliderの基本的な使い方についてご紹介していきたいと思います。 INDEXjQueryプラグイ [...]
2023.01.25 WEBWebデザイン jQueryプラグイン「bxSlider」の使い方とオプションとカスタマイズまとめ（導入編） web制作を行うにあたってクライアント様からよくいただく要望の1つに、「画像を何枚か切り換えたい（スライドさせたい）」というものがあります。 「CSSだけで」、「JavaScriptも使って」等々、やり方は色々ありますが、一から仕様を考えて実装を行うのはなかなか手間がかかるもの。ご予算や納期を考え [...]
2022.11.30 BUSINESS仕事効率化ツール chromeで開いたタブのURLをまとめてコピー&ペーストできる拡張機能、「Copy All Urls」の使い方 webブラウジングをしていると気が付いたらたくさんのタブを開いていることはありませんか？ 著者は仕事柄、webブラウザを利用して多くのサイトを閲覧していますが、後でゆっくり確認したいページや気になったページはとりあえず残したまま、どんどん新しいタブでページを開いていく癖があります。 気が付いたらタ [...]
2022.09.26 WEBWebデザイン CSSの新機能「カスケードレイヤー」を使ってもっと簡単にスタイルを管理しよう web制作の現場においてCSSでのスタイリングは欠かせないものですが、意図した装飾とならずに困った経験がある人は多いのではないでしょうか？ CSSのスタイリングを適用する際には、詳細度や記述の順番を考えてコーディングを行う必要がありますが、新しい機能として「カスケードレイヤー」が利用可能になりまし [...]
2022.07.12 WEBWebデザイン VSCodeにEditorConfigプラグインを導入してコードフォーマットを統一する HTMLのインデントはスペース2つ、CSSのインデントはスペース4つ、改行コードはLF派の著者です。 インデントにスペースを使うかタブを使うか、スペースなら2つ分か4つ分か。所説あるので深く言及はしませんが、コーディングを担当する人によって好みがわかれることが多い問題？だと思います。 1人で完結す [...]
2022.05.13 WEBWebデザイン gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する（オプション・プラグイン編） 以前の記事「Sassの利用環境を構築しよう！gulpを使ってCSSにコンパイルする手順を解説」では、「gulp-imagemin」パッケージのv8、v7系をそれぞれインストールして実行するところまで紹介しました。 画像の圧縮は問題なく行えましたが、gulp-imageminのデフォルトの設定では圧 [...]
2022.03.16 WEBWebデザイン gulpで画像を軽量化、gulp-imageminを使ってコマンドラインから画像を圧縮する（インストール編） 先日、「WebPへの変換をもっと簡単に、gulp-webpを使ってWebP画像を生成する方法」では、gulpを使ってWebP形式に画像を変換する方法をご紹介しました。 IE（Internet Explorer）11がサポート対象外になり画像の圧縮形式にWebPを利用する機会が増えたとお伝えしました [...]
