IE9でtableをdisplay:block;する
- 2016.10.24
- display:block, IE9, table
@media(max-width:640px){ table{ border-collapse:collapse; } th,td{ float:left; clear:both; } }
2016年10月
position:fixedした要素がスクロール中だけz-indexを無視される
- 2016.10.24
- iOS, position:fixed, スクロース, バグ
下に隠れてしまうdiv要素に以下のcssを指定することで解消される。 .content { -webkit-transform: translate3d(0,0,0); }
横並びリストを中央に寄せる
- 2016.10.24
- 装飾
ul { text-align: center; li { display: inline; } } ————- ul.ct{ left: 50%; margin: 0; position: relative; } ul.ct li { float: left; font-weight: bold; margin-right: 5px; left: […]
中央が浮き上がったようなシャドウを追加する
- 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 […]
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> < […]
googlemapでクリックしたマーカーを地図の中心に移動
- 2016.10.24
- GoogleMap
google.maps.event.addListener(marker09, "click", function (e) { ib.open(theMap, this); // 地図の中心を移動 var movePos = new google.maps.LatLng(34.675345, 135.499509); theMap.panTo(movePos); });
重なり合う下の要素をクリックする
- 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; }