コンテンツ幅よりも大きな動画で横スクロールバーを出さない方法
仕事でコンテンツ幅よりも大きな動画をキービジュアルとして使用することになったのですが、
横スクロールの処理に手間取ったので備忘録として残します。
css3のcalc()で計算
jsで%からpx分引くことができないかと調べてみたらcssで可能との記事が。
それscssでは?と思ったがれっきとしたcss3のcalc()で計算が可能とのこと。
まったく知らなかったので少し調べて見ました。
ブロックの内側にボーダーを表示
大枠のブロックの内側にボーダーを表示する必要があったので備忘録。
そもそも大枠に擬似要素position: absoluteをかけてボーダーを表示させていたが、
ブロック内のaタグが押せなくなるため内側に表示させるようにしました。
スマホサイトによくあるドロワーメニューをcss3のみで作成
フェイスブックアプリなどにある画面横からスライドして出てくるメニューをcss3のみで作成。
対象ブラウザは以下を想定。IE9はアニメーションはしませんが動作はします。
- ios 4以上
- android 2.3以上
- IE10以上
- モダンブラウザ
スマホサイト横並びナビ
スマホサイトで横並びのボタンの作成に毎回手間取るので備忘録的にメモ。
サポートブラウザは以下を想定。
- ios 4以上
- andoid 2.3以上
htmlは以下の様な感じ。class=”btnType”でデザインする。
spanにclass名はいらないが、運用などで別のspanが追加されることの想定してとりあえず的に付けている。
labelに関しては、次の配置の際複数行の高さに対応するため、table-cellで上下中央にしている。
ただしheigthの高さが1行時の高さになるため、3行4行になるとキツイ。その場合はjsなどで対応した方がよいと思われる。
矢印アイコンはafterで、詳しい解説は省きます。