中央が浮き上がったようなシャドウを追加する
- 2016.10.24
- 装飾
.box { position: relative; } .box:before { content: ""; position: absolute; z-index: -1; left: 20%; right: 20%; top: 50%; bottom: 0; border-radius: 700px 700px 700px 700px / 70px 70px 70px 70px; box-s […]
css/sass
2色ボーダー付きのタイトルを作成する
- 2016.10.24
- 装飾
◯タイトルテキストによって色付きラインの長さを変える場合 spanで色線の長さを可変させる <div class="hTitle"> <h3 class="heading"><span>事業内容</span></h3> </div> .hTitle { border-bottom: 3px solid #cccccc; he […]
リンクのクリックを無効にする
- 2016.10.24
- クリック
■css aタグのクラスに pointer-events: none; を設定。 反対に無効化したのを使用する際にはpointer-events: auto;を設定。 ——————– ■js $(function(){ $('a').click(function(){ return false; }) }); ※対 […]
背景を固定した状態でコンテンツをスクロールする
- 2016.10.24
- 背景固定
main要素をラッパーに、div要素でcontentを配置。 固定表示するコンテンツには「.cd-fixed-bg」、スクロールするコンテンツには「.cd-scrolling-bg」と入れ子のdivを加える。 <main> <div class="cd-fixed-bg cd-bg-1"> <h1>見出し</h1> </div> < […]
重なり合う下の要素をクリックする
- 2016.10.24
- クリック
重ねたpng画像の下にボタンが入っている場合など、下の要素をを押したい場合には、上に重なる要素のマウスイベントを無効化する。 .hoge{ pointer-events: none; }
IEでdisplay: inline-blockを使う
- 2016.10.24
- IE7, inline-block
li { display: inline-block; *display: inline; *zoom: 1; }
テーブルをレスポンシブに対応させる
.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; […]