デザインカンプからのコーディング【練習】デザインカンプからのコーディングを行っている時に、文字のサイズや行間、文字間は指定通りなのに、なぜか文字がデザイン通りに合わない、ということが出てきました。..)φメモしておきます。結論からいうと、プロパティはtransformを使います。scaleとtranslateの両方を使いました。scaleの1つ目の引数は左右方向への縮小・拡大、2つ目の引数は上下方向への縮小・拡大、を設定できます。次にtranslateですが、これは1つ目の引数が左右方向への位置の調整、2つ目の引数は上下方向への位置の調整になります。scaleとtranslateの両方を使うかというと、例えば上の例でいうと、scaleで左右方向への文字が0.8倍に縮小された分、文字の幅全体が中央に縮んでしまいます。それをtranslateのー10pxなどと指定して、縮んだ分左方向に寄せています。(+の値なら右方向に寄る)例えば、文字を全て左寄せしている場合などは、scaleを使うと文字のスタート位置がズレることがあるので、translateを使って微調整していく、という流れです。このtranslateについては文字を何倍に縮小したか、拡大したかで計算して、具体的な数値を割り出す方法もあるらしいです。私は計算等はせず、デザインを透過させながら微調整を行いました。この記事を書いた人tanatiyo記事一覧ウェブサイト古い投稿web制作の勉強を始めて3か月が経ちました。久々に縦書きの実装をしようと思ったら、いろいろと忘れてしまっていたので、調べたことを備忘録として残しておきます。しやすいようにSassファイルを別で分けてコーディングを行っていました。[...]2022年5月1日デザインカンプからのコーディング【練習】CSSレスポンシブ対応を少しでも楽にしたい【フォント編】コーディングに時間がかかってくるところの一つに、レスポンシブ対応があります。モバイルファーストという言葉があるくらい、スマホでの見え方は検索エンジンに見つけてもらうためにもレスポンシブ対応は必須の作業となっています。しました!レビュー2回目まで指摘された箇所(フォントのtransform)を修正して、ポートフォリオとして活用させて頂きたいと思います。よろしければご覧ください。[...]2022年5月6日Web制作全般この投稿へのトラックバックコメントはありません。Comments表示できるコメントはありません。