ここに掲載の記事は備忘録的内容です。詳細な説明に欠ける部分が多々あります。ご了承ください。
flexboxはfloatをなくす！かも。
これまではfloatをつかっていたbox揃えがflexboxで出来る。 とても簡単だ。モーダルな構成にもとても楽だろう。 問題は対応ブラウザ。旧ブラウザでどこまで表示出来るのか確認が必要。 参考にさせてもらったページに詳 […]
いい加減覚えよう！footer最下部
毎回ググってるような気がするのでメモ。 htmlが以下のような場合 以下の指定でOK。 その上でfooterに以下を。
CSS3によるアニメーション効果について
クライアントさんサイトのトップページに実装した縮小しながらフェードインするキャプション。 Jqueryなどを使わずにできるのがとても便利だが、古いブラウザでは動作しない可能性大。 最悪動作がなくても困らない状況での使用に […]
要素が横に増えるサイトの実装方法
縦書きページでは、横にコンテンツが増えていく構成になっているため、 従来は都度、横幅の値を指定していた。 しかしこれは自分でサイトの書き込みなどをしてもらうには面倒だ。 そこで探してみたのが以下のサイトでの方法。 ありが […]
Fullscreenをcss3で
とても簡単にFullscreen表示ができるのでメモ。 ただしIE8以前のIEには適応外！
safai chromeでbox-shadowが効かない！
wpのcontactform7でformを設置、inpiut枠をbox-shadowで装飾したら Firefoxでは正常に表示。しかしsafariとchromeが黒いborderになるだけ！ しかしfocusすると反映。 […]
android Chromeで文字が大きくなってしまう件
Chromeのバグらしいが、部分的に文字が大きく表示されてしまう現象があり、 その対処方法を。 当該部分に max-height: 100%; または max-height: 999999px;をあてると解消する。 実際 […]
inline-blockでボックス並べる場合の注意
floatの代わりにinline-blockでボックスを横に並べる場合、指定以外の隙間がでる。 いくつかやり方があるようだが完全版としては今のところ以下の ような指定でいける。 大事なのは以下。 と で全体的にはこのよう […]
画面サイズに対応した画像の拡大縮小のCSS
ロゴマークなどの画像をモバイル用など画面のサイズによって 拡大縮小させる場合のcss。 @media (max-width: 780px)の中に以下を
レスポンシブな%指定の注意
ページ内で要素位置を％で指定する場合、 ではなく の方が良い場合がある。 例えばKUREAIのInformationページのロゴの位置と 文章の位置は大きい画面では問題ないが、極小さい 画面の場合、top: 10%;では […]