和田憲幸のブログ

メリークリトリス。メリークリトリス！世間ではクリスマスだと言うのに昨日は11時間も寝てしまいました平常運転中の和田です。か、悲しくなんかない！

さて、ちまちますすめているアレですが機能の備忘録も兼ねてご紹介を。

見出しの文字数によってフォントサイズを調整する機能

上記画像を見て頂ければわかると思いますが、モバイルで見る際に横幅の都合で見出しが改行されて見ったくない状態になることがレスポンシブWebではよくあります。見ていてあまり気持ちのよいものではないのですが、かといって１つ１つの見出しを調整するのはかったるい。そんな経験ありますよね。

というのを解決するための機能をつけてみました。オブジェクトの横幅に併せてフォントサイズを調整する機能ですね。とはいえ、あまり長文の見出しでこの機能を使うとフォントサイズがナマラ小さくなるので、使い所は難しいのですが、文字数的にモバイルデバイスの横幅をちょいはみだすかなー？みたいな時に使うと良いかもしれませんね。

日付関連の表現変更処理

例えば年齢だったり○年後、○ヶ月後、○日前、など見た時にダイナミックに変化する類のテキストってありますよね。年齢を毎年書き換えるなんてクソめんどくさいし。そういう場合に日付を指定しておくことで「○日後」とか「○才」とか自動的に表現方法を変更するための機能を付けてみました。○才とか○年後って表現は相対表現ですが、YYYY/MM/DDは絶対表現ですからね。そういうコンバートって素敵やん？

あとは細かい調整などをしたんですが何やったか全然憶えてないからまた今度書こう。
WebsiteToolKit.js デモ