コンテンツ幅よりも大きな動画で横スクロールバーを出さない方法

2015年4月9日 css , html

仕事でコンテンツ幅よりも大きな動画をキービジュアルとして使用することになったのですが、
横スクロールの処理に手間取ったので備忘録として残します。

続きを読む

contentプロパティを調べてみる

2015年2月25日 css , html

::before疑似要素や::after疑似要素で使用するcontentプロパティ。
あまり深く調べたことが無いので調べてみました。

続きを読む

css3のみでアコーディオン表現

2015年2月12日 css , html

jqueryなどで表現することが多いアコーディオンをcss3のみで作成してみました。

続きを読む

ブロックの内側にボーダーを表示

2014年12月20日 css , html

大枠のブロックの内側にボーダーを表示する必要があったので備忘録。

そもそも大枠に擬似要素position: absoluteをかけてボーダーを表示させていたが、
ブロック内のaタグが押せなくなるため内側に表示させるようにしました。

続きを読む

cssで透過背景をIE8位上に適応

2014年12月4日 css , html

透過背景をIE8以上に適応させるための備忘録。

続きを読む

スマホサイトによくあるドロワーメニューをcss3のみで作成

2014年11月7日 css , html

フェイスブックアプリなどにある画面横からスライドして出てくるメニューをcss3のみで作成。

対象ブラウザは以下を想定。IE9はアニメーションはしませんが動作はします。

• ios 4以上
• android 2.3以上
• IE10以上
• モダンブラウザ

続きを読む

スマホサイト横並びナビ

2014年11月5日 css , html

スマホサイトで横並びのボタンの作成に毎回手間取るので備忘録的にメモ。

サポートブラウザは以下を想定。

• ios 4以上
• andoid 2.3以上

htmlは以下の様な感じ。class=”btnType”でデザインする。
spanにclass名はいらないが、運用などで別のspanが追加されることの想定してとりあえず的に付けている。
labelに関しては、次の配置の際複数行の高さに対応するため、table-cellで上下中央にしている。
ただしheigthの高さが1行時の高さになるため、3行4行になるとキツイ。その場合はjsなどで対応した方がよいと思われる。
矢印アイコンはafterで、詳しい解説は省きます。

続きを読む