hifi-dev

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

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

続きを読む

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

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

続きを読む

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

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

続きを読む

css3のcalc()で計算

jsで%からpx分引くことができないかと調べてみたらcssで可能との記事が。
それscssでは?と思ったがれっきとしたcss3のcalc()で計算が可能とのこと。
まったく知らなかったので少し調べて見ました。

続きを読む

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

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

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

続きを読む

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

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

続きを読む

Font Awesomeをcssで表示

続きを読む

スマホサイトによくあるドロワーメニューを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で、詳しい解説は省きます。

続きを読む

ページトップへ

© hifi-dev All Rights Reserved.
kenboh
profile
kenboh

follow