Blogブログ

Scroll

改行cssとバリアブルフォント.woff

Creative Member

こんにちは。
WebチームのSです。

年末にダニに噛まれたのですが、数ヶ月程経過してからやっと快方に向かってきました。
1ヶ月を過ぎても虫刺されが治らないことは初めてだったので、不安で検索したところ寄生虫、感染症、自然治癒はしない...といった怖い記事ばかり読んでしまい、素人知識でいたずらに自らの不安を煽ってしまっていました。
が、来週末こそは病院に行こうと毎週二の足を踏んでいる内になぜか治ってきたようなので、刺されたことのないダニのアレルギーだったのか掻きすぎたことによる二次感染なのかわかりませんが、とにかく二度と虫が湧かないよう掃除を徹底したいと思います。


「バリアブルフォント」の文字やフォント名、htmlタグ、イラストなどが配置された画像

改行処理について


コーディングしていて改行したいとき、皆さんはどのように改行されているでしょうか。

特にLPでは今後内容が変わる可能性が低く、細部までデザインされており、改行位置まで気になることがあると思います。
初歩的なものではbrが挙げられますが、文章の意味的にはさほど重要な改行ではないことが多く、LPではbrは望ましくない場合が多い印象です。
また、見た目を整える手段としてはレスポンシブには対応し難く、ちょっとした文言修正の度に一つ一つ修正が必要になるのは保守性に欠けるのではないでしょうか。

改行にまつわるhtmlタグ・cssプロパティは何種類かあり、何が何だったかわからなくなりやすいため、今回は各プロパティの概要とよく使う値・結果、ソースにブラウザ対応状況をまとめてみました。
推奨事項や対応状況は変わる可能性がありますので、最新情報を確認しつつ、ぜひお手元のケースに合った指定を探してみてください。


htmlで改行


<br>
意味的に重要な改行にのみ使用。必ず改行する。
詳細：MDN
<br />はXHTMLで定義されていた古い書き方のため避け、見つけ次第修正しましょう！

これはbrのサンプルです。<br>
必ず改行します。
<wbr>
改行可能位置。有効にするためには親要素に指定が必要。
詳細：MDN
<wbr />も同じく古い書き方です。
これはwbrのサンプルです。<wbr>ブラウザが任意で必要と判断された時だけ改行されます。
html<span></span> + cssdisplay: block;
意味を持たないinline要素（→どこにでも挿入可）をhtmlで任意の改行位置に挿入し、cssでblock要素にすることで改行させる方法。
<span></span>を使ったものだと他にも改行特殊記号を擬似要素で挿入するなどの方法がある。
いずれも画面幅に応じた指定等もでき、親要素の指定も必要ないことから、最も機能性に長けるのではないでしょうか。
ただしspanは意味を持たないため、用途は装飾的な改行に限ります。
これはspan＋blockのサンプルです。<span style="display:block">好きな位置で</span>改行させることができます。

cssで改行


cssプロパティ 概要・詳細・対応状況 よく使う値、例 プレビュー
white-space 空白文字（改行・スペース・タブ）の扱い
詳細：MDN
対応状況：〇　Can I use		 pre-wrap
line-break 日本語、中国語、韓国語の禁則処理。
初期設定では行頭に、。！等が来ないようにする。
詳細：MDN
対応状況：〇　Can I use		 anywhere
word-break 単語の折り返し
詳細：MDN
対応状況：〇　Can I use		 auto-phrase
overflow-wrap 文章の折り返し
詳細：MDN
対応状況：〇　Can I use		 break-word
text-wrap 文章全体の折り返し
詳細：MDN
対応状況：◯　Can I use		 balance

私は下記で指定することが多いです！^^
word-break: auto-phrase;
text-wrap: balance
いい感じの文節で改行しつつ、行ごとの長さがバラつきすぎないようにしてくれます。
これを指定した上で違和感の生じたところにspanで調整することが多いです。

バリアブルフォント（可変フォント）.woff


バリアブルフォントかつ.woff形式で使用する場合の読み込み方（font-faceの推奨記法）を探していたのですが、この場合に推奨される記述がすぐに見つけられず困ったので記録しておきます。


woffとバリアブルフォントの基本の使い方

  • woff：src: url('RobotoFlex-VF.woff2') format('woff');
    参考：MDN
    対応状況：Can I use
  • バリアブルフォント
    参考：MDN
    対応状況：Can I use

サンプルコード

@font-face {
  font-family: "MyVariableFontName";
  src: url("path/to/font/file/my-variable-font.woff2")
    format("woff2-variations");
  font-weight: 125 950;
  font-stretch: 75% 125%;
  font-style: normal;
}
参考・引用：
format
ブラウザが可変フォントに対応していない場合を考慮し、2つの構文を宣言
format: 〇〇;ではなくsrc: url() format();なので注意！
  • 可変フォント対応ブラウザ用：今後の構文
    format('woff2') tech('variations');
  • 可変フォント非対応ブラウザ用：非推奨だがブラウザでサポートされている構文
    format('woff2-variations');
font-weight
2つの値を記述し、フォントでサポートされている太さの範囲を指定
font-weight: 100 1000;
長くなってしまいましたが、読んでいただきありがとうございました！
  1. TOP
  2. お知らせ
  3. ブログ
  4. 改行cssとバリアブルフォント.woff

PAGE TOP