CSSでブラーをかけると縁がどうしてもぼやけてしまう場合の解決策WebデザインテクニックCSSの filter:blur でどうやっても画像などのフチまできれいにブラーがかからずぼやけてしまう場合は、SVGフィルターを利用すると確実です。2020/02/14続きを読む
CSS によるローディングアニメーションのサンプルと簡単な実装方法WebデザインテクニックCSS を利用したローディングアニメーションのサンプルは既に山ほど Web 上に公開されていますが、別件でコーディングをしていた流れで、たまたまローディングアニメーションのコードも適当に作ってみたので、いくつかのサンプル...2019/06/25続きを読む
display:inline-block で正確な幅を指定しても横並びにならず改行されてしまう場合の対処方法WebデザインテクニックCSS で要素を横並びにしたい場合、現在は display: flex を指定すれば簡単に水平に並べることができますが、Internet Explorer(IE) では、IE 11のみが対応しているだけでなくバグが多数あ...2019/05/26続きを読む
CSS のみでページを開くときのオープニングシャッターアニメーションを表現してみるWebデザインテクニックウェブページを表示する際、読み込み中のローディングアイコンなどを表示して読み込みが完了するとページが表示されるテクニックはよくあるギミックですが、ページコンテンツの読み込み完了までの進捗チェックや読み込みが完了した際の検...2019/03/07続きを読む
CSS のみでサムネイルナビ付きスライダーを表現してみるWebデザインテクニック今回の Tips は、JavaScript を一切利用せず、CSS のみを駆使して表現するイメージスライダーを作ってみます。 スライドは、サムネイル付きのナビゲーションボタンをクリックすることで切り替わるようにしてみます...2019/02/27続きを読む
CSS だけでサムネイルごとで開けるモーダルウィンドウを表現してみるWebデザインテクニックJavaScript を使わず、CSS のみで複数のモーダルウィンドウを開閉するアイテムの一覧のサンプルコードをつくってみました。 例えば、EC サイトで商品一覧のサムネイルをクリックすると、その商品の拡大画像と説明、価...2019/02/22続きを読む
WP customizeGutenbergとクラシックエディターの両方にカスタムCSSを反映する方法カスタマイズ・技術情報2018/12/7 : WordPress 5.0 “Bebo” での仕様に合わせて内容を更新済み。 WordPress 5.0 から、記事のエディターは従来の「ビジュアル(TinyMCE)/テキ...2018/08/18続きを読む
Table of Contents Plus の目次をレスポンシブと番号の有無に対応させたカスタムCSSサンプル応用カスタマイズWordPressで記事や固定ページを投稿した際に、本文の見出し(H1〜H6)タグの数と構造に応じて自動的に目次を作成し表示してくれる、もっともポピュラーなプラグインといえば 「Table of Contents Plu...続きを読む
【CSS】汎用性を重視したCSSアニメーションボタン30種類WebデザインテクニックWordPressテーマを制作する際、テーマごとでCSSボタン用の装飾(特にマウスオーバー時のエフェクト)をデザインするのですが、ユーザーがボタン用のセレクタのみで利用できるよう、一定の汎用性を考慮した条件下でデザインし...2017/08/30続きを読む
【CSS】画像に色を重ね合わせてテキスト部分を切り抜く汎用的な方法は?Webデザインテクニック例えば、サイトのヘッダー画像やギャラリー形式のアーカイブページなどでは、画像の上にサイトタイトルや投稿タイトルとなる文字列を重ねて表示するデザインを施す場合、画像とテキストが同化して見難くならないよう、テキストが白文字な...2017/08/09続きを読む
【CSS】clip-pathを利用してテキストをアニメーションで表示する方法WebデザインテクニックCSSのclip-pathというプロパティを利用すると、任意のHTML要素を指定したパスの形状に切り抜いて表示させることができます。 よく利用されるケースでは、画像をパスで繋がれた図形の部分だけ切り抜いて表示するというパ...2017/08/04続きを読む
CSSのみ!クリックでメニューが回転して開閉する3DアニメーションサンプルWebデザインテクニック今後制作予定のWordPressテーマのグローバルメニューのプロトタイプとして作成した、ハンバーガーアイコンをクリックすると、隠れていたメニューが奥から回転しながら起き上がって表示されるイメージのコンポーネントのサンプル...2017/07/09続きを読む