投稿日:

【iPhone】【Safari】【css】タップ（クリック）した時の灰色の影（highlight）の消し方

iPhoneのSafariでリンクやボタンをタップした時、一瞬だけ背景が暗くなります。「タップした！」という感覚は出ますが、タップ時のcssを具体的に指定したい場合（:activeの指定とか）には、出てほしくない場合もあります。

下記cssでhighlightを消すことができます。

  -webkit-tap-highlight-color: rgba(0,0,0,0);

highlightを完全透明にする記述です。同じように、rgbaの値を変更すれば、ほかの色を設定することもできます。

※参考記事
[CSS] iPhoneのSafariでタップした際に表示される暗めな影を消すCSS – YoheiM .NET

投稿日:

【メモ】【iPhone】【Safari】【css】慣性スクロール

スマートフォン（iPhone）サイト作成時、
普通のPCサイトと同じように、「overflow: auto;」で指定すればブロック要素をスクロールさせることができますが、
慣性スクロール（ゆっくり止まるような動き）を実装するには、
「-webkit-overflow-scrolling: touch;」の指定が必要です。

つまり、

  div.scroll {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

↑↑のような感じです。
（widthやheightなどを別途正しく指定する必要があります。）

※OSやブラウザーの対応情報は調べていませんが、バージョンの低くないiPhoneやAndroidでは動くでしょう。

投稿日:

【iPhone】【Safari】【css】ボタンの角丸などの消し方

ボタン類（<input type=”button”>や<input type=”submit”>など）の角丸をクリアしたい場合、

  input[type="button"],input[type="submit"] {
    border-radius: 0;
  }

↑↑を指定するだけでは、iPhoneのSafariではクリアされません！！

その為、下記cssの設定が必要です：

  input[type="button"],input[type="submit"] {
    -webkit-appearance: none;
  }

そうすれば、ボタンのデフォルトcssが初期化されます（角丸以外もクリアされます。例えば、背景など）。

※参考記事
[CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法 | コリス

投稿日:

画像の一部を表示する方法

簡単ですが、一応まとめましょう。

元の画像はこちら↓

中央の笑顔のみ表示したい場合は、外側に広さと高さが決まった親ボックスに「overflow:hidden;」を適用し、インナーを1つ挟めばOKですね。

具体的には：

できました(^^)

ソースは下記のようになります：

CSSの部分：
div#imgContainer {
  position: relative;
  width: 67px;
  height: 67px;
  overflow: hidden;
}
div#imgContainer #imgInner {
  position: relative;
  width: 128px;
  height: 128px;
  left: -30px;
  top: -25px;
}
div#imgContainer #imgInner img {
  position: relative;
  width: 100%;
}

HTMLの部分：
<div id="imgContainer">
  <div id="imgInner">
    <img src="画像のパス">
  </div>
</div>