ヘッダーをposition:fixedで固定してz-indexを指定した時、下位要素のリンクがクリック出来ない
ヘッダーメニューをposition:fixedで固定して下位要素をスクロールで上下にずらしていくようなページデザインをCSSで実装した際に、困ったこととその解決方法についてまとめました。
CSS
floatしたサイドバーをコンテンツの高さ100%に表示するCSS
先日、サイドバーを左に配置したレイアウトをコーディングしている時、サイドバーの背景色がコンテンツの高さいっぱいにならなずに途中で切れてしまいました。
その対処方法について、備忘録もかねて記事にします。
text-align:centerが効かない！text-alignは何に効くCSSか
テキストをセンター揃えにしたい時に、当たり前のように記述するtext-align:center;ですが、時々、text-align:centerが効かないように思う時があるんです。特にdivタグ、text-alignが効く時と効かない時があるような・・・。ちょっと苦労したので、text-alignの特徴について改めて整理してみました。
背景画像（background-image）を横幅100%、更に縦横比も維持するCSS【レスポンシブウェブデザインTIPS:RWD】
レスポンシブウェブデザイン（以下RWD）では、デバイスの幅に応じて、文字や背景画像の幅を可変させることになります。 その際、文字数に応じて高さを自動で可変させ、背景画像を横幅いっぱいに（100%）、更に縦横比も維持して表・・・
CSSでフッターをページ最下部にくっつけて固定する方法
ヘッダー、コンテンツ、フッターとHTMLを順にコーディングしただけだと、コンテンツの行数が少ないとフッターがコンテンツのすぐ下にくっついてしまい、画面下部 に余白ができてしまいます。CSSでコンテンツの行数にかかわらず、フッターを画面の最下部に固定する方法です。
コンテンツ全体などブロック要素を横中央（センター）に配置するCSS
ページ全体を横中央に配置するには、htmlのbodyより下の要素を全てdivタグでくくって、 そのdivにwidthで幅を指定して、更にmargin:0 autoを指定します。
CSS3で透明度を指定する方法
以前よくCSSで透明度って指定してたなーと思い、すっかりやり方を忘れてしまっていたのでいろいろ調べ、自分なりに消化し たことを今更感はありますがまとめておきます。 透明度は指定方法によって適用箇所が変わります。 下の例の・・・
