現状のHPを無料で診断いたします。
お気軽にお問い合わせください。
お役立ち
ニッティ・グリッティの
お役立ち情報
CSSで吹き出しを作る方法 その2
UPDATE :
投稿者 : ニッティ・グリッティ
さてCSSで吹き出しを作る方法、次は、SVGを利用する方法が紹介されていますが、まずSVGの確認をしていきましょう
SVGファイルとは（スケーラブル・ベクター・グラフィックス、Scalable Vector Graphics）の略で、画像形式の一種です。
よくあるJPEGやPNGとかと同じ仲間ですね。
ただし、SVGはよく使われている画像形式と比べて、下記のような違いがあります。
・GIF、JPEG、PNGなどは「ラスタ形式」、SVGは「ベクトル形式」
・ベクトル形式は拡大縮小しても劣化に強い
・写真のように複雑な画像には「ラスタ形式」、単純なロゴ画像には「ベクトル形式」が適している
・SVGファイルはテキストエディタで編集可能
つまり、SVGファイルはテキストで記載ができる画像形式です。
SVGの詳細については、ここでは触れませんが、詳細な説明が下記にありますので、気になる方はご覧ください。
https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial
さて、それでは今回のコードを見てみましょう！
| <svg> <clipPath id=”tooltip” clipPathUnits=”objectBoundingBox”> <path d=”M1,0H0v0.9302195h0.4483962C0.477628,0.9342086,0.5003342,0.9639273,0.5003369,1h0.0000107 c0-0.0360727,0.022709-0.0657914,0.0519407-0.0697805H1V0z”/> </clipPath> </svg> |
SVGはこの部分で、切り抜きの形を定義(id=”tooltip”)しています。そして、次の部分(url(#tooltip)) で切り抜いています。
| .tooltip { clip-path: url(#tooltip); |
clipPathUnits=”objectBoundingBox”という属性がついていますが、これを付けると要素に対して相対的にクリップできるようになります。
これを使わないと、伸縮する要素に対応できません
そして、<path d=の部分で、吹き出しの形を指定しています。
pathの指定が大変ですが、こんなジェネレーターもあるようです
https://codepen.io/anthonydugois/pen/mewdyZ
ランキング
BLOG
お役立ち情報
-
雑に選んでいませんか？フォントでデザインに表情をつけよう！
2024.12.03
CATEGORY
お役立ち情報 -
【初心者さん必見！】使えると超おしゃれ！「ブレンドツール」とは！~イラレの便利機能紹介Part6~
2024.12.02
CATEGORY
お役立ち情報 -
テンプレートで簡単!?もう悩まないプレゼン資料作成!
2024.11.28
CATEGORY
お役立ち情報 -
ホームページ集客のコツとは？コンサルティング会社が紹介！
2023.08.21
CATEGORY
お役立ち情報 -
IT導入補助金のご案内
2023.08.07
CATEGORY
お役立ち情報 -
【3分でわかる】Threads（スレッズ）とは？登録方法やTwitterとの違いをご紹介
2023.07.07
CATEGORY
お役立ち情報
