{進捗記録}{進捗}{希哲17年4月30日の開発}{希哲17年4月30日の進捗}{希哲17年4月30日}{
--icn-hgt
}{--icn-wdt
}{希哲17年4月30日の進捗時限}{--icn-sz
}{CSS アイコン実装}(19){希哲17年4月30日2歩 K#F85E/E74C-B353}
宇田川浩行{進捗記録}{数}{時}{進捗}{希哲17年4月29日の開発}{希哲17年4月29日の進捗}{希哲17年4月29日}{個別指定}{
rotate
}{scale
}(63){希哲17年4月29日16歩 K#F85E/E74C-A887}
宇田川浩行アイコンの縮尺問題は .sz16
や .sz32
といった分類名で CSS 変数 --icn-sz
を設定することでいったん解決した。これで width
,height
を設定し,基本的に各数値は比率で設定する。border-width
などパーセント指定が出来ない場合も var()
と calc()
を使って計算出来る。
当初,32px四方を基準に値を調整し,最終的に transform
の scale()
で縮尺を調整するということを考えたが,rotate()
などを使いたい時に組み合わせの数だけ transform
の記述が必要という問題があった。最近は scale
や rotate
という個別指定プロパティもあるが,対応舞覧の普及率にまだ若干難がある。
{進捗記録}{先入観}{輪括弧}{進捗}{希哲17年4月1日の開発}{希哲17年4月1日の進捗}{希哲17年4月1日}{よく分からなかった}{要素の一部}{広がっている}(44)
{希哲17年4月1日10歩 K#F85E/E74C-F8BB}
宇田川浩行{進捗記録}{進捗}{👍}{希哲16年9月8日}{希哲16年9月8日の開発}{希哲16年9月8日の進捗}{防げていた}{不自然な折り返し}{
max-width: 100%
}{おかしくなっていた}(37){希哲16年9月8日7歩 K#F85E/E74C-FCDD}
宇田川浩行{進捗記録}{ルビ}{進捗}{希哲16年3月2日}{
overflow: hidden
}{希哲16年3月2日の開発}{希哲16年3月2日の進捗}{position: relative
}{overflow: clip
}{調整していく}(83){希哲16年3月2日10歩 K#F85E/E74C-FDA9}
宇田川浩行描写内 <code>
,<kbd>
の装体調整で終了。これまで適当にしていた高さと垂直位置を調整した。
特に,輪結の下線と枠が被っているのが気になっていたので直したかったが,意外に正確な調整が難しく,かなり試行錯誤した。
最終的に,<code>
と <kbd>
は position: relative;
display: inline-block
にし,下線との隙間は bottom
で調整することにした。あとは height
,line-height
,padding
で微調整を繰り返し,ようやくどの舞覧で見ても大きな問題はないようになった。
舞覧毎に僅かな癖は残るが,だいぶマシになったのでとりあえずここで区切る。課題は残ったので暇をみてまた調整していく。
- 途中で不自然に改行されてしまう問題も行内部区になったことで解消した。
<a>
のpadding-bottom
での調整は断念。ルビとの相性が悪く,行間も現状のline-height: 1.8
は変えにくい。- Edge では他の舞覧のように下線の位置が下がらないため相変わらず被っている。