勉強したことのメモ

webプログラマが勉強したことのメモ。

LINE風のふきだしデザイン

      2014/05/23

LINE風のふきだしデザインでページを作ってほしいと言われた。

CSSはあまり理解していないのでどうしたらいいものかと悩んだところ
良いサンプルがあったのでメモ。

■参考サイト
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/
http://nicolasgallagher.com/pure-css-speech-bubbles/demo/default.css

 

■ソース

 

CSS呼び出して<p>タグで囲んで必要なclassをつけるだけ。
CSSだけでふきだし出来るとかびっくり。

 

※2014/01/12 サンプルとソース追記

 - CSS

  関連記事

firebugでCSSパスをコピー

要素を調査⇒右クリック⇒CSSパスをコピーできる。 jQueryでのセレクタ指定 ...

CSSでセンターリング

<center></center>でセンターリングが出来 ...

CSSでマウスカーソルの変更

マウスカーソルはCSSで任意に決められるみたい。 リンク時に一律させた方がよいと ...

要素の表示or非表示

今まで要素の表示or非表示をCSSで操作する際、 display:none; / ...

CSSで一つの要素に対して複数の背景色を指定する方法

divの要素に対して複数の背景色をつけたかった。background-color ...

CSSとJavaScriptでテキストのコピー防止

あるサイトで文言の意味が分からずGoogleで検索する為にコピペしようとするも、 ...

Flash上にHTMLの文字やリンクを重ねる方法

FlashにHTMLで文字を書きたかった。そのまま書くのは無理だろうけどCSSか ...

CSSのdisplayについて

よく使うdisplayだけれども、noneとblock以外で 初めて使うことがあ ...

スクロールしても追尾する要素をCSSで作成

コンテンツ内をスクロールしても追尾してくる要素を作成したかった。以前にMeeka ...

CSSで1つの要素に複数classを設定して画像を入れ替える

メニューリンクで通常時の画像、マウスオーバー時の画像、アクティブ時の画像をそれぞ ...