画像とテキストの横並びして、縦(垂直方向)中央揃えにする
画像とテキストを横に並べてなおかつ画像の縦方向の真ん中にテキストを置きたい時あります。サイトのヘッダーなどでロゴ画像とサイトタイトルを並べたい時など。。。
floatやflexboxを使っても良いのですがシンプルにインライ ...
擬似要素(::before,::after)でFontAwesomeや丸付き数字など特殊文字を表示する
CSSの擬似要素(::before,::after)のcontentプロパティにFont AwesomeのWebフォントの値や丸数字(丸付き数字①②③④⑤⑥⑦⑧⑨⑩)、♥や♠などのような特殊文字を表示する方 ...
印刷用CSSスタイルシートをデバッグしたい

印刷用のスタイルシートを修正したいとき、修正箇所などを確認する方法。
Google Chromeで簡単に確認できるのを知りました。
1)デベロッパーツールを開く
2)右側のXの横にあるメニューをクリ ...
今更学んだ「テキスト変換する前の文字が見えない」原因

お恥ずかしいでところですが、初めてその状況になって初めて学んだこと。
フォームで、テキストを打っている時、違和感が。。。
よくよくみると、変換する前の文字がなぜか消えてる!?
原因は、CSSの設定でした ...
センタリング(中央揃え)のまとめ

テキストや要素をセンタリングするのにちょっくら迷ったのでこの機会にまとめておくことに。
text-align:centerを使う最もカンタンと思われる方法。
但し、インライン要素にしか効かない。
なんで効か ...
:first-child の使い方を勘違いした

:first-child擬似クラスは、IE7から対応しているためよく使われる擬似クラスですよね、何度も使っていたにもかかわらず勘違いしたので戒めとして書き記しておきます。
:first-child擬似クラスは、親要素の一番 ...
レスポンシブデザインのテーブルレイアウト

レスポンシブデザイン時のテーブルレイアウトの一つの参考。
600px以下で表示したときには、セルの幅が狭くなり過ぎて見づらくなるのを解消するため、横スクロールさせる。
幅600pxのテーブル
見出しA見出 ...cssで作るふきだしサンプル

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

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

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