CSS– category –
-
CSSでよく混同する「initial／inherit／unset」の違いについて
CSSでプロパティをリセットする時に使うinitial／inherit／unset。 一見するとどれも似たような挙動をしますので「どれが何だっけ？」と迷ってしまいます。 なので覚え書きついでにまとめてみます。 【】 プロパティの初期値（または規定値）を設定。 初期... -
CSSで文字詰め「font-feature-settings」
DTPデザイナーやグラフィックデザイナーの基本テクニック「文字詰め」。多くのデザイナーがPhotoshopやIllustratorなどのAdobe系ツールで自動カーニングしていると思います。DTPでは当たり前でしたが、WEBでもCSSで実現できます。その方法をまとめましたの... -
CSSで乗算！ブレンドモード「mix-blend-mode」「background-blend-mode」
ブレンドモードは、描画モードとしてPhotoshopやIllustratorなどのAdobe系ツールに搭載されている、グラフィックデザイナーにとってはおなじみの機能です。以前はPhotoshopなどで加工してからWebサイトに使用していましたが、現在はCSSで実装できるように... -
CSS 背景画像にリンクを張る方法（background）
背景画像を指定した<div>タグや<p>タグをバナーっぽくするため<a>タグでリンクを張ってみても、うまくいかないときがあります。 こういうときは逆に<a>に背景画像を指定することで解決します。 <p class="top"><a href="top.html" title... -
CSSで文字を縦書きにする方法「writing-mode」「text-orientation」
WEBの表示は横書きが基本です。が、和風のサイトならワンポイントで縦書きにしてみたいですよね。 今ではCSSで縦書きにすることも可能です。早速やってみましょう。 【】 CSSのwriting-modeを使います。 縦書きは writing-mode: vertical-rl; 縦書きで左か... -
ウェブサイトにTwitterのシェアボタンを設置する方法
WordPressテーマによっては記事下にTwitter各SNSのシェアボタンをつけられるようになっています。 記事の途中や固定ページなどにツイッターのシェアボタンを設置して記事をツイートできるようにする場合は、今回のような方法があります。 シェアボタンの設... -
SafariのみにCSSを適用させる方法【Chrome・Firefox・Edgeも】
ブラウザによってうまく表示されないことはありますが、どうしてもSafariだけ調整しないといけない…というときの対処法を、Chrome・Firefox・Edgeなど他のブラウザも含めてまとめてみました。 【Safariにのみ適用させるCSS】 _:lang(x)+_:-webkit-full-scr... -
CSS「transition」プロパティでアニメーション
Webサイトを見ていると、マウスホバーで色が変わったり動いたりするボタンをよく見かけます。「こんなアニメーションを、自分のサイトにも取り入れたいな」と思ったことはありませんか？ CSSだけで簡単にアニメーションができるんです。 今回はそのひとつ... -
Google推奨！reCAPTCHAを消す方法
WordPressのスパム対策として、Googleの「reCAPTCHA V3」はとても便利です。 ただ、お問い合わせ画面の右下にreCAPTCHAのロゴが表示されて少々邪魔に感じます。 とくに、WordPressでお問い合わせフォームを設置するためのプラグイン「Contact Form 7」を使... -
画像の差し替えをCSSで行う方法
WordPressで画像を差し替える必要があって、CSSで簡単に対応できないかと思って調べたことを備忘録的に記事にいたします。 なるべくCSSだけで画像を置き換えたかったのですが、コーディングはCSSまでしかできません！という方にはオススメです。 以下は「○... -
CSSで行間と字間を調整する方法
行間（行高）や字間（文字間隔）は、文章の読みやすさに大きく影響します。 読みづらい文章だと、続けて読みたいと思わないですよね。離脱率やセッション継続時間の低下に繋がりかねません。 きれいなサイトは、文章スペースもスッキリしていて読みやすい... -
CSSを使ってテキストを置き換える方法
WordPressで、カスタマイザーでは変更できないテキストに対して「変更してほしい」とクライアント様からご要望があり、CSSで簡単に対応したときのことを備忘録的にまとめます。 CSSだけでテキストを書き換えることはできないかな？と思ってやってみました...
12
