2015年2月28日土曜日

CSS 画像の絶対中央配置

画像サイズに依存しない絶対中央配置

http://dskd.jp/archives/29.html


<body>
  <img src="image.jpg" />
</body>
img{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  max-width: 100%;
  max-height: 100%;
}

2015年2月23日月曜日

CSS: marginの正しい理解

CSS: marginの正しい理解 (CSSのmarginが難しい)|Web Design KOJIKA17



CSS: marginの正しい理解 (CSSのmarginが難しい)|Web Design KOJIKA17
toggle()や変数、calc、:matchなど、今までにないCSSプロパティ、セレクタが提案・実装されて、CSS3, CSS4も楽しくなってきています。 border-radiusや、box-shadowなども . . .

CSS:height 100%にならない場合は

CSS:height 100%にならない | マイヤーの開発ブログ




2015年2月19日木曜日

CSS 子要素に上下marginを設定すると親要素marginに影響する

これは基本的に親要素に overflow:hidden を設定して回避





[CSS] 子要素の上下marginが効かなかったり親要素marginに影響するのは困るので、阻止する。 - Qiita



[CSS] 子要素の上下marginが効かなかったり親要素marginに影響するのは困るので、阻止する。 - Qiita
ド素人が子要素の上下マージンでハマりましたので、メモでございます。 # 症状 ※margin-topに言及しますが、margin-bottomも同じだと思います。 ```html:hoge.html

2015年2月18日水曜日

CSSだけでセレクトボックスの装飾


select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
  border: 1px solid #ddd;
  width:100%;
  margin: 0;
  padding: 4px;
  background: none transparent;
  vertical-align: middle;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  /*box-sizing: content-box;*/
  box-sizing: fixed;
}

select { /*矢印を消す for Firefox*/
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: '';
}

select::-ms-expand { /*矢印を消す for IE*/
  display: none;
}

【CSS3】全ブラウザ対応! CSS3 で作る marquee の実装。

【CSS3】全ブラウザ対応! CSS3 で作る marquee の実装。



【CSS3】全ブラウザ対応! CSS3 で作る marquee の実装。

HTML5からは非推奨(廃止?)となり、今となっては懐かしいタグ。内包する要素をスライドさせて表示することができるこのタグは、一時は廃れたかのように見えましたが、最近再び見直されるようにな...






flipsnap.js | Demo

flipsnap.js | Demo

2015年2月13日金曜日

jQuery: clone() で複製したものが複数回使えない

jQuery:要素の変数格納と .clone() で複製



jQuery:要素の変数格納と .clone() で複製
cloneした要素を繰り返し使い回すようなコード書こうとして、なぜか .append() しても 1個しかでない。2回以上使い回せない!という状況になり、改めて使い方を確認してみたのでそれをメモしてお

2015年2月9日月曜日

JavaScript オブジェクトをダンプ(テキスト表示)する

DOMオブジェクト・jQueryオブジェクト をダンプ(テキスト表示)する。|プログラムメモ





・jQueryオブジェクトをダンプしたい場合は

が便利です。

・その他のオブジェクト(JSON等)、配列、連想配列などをダンプしたい場合は

JKL.Dumper が便利です↓
使い方(オブジェクト hoge の中身をダンプする)
<script type="text/javascript" src="jkl-dumper.js"></script> 
var hoge = [1,2,3,4,5];
alert( new JKL.Dumper().dump(hoge) );

jquery.padcal.js 日めくりカレンダー

jquery.padcal.js | Adonim ネタ帳




2015年2月8日日曜日

JavaScript - 配列の中の最大値を取得する(NaN, null対応) - Qiita

JavaScript - 配列の中の最大値を取得する(NaN, null対応) - Qiita







JavaScript - 配列の中の最大値を取得する(NaN, null対応) - Qiita
# 普通に扱う場合、もはやイディオムのコレ

```js:
Math.max.apply(null, [-100, 0, 3.14, 0xFF, 1000]); // => 1000
// ※ Mathの関数のコンテキスト(apply...
http://qiita.com/YusukeHirao/items/e848f5de40beaa52e002


2015年2月7日土曜日

CSS3 時間差でアニメーションさせる




feature-images3

jQuery 一定間隔で処理を実行する

以下は1秒ごとに
$('.hoge:eq('+count+')').addClass('animated fadeIn');
を実行するスクリプト。


var count = 0;
var len = $('.hoge').length;

var Repeat = setInterval(function() {
    $('.hoge:eq('+count+')').addClass('animated fadeIn');
    count++;
    //終了条件
    if (count >= len) {
    clearInterval(hoge);
    console.log("終わり");
    }
}, 1000);

2015年2月6日金曜日

CSS3 n番目からn+何番目までの要素を選択するには

5番目から10番目までの子である要素にマッチするセレクタ

 :nth-child(n + 5):not(:nth-child(n + 11))


CSS3 - f番目からt番目までの子である要素にマッチするセレクタ - Qiita



CSS3 - f番目からt番目までの子である要素にマッチするセレクタ - Qiita
f番目からt番目までの子である要素にマッチするセレクタは次の通りである。 ```css :nth-child(n + f):not(:nth-child(n + t + 1)) ``` `n`はそのままで、`f`と`t`に具体的な...

CSS フォントサイズ指定「px、em、%」

あなたはどれにする?CSSの文字サイズ指定「px、em、%」 | デザインメモ



あなたはどれにする?CSSの文字サイズ指定「px、em、%」 | デザインメモ
CSS(スタイルシート)でfont-sizeを指定するとき、pxを使わない方がいいと聞いたことがあります。 ですが、pxで指定しないとなると、今度はemと%が出てきて、どっちがいいんだ?といつもよくわからないまま使っ . . .

2015年2月5日木曜日

tableを細線一本にする


.table {
  width: 400px; /* テーブルの横幅 */
  border-collapse: collapse; /* 枠線の表示方法 */
  border: 1px #1C79C6 solid; /* テーブル全体の枠線 */
}

.table th, .table td {
  border: 1px #1C79C6 solid; /* セルの枠線 */
}

WYSIWYG-HTML Edit

Create.js Create.js

Free Web Resources Everyday - WebResourcesDepot

http://www.webresourcesdepot.com/category/goodies/wysiwyg-html-edit/

jQueryで追加したclickイベントがiPhone/iPadのSafariで動かない場合

jQueryで追加したclickイベントがiPhone/iPadのSafariでだけ動かない場合のスマートな対応方法 | roundropブログ implements Programmable



jQueryで追加したclickイベントがiPhone/iPadのSafariでだけ動かない場合のスマートな対応方法 | roundropブログ implements Programmable
jQueryでボタンにclickイベントをフツーに追加しても、iPhone/iPadのSafariでだけ動かない事象に遭遇。 clickじゃなくてtouchイベントだからダメなのかと思いきや、意外な解決方法がありました。



対象のhtml要素のCSSの’cursor’を‘pointer’にするとなぜかclickイベントが効くようになる、という情報を発見。
以下のようにして試してみる。

$('#some_button').click(function(){
//do something
})
.css('cursor','pointer'); //←追加

jQuery live()をon()で書き換えるには

live→on

$('table').live('click', fn);
$(document).on('click', 'table', fn);
  • ある意味一番ややこしいですが、 liveがdocumentにイベントをセットしている ということさえ理解していれば、delegateと同じになります。また、イベントセット箇所が明示的になるのでonを使いましょう。
  • というか、もう1.9以降、使用不可です。




JavaScript - clickとbindとliveとdelegateとonの違い - Qiita
# よくある解説 * bindはajax等で変更した要素にはイベントが動かない * liveはajax等で変更した要素にもイベントが動く > [jQueryで追加した要素を操作するにはon()メソッドで](http://qiita...