safariで自動入力欄の色（黄色）を変更する
iPhoneのsafari(chrome系？)で自動入力機能が働いたtextboxの背景が黄色になる現象が発生した。
どうやらsafariが用意しているユーザ・エージェント・スタイルシートのbackground-colorが効いているらしい。
それで以下のようにcolor指定してあげたげど全然だめ。
input:-webkit-autofill {
color: #000000 !important;
}
そしたら英語のサイトがヒットして解決できた。ありがたや〜
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px white inset;
}
Javier Cuevas : Change background color for autocompleted inputs in Google Chrome
デバイス幅に合わせたボタンのコーディングの仕方
iPhoneとAndroidを対象とした画面を作るとき、
ログインボタンと会員登録ボタンを画像にする想定でデザインしてました。
デバイスによって横幅が変わるのでどうしようと思っていたら
またまたこの業界の先輩が記事として残してくださっていたのでメモ。
padding-topとheight:0がポイントとのこと。
ありがたや〜
（やっぱりボタン系を画像にするのやめようかな....）
【CSS】デバイス幅に合わせたサイズ可変のメニューボタンをbackgroundで作る
hタグの中で画像を表示させる
iPhoneやAndroidで簡単デバッグ、改めてfont-familyについて考えてみる。メモ。
Androidやタブレットで表示したときにWebページが最適化されるようレスポンスブデザインでコーディングしました。今回はAndroidアプリのLPだったので対象メインユーザーはAndroid端末の方なの。だからPCは除外で。
モバイル端末だけどPCと同じようにブラウザの開発者モードを開いてデバッグしたい・・・
と思って調べたらあった。iPhoneでのデバッグ方法はプログラマさんに教えてもらったから知ってたけどAndroidもできるのね♩使い方は簡単。主にはモバイル端末とPCをUSBケーブルで接続してアプリをインストールするだけ。便利だ！
◆iPhoneでデバッグ
要チェック。iPhone/iPadで表示しているWebサイトに対して使えるWebインスペクタ·Mobile Safari Inspector MOONGIFT
◆Androidでデバッグ
SDK不要Android端末のリモートデバッグChrome拡張機能「ADB」 - Intelligent Technology's Technical Blog
一応iPhoneでも見れるようにとあとからお達しがきたのでiPhoneで確認したら、submitボタンに指定したbackground-colorが薄い色で表現されている・・・！Androidやタブレットでは問題なかったのになぜ？safariの問題かと勘ぐってみたけどiPhoneアプリのChromeもそうだった。
どうやら勝手にグラデーションをかけてしまうらしい。
◆回避策
一色のみを指定したgradiateで解決！
hamashun.me : フォームボタンにbackground-colorプロパティを指定するとiPhone Safariでグラデーションがかかる件
先輩社員にコードレビューしてもらったときにfont-familyを指定してあげてとの要望が。
リセットCSSを冒頭に入れこんだだけで安心してた。。
でfont-familyって何を入れてあげたらAndroid,タブレット,iPhoneで最適に見れるんだろうと議論になったんだけど、最終的な終着点はこうなった。
font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
参考サイトはここ
CSSでのフォント指定について考える（2014年） - DTP Transit（Mac OS X, OS X Mavericks, Web Fonts, Web制作, iPhone, フォント）
DreamweaverからSublime text2に移行した時の設定など
テキストエディタといえば代表的なのがDreamweaverとかNetbeansとか有償無償いろいろあがると思うんだけど、
2012年あたりから日本でも使用者が増えているほぼ無償のSublime textが気になっていた。（※評価版は無償なんだけど開発者への資金提供もできるみたい）
Sublime textはうちの部署は支持率が高くて
使いやすいと好評なので
いまさらながら私ものってみた。
そのときの設定等をメモ。
Sublime textの最新版は3だけどSublime text3を入れたらなぜか設定ファイルがいじれなくなった（メニューバーのSublime Text2→Preferencesが選択できない）のでバージョンを落として2をインストールし直しました。
Sublime text3はbeta版なので安定していないのが原因かな？
機会があったら調査します。
テーマは「ITG.FLAT」
http://itsthatguy.com/post/70191573560/sublime-text-theme-itg-flat
サイドメニューのアイコン表示が可愛らしくて気に入った。
カラーコードの設定はダーク系のドラキュラのテーマを使用しています。
Sublime text2だとわざわざGitHubから落としてこなくてもパッケージインストールで候補が検索できたのでそこから設定しました。
あとSassとCompassを使いたかったのでSublime text2と連携するような設定とかもやりました。
Sublime Text 2ってエディタがすごくイイ。Dreamweaverから乗り換えた時の初期設定とか使い方とかをメモ | Mnemoniqs Web Designer Blog
で、完成型はこちら！
満足★
【jQuery】要素の外側のタップイベント捕捉
スマホサイトの改修で検索履歴のサジェスト表示を頼まれた。
オーバーレイでよく使われているような、要素の外側をクリックすると表示していた要素が消える動作をしたかったのでjQueryでプログラムくんだ。
以下のサイトで自前のjQuery拡張機能を作られていたので拝借し
【jQuery】要素の”外側”のクリックイベントを捕捉「skOuterClick」 | webシステム開発会社よりフリーランスのSEプログラマースコブト
今回はスマートフォンだったので以下のサイトをもとにタップイベントで反応するようjquery.skOuterClick.jsを改造
jqueryで指定要素以外のところをタップされたイベントを検知するプラグイン | 日本の天ぷら情報
。
これだけだとAndroidちゃんは動くのにiPhoneちゃんは動かないという謎の現象がおこったので、暫定対応としてClickイベントをしたい要素に対してCSSのpointerを追加してあげたら動きました。
.css('cursor','pointer');
動いたソース
(function($){
$.fn.skOuterClick = function(method) {
var methods = {
init : function (handler) {
var inners = new Array();
if (arguments.length > 1) for (i = 1; i < arguments.length; i++) {
inners.push(arguments[i]);
}
return this.each(function() {
var self = $(this);
var _this = this;
var isInner = false;
// Bind click event to suppress
function onInnerClick(e){
isInner = true;
};
self.on('click touchend', onInnerClick);
for (var idx in inners) inners[idx].on('click touchend',onInnerClick);
// Bind click elsewhere
$(document).on('click touchend', function(e){
if (!isInner) handler.call(_this, e);
else isInner = false;
});
});
}
};
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'function') {
return methods.init.apply(this, arguments);
} else {
$.error('Method "' + method + '" does not exist in skOuterClick plugin!');
}
};
})(jQuery);
$(function(){
$("input#search_input").click(function(event){
event.stopPropagation();//外側クリックイベントの発生防御
$("#my_search_contents").show();
}).css('cursor','pointer');
$("#my_search_contents").skOuterClick(function(){
$(this).hide();
