フォトショとか専用ドローソフトを持ってなくても作れたのでメモ。
1, まずはペイント（Windows標準ソフト）で透過させたい部分を一色で塗りつぶす。
※何色でもOK
2, PNG形式かBMP形式で保存する。
3, 作成した画像をエクセルに取り込み、メニューバーの「色」から「透明色を指定」を選択する。
※下記画像はExcel2013
4, マウスポンタのアイコンが変わるので透過させたい色をクリックする。
5, 指定した色が透過するので、それを「Webページ（*.htm; *.html）」形式で保存する。
6, 保存すると保存先ディレクトリにフォルダが作成され、その中に透過した画像が保存されているのでそれを取り出す。
以上で完了。Excelまじ便利。
ので、振り直したい時はこうする。
array_merge(array_unique($array));
マージさせればいいんだね。
要素の幅や高さが絶対に変わってほしくない時に「box-sizing」を知っていると幸せになれる。
指定可能な値は下記の通り。
| 値 | 詳細 |
|---|---|
| content-box | padding と border の幅を要素の幅と高さに含めない。デフォルト値。 |
| border-box | padding と border の幅を要素の幅と高さに含める。 |
これをうまく活用すれば要素のサイズを自分の意図したサイズに固定することが出来る。
webkit系とmoz系のみ対応している模様。
まずはwebkit。
/*コロンが2個な点に注意*/
input::-webkit-input-placeholder { color: red; }
次にmoz。
input:-moz-placeholder { color: red; }
colorだけではなくテキスト装飾系は大抵効いてくれる。
下記リンクにめちゃくちゃ便利でシンプルなプラグインがおいてあったのでメモ。
http://www.laktek.com/2011/01/07/jquery-isblank/
jQueryにisBlank()関数を追加する。
(function($){
$.isBlank = function(obj){
return(!obj || $.trim(obj) === "");
};
})(jQuery);
実行結果は下記の通り。
$.isBlank(" ") //true
$.isBlank("") //true
$.isBlank("\n") //true
$.isBlank("a") //false
$.isBlank(null) //true
$.isBlank(undefined) //true
$.isBlank(false) //true
$.isBlank([]) //true
ふぉぉぉぉい！めっちゃ便利！！
jQueryプラグインにしてみた。といってもそんなにたいそうなことはしていない。
一応重複ロード機能付き。
(function($) {
$.loadCss = function(href) {
var links = $('head > link');
$.each(links, function(key, elem) {
if($(elem).attr('href') == href) {
return false;
}
});
$('<link>', {
rel: 'stylesheet',
type: 'text/css',
href: href
}).appendTo('head');
}
})(jQuery);
CakePHP2.4以降からjsonp出力がサポートされたのでやってみる。
// コントローラー内のメソッド
public function index {
// 出力したいデータ
$result = ['hoge', 'piyo', 'fuga'];
$this->viewClass = 'Json';
$this->set([
'result' => $result,
'_serialize' => ['result'],
// 下記変数をセットすると出力がjsonpになる。
'_jsonp' => true
]);
}
呼び出しの際は、上記メソッドにアクセスし、クエリストリングで「?callback=functionName」を渡す。
※functionNameは任意の関数名。
これでレスポンスヘッダの「Content-Type」も「application/Javascript:」になってくれる。
まずリストタグでメニューを定義。
var tabMenu = $('<ul>', {class: 'tab-menu'});
tabMenu.append($('<li>', {class: 'active'}).append($('<a>', {href: '#'}).html('タブ1')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ2')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ3')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ4')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ5')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ6')));
tabMenu.append($('<li>').append($('<a>', {href: '#'}).html('タブ7')));
次に各タブのコンテンツ要素を定義
var tabContent = $('<div>', {class: 'tab-content'});
tabContent.append($('<div>').html('コンテンツ1'));
tabContent.append($('<div>').html('コンテンツ2'));
tabContent.append($('<div>').html('コンテンツ3'));
tabContent.append($('<div>').html('コンテンツ4'));
tabContent.append($('<div>').html('コンテンツ5'));
tabContent.append($('<div>').html('コンテンツ6'));
tabContent.append($('<div>').html('コンテンツ7'));
最後に挙動実装。
var tabs = tabMenu.children();
var contents = tabContent.children();
$.each(contents, function(key, elem) {
if(key != 0) {
$(elem).hide();
}
$(tabs[key]).click(function() {
var that = this;
var index = 0;
$.each(tabs, function(key) {
if(this == that) {
index = key;
}
});
$.each(contents, function(key) {
if(index == key) {
$(this).show();
$(tabs[key]).addClass('active');
} else {
$(this).hide();
$(tabs[key]).removeClass('active');
}
});
return false;
});
});
完了！！うん！！簡単だね！！