上下左右中央ぞろえしたい子要素にこちらを設定。
親要素にはposition:relative;
.soroetai{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: 任意の値
height: 任意の値
}
参考ページ
http://c-brains.jp/blog/wsg/14/08/06-100100.php
http://hyper-text.org/archives/2014/08/position_absolute_center_layout.shtml
最低対応ブラウザがIE6対応からIE8対応にアップデートされました。
いろいろ解禁されたので、個人的に整理しておきます。
こちらを当ててあげます
html5shiv.js
selectivizr.js
こちらを当てて対応できる部分は解禁してしまって大丈夫です。
IE6において、フロートしている要素に横マージンを指定すると幅が二倍になるというバグがありました。
でもIE8以上対応の場合、無視して大丈夫ですね。
IE6において、overflow:visible;を行い、子要素が親要素より大きかった場合、表示が変になっていました。
IE8ではキレイに表示されます。
IE6では使えなかった透過pngも使えるようになりました。
ただし透明度の変更には対応していないので注意が必要です。
一応いろいろすれば対応できるという話もあるのですが、弊社では基本的には対応していません。
リキッドレイアウトがしやすくなりますね！
微調整も行いやすくなります。
ベンダープレフィックスはつけておきましょう。
-webkit-box-sizing : border-box ; -moz-box-sizing:border-box; box-sizing:border-box;
普通に使えるようになりました！
DOCTYPE宣言をしないと使えないという報告が上がっています。
http://blog.livedoor.jp/webprog/archives/1422035.html
inline-blockやtableなどなどが使えるようになりました！！
詳しい対応情報はこちらです。
http://builder.japan.zdnet.com/html-css/sp_css-firefox-safari/20373825/
コチラに詳しいのですが、できることが増えました。（IE6のバグだったのですが……）
http://css-eblog.com/ie-css-problems/ie6-multiple-class.html
IE8は最低限読めればいい場合は、装飾だけならCSS3を使ってもいいかもしれません。
角丸の表現は便利ですね。
ベンダープレフィックスについては下記が詳しいです。
http://kojika17.com/2013/02/ordering-vender-prefix.html
http://caniuse.com/
このメモは2014年7月18日に公開しましたが、適宜追記します。
背景画像を簡単にパララックス。
jQuery1.7.2で動作確認済み。
bodyに対して隙間なく背景を敷いておいて、下記を実行。
$(function() {
$(window).scroll(function() {
var value = $(this).scrollTop();
var value = value*2 + 'px'
$('body').css('background-position', '0 '+ value);
});
});
3行目で現在のスクロールの値をとる。
4行目でずらす値を生成する。たとえば*2の値を変えると、パララックスするスピードも変わる。
ゆっくりにしたい場合は/2とかでもいいかも。
無限スクロールができる便利なjQueryプラグインinfinite-scroll
http://www.infinite-scroll.com/
新しく表示される要素をフェードインさせてみた。
7行目。fadeInの数字を変えるとフェードインする早さも変わる。
$('#mainWrap').infinitescroll({
navSelector : '.nextBox',
nextSelector : '.nextBox a',
itemSelector : 'article',
dataType : 'html'
},function(newElements, data, url){
$(newElements).hide().fadeIn(1000);
});
IE8で jQueryのopacityアニメ（fadeIn fadeOutなどなど）をする際の注意点。
ただし、IE8には別の問題がある。それは、positionがrelativeだったりabsoluteだったりする場合、その要素の透明度がアニメーションしないっていうもの。これを避けるためには、フェードさせる要素の中にあるすべての要素を、全部float中心でレイアウトしないとならない。
引用元
http://hamalog.tumblr.com/post/5578274182/jquery-opacity-ie6-7-8
Flashの上にライトボックスUIを使う場合。
Firefoxで見た時に、ライトボックスの背景の上に動画が表示されてしまうことがあります。
swfを表示するobjectタグとembedタグに、wmodeオプションを付加しておきましょう。
wmode="transparent"
参考ページです。
http://www.drk7.jp/MT/archives/001434.html
youtube動画の上にライトボックスUIを使う際の設定と同じですね。
http://kachibito.net/web-design/youtube-zindex-with-jquery.html
あと、確認していませんがなんだか追加で不都合も発生するみたいです。
http://d.hatena.ne.jp/nacbox/20100729/1280387880
http://labs.spiffield.net/archives/158
ストレッチもできるっぽい。
Android2.3
iOS7 safari chrome
にて、動作確認済み。
<div class="demo">
<p>天地の中央に配置</p>
</div>
.demo p {
position: relative;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
}
WordPressのコアの標準設定を使う場合
function.phpに下記を追加
add_filter( 'jpeg_quality', function( $arg ){ return 100; } );
参考
WordPressにアップロードしてリサイズされたJPG画像の画質を1行のコードで改善させる
もしくは。
ImageMagick Engine
というプラグインを使う。
詳しい説明はコチラ
WordPressで自動で生成されるサムネイル画像の画質（クオリティ）を設定する方法 ImageMagick Engine
画面の縦の高さが足りない時
フッターを画面の最下部にくっつけるというアプローチもいい。
だが今日は背景色をいろいろ追加するデザインをいただいていて、
bodyとフッターの背景色を別色に設定していた。
なので、フッターの高さを画面ピッタリにして調整するというアプローチをしてみた。
windowsの
IE8 IE11 chrome33 safari5
で検証済み
$(function(){
footerHeight = function (){
var footerWrap = $('div#footerWrap');
//フッターの高さをリセット
footerWrap.css({height:'auto'});
//フッターのトップからの距離
var ft = footerWrap.offset();
//フッターの高さ
var fh = footerWrap.height();
//ウィンドウの高さ（スクロールバー領域を含む）
//var wh = window.innerHeight;
//ウィンドウの高さ（スクロールバー領域を含まない）
var dh = document.documentElement.clientHeight;
if(ft.top+fh<dh){
/* ウインドウの高さから、フッターのトップからの距離分と、フッターのボーダーの分引いた値がフッターの高さです */
var fh = dh - ft.top - 2 + "px";
footerWrap.css({height:fh});
}
};
window.onload = function(){
footerHeight();
}
$(window).resize(function() {
footerHeight();
});
});
IE8からAndroidまでワンソースで対応できちゃう
Media Element.JS
っていう動画プラグインがある。
WordPressの動画再生部分のコアにも採用されてるところからも、
優秀さが伺えるんだけど、
それのレスポンシブ対応に迷ったのでメモ。
記述があったのはこちら
http://coolestguidesontheplanet.com/videodrome/mediaelementjs/
普通に設置して、
縦横指定するところに
style=”width:100%;height:100%;”
width=”100%” height=”100%”
を追加。
これで、縦横幅は親要素依存にできます。
タネがわかれば簡単なのだけど、すごく目鱗だな……！
<video id="my_video_1" style="width:100%;height:100%;" controls="controls" width="100%" height="100%" preload="auto" poster="my_video_poster.png" <source src="my_video.mp4" type='video/mp4'> </video>