ブラウザの横幅に合わせてフォントサイズを変更する。概要 CSSでブラウザの横幅に合わせて、フォントサイズを変更します。方法はいろいろありますので、こちらは私の個人的な方法で備忘録になります。 施策 CSS htmlに設定します。大元であるhtmlに設定することでその中の […]Tag
CSS
12 entries
ブラウザの横幅に合わせてフォントサイズを変更する。概要 CSSでブラウザの横幅に合わせて、フォントサイズを変更します。方法はいろいろありますので、こちらは私の個人的な方法で備忘録になります。 施策 CSS htmlに設定します。大元であるhtmlに設定することでその中の […]
HTMLメール用にインラインCSSに変換する概要 OutlookのレンダリングエンジンがEdgeになるみたいですが、まだまだ、テーブルコーディング、インラインCSSが主流でコーディングが面倒で悩まされます。 今回はメルマガのHTMLメール用のコーディングをする際に […]
CSSで三角形を作る(clip-path版)概要 リンクのアイコンなどに使用する三角アイコンをCSSだけで作ります。以前、CSSで三角形を作る(border版)の記事を書いたのですが、その方法のclip-path版です。 ソース .triangleにスタイルを設定 […]
要素の境界線を斜めにする概要 要素の境界線を水平ではなく少し斜めにCSSでします。背景をグラデーションや画像にすることも可能です。 サンプル タイトル 文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文章です。文 […]
mask-imageでSVG画像の色を変える概要 色違いのSVG画像を使用したいけど、別ファイルにして作成するのも面倒くさいし、SVGをインラインで挿入してCSSで色を変えるもの、SVGインラインは可動性にかけてソース見づらいしみたいな時に使用する方法です。 ※色 […]
mask-imageで透過グラデーション概要 下記のように要素を透過グラデーションする方法です。これを使用すると背景に溶け込ませるようなグラデーションにすることができます。 サンプル HTML CSS mask-imageにlinear-gradientでグラ […]
ボーダーをグラデーション・角丸・背景抜きでCSSで実装するはじめに ボーダーの色をグラデーションにして角丸で背景抜きを実装したくて色々ググってみたのですが、なかなか見つからなくて唯一見つけた記事を参考に書かせていただいてます。 https://dev.to/afif/borde […]CSSで三角形を作る(border版)概要 リンクのアイコンなどに使用する三角アイコンをCSSだけで作ります。 私自身はclip-path版を推しています。こちらの記事もどうぞ。 https://ilr.jp/tech/889 実装結果 解説 な […]
CSSでスクロールスナップを実装できるscroll-snap-type要素ごとにスクロールするスクロールスナップをCSSで実装 実装結果 HTML 各要素A、B、C、D、Eを囲む要素を用意します。 CSS 囲った要素wrapにはscroll-snap-type: y mandatory; […]
要素の背後にぼかしなどの効果を加えるbackdrop-filterスタイルシートでもWindowsなどOSのウィンドウを開いたときに背後にぼかしがかかる効果を実装することができます。 実装結果 backdrop-filter HTML Style Sheet backdrop-filt […]
要素に連番を与えるcounter-incrementolタグで連番を与えることはできますが、それ以外の要素でも与えることができます。 HTML html構造としては連番を与えたい要素を囲みます。クラス「list」「item」はユニークな文字列でOKです。 Style Sh […]
行数を指定して文末を「…」で省略するline-clampCSSにはテキストを省略することができるtext-overflow: ellipsis;がありますが、1行しか省略することができません。 HTML text-overflow: ellipsis; 東京五輪の開会式を走る […]