IEでdisplay: inline-blockを使う
- 2016.10.24
- IE7, inline-block
li { display: inline-block; *display: inline; *zoom: 1; }
2016年
テーブルをレスポンシブに対応させる
.tableMin{ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } }
マウスホバーで画像を回転させる
.rotatePhoto { width: 300px; height: 300px; overflow: hidden; } .rotatePhoto img { transition: 0.5s; } .rotatePhoto img:hover { -moz-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); -o- […]
マウスホバーで画像を拡大する
.scalePhoto { width: 200px; heght: 200px; overflow: hidden; img { -moz-transition: -moz-transform 0.3s linear; -webkit-transition: -webkit-transform 0.3s linear; -o-transition: -o-transform 0.3s linea […]
clearfix用のmix-in
- 2016.10.24
- clearfix
@include clearfix; @mixin clearfix{ .clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after {clear: both;} .clearfix { *zoom: 1; &:before, &:after { display: block; […]
スクロールに合わせて要素を表示する
- 2016.10.24
- スクロール
<script> $(function(){ var setElm = $('.scrEvent'), delayHeight = 100; setElm.css({display:'block',opacity:'0'}); $('html,body').animate({scrollTop:0},1); $(window).on('load scroll resize',funct […]
スクロール位置を取得する
- 2016.10.24
- スクロール
// スクロール位置取得 var scrollPosTop = $(window).scrollTop(); //ウインドウTOP var scrollPosUnder = $(window).scrollTop() + $(window).height(); // ウインドウ下部 取得は、ロード時、スクロール時、リサイズ時に行う $(window).on('load scroll resize' […]
liと同じクラスの付いたdivを開閉する（メガメニュー）
- 2016.10.24
function megaMenu(){ $("#globalNav ul li").on('click', function(){ $('.megaMenu').hide(); $('div.' + $(this).prop('class')).slideDown('fast'); if ($(this).hasClass('active')) { $(this).removeClass('ac […]
スマートフォンをを回転させた際に、absluteしている配置がずれる（縦横変更）
width:100%、absoluteしたinnerを挟む。 <div class="content"> <div class="inner"> <p class="hoge">width:100%、absoluteしたinnerを挟む</p> <p class="fuga">fuga</p> </div> < […]
要素の後ろにアイコンを付ける
- 2016.10.24
- アイコン
aタグに付ける別窓指定アイコンなど、要素の後ろに画像を入れたい場合に用いる。 span { position: relative; &:after { background: url(../images/common/icon-window.png) no-repeat; @include background-size(cover); bottom: 50%; content: ''; […]