Instagramで使える写真効果をピュアCSSで再現
Instagram.css – Pure CSS Instagram filters Instagramで使える写真フィルターを、CSSのfilterやbox-shadowを使って表現！すごいねー。githu […]
tag: CSS
コンテンツの高さが足りないページでも、フッタをブラウザの一番下に固定する
Webサイトで、特定のページだけコンテンツ部分の高さが足りなくて、フッタの下に余白ができてしまうことがよくある。昔はwindow.onresizeにスクリプト書いて高さを調節して…ってやってたけど、calcを使えばCSS […]
paddingとcalcでブロックのセンタリング
セクションごとに横幅いっぱいの背景色がコロコロ変わるサイトを見てて、divの数が増えそうでやだなーと思ってたところでふと思いついたのでメモ。 margin: 0 auto;でセンタリング(よくある方法) .wrap { […]
Responsive.jsとremを使って、どの端末で見てもデザイン通りの比率のサイトを構築する方法
・Responsive.jsの紹介記事はこちらから CSS3の単位の一つ、remはすごく便利で、基準の大きさを決めてこれを使えば、全て相対的なサイズでサイトを構築できる。詳しい説明は以下から。 ・remってなに？  […]
レスポンシブサイトで印刷用レイアウトを保つ
印刷時の「拡大・縮小」の解釈がいまいち分からず難儀したけど(ブラウザによっても違うし…)、要はbodyを固定幅にすれば崩れることはなくなる。そこから印刷用の縮小をしてもいいんだけど、そうではなくCSSのtransform […]
CSSのIDセレクタ使うかどうか問題
CSSのIDセレクタは使わないというルールを設けてるコーディング規約ってありますよね。そのメリットを解説するようなブログ記事もたまに話題になっています。使わない理由としては、再利用性の低下やセレクタの優先順位がclass […]