css

印刷用のスタイルシートを修正したいとき、修正箇所などを確認する方法。

Google Chromeで簡単に確認できるのを知りました。

1）デベロッパーツールを開く

2)右側のXの横にあるメニューをクリ ...

お恥ずかしいでところですが、初めてその状況になって初めて学んだこと。

フォームで、テキストを打っている時、違和感が。。。
よくよくみると、変換する前の文字がなぜか消えてる!?

原因は、CSSの設定でした ...

テキストや要素をセンタリングするのにちょっくら迷ったのでこの機会にまとめておくことに。

text-align:centerを使う

最もカンタンと思われる方法。
但し、インライン要素にしか効かない。
なんで効か ...

:first-child擬似クラスは、IE７から対応しているためよく使われる擬似クラスですよね、何度も使っていたにもかかわらず勘違いしたので戒めとして書き記しておきます。

:first-child擬似クラスは、親要素の一番 ...

レスポンシブデザイン時のテーブルレイアウトの一つの参考。

600px以下で表示したときには、セルの幅が狭くなり過ぎて見づらくなるのを解消するため、横スクロールさせる。

幅600pxのテーブル

見出しA見出 ...

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

共通css

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

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

...

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

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

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

<div id="header"& ...

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

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