CSS– tag –
-
【CSS設計】信頼感が増すフッターデザインの法則｜3カラム構成とスマホ表示の最適化事例
物理的な「安心」をWebの「信頼（E-E-A-T）」へ Googleが重視する評価基準「E-E-A-T（経験・専門性・権威性・信頼性）」。実店舗やオフィスにAED（自動体外式除細動器）のような安全設備を導入することは、物理的な安心感だけでなく、Webサイト上でも「実... -
【CSS】WordPress既存テーマを完全レスポンシブ化！clamp()と独自ブレイクポイント(1270px)の実装事例
既存テーマ（コーポレートサイト）の表示調整案件です。標準機能ではカバーできていなかったタブレット表示～（800px～1200px付近）の表示崩れに対し、clamp()関数とcalc()を用いた詳細なレスポンシブ対応を行いました。 「一般的なブレイクポイントの罠」... -
【CSS】SNSアイコン追加でメニュー崩れ！ブレークポイント変更とclamp()関数によるレスポンシブ最適化事例
今回の制作概要と使用技術 【制作概要】 既存サイトへのSNSアイコン追加に伴う、ヘッダー周りのレイアウト改修。 【使用技術】 HTML5 / CSS3 (Media Queries, clamp(), Flexbox) 実装上の課題 「1280px（ノートPC）でのレイアウト破綻」 アイコン追加によ... -
【Contact Form 7】スマホで送信ボタンが中央に寄らない！スピナーが原因のズレをCSSで強制的に直す方法
WordPressのお問い合わせフォームプラグイン「Contact Form 7」を使っていると、「パソコンでは綺麗に表示されているのに、スマホで見ると送信ボタンが左にズレている」という現象に悩まされることがあります。 text-align: center; を指定しても変わらな... -
Themify ShoppeでCSS Gridが効かない？カラムが重なる現象の解決策
はじめに 今回の記事で対象になるThemify Shoppeはお客様の使用しているテーマで私も初めて触らせていただくテーマです。あまり使用している方はいないかと思いますが、「テーマ特有のコードが邪魔をしてうまくいかない」という パターンは他にも共通する... -
CSS「::before」を使った一覧タイトルの「・」実装事例と、共通classの影響範囲を限定する実装の注意点
制作概要と技術 既存サイトの実績一覧タイトルの視認性向上が目的。シンプルな装飾ながら、汎用性の高い疑似要素 ::beforeを活用し、デグレード（既存機能の不具合）を徹底的に回避したCSS実装を行いました。 実装上の課題 タイトルに使われているclassが... -
【WordPress】いろんなCSSアニメーションを取り入れてみました（導入手順とコピペ用コードも）
訪問ありがとうございます。 今回の記事は以前紹介したCSSアニメーションを使って自分のサイトに取り入れたアニメーションの紹介とそのコードをコピペで使えるように載せておきました。 シンプルな動きなのでご自身のサイトにアレンジして使っていだけたら... -
【coding】「@keyframes」「animation」でCSSアニメーションする
訪問ありがとうございます。 このページでは動きのあるWebサイトを構成する際に使うCSSアニメーションの全体イメージと基本的な使い方を備忘録の意味も兼ねてまとめたページです。 これから「CSSアニメーションを使ってみよう！」と思われた方に参考になれ... -
【CSS】「pointer-events:none」でaタグのリンクを無効にする
閲覧ありがとうございます。 ページテーマ CSSの「pointer-events:none」でaタグのリンクを無効にする HTMLの記述を変更せずにリンクを無効にしたい WordpressでカスタムCSSの記述でリンクを無効にできないの？ そんな問題解決につながれば嬉しいです。 【... -
【coding】CSS ど忘れコードまとめ
閲覧ありがとうございます。 ページテーマ CSSを書いていて“あのコードは何だっけ？”をまとめました ん、あのコードどうやって書くんだっけ？ コードの記述順、何が先だっけ？ そんな問題解決につながれば嬉しいです。 各名称 .selector{ property: value;...
12