webOpixel

HTML&CSS

レスポンシブでハンバーガーメニューになる固定サイドバー

Posted: 2017.09.21 / Category: HTML&CSS, javascript / Tag: jQuery

近年ではモニターサイズが広くなってきた影響もあり、サイドバーを固定表示させてるサイトが多くみられるようになった気がします。
そこでここでは画面が狭くなるとハンバーガメニューになるレスポンシブに対応した固定サイドバーの作成方法をご紹介します。

Posted: 2017.05.25 / Category: HTML&CSS / Tag: CSS3, アニメーション

CSS3のキーフレームを使えばループアニメーションが簡単にできるようになります。
今回はbackgroundにストライプ画像を設定してループさせてみます。

Posted: 2017.04.28 / Category: HTML&CSS

HTMLでカレンダーを作成するときテーブルタグで作る事が多いと思いますが、レスポンシブでスマホサイズにした時は縦組みにする方法をご紹介いたします。

Posted: 2017.02.28 / Category: HTML&CSS / Tag: CSS3

Flexboxベースのグリッドシステムもいろいろで出てきている昨今でありますが、整理も兼ねて一度挑戦してみたいと思います。

Posted: 2016.12.14 / Category: HTML&CSS / Tag: CSS3

チェックボックスをCSSでカスタマイズしてカードタイプ風にしてみます。
ついでにチェックした時のアニメーションも作ってみます。

Posted: 2016.11.28 / Category: HTML&CSS / Tag: CSS3

コンテンツがウィンドウの高さより少ない時だけ画面下にフッターを配置する方法はいろいろありますが、CSS3のFlexboxレイアウトを使用すればかなりスマートにできます。

Posted: 2016.09.13 / Category: HTML&CSS / Tag: CSS3

IEのサポートが最新のバージョンだけとなりましたので、そろそろPCサイトもFlexboxでレイアウトしてもいいのではないかという環境になりつつあります。
ということでFlexboxレイアウトの基礎的な部分を解説いたします。