CSS

たまに使う時になると思い出すのが大変なので、備忘録としてサンプルとともに。

共通css

.box{ position: relative; padding:20px; background:#ccc; width:5 ...

レスポンシブデザインが増えるにつれ使用頻度の多くなったbackground-size。
背景画像をレスポンシブ対応するときに活躍します。
今までぼんやりとした知識しかなかったので、ここらで勉強し直します。

...

ヘッダーやコンテンツ、フッターがあるサイトでコンテンツの中身が数行だったりするとフッターが宙に浮いた感じになってどうも見栄えが悪い時ってありますよね。
お問い合わせの送信完了ページとか。

そんな数行しか無いコンテン ...

ヘッダーにナビゲーションなどを固定するスタイルは最近良くみかけますよね。
私自身も何回か制作しました。
その時にちょっと手こずったのが、アンカーの位置がずれてしまうこと。

<div id="header"& ...

この要素ってIE７から対応だったけ？IE8からだっけ？
と迷うことがよくあるので個人的に良く使うcss要素とセレクタのIE対応を一覧にしてみました。個人的メモ。

A > BAの直下の子セレクタに適用する。子供セレク ...

フォーム内で使われるselect メニューで文字を大きくしたかったんだけど、ちょっととまどったのでメモとして。

文字サイズ変更はselect要素に設定してみるも変わらず。。。

select{font-size:14p ...

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

いろいろなWebフォントサービスがありますが ...

しばらく書くのをサボってしまいました–;

また今日から頑張ります。

やりたかったのはこんな感じのやつです。

一昔前なら、画像で表現していたと思うんですがスタイルシートでできるよなーと。

リスト、テーブルやカラムを並べるときに、:nth-child は大活躍の疑似クラス。

使い方の基本○番目のエレメントを指定する
※3番目の場合li:nth-child(3){color:red;} 奇数、偶数を ...

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

font familyの記述方法font-family: フ ...