エントリーの編集
![loading...](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/common/loading@2x.gif)
エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。
記事へのコメント0件
- 注目コメント
- 新着コメント
このエントリーにコメントしてみましょう。
注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています
![アプリのスクリーンショット](https://b.st-hatena.com/bdefb8944296a0957e54cebcfefc25c4dcff9f5f/images/v4/public/entry/app-screenshot.png)
- バナー広告なし
- ミュート機能あり
- ダークモード搭載
関連記事
SVGアイコンのサイズと位置
ヘッダーのリンクにはSVGの虫眼鏡のアイコンを流用した。vertical-alignプロパティーで文字位置と、line... ヘッダーのリンクにはSVGの虫眼鏡のアイコンを流用した。vertical-alignプロパティーで文字位置と、line-heightとfont-sizeプロパティーの値を使って文字サイズと、それぞれ揃うように調節している。 $ratio-text-size-header: 0.79412; $line-height-header: 2.125; .global-navigation svg { height: (1 / $ratio-text-size-header / $line-height-header * 100%); vertical-align: text-bottom; } 文字サイズはem単位で拾えるが、そのまま使うと「あれっ?」となることが多々ある。行ボックスという概念があるためだ。そのためこのように文字サイズの係数と行の高さの係数を使い、行ブロックに対して文字がどれくら