CSSハック

文字詰め

モーダル

レスポンシブ

サブカルチャーの
ロック魂は終わったのか？

当時の若者の生き方を支配したロック。
ロックじゃない生き方なんてカッコ悪すぎる。
弱くては生きていけない、
ハードボイルドな男の時代だった。

Internet Explorer(IE)のクロスブラウザ対策

2020年3月3日

マイクロソフトは2019年2月10日、旧式のウェブブラウザーInternet Explorer(IE)を使い続けるのは危険だとして、その使用をやめ、最新のブラウザーを使用することを求める勧告を出した。

これより旧式のウェブブラウザーIEはウェブ制作現場でのクロスブラウザの対象から完全に外れた。

12.14%(IE 11.0)のシェア率

だが、2020年2月時点で未だに12.14%(IE 11.0)のシェア率が認められている。クロムに次ぐ二番目のシェア率なのだから何らかの対策が必要だ。因みに最終バージョンであるIE 11は2013年10月17日に公開されたが、多くのサイトの制作者や、ブラウザ連携が必要なソフトウェアの開発者はIEからMicrosoft Edgeに対象を移行している。

アクセントを与えるには、このページのようなグリッドレイアウトが効くグリッドレイアウトが効く。だが、IEに対応させるにはIE独自のグリッドレイアウト・プロパティを記述しなければならない。

現実的に、IEに対応するかアラートを出すかの二つの方法から選択しなければならないが、ここでは後者のIE向けだけこんな風にalert(アラート)を出すことを優先した。

このページをIEで開くとアラートを表示する。

フォントサイズを任意に替えるボタンを作成。ピンチアウトができない場合の解決策。

コミックをコマ割りして番号を表示した例。※とても上手くいったお気に入りのひとつ。

重要なリストを作成してじっくり眺める。リストのラベルをクリックして説明を開く。不要なリストは削除する。

PC用では棒グラフを作る。実用的なアニメーション・棒グラフを水平方向に羅列して作成した最終形。。

プロポーショナルメトリクス Noto Sans JP

2020年3月9日

カラムをふたつにしたら当然一行の文字数は短くなる。そのことによって、従来は一行の文字数が多かったので目に留まらなかったある機能が弊害に映ってきた。その機能とは均等割り付けだ。

均等割り付けは、文中にカタカナ、英数字が連続すると割り付けのバランスが壊れるカタカナ、英数字が連続すると均等割り付けはバランスが壊れるようだ。そこでこれを改善するために、以前から試そうと思っていたプロポーショナルフォントのカーニング（文字詰め）に手を出してみる。

どういうところに効力を発揮するかというと、「」などの記号の前後の余白の詰め、カタカナ、英数字など、不自然な空白を招く字間をよりバランスの取れた文字詰めを実行して、読みやすい文字の配置を行うものである。

検証するフォント、検証する準備は何をする？

日本語対応のGoogle Noto Fontsの「Noto Sans CJK」、「Noto Sans Japanese」、「Noto Sans JP」の三種類を試して比較してみよう。Googleのガイダンスには詳しい説明がないので、その種類の違いさえ覚束ないので、ここは実装して確認してみるしかない。

「Noto Sans CJK」は『サブセット化済みの「Noto Sans CJK JP」』で検索すると目当てのものが直ぐに見つかる。この「最適化ファイル」をローカルに保存して運用の準備をする。

「Noto Sans Japanese」と「Noto Sans JP」はGoogle Fontsへ行き、フォントとスタイルを指定して埋め込み用コードを<head>～</head>内にコピーする、もしくは指定のリンクをCSS内に記述する。

Noto Sans CJKの準備には少し手間が必要だが、検証の結果はどうなっただろうか？

まず期待していた「Noto Sans CJK」は縦書きに問題が出た。句読点の表示が左側に配置され、長音の「ー」が回転しない。ここで引っ掛かるようでは先へ進めない。

「Noto Sans JP」と「Noto Sans Japanese」については、後者の縦書きに問題が出た。font-weightの指定が効いてくれない。

初動でこういう状況なのでいささか意気消沈。もう少し試してみる必要があるかもしれないのだが…。

結局、幣サイトで使っている現状の「Noto Sans JP」で表示させる方法が賢明であることが判明した。ぐるっと遠回りしただけだったのか。

Google Fontsへ行こう、そしてコードを生成する

何も収穫が無いまま終わるかにみえたが、結果は見事に違った。捜し物のフォントは「Noto Sans JP」であり、正にプロポーショナルメトリクスによる詰め組みが可能だということが分かった。初動での落胆が検証の流れを鈍らせたのだった。

検証で分かったことは、「Noto Sans Japanese」はプロポーショナルフォントのカーニングが効かなかった。「Noto Sans CJK」(縦書きに難あり)と「Noto Sans JP」は大丈夫であった。

よって、「Noto Sans JP」を使って以下のスタイルをCSSに追加した。

{ word-wrap: break-word; overflow-wrap: break-word; /*単語の途中に折り返しを入れない*/letter-spacing: 0.05rem;/*文字の間隔を指定*/ font-feature-settings: 'palt' 1;/*字詰めをする*/ }

もうひとつ。埋め込み用コードが新しくなっている。現行のものと交換する必要がある。Google Fontsのページ上で使いたいものを選択するとコードが自動生成される。

そしてこのコードには「display=swap」が付加されている。これはNoto Sans JPを読み込むまで代替フォント（font-familyの指定順で次に有効なフォント）を表示するもの。ブラウザのタイムアウトに有効だ。

例：「Noto Sans JP」と「Roboto」で各々font-weight: 400;font-weight: 900;を使いたい場合のコードとCSS

<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;900&family=Roboto:wght@400;900&display=swap" rel="stylesheet">

{ font-family: 'Noto Sans JP', sans-serif; }
{ font-family: 'Roboto', sans-serif; }

Google FontsではNoto Sans JPとの人気のある組み合わせとして、Robotoが奨励されていた。

フォントサイズを任意に替えるボタンを作成。ピンチアウトができない場合の解決策。

コミックをコマ割りして番号を表示した例。※とても上手くいったお気に入りのひとつ。

重要なリストを作成してじっくり眺める。リストのラベルをクリックして説明を開く。不要なリストは削除する。

PC用では棒グラフを作る。実用的なアニメーション・棒グラフを水平方向に羅列して作成した最終形。。

Grid Layoutを使って2カラムレイアウトを差し込んでみた。

Grid Layoutで複雑なレイアウトを実行してみよう。ここでは文字と文字を重ねてデザインしてみた。

レスポンシブ・モーダルの適切なサイズとは？

2020年1月13日

以前のモバイルのモーダルサイズ

改善したモバイルのモーダルサイズ

これまで制作してきたモーダルはモバイルのLandscapeを考慮したものではなかった。

それ故、前回「オーバーレイ・エフェクトとレスポンシブ・モーダル」というものを作った。ここでの成果は小さなモーダルを作ることができたことだ。だが、PC向けでは以前のように大きく表示したい欲求不満が残った。

そこで、今回はPC向けとモバイル向けの二種類の大小のモーダルを用意してPC用とモバイル用で別々のモーダルをスイッチさせて表示しようと考えた。

実現方法は、PC向けとモバイル向けのモーダルのリンク元画像一式を併記して「display:noneとdisplay:block」を使って表示と非表示をレスポンシブで使い分けることだ。

つまり、PCで見るときはPC用のリンク付き画像だけを表示してモバイル用は非表示になる。

モバイルで見るときはPC用のリンク付き画像は非表示になり、モバイル用のリンク付き画像が表示されるという具合である。タップすると、指定されたモーダルを表示する。

本文中のテキストからモーダルを開く場合も同様である。テキストが段落からズレないようにするためには、表示させる場合は「display: inline」を使う。

イメージのみを開きたい場合がある。不要なものは一切排除して(特に画面が狭いモバイルを配慮して)、ボタンまでも排除したものを以下の「イメージのみ開く(1)(2)」に作ってみた。イメージの右上にFont Awesome のを表示させてピンチアウトができることを表示した。(2020年2月4日加筆)

イメージのみ開く(1)

イメージのみ開く(2)

Motion photo：鳥

天を掴む手と地を探る手

Wormhole(ワームホール)

Motion photo：光

モーダルウィンドウはズームを可能にする

幣サイトではslick.jsを使っているが、これを使っているとズームが効かなくなる。このことは本来極めて痛い。

モーダルはイメージを大きく表示したり、説明を付け加えたりして、追加情報を付加することができる。しかし、その本来の目的以外に、モーダル内ではピンチアウトしてズームさせることが可能だ。

アイデア次第でビジネスシーンに使えるビフォーアフターのデザイン。

スクロールするとトップイメージが徐々に拡大表示していく視覚効果抜群のギミック。CDN を使ってみる。

写真の縦と横方向の中央に文字を配置するレイアウトの必修パターン。

PC用では横5列に配置した商品リスト。モバイルでは操作上の観点から1列表示がベストだろう。

モバイルと単行本のフォントサイズ

2020年1月7日

モバイルと単行本

フォントサイズはどの位が読み易いか？PCでは？モバイルでは？よくネットで見かける問いだ。

フォントサイズを決定するには、以下「文庫本と単行本」のような根拠となる基準値を設定する必要がある。そうしないと、後々サイズに迷うことになる。

幣サイトでは、以前は「vw」の単位でフォントサイズを管理していた。スクリーンの幅に応じてフォントサイズが伸縮するものだ。だが、知見が足りなかったことから変更することになった。

文庫本と単行本の話をする。フォントサイズが一番気になるのは本を読むという昔からの馴染みの深い行為である。

その昔、文庫本の文字サイズは7.5ポイントだったが、今や単行本と同じサイズの9.25ポイントであるそうだ(新潮文庫の場合である)。この流れは興味深い。

モバイルに限って考えてみる。モバイルでは最小のスクリーンサイズであるiPhone SE(320×568) を文庫本と見立てる。最大のスクリーンサイズのiPhone XS Max / XR(414×896) は単行本に見立てることができる。

つまり異なる画面サイズのモバイルのフォントサイズを全て統一して、且つ実際の文庫本や単行本のサイズにも近付ければベストだ、というのが現在の筆者の判断である。

PCとモバイルではピクセル表示が異なるのでPCとモバイルではブレークポイントで分けて各々のフォントサイズ設定が必要である。

iPhone SE を読み易さの基準値にしてモバイルのフォントサイズを確定できればと思う。

実機と単行本を重ねて比較して、暫定的に iPhone SE のフォントサイズを「17.7px」に設定した。

モバイル以外の大画面のPCでは、<body>を「max-width」で上限の幅を限定しているため、現在は16pxで固定している。しかし、近い将来「max-width」を取っ払い、フォントサイズの単位に「vw」が再登場してくるかもしれない。

幣サイトではブレークポイントの境界になる基準のひとつがフォントサイズ。ふたつ目がポートレートとランドゥスケイプだ。何を基準にするかで迷走することになるのがレスポンシブレイアウトだ。

レスポンシブの何処を境界としてbreakpoint(ブレークポイント)を設定するかは、もはや哲学である。

実に様々な論理的思考が存在するのだが、幣サイトではふたつ目のブレークポイントの境界は、以下のようなレスポンシブレイアウトを構築してきて久しい。

モバイルのPortrait(1)、モバイルのLandscape(2)、PCとTabletを一緒にしたPortrait(3)、PCとTabletのLandscape(4)以上の4種類だ。

この4種類に各々の適正なレイアウトを与えなければならない。

スクリーンの幅と高さにより、適正なモーダルのサイズを宛がうための種類が大と小の二種類。全体レイアウトが三段組みか二段組みか一段組みかで分けられる種類が三種類。それと上記のフォントサイズが二種類。コンテンツの表示サイズなど、以上の組み合わせを振り分けて4種類にしたものが暫く定着している。

しかしながら、随分と長い時間を要して、モバイルのLandscapeでのレイアウトを改善できたのはつい最近である。目が慣れてくるという感覚が必要である。

モバイルではPortraitが優先され、Landscapeを考慮しないサイトが多い。Landscapeをしっかりサポートするのは大変手間がかかることだ。制作者の実力を比較するには丁度良いポイントになるだろう。

モバイル Landscape

モバイル Portrait

iPad Portrait & Landscape

vwとportraitとlandscapeを使ってメディアクエリのブレークポイントを簡略化する。

異なる形式のメディアクエリで15種類のブレークポイント」を設定。ブレークポイントの順番を検証する。

テキストアニメーションを使って「メディアクエリ再考のススメ」のテクニックを紹介。

サブカルチャーのロック魂は終わったのか？