読者です 読者をやめる 読者になる 読者になる

コンパイラかく語りき

文系新卒プログラマーのメモ

CSSのfont-familyを一覧からカンタンに選べるツールを作った

CSS jQuery

どうも!chuckです。

みなさん、cssのfont-familyってこだわってますか?それともぜんぜん気にしてない??

 

僕自身、font-familyはいつもどれを使うか迷います。で、いつも「CSS font-family 一覧」なんて検索しちゃってます。

というわけで今回は、font-familyの一覧をわかりやすく参照でき、しかも文字列にしてくれるツールを作りましたヽ(=´▽`=)ノ

 

 

DEMO 

こちらが現在の制作物です。

f:id:chuck0523:20150714232651p:plain

http://chuck0523.github.io/front-end-coding/fontPicker/fontPicker2.html

 

font-familyの名前が書かれたボックスがずらーっと並んでいます。(もちろん、フォントは各々のfont-familyを使っています。)

こちらから使いたいフォントを選択していただくと、下のテキストエリアに文字列化して格納されます(`・ω・´)ゞ

 

勉強になったこと

Textareaのリサイズ

css-happylife.com

下部のテキストエリアに関して。横方向にだけリサイズしたかったので。

どうやら、

resize : horizontal

と指定すれば良いみたいです。

 

テキストを選択状態にする

フォーカス時に全選択状態になるテキストエリアを作る - jQuery 日本語リファレンス

これ毎回忘れちゃう… jQueryで.select( )メソッドを使えばいいんですね!

 

文字列の置換

qiita.com

ボックスが非選択に戻った時に、テキストエリアからそのフォント文字列を消したかったので。.replace( )を使用。ただ、置換対象に変数を指定する方法は始めて使ったかも!

 

文字列の切り出し

slice(start, [end]) - jQuery 日本語リファレンス

同じく文字列操作。.slide(1)とすると、2文字目から末尾までを取り出してくれるんですね!第二引数をなくすと末尾指定したことになるんですね

 

 

あっ、font-familyはこちらを参考にしました↓↓

w3g.jp

今回は和文フォントは大幅に割愛しました。