ブラウザの対応状況

2022年7月18日現在、ブラウザの対応状況は以下の通りです：

• Chrome 103（Mac）とEdge 103（Win 10）で動作を確認しました
• デスクトップ版Safari 15.5で動作を確認しました
• Firefox 102の時点ではバグがあって、sourceで読み込まれる画像にもimg要素に記述したwidth/height属性の値が使われてしまいます

いつから対応していたの？

Chrome 90から対応していたことは明記されてるんですが、Safariではいつからサポートされてるのか情報を見つけられませんでした。たぶん15からのようなんですが…。あと、関係ないかもしれないですが、CSS aspect-ratioがSafariでサポートされたのは15からでした。Safari 14で確認できる方がいたら教えていただきたいです。

Firefoxではバグは認識されてるっぽいんですが修正はまだのようです。Firefoxでの実装時期も見つけられませんでした。

参考記事

上述した参考資料のほかに以下の記事を参考にさせてもらいました。

• source要素にwidth/height属性を指定して各画像のアスペクト比の維持とCLSの改善を図る | ミツエーリンクス
• Avoiding <img> layout shifts: aspect-ratio vs width & height attributes – JakeArchibald.com

環境

以下の環境で設定と動作確認をしました。違うバージョンでは設定やフォルダの場所などが異なる場合があるのでご注意ください。

• macOS Monterey 12.2.1 (Mac mini, M1 2020)
• Local 6.3.0+5756
• Firefox 97.0.1
• mkcert 1.4.3 (Homebrewでインストール）
• Localでドメインが「blockme.local」というサイトを作成

Safari 11ではDouble-position Color Stopsがサポートされていない

linear-gradientには一つの色に複数の色経由点を指定する「Double-position color stops」という書き方 があります。以下の例ではwhiteを指定した部分に複数の色経由点（33%と66%）を指定しています。

.gradient-multi-position {
  background: linear-gradient(to right, #002395 33%, white 33% 66%, #ed2939 66%);
}

ところが、SafariではDouble-position color stopsのサポートが12.1からとのことで、この書き方だとSafari 11では何も表示されません（OH NO！）。下のキャプチャ画像はBrowserstack を使ってSafari 11で表示したデモページ なんですが、「Multi-position Color Stopを使用したlinear-gradient」の下のグラデーションが表示されていません。

本来であれば、その下にあるフランス国旗の縞と同じものが表示されるはずです。Safari 14やその他の最新版のFirefoxやChromeでは問題なく表示されます。

デモはこちら

目次

以下はページ内のセクションへのリンクです。

• CSSのline-heightでは文字の上下にスペースができる
• ウェブで使われるハーフ・レディングとは
• 印刷とウェブにおけるレディングの違い
• デザインツールでのline heightの扱いの違い
• 上下のハーフ・レディングを帳消しにするコーディング
• line-heightのnormalとは
• line-heightの100%ってなんの100%？
• line-heightの値は単位なしで記述するのがいい
• line-heightとアクセシビリティ
• 読みやすいline-heightについて考える
• さいごにひとこと
• 参考情報

ウェブで使われるハーフ・レディングとは

CSSの定義 では文字サイズと行の高さの差をleading（レディング）と呼び、その半分をhalf-leading（ハーフ・レディング）と呼びます。CSSでline-heightを指定すると、そのハーフ・レディングが文字の上と下に追加される仕組みなんですね。

ちなみに、レディングは活版印刷で行間にスペースを入れる際に鉛（lead = レッドと発音する）のプレートを使っていたことに由来していて発音は「リーディング」ではなくて「レディング」です。

そして、このハーフ・レディングがマイナスの数値になると行が重なります。下の例の場合、(2 – 16) ÷ 2 = -7になるので、行が重なります。

p {
  font-size: 16px;
  line-height: 2px;
}

意図的にすることはあまりないと思いますが挙動は知っておくと良いですね。

デザインツールでのline heightの扱いの違い

FigmaやAdobe XD、Affinity DesignerやAdobe Illustratorなど、デザインツールによってline heightの扱いは異なります。CSS line-heightと違うことも多いので注意が必要です。

CSSのline-heightの仕組みとデザインツールのline heightの扱いの違いを理解しているとデザインの精度が上がって実装の効率化にもつながります。デザインと実装（コーディング）は分業することが多いと思うので、デザインの引き渡しの際のチェックポイントとしてline-heightについてしっかりコミュニケーションしておくと、スムーズに実装を進められるかもしれませんね。

僕は1人チームでデザインもコーディングもしますが、コーディングの際にデザインで吸収できなかった細かい空きの設計を調整したり整理し直すこともあります。

line-heightのnormalとは

line-heightのデフォルトはnormalという値なんですが、これはユーザエージェントに依存する値だそうです。MDN Web Docsのline-heightの説明 は以下のようになっています。

ユーザーエージェントに依存します。デスクトップブラウザー (Firefox を含む) は 要素の font-family によって決まる、おおよそ 1.2 という既定値を使います。

おぉ、なんとも曖昧な…感じではあるのですが、CSSで指定したフォント（font-family）に設定されたメトリクス（フォント・パーツのサイズ）に従うということのようです。「おおよそ1.2…」というのは、一般的にフォント・メトリクスによるline heightがおおよそ1.2だということを意味するのでしょうか。ちょっとわかりづらいですね…

font-familyに依存するということは、フォント編集アプリなどを使ってメトリクスを見るか実際にHTML/CSSで実装してブラウザで確認しないとわからないということです。和文フォントではそこまで数値の振れ幅は大きくない印象ですが、2017年2月に書かれたVincent De Oliveiraさんのこの記事 によると、Google Fontsでインストールした1059のフォントのうち95%はline-heightは1より大きい数値で、0.618〜3.378だとのことで、欧文では振れ幅が結構大きいようです。

結局、各OS・ブラウザでの検証は欠かせないですね。

line-heightの値は単位なしで記述するのがいい

line-heightの指定には単位なしの数値を使うことが推奨されています。

p { line-height: 1.5; }

というのも、親要素にフォントサイズが指定されていてline-heightに%やemを使った値を指定すると、font-sizeからline-heightを計算した値が継承されるからです。これが直感的じゃないんですね。

どういうことかというと、たとえば、以下のようにdivの中にh1が入っているHTMLがあるとします。

<div class="box">
  <h1>ここの行間が予期せぬ値に！</h1>
</div>

このHTMLに対して以下のCSSを指定するとh1のline-heightはいくつになると思いますか？

.box {
  font-size: 16px;
  line-height: 150%;
}
h1 {
  font-size: 32px;
}

32px x 150% = 48pxになると思いそうですよね？

ところが実際は24px（=16px x 150%）がh1のスタイルに継承されます。

これはemを使った場合でも同じですが、単位なしの数値を指定すると、その数値がそのままh1に継承されるので、h1のline-heightは48px（32px x 1.5）になります。なんで？と疑問に思いますが、それが仕様なんですね。はい。

上記の例について「こんなCSSの書き方するかなぁ？」と、若干懐疑的な自分ではありますが、未知の問題は避けたいのでline-heightは単位なしの数値で指定するのがよさそうです。逆に単位なしの数値の指定のみで困ることも想像できません（あったらぜひ教えて欲しいです）。

ブラウザでの文字サイズ変更にも対応できる

line-heightに単位なしの数値を使うと文字サイズにあわせた行間の指定になるので、ユーザがブラウザの設定で文字サイズを変更した場合、それにあわせて行間も変わります。line-heightをpxやem、remで指定するメリットは特になさそうなので、僕は単位なしの数値で記述しています。

あと、レスポンシブで文字サイズを可変させるデザインだと、行間が文字サイズと連動していた方がCSSが書きやすいです。

読みやすいline-heightについて考える

欧文と和文では読みやすいline-heightは若干違いますし、フォントの種類や文字サイズ、行の長さによっても異なります。あくまで個人的な意見ですが、僕が考える読みやすいline-heightの目安をご紹介します。

本文のline-height

• 和文は1.8 – 2.0
• 欧文は1.5 – 1.8
• 和文は欧文より若干広めの行間を設定するのが良い
• 欧文はフォントによって行間の余白部分の大きさが変わるので要注意

参考までに、ウェブの欧文タイポグラフィについて詳しい本「ウェブタイポグラフィ — 美しく効果的でレスポンシブな欧文タイポグラフィの設計 」では、「1.4に設定するところからスタート」することを勧めています（p46）。和文は「1.7程度から始めると良いでしょう（p200）」と書いています。

本文のline-heightの例

• 和文の例として、AXIS やCasa BRUTUS のようなデザイン系雑誌のウェブサイトの本文は2.0相当のline-heightを使っています。note では1.875で、Zenn やQiita は1.9にしてますね。
• 欧文の例として、FigmaのBlog の本文は1.5、A List Apartの記事 の本文は1.7を使っています。web.dev では1.7777777778ですね。
• ニュースサイトでは、New York Times が1.5相当、BBC が1.375相当、日経新聞 が1.8、朝日新聞 が1.6に設定しています。

レスポンシブなline-heightの調整は必要？

個人的に端末や画面サイズによってline-heightを変える必要はないと思っています。

上で紹介したウェブサイトでは、web.dev以外は端末に関係なく同じline-heightを使っているようですね。web.devの場合、横幅が320px以下のスクリーンで文字サイズを18pxから15pxに、行間を1.7777777778から1.8666666667に調整しています。

より小さいスマホ画面では、文字を小さくして表示できる文字数を増やしつつ、可読性を担保するために行間のスペースを多めにとっているのが読みとれます。面白いですね。

見出しのline-height

文字サイズが大きい見出しでは、本文と同じline-heightだと行間のスペースが空きすぎて逆に読みにくくなってしまいます。文字の大きさやフォントによるのでレイアウトをして確認することをお勧めしますが、僕の場合、欧文ば1.2〜1.3程度、和文は1.4〜1.5程度を使っています。

Macのバージョンなど

以下の環境で設定、動作確認を行いました。

• macOS Big Sur 11.2.2（Mac mini, M1 2020）
• MAMP 6.3
• mkcert 1.4.3（Homebrew 3.0.4でインストール）

MAMPの設定（v6.3時点）

1. ポートの設定

MAMPのPreferencesのPortsタブでApacheとMySQLのPort番号を変更します。上の画像にある「80 & 3306」のボタンをクリックすると両方とも一気に変更されます。

2. httpd.confの設定変更

/Applications/MAMP/conf/apache/の中にあるhttpd.confファイルのSSL設定がコメントアウトされてるので「#」を削除して有効にします。httpd.confの設定がおかしくなるとサーバーが動かなくなるので、変更前にバックアップを取っておくことをお勧めします（MAMPの場合は/Applications/MAMP/conf/apache/originalにオリジナル・ファイルが入っています）。

# Secure (SSL/TLS) connections
#Include /Applications/MAMP/conf/apache/extra/httpd-ssl.conf

以下に変更：

# Secure (SSL/TLS) connections
Include /Applications/MAMP/conf/apache/extra/httpd-ssl.conf

3. httpd-ssl.confの設定変更

/Applications/MAMP/conf/apache/extra/にあるhttpd-ssl.confファイルの以下の部分を変更します。注意）MAMP 5.xを使っている場合はこの変更の必要はありません。

#   Semaphore:
#   Configure the path to the mutual exclusion semaphore the
#   SSL engine uses internally for inter-process synchronization.
SSLMutex  "file:/Applications/MAMP/Library/logs/ssl_mutex"

以下に変更：

#   Semaphore:
#   Configure the path to the mutual exclusion semaphore the
#   SSL engine uses internally for inter-process synchronization.
Mutex default

さらに、httpd-ssl.confの以下の4つの項目を変更します。

1. DocumentRoot
2. ServerName
3. SSLCertificateFile
4. SSLCertificateKeyFile

以下のDocumentRootとServerNameを変更します。

##
## SSL Virtual Host Context
##

<VirtualHost _default_:443>

#   General setup for the virtual host
DocumentRoot "/Applications/MAMP/Library/htdocs"
ServerName www.example.com:443
ServerAdmin you@example.com
ErrorLog "/Applications/MAMP/Library/logs/error_log"
TransferLog "/Applications/MAMP/Library/logs/access_log"

僕の場合は以下のように変更しました：

DocumentRoot "/Users/rriver/Sites/parashuto.com/site"
ServerName localhost

さらにSSLCertificateFileとSSLCertificateKeyFileの値を先ほど作成した証明書と鍵に更新します。

#   Server Certificate:
#   Point SSLCertificateFile at a PEM encoded certificate.  If
#   the certificate is encrypted, then you will be prompted for a
#   pass phrase.  Note that a kill -HUP will prompt again.  Keep
#   in mind that if you have both an RSA and a DSA certificate you
#   can configure both in parallel (to also allow the use of DSA
#   ciphers, etc.)
#   Some ECC cipher suites (http://www.ietf.org/rfc/rfc4492.txt)
#   require an ECC certificate which can also be configured in
#   parallel.
SSLCertificateFile "/Applications/MAMP/conf/apache/server.crt"
#SSLCertificateFile "/Applications/MAMP/conf/apache/server-dsa.crt"
#SSLCertificateFile "/Applications/MAMP/conf/apache/server-ecc.crt"

#   Server Private Key:
#   If the key is not combined with the certificate, use this
#   directive to point at the key file.  Keep in mind that if
#   you've both a RSA and a DSA private key you can configure
#   both in parallel (to also allow the use of DSA ciphers, etc.)
#   ECC keys, when in use, can also be configured in parallel
SSLCertificateKeyFile "/Applications/MAMP/conf/apache/server.key"
#SSLCertificateKeyFile "/Applications/MAMP/conf/apache/server-dsa.key"
#SSLCertificateKeyFile "/Applications/MAMP/conf/apache/server-ecc.key"

僕の場合、変更後は以下の通り：

#   Server Certificate:
#   Point SSLCertificateFile at a PEM encoded certificate.  If
#   the certificate is encrypted, then you will be prompted for a
#   pass phrase.  Note that a kill -HUP will prompt again.  Keep
#   in mind that if you have both an RSA and a DSA certificate you
#   can configure both in parallel (to also allow the use of DSA
#   ciphers, etc.)
#   Some ECC cipher suites (http://www.ietf.org/rfc/rfc4492.txt)
#   require an ECC certificate which can also be configured in
#   parallel.

SSLCertificateFile "/Applications/MAMP/conf/apache/keys/localhost.pem"
#SSLCertificateFile "/Applications/MAMP/conf/apache/server-dsa.crt"
#SSLCertificateFile "/Applications/MAMP/conf/apache/server-ecc.crt"

#   Server Private Key:
#   If the key is not combined with the certificate, use this
#   directive to point at the key file.  Keep in mind that if
#   you've both a RSA and a DSA private key you can configure
#   both in parallel (to also allow the use of DSA ciphers, etc.)
#   ECC keys, when in use, can also be configured in parallel

SSLCertificateKeyFile "/Applications/MAMP/conf/apache/keys/localhost-key.pem"
#SSLCertificateKeyFile "/Applications/MAMP/conf/apache/server-dsa.key"
#SSLCertificateKeyFile "/Applications/MAMP/conf/apache/server-ecc.key"

これでMAMP 6.3で無事にhttps://localhostが動くようになりました！

目次

以下はページ内のセクションへのリンクです。

• Windowsに標準搭載のフォント一覧
• Macに標準搭載のフォント一覧
• iOSに標準搭載のフォント一覧
• Androidに標準搭載のフォント
• その他の情報
• 各OSのバージョンごとの日本でのマーケットシェア
• font-family指定の参考記事
• さいごにひとこと

Macに標準搭載のフォント一覧

Appleのサポートウェブサイトに掲載されている各OSバージョンに組み込まれているフォントの一覧です。

• macOS Ventura に組み込まれているフォント
• macOS Monterey に組み込まれているフォント
• macOS Big Sur に組み込まれているフォント
• macOS Catalina に組み込まれているフォント
• macOS Mojave に組み込まれているフォント
• macOS Sierra に組み込まれているフォント

これらのページでは「○○でダウンロード可能なフォント」というセクションがあって、ここに一覧されてるフォントはあたかも標準ではインストールされていない印象を持たされます（僕は勘違いしました）。ところが、言語が日本語に設定されているMacで、たとえばCatalinaでは、このセクションに記載されている游ゴシックや筑紫A丸ゴシックは標準でインストールされているようです。

購入したばかりのM1 Mac miniのFont Bookで確認したら、游ゴシックや筑紫A丸ゴシックは有効になっていました。自分で変更してないのでデフォルトで入ってたはずです（Adobe CCやMS Officeなどを入れてから確認したので、OSがまっさらな状態ではなかったですが…）。

Androidに標準搭載のフォント

Androidでは端末メーカーによってデフォルトフォントが変更されている可能性があるので注意が必要ですが、和文はNoto Sans CJK JP、欧文はRobotoが標準搭載のフォントとのことです。ただ、公式（Android DeveloperやMaterial Designウェブサイト）での情報は見つけられませんでした。

ちなみに、和文フォントがNoto Sans CJK JPになったのはAndroid 6.0からで、それ以前はモトヤフォントが標準でした。また、欧文はAndroid 4.0からRobotoが、それ以前はDroidが標準フォントでした。

参考情報

• RobotoのWikipediaでの情報
• Noto fontsのWikipediaでの情報
• DroidのWikipediaでの情報
• Webサイト制作に欠かせない標準フォントの知識とは？（スマホサイト編）
• Android 6.0(Marshmallow)の標準フォントに関する注意

各OSのバージョンごとの日本でのマーケットシェア

GlobalStats statcounterのそれぞれのデータページへのリンクです。

• Windows
• iOS
• Android
• Mac

あと、日本でのOSマーケットシェアはこちらです。

• OS Market Share Japan

世界だとAndroidが圧倒的なシェアを誇るんですが、日本では1. Windows、2. iOS、3. Androidという順になっているのが面白いですね。世界と日本のマーケットって、やっぱりちょっとずれてるんですね。

目次

以下はページ内のセクションへのリンクです。

• 設定をした端末とVSCodeのバージョン
• 設定同期機能の基本設定
• 非同期の設定
• さいごにひとこと

設定同期機能の基本設定

同期機能の設定は、英語ですが公式ウェブサイトの情報が参考になります。

• Settings Sync

あと、下記ブログの「設定方法」のセクションがわかりやすかったです。

• 【VSCode】公式版の設定同期機能 Settings Sync を早速使ってみた

目次

以下はページ内のセクションへのリンクです。

• まずはサポートに問い合わせ
• T型トルクスドライバーをゲットして分解
• 親指ボタンの中のパーツを外してみる
• ゴムの樹脂部分を紙やすりで削る
• さいごにひとこと
• 参考にさせてもらった記事

T型トルクスドライバーをゲットして分解

分解するにはT型トルクスドライバーと小さいプラスドライバーが必要です。

僕の場合、T型トルクスドライバー（ヘックスローブ）はT5サイズ、プラスドライバーはNo.00とNo.0サイズを使いました。

写真（左）のように、マウスの底についているソールを剥がすとねじ穴が出てきます。こちらはプラスドライバーで外します。

写真（右）がトルクスネジです。2つあります。僕の場合、T5サイズで外せました。T6やT4、T3と書いてあるブログ記事がありましたが間違いかな？それともモデルによって違うとか？

結局、僕はE-Valueの精密ドライバーセット（22個セット） を買っちゃいました。これだとT5、T6、T7、T8、T10までカバーできます。実はあとでMacBook Airのバッテリーを交換したときに使ったドライバーが使えることが判明したので、必要なかったんですけどね

ゴムの樹脂部分を紙やすりで削る

親指ボタンの辺のパーツの動きを確認してたら、上下のパーツを外した状態ではボタンがカチカチ動くのに、上下パーツを組み合わせてネジ止めすると動かなくなるのを発見しました。どうやらゴムの樹脂部分が引っかかってボタンが元に戻らないようになっているみたいなんですね。

ということで、下の写真のように試しに紙やすりで少し削ってみました。そしたら上下のパーツを組み合わせても以前のようにボタンがカチカチ音をたてて動くようになりました！おっしゃ〜

写真の丸で囲った部分が紙やすりで削った部分です。そこそこの量を削りました。

上の画像の右が購入当時の状態の写真なんですが、親指ボタンの部分に微妙な隙間がある感じがします。それが、左上の削るまえの状態では、経年劣化のせいか隙間が詰まっているようでした。全体的に陥没しちゃってる感じですかね？

ちょっとわかりにくいですが、左下の削ったあとの状態ではゴムの部分が少し浮いているのがわかるでしょうか？これで隙間ができてボタンが動くようになりました。