背景画像(background-image)を横幅100%、更に縦横比も維持するCSS【レスポンシブウェブデザインTIPS:RWD】

rwd01

rwd01

レスポンシブウェブデザイン(以下RWD)では、デバイスの幅に応じて、文字や背景画像の幅を可変させることになります。 その際、文字数に応じて高さを自動で可変させ、背景画像を横幅いっぱいに(100%)、更に縦横比も維持して表・・・

続きを読む

川崎市 藤子・F・不二雄ミュージアム(ドラえもんミュージアム)に行ってきました!

doraemon-03

doraemon-03

ドラえもんの作者【藤子・F・不二雄】(藤本弘)先生の漫画家人生を、作品とともに辿ることの出来 るミュージアムです。 この記事では藤子・F・不二雄ミュージアムについてレポートしながら、行った感想や反省点など、これから行こうと思っている 人の参考になるような記事を書きたいと思います。

続きを読む

CSSでフッターを最下部に固定する方法

footer

footer

ヘッダー、コンテンツ、フッターとHTMLを順にコーディングしただけだと、コンテンツの行数が少ないとフッターがコンテンツのすぐ下にくっついてしまい、画面下部 に余白ができてしまいます。CSSでコンテンツの行数にかかわらず、フッターを画面の最下部に固定する方法です。

続きを読む

CSS3で透明度を指定する方法

以前よくCSSで透明度って指定してたなーと思い、すっかりやり方を忘れてしまっていたのでいろいろ調べ、自分なりに消化し たことを今更感はありますがまとめておきます。 透明度は指定方法によって適用箇所が変わります。 下の例の・・・

続きを読む

vertical-alignが効かない時の対処法(テキストを縦中央揃えにするには)

vertical-align

vertical-align

h1やpタグなどのブロック要素内のテキストを縦中央にする場合、vertical-align:middle;は効きません。vertical-alignはインライン要素とテーブルセルでしか効かないんです。では、ブロック要素内のテキストを縦中央にしたい場合どうすればいいのでしょうか。先日、これに苦しんだのでまとめておきます。

続きを読む

次ページへ »