macOS Sierraで追加された日本語フォントをCSSで指定する

macOS Sierra（v10.12）に新しく追加された日本語フォント、「凸版文久ゴシック」「凸版文久見出しゴシック」「凸版文久明朝」「凸版文久見出し明朝」「游教科書体」「游教科書体 横用」の6種類を、CSSを使ってウェブページ上で指定してみました。

El Capitanで追加された日本語フォントをCSSで指定する

OS X El Capitanに新しく追加された日本語フォント、「クレー」「筑紫A丸ゴシック」「筑紫B丸ゴシック」「游明朝体+36ポかな」の4種類と、ウェイトが増えた「ヒラギノ角ゴシック」を、CSSを使ってウェブページ上で指定してみました。

iPhone 6 Plus の devicePixelRatio と apple-touch-icon

iPhone 6 PlusのdevicePixelRatioとapple-touch-iconのサイズを調べてみました。

iOS 7風フォント「Helvetica Neue UltraLight」をCSSで指定する

デザインを一新したiOS 7ですが、CSSで「Helvetica Neue UltraLight」フォントを使うと、WebサイトがiOS 7っぽい雰囲気になります。

iPhone / Android のCSS縦書きレイアウト

先日、ブラウザの縦書きレイアウトを国際標準化するというニュースがあったので、スマートフォンの縦書きレイアウト対応状況をチェックしてみました。

ソフトバンクのサイトをMacで読みやすくする

Macでソフトバンクのサイトを見ていると、文字が読みづらいと感じたことはないでしょうか。

Android 4.0 (ICS) の device-width メディアクエリ

同一のHTMLソースで、デバイスの種類によって表示を変化させる「レスポンシブWebデザイン」に、CSSメディアクエリの「device-width（min-device-width/max-device-width）」を使っているケースが少なくないと思いますが、Android 4.0（ICS）では想定とは違う表示になるかもしれません。

iPhone (iOS 5) の内蔵フォント一覧

アップルのサポートサイトで、iOS 5フォントリストが公開されました。

iPhone の日本語明朝体フォントを指定する

iOS 5のiPhone 4には、日本語明朝体（serif）フォントがインストールされているようなので、CSSで指定できるか試してみました。

-webkit-overflow-scrolling プロパティで overflow スクロール要素を iPhone ネイティブスタイルに

iOS 5.0でSafariのCSSに追加された「-webkit-overflow-scrolling」プロパティを使うと、JavaScriptなしでiPhoneネイティブスタイルのスクロールを実現できます。

iPhone 4 の CSS を切り替える方法

iPhone 4とiPhone 3G/3GSとで、スタイルシートを切り換える方法を考えてみました。

iPhone 4 の内蔵フォント

iPadにインストールされているフォント一覧を参考に、iPhone 4にインストールされているフォントを確認してみました。

iPhone 4 の viewport は iPhone 3G と同じ

iPhone 4のディスプレイは640×960ピクセルですが、Safariでは320×480ピクセルとして扱われているようです。

iOS 4 での -webkit-text-stroke

iPhone OS 3.1.3のSafariでは、CSS3の「-webkit-text-stroke」プロパティが正常に表示できませんでしたが、iOS 4.0にアップデートしたiPhone 3Gで確認すると正常に表示できるようになっていました。

iPhone での -webkit-text-stroke プロパティ

HTML5やらCSS3をボチボチと勉強していまして、最近覚えたものに、アップル拡張の「-webkit-text-stroke」というCSSプロパティがあります。これは文字の縁取りを行うもので、ふちの太さと色、内側の色を次のプロパティで指定します。