Google Fontsを使用する際に、Noto Serifなどの斜体(Italic)フォントを適用したら、iPhoneのSafariでは斜体にならないことが確認されました。
★解決策:
cssに下記記述を追加すれば、解決できるはずです。
font-style: italic;
日々開発中にわかったことをメモしておきます
Google Fontsを使用する際に、Noto Serifなどの斜体(Italic)フォントを適用したら、iPhoneのSafariでは斜体にならないことが確認されました。
★解決策:
cssに下記記述を追加すれば、解決できるはずです。
font-style: italic;
Webページ(html)をpdfにしたいため、wkhtmltopdfをインストールしました。
※環境:CentOS 6.4(64bit)
最初、下記コマンドでwkhtmltopdfをダウンロードします。
cd /usr/local/src wget http://download.gna.org/wkhtmltopdf/0.12/0.12.2.1/wkhtmltox-0.12.2.1_linux-centos6-amd64.rpm
※OSやバージョンによってダウンロード対象が異なるため、下記ダウンロードページで確認する必要があります。
http://wkhtmltopdf.org/downloads.html
次は、ダウンロードしたwkhtmltopdfをインストールします。
rpm -ivh wkhtmltox-0.12.2.1_linux-centos6-amd64.rpm
しかし、下記エラーが出て、インストールできませんでした。
error: Failed dependencies: xorg-x11-fonts-Type1 is needed by wkhtmltox-1:0.12.2.1-1.x86_64 xorg-x11-fonts-75dpi is needed by wkhtmltox-1:0.12.2.1-1.x86_64
→ 「xorg-x11-fonts-Type1」と「xorg-x11-fonts-75dpi」に依存しているようなので、yumでインストールします。
yum install -y xorg-x11-fonts-75dpi yum install -y xorg-x11-fonts-Type1
再度rpmでwkhtmltopdfをインストールしたら、無事にインストールできました。
※インストールできたら、下記のような一行のコマンドだけで、Webページをpdfで保存することができます。(例えば、http://www.yahoo.co.jp → yahoo.pdf)
wkhtmltopdf http://www.yahoo.co.jp yahoo.pdf
iPhoneのSafariでリンクやボタンをタップした時、一瞬だけ背景が暗くなります。「タップした!」という感覚は出ますが、タップ時のcssを具体的に指定したい場合(:activeの指定とか)には、出てほしくない場合もあります。
下記cssでhighlightを消すことができます。
-webkit-tap-highlight-color: rgba(0,0,0,0);
highlightを完全透明にする記述です。同じように、rgbaの値を変更すれば、ほかの色を設定することもできます。
※参考記事
[CSS] iPhoneのSafariでタップした際に表示される暗めな影を消すCSS – YoheiM .NET
スマートフォン(iPhone)サイト作成時、
普通のPCサイトと同じように、「overflow: auto;」で指定すればブロック要素をスクロールさせることができますが、
慣性スクロール(ゆっくり止まるような動き)を実装するには、
「-webkit-overflow-scrolling: touch;」の指定が必要です。
つまり、
div.scroll { overflow: auto; -webkit-overflow-scrolling: touch; }
↑↑のような感じです。
(widthやheightなどを別途正しく指定する必要があります。)
※OSやブラウザーの対応情報は調べていませんが、バージョンの低くないiPhoneやAndroidでは動くでしょう。
ボタン類(<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が初期化されます(角丸以外もクリアされます。例えば、背景など)。
setCookieなどでクッキーを書き込んだ直後に、header関数でリダイレクトすると、場合によってクッキーが消えることがあります。(ブラウザー依存みたいです)
※セッション値のセットも同じような現象が発生する可能性があります。
→ クッキーを利用する際に、headerより、ページを表示させてからrefreshやjavascriptで飛ばすほうが安全です。
簡単ですが、一応まとめましょう。
元の画像はこちら↓
中央の笑顔のみ表示したい場合は、外側に広さと高さが決まった親ボックスに「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>