cssスプライト的なパラパラアニメ用の画像を作る必要がある時のいろいろ逆引きメモ。
小さめの画像で作るとき
CSS Sprite Generatorがとても優秀。
photoshopで作るとき
大きめの画像は上記のウェブアプリだとダウンロードできないことがある。
画像を連番のレイヤーに並べたのちに、
こちらのスクリプトを使うととても便利でした。
http://www.openspc2.org/projectX/Photoshop/0086/
カテゴリー: css
iphoneやAndroid2.3でもちょっとはマシな背景画像fix方法
iphoneやAndroid2.3で背景画像固定を実現する方法のメモ。(要jQuery)
まずは横幅640px
縦幅適当（iPhoneの縦の高さをカバーできるくらい）の画像を用意。
html
<html> <header> <!--略--> </header> <body> <div id="main"> <p>コンテンツ</p> </div> </body> </html>
js
これで背景画像を追加してます
$(function(){
$('body').prepend('<img src="img/bg_sub02.jpg" id="allBg">');
});
css
背景画像をfixedさせて、z-indexをメインのコンテンツより下に。
メインのコンテンツを背景画像よりz-index上にしてposition:relativeする。
横幅を100%にするかはお好みで。
/*body*/
body{
background-color: #000;
}
/*背景の設定*/
body #allBg{
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
#main{
position: relative;
top: 0;
left: 0;
z-index: 2;
}
ソーシャルボタンをきれいに横に並べるスニペット
ソーシャルボタンをきれいに横に並べるのに嵌ったので……。
ソーシャルボタンは種類が多いし、ときたまソースが変わるので、これがいつまで持つかはわからないのですが。
<div id="social">
<div class="twitter">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://example.com/" data-count="none">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div class="facebook">
<div class="fb-like" data-href="http://example.com/" data-width="80" data-layout="button" data-show-faces="false" data-share="false"></div>
</div>
</div>
#social img {
width: 100%;
line-height: 0 !important;
vertical-align:top;
}
#social .facebook,
#social .twitter{
display: inline-block;
height: 20px;
overflow: hidden;
line-height: 0 !important;
vertical-align:top;
width: 80px;
text-align: right;
}
#social .facebook {
width: 70px;
}
#social .facebook span{
vertical-align:top !important;
}
スマートフォン用にアニメーションをjQueryとcss3で作ったので便利だったページをメモ
PCサイト用のFlashをスマートフォン用にjQueryとcss3で書きなおしました。
便利だったページをメモします。
基本機能を確認
jQueryの日本語リファレンス
http://js.studio-kingdom.com/
jQueryのイージングプラグインの動きまとめ
http://easings.net/ja
CSS3でアニメーション！transitionとanimationまとめ（サンプル付き）
http://www.flapism.jp/html/416/
ベンダープレフィックスの扱い
ベンダープレフィックスの整理整頓
https://w3g.jp/blog/vendor_prefix_cleaning
ベンダープレフィックスの順序
http://kojika17.com/2013/02/ordering-vender-prefix.html
Androidの限界
@keyframesとAndroid（CSS3のアニメーションのバグのまとめ）
http://blog.webcreativepark.net/2012/02/12-141313.html
Android2.3ではCSS3でイージングは使えないみたい。
回転軸の指定とかも難しいかも。
あと、Android2.3ではメモリの限界？で、同一画面内で複数箇所以上アニメーションさせると動かなくなりました。
どの要素をアニメーションさせるか取捨選択は必要ですね。
上下左右中央揃えcss（IE8から対応！）
上下左右中央ぞろえしたい子要素にこちらを設定。
親要素には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
上下中央揃えcss（IE9以上）
ストレッチもできるっぽい。
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%);
}
Media Element.JSをレスポンシブ（拡大縮小）対応する方法
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>
webkit系のborder-radiusバグのメモ
webkit系でborder-radiusプロパティを使いスライドをした場合バグる。
http://webpad.felicyle.com/coding/webkit-border-radius/
webkit border-radiusとposition absoluteを組み合わせると不具合
http://hai3.net/blog/2012/07/31/webkit-border-radius%E3%81%A8position-absolute%E3%82%92%E7%B5%84%E3%81%BF%E5%90%88%E3%82%8F%E3%81%9B%E3%82%8B%E3%81%A8%E4%B8%8D%E5%85%B7%E5%90%88/
percentage値は
・古い Chrome と Safariでサポートされていません（2010 年 9月に修正されました）
・Opera 11.50 以前ではバグがあります
・Gecko 2.0 (Firefox 4) 以前では非標準な方法で実装されています。縦横どちらの半径も、ボーダーボックスの幅に関係していました。
・古い iOS (5 以前) と Android (WebKit 532 以前)ではサポートされていません
https://developer.mozilla.org/ja/docs/Web/CSS/border-radius
う～ん。なんということだろう。
アニメーションしたりするとハマるよね。
初めから対応機種ほうがいいかもね。
情報提供していただいた上記サイトに感謝です。
youtubeの横幅をストレッチ可能にする
素晴らしいです。助かりました。有難うございます。
<div class="video-container"> <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe> </div>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
IE8でテーブルのpaddingがおかしかったけどtable-layout: fixed;で治った【その後追記あり】
IE8でテーブルのthやtdの paddingが計算されていないような挙動をしていた。
でも
table-layout: fixed;
で治った。
【追記】
だけど描画方法を直すと横幅の見た目が変わるので注意が必要。
そもそもの原因は、
table-layout: fixed;が無い状態で、
paddingを設定したtdの隣のtdのpテキストが、
横幅より長かったのがいけなかったらしい。なんだそれ……。
下記みたいな▼▼
td class=”index”にwidthとpaddingを設定した
ソースを
<table class="formtable"> <tr> <td class="index"><br></td> <td colspan="3"> コンテンツ </td> </tr> <tr> <td class="index"><br></td> <td colspan="3"> <p class="attention">長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト</p> </td> </tr> </table>
こんなふうに▼▼
二つのテーブルに分けたら解消した。なんでやねん……。
<table class="formtable"> <tr> <td class="index"><br></td> <td colspan="3"> コンテンツ </td> </tr> </table> <table class="formtable"> <tr> <td class="index"><br></td> <td colspan="3"> <p class="attention">長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト長いテキスト</p> </td> </tr> </table>
【2015年1月追記】
IE8限定の現象。
tableのtdに対してbox-sizing:border-boxを設定した状態で、
横のpaddingを%で指定するとうまくいかない。
こちらは、px指定にすることによって回避。
参考サイト様
http://www.htmq.com/style/table-layout.shtml
http://html-coding.co.jp/knowhow/tips/000219/