こんにちは、はるまきです。
静岡アドベントカレンダーももしかして全部埋まるかも！？とワクワクしています！！
皆様のご登場に、感謝感謝です。来年もよろしくお願いいたします。
さて、今日は新しいテキスト系のCSSを簡単に試せるのを作ってみたので紹介します。
なやみ
見出しのデザインをコーディングするときのあるある。
コーダー）できました！
デザイナ）改行がデザイン通りじゃないから直して
コーダー）直しました！
デザイナ）やっぱりiPhoneSEで確認したら違ったから直して
コーダー）直しました！
デザイナ）ありがとう！（やっとか...）
コーダー）（レスポンシブの事情がね...）
というわけで、キャッチコピーや見出しって、改行などにも意味があったりして、レスポンシブで表現するときになかなか難しかったり。
こんなやりとりに便利なCSSが今年はいろいろ出たんですよね〜
作る前に確認してみるのはいかが？
そんなわけで、作る前にちょっと確認できるツールを作ってみました。
See the Pen Untitled by ゆっこ (@harumakiyukko) on CodePen.
ウィンドウ幅を変えたい場合は、Codepenへ行くのが早いかも。
「Vue」ボタンを押してコードを表示させてから、中心線を左右に動かしてもらうのが簡単かな..
もしくはブラウザ自体を動かすか...
積み残し
- フォントサイズもレスポンシブ対応したい
- フォント種類とスタイルも変更できるようにしたい
- 画面幅を変えられるようにしたい
ここら辺対応しないと実用にはまだまだかな。
しかし力尽きたのでここまで。
もしニーズがあれば頑張ります...
デザイナーやプランナーなどの方々にも使ってもらえたらうれしいです。