cssで作るふきだしサンプル

たまに使う時になると思い出すのが大変なので、備忘録としてサンプルとともに。
共通css
.box{ position: relative; padding:20px; background:#ccc; width:5 ...background-size の使い方&サンプル

レスポンシブデザインが増えるにつれ使用頻度の多くなったbackground-size。
背景画像をレスポンシブ対応するときに活躍します。
今までぼんやりとした知識しかなかったので、ここらで勉強し直します。
...
footer コンテンツがあまりないときでもフッターを下にくっつけるcssとjavascript

ヘッダーやコンテンツ、フッターがあるサイトでコンテンツの中身が数行だったりするとフッターが宙に浮いた感じになってどうも見栄えが悪い時ってありますよね。
お問い合わせの送信完了ページとか。
そんな数行しか無いコンテン ...
position:fixed 利用時のアンカーの位置がずれるのを解決

ヘッダーにナビゲーションなどを固定するスタイルは最近良くみかけますよね。
私自身も何回か制作しました。
その時にちょっと手こずったのが、アンカーの位置がずれてしまうこと。
よく使う(と思われる)CSSセレクタ、要素のIE対応状況

この要素ってIE7から対応だったけ?IE8からだっけ?
と迷うことがよくあるので個人的に良く使うcss要素とセレクタのIE対応を一覧にしてみました。個人的メモ。
プルダウンメニュー(select)の文字サイズを変える

フォーム内で使われるselect メニューで文字を大きくしたかったんだけど、ちょっととまどったのでメモとして。
文字サイズ変更はselect要素に設定してみるも変わらず。。。
select{font-size:14p ...webフォント(Font Awesome)の使い方

ウェブサイトでアイコンを使いたいときに、画像ではなく、Webフォントを使って表現することって多くなりました。
手軽だし、サイズが変わっても荒くならないのもいいですよね。
いろいろなWebフォントサービスがありますが ...
CSSだけでボーターを重ねる

しばらく書くのをサボってしまいました–;
また今日から頑張ります。
やりたかったのはこんな感じのやつです。
一昔前なら、画像で表現していたと思うんですがスタイルシートでできるよなーと。
:nth-childの基本とIE対応

リスト、テーブルやカラムを並べるときに、:nth-child は大活躍の疑似クラス。
使い方の基本○番目のエレメントを指定する※3番目の場合li:nth-child(3){color:red;} 奇数、偶数を ...
いつも迷うfont familyの指定。CSS font familyフォント指定の基礎知識

新たにホームページを制作するときに毎回悩むfont family の指定。
自分の理解が足りていないのが原因なのですが。
改めて調べてみてまとめます。