ゲマステ!- Gamers Station

ゲーマーズステーション | ゲームを中心に、動画・ブログ制作などのネットコンテンツ全般からレビュー情報まで分かりやすく紹介

HP・ブログ関連

吹き出しを作るためのCSSが簡単に生成できるおすすめサイト

2019年4月8日

ホームページやブログでよく見られる"吹き出し"を、画像を使用せずにCSSのみで作りだす際に役に立つサイトさんをご紹介します!

↓ ちなみにこのような感じの"吹き出し"が簡単に生成できます

cssarrowplease.comへのアクセス

http://cssarrowplease.com/

上記の"cssarrowplease.com"さんのサイトにアクセスしてください。

アクセスすると以下のような画面が出てくると思います。

このサイトの数値をいじることで、吹き出しを自由にカスタマイズできます。

以下、パラメータの説明

  • Position:吹き出しの三角の上下左右の位置を決定します
  • Size:三角形の大きさをピクセルで指定
  • Color:吹き出し内の背景色を指定
  • Border width:縁枠の太さを指定
  • Border color:縁枠の色を指定

吹き出しのカスタマイズの完了後、この枠内に表示されているCSSをコピーして、class属性を適用することで 吹き出しを生成することができます。

その他

ちなみにCSSの以下の枠線で囲った部分で、吹き出しの三角形の位置を指定することができます。

また、以前の記事で紹介したCSS生成サイトも利用することで丸みとグラデーションを帯びた吹き出しを作ることもできるので、 是非色々とカスタマイズしてみてください!

-HP・ブログ関連
-, , , , , , ,

Copyright© ゲマステ!- Gamers Station , 2019 All Rights Reserved.