-webkit-text-size-adjust: none を絶対に設定してはいけない理由
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
CSS3のW3Cドキュメント現状調べ〜第六部：Chromeのぼっち達〜 - 鳥さんの独り言
続いて、WebKitの独自仕様だ！ 多くなり過ぎて表示し切れなかったので、分割したよヽ( ´_｀)丿 名称 種別 簡易説明 > > Chrome/Safari ~ ~ ~ バージョン プロパティ名 値 -webkit-activelink 値 クリックされたリンクの色 1.0〜 - - -webkit-focus-ring-color 値 フォーカスされたフォームの周囲の色 1.0〜 - - -webkit-link 値 リンクのデフォルト色 1.0〜 - - -webkit-text 値 テキストのデフォルト色 1.0〜 - - -webkit-margin-x-collapse プロパティ 上下の各マージン壊し方法 3.0〜 -webkit-margin-x-collapse collapse｜discard｜separate -webkit-margin-collapse プロパティ
Androidと-webkit-tap-highlight-color
Androidと-webkit-tap-highlight-color Androidと-webkit-tap-highlight-colorの関係がよくわからず色々と悩んでいたのですが、ひと通りの結論が出たので紹介します。 そもそも-webkit-tap-highlight-colorってなによ iPhoneなどのスマートフォンでa要素をタップしたときにハイライトさせるプロパティです。ハイライトと言ってもiPhoneの場合は半透明のグレーのレイヤーが表示されるのですが。 サンプル このレイヤーの色を-webkit-tap-highlight-colorで制御することが可能です。 a { -webkit-tap-highlight-color: rgba(0,0,215,0.40); } このようにするとハイライトカラーが半透明な青色に変わります。 サンプル ただし、このように指定してもA
スマートフォンサイトにてフォームボタンのコーディング時に覚えておきたいCSSプロパティ | バシャログ。
禁煙してから３ヶ月、着実に体重が増加しているishidaです。 先週土曜日にCSS Nite LP13に参加してきました。 ちょうどスマートフォンのデザインとコーディングのお仕事が進行中でしたので、とても参考になりました。現在セミナー内容を振り返り学習中です。 それとCSS Nite関連ですと、何やら CSS Nite LP14 にて弊社メンバーが登壇するとかしないとか。 スマートフォンコーディングでは、CSS3で角丸やらグラデーションが使えるので画像の使用頻度は少なくなります。ボタンまわりについてもCSSのみで実装する機会が多いです。 フォームのsubmitボタンをCSSのみで表現する際には、ちょっとクセがありましたので 解決方法をご紹介します。 検索するsubmitボタンを、以下のようなデザインをCSSのみで実装することにします。 まずは簡単に横幅と背景色・角丸をCSSで設定してみます
今日からCSS3アニメーションを使えるようになるチュートリアル
CSS3のアニメーションってスゴい！ 先日のぽんたくんの記事でも紹介されたように、CSS3ではアニメーションも制御できるようになりました。 ということで、ぼくもCSS3のアニメーションを使ってdemoをいくつか作ってみました。 SafariやChromeなどwebkitブラウザで表示してみてください。 コピペで使えるCSS3アニメーション - jsdo.it ※PLAYボタンをクリックすると表示されますよ 見れない人のために動画も撮ってみました。 どうですか？CSSだけで、まるでFlashを使ってるような表現ができちゃうんです。 今回はこのCSSのアニメーションのチュートリアルをご紹介します。 「NEW!」というアイコンが、1文字ごとにぴょこんぴょこん跳ねるアニメーションを作ってみましょう。 上記のdemoでいうと二つ目の動きです。 HTML <p class="animetionNew
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
「こけむさズ」に３度通って 東郊雑記＠琳堂 on scriptogr.am
http://hmdt.jp/safari/myfirst/myfirst.html