勉強したことのメモ

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

  関連記事

CSSでスタイルの優先

1つのファイルに対して複数スタイルが指定されている、 ということがたまにある。 ...

可変要素内の文字を丸める

可変の要素内の文字を丸めたかった。いつもであればPHPのmb_strimwidt ...

jQueryとCSSの連携

$(function(){ $("#change_small").click(f ...

スマホ用の有料デザインテンプレが9月内は無料でもらえた

envatomarketでスマホ用の有料デザインテンプレートが2014年9月内に ...

スマホサイトでviewportを指定しても横スクロールバーが表示される

スマホ用のサイトでviewportが指定されており、widthも100%になって ...

フォームCSS

body { font-family : 'メイリオ',Meiryo,'MS P ...

ページ内リンク(アンカーリンク)がずれる場合の対処法

ヘッダーに固定メニューを設置しており、コンテンツ部分でアンカーリンクを使うと固定 ...

ページング用CSS

div.pageNav { //これなくてもいいかも。 clear: both; ...

formのsubmitをボタンを無くしたり画像をつけたりCSSで装飾

aタグになっていたところをsubmitボタンに変えてほしいという修正依頼があった ...

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

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