2015-02-25

サムネイルをセンタリングして正方形にきりとる

.cover_img
{
display: inline-block;
width: 98px;
height: 98px;
background-repeat: no-repeat;
background-position: center center;
background-size: cover;
}

2015-02-03

position:absolute;やposition:fixed;で要素をきれいに中央配置する方法

中央配置 CSS

<a href="http://techmemo.biz/css/position-absolute-fixed-center/">position:absolute;やposition:fixed;で要素をきれいに中央配置する方法</a>
[CSS] position:absolute;やposition:fixed;で要素をきれいに中央配置する方法 | TechMemo

2014-11-27

画像のタップハイライトを非表示にする方法

CSS スマホ

スマホサイトで困ったのでメモしておく。

該当のimgタグに下記プロパティーをあててあげたら解決した！

.xx img {
pointer-events: none; /* imgのタップハイライト */
}

<a href="http://css-happylife.com/archives/2011/1124_2322.php">iPhoneのa要素内にimg要素がある場合のタップハイライトの件</a>
iPhoneのa要素内にimg要素がある場合のタップハイライトの件 - CSS HappyLife

2014-10-23

参考になるSPキャンペーンページ一覧(随時追記)

デザイン

ウチカフェ秋コレリツイートキャンペーン｜ローソン

Pontaスピードくじ！！｜ローソン

Ponta会員限定 MACHI caféマイレージキャンペーン｜ローソン

2014-06-18

Androidの標準ブラウザでセレクトボックスを標準デザインに戻す方法

スマホ CSS

セレクトボックスは一度リセットCSSでリセットをしデザインをあてていたけれど、
説明文だけの画面とかお堅いところの画面では標準を使いたいということで、
元に戻す方法を模索していた。
ボーダーなどはさておき、プルダウンっぽい▼さえでれば問題なかったけれど、

webkit-appearance: none;

をあててもなぜかAndroidの標準ブラウザだけそれっぽくならない。。
試行錯誤していたらやっとみつけたよ。。。

疲れたパトラッシュ....

input[type=search],
input[type|=checkbox],
input[type|=email],
input[type|=number],
input[type|=password],
input[type|=radio],
input[type|=text],
/*select,*/
textarea {
padding: 6px;
font-size: 15px;
background: #FFF no-repeat;
border-radius: 3px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
}

/*Androidのブラウザでデフォルトのデザイン表示用*/
.xxx select {
-webkit-appearance: menulist;
border: 1px solid;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
}

2014-06-18

Chromeで小さいフォント指定が出来ない現象（仕様）

iPhoneのsafariで正常に指定できていたfont-size:6pxがAndroidのchromeでみたら効いておらずスタイル崩れが発生。
AndroidとPCをつないでchromeでリモートデバッグしてみたら、
クラスは読み込んでいるもののfont-size:10pxになっている！！
なぜ！！！！
と思ったらchromeには最小サイズが指定されているとのこと（chromeの仕様）。。。
そんな、、、、勝手にやめてよ、、、
数あるブラウザの中で自分だけ仕様といいはるの(p_q､)