CSS– category –
-
CSSのtext-strokeプロパティで縁取り文字を実装する方法
ランディングページやWebサイト上で、縁取り文字を見かけたことがあるかと思います。 これをウェブ上で実装するとなると、画像を使用する・SVGを使用する・CSSのtext-sh... -
背景色付きのテキストが改行しても左右のpaddingを保持する方法
background-colorやbackground-imageのグラデーション関数を使用することで、文字に背景色をつけることができますね。（↓例） サンプルテキストサンプルテキストサンプ... -
【CSS】columnsプロパティで本のような段組みレイアウトを実装する方法
今回の記事では、CSSのcolumnsプロパティを使用して、段組みレイアウトを実装する方法を紹介します。 段組みレイアウトとは、本や新聞などで使われているように、長い文... -
CSSのみで色が自動的に切り替わる信号機を作成する方法
CSSアニメーションを使用して、自動的に色が切り替わる信号機を作ってみました。 以下が実際の制作物です。 コピペ用の実装コード一式とコードの解説をしていきますので... -
【コピペOK】CSSで方眼紙のような模様の背景を実装する方法
Web上で方眼紙のような模様の背景を実装したい場合があるかと思います。 方眼紙模様の背景画像を用意して使うこともできますが、その場合は色を変えたり、線の太さを変... -
【モダンブラウザ対応】アスペクト比を固定するaspect-ratioプロパティの使い方
以前の記事で、padding-topの性質を利用して、要素のアスペクト比を固定しつつレスポンシブ化する方法を紹介しました。 しかしこの方法だと、比率を計算して%で表記する... -
CSSのグラデーションで文字に2重下線を引く方法【改行にも対応可能】
文章を強調したいときに、2重下線で文字を装飾したいという場面があるかと思います。 CSSには2重下線を実装できるtext-decorationプロパティがありますが、 色を一色し... -
CSSでグラデーションカラーのテキストを実装する方法【コピペOK】
CSSではlinear-gradientなどの関数を使うことで、背景にグラデーションカラーを設定することができますね。 しかしこの関数はbackgroundプロパティにしか使えないため、... -
ホバーすると表裏が反転するカードをCSSで実装する方法
マウスホバー時に裏表が反転するカードをCSSで実装してみました。 以下のカードにマウスカーソルを当ててみてください。（SPの場合はタップ） このアニメーションをCSS... -
【コピペOK】CSSで立体感のあるボタンを作成する方法
CSSだけで、つい押したくなるような立体感のあるボタンを実装する方法を紹介していきます。 マウスカーソルを当てたとき、クリックしたときにボタンが押されているよう... -
Firefoxのブラウザ設定でbackdrop-filterを有効にする方法
backdrop-filterは要素の背後にぼかしや色変化などのグラフィック効果を適用することができるCSSプロパティです。 ブラウザ対応状況は、以下のようになっています。 “ba... -
【Glassmorphism】ガラス風のエフェクトをCSSで実装する方法
Glassmorphism（グラスモーフィズム）は、2021年に入ってから注目されている新しいデザインのトレンドです。 Mac OSのBig Surにも採用されており、半透明で背景がぼやけ... -
【CSS】要素にグラデーションカラーの影をつける方法【IE対策◎】
CSSには、要素に影をつけることができるbox-shadowプロパティが存在します。 このプロパティを使うことで、以下の例のように影のエフェクトを実装することができますね... -
【CSS】ulタグの丸が脈動するアニメーションを実装する方法
HTMLには、箇条書きリストを作成する際に使えるulタグがありますね。 ulタグでリストを作成すると、デフォルトでテキストの左側に丸がつきます。 箇条書きリストサンプ... -
【CSS】テキスト装飾に便利なストライプ柄の蛍光ペン風マーカーを実装する方法
ブログ上で文章を強調したいときには、「太字にする」「文字色を変える」「蛍光ペン風マーカーを引く」などの方法がありますね。 特に最近のサイトでは、蛍光ペン風のマ... -
【CSS】Google Mapの比率を保持しながらレスポンシブで埋め込む方法
サイト制作の案件では、Google Mapをページ上に埋め込むことがよくあります。 共有コードをサイトに貼り付けるだけで会社やお店の場所を載せることができるので、すごく...