フキダシのCSSを自動生成してくれる「cssarrowplease」がとっても便利


フキダシのCSSを自動生成してくれる「cssarrowplease」がとっても便利

CSSでフキダシを表現する際に自動でコードを生成してくれる「cssarrowplease」が、とっても便利だったのでご紹介します。

cssarrowplease



使い方は非常に簡単なので実際に使ってみましょう。

 

「Arrow configuration」で設定

以下の5項目を設定するだけです。

  • position: Top/Right/Bottom/Leftのいずれかを選択
  • Size: 矢印のサイズを設定
  • Color:フキダシ部分の背景色を指定
  • Border width: 枠線の幅を指定
  • Border color: 枠線の色を指定

入力していくと上のプレビューに反映されるのでビジュアルを確認しながら設定することが出来ます。
そして、設定が完了したら右側にCSSコードが下記出されているのでコピーすればOKです。

 

▼ 試しにいくつか作ってみました

サンプル1

サンプル1

sample1

▼CSSコード

 

サンプル2

サンプル2

sample2

▼CSSコード

 

サンプル3

サンプル3

sample3

▼CSSコード

 

サンプル4

サンプル4

sample4

▼CSSコード

フキダシ部分のサイズを大きくする場合、要素自体のサイズが小さいと表示がおかしくなってしまうのでサンプルでは要素内にpaddingを用いています。フキダシ部分の位置を少しずらしたい場合などは、書き出されたコードを基準にカスタマイズしていけばいいかもしれません。

それでは、良いフキダシライフを!




[記事公開日]2014/06/09

コメントを残す