ぶっちゃけ、ホームページの色をセットするのって、カラーコードをCSSにセットして使う方が確実なんですが、
WYSIWIGの機能として、文字色や、背景色などの色を変更できる必要があります。
利便性は後から考えるとして、とりあえず文字色の変更できる機能としてのカラーピッカーを設置してみたいと思います。
デモ
解説
ちょっと乱暴な仕様ですが、改善点も含めて解説してみます。
カラーピッカー表示
<label class="color">TextColor<input type="color" name="color" /></label>
上記の様に、labelタグ内に、input type="color" をセットすると、labelをクリックした時に同時にカラーピッカーも表示されるようになります。
この方法は、input type="file" や、 type="radio","checkbox" などでも使うことができるので、いちいちjavascriptのイベントをセットしなくても簡単にクリック対応ができるので、自分はよく使う手法です。
色値の取得
input type="color" のvalue値に、色データが自動で格納されているので、.valueで手軽に取得できます。
それを、選択している文字列に対して、<span style="color:色値;">***</span> とすることで、選択箇所の色変更ができます。
課題
色を連続して切り替えると、その分 spanタグが追加されていき、すさまじいネスト状態になっています。
これを回避するために、選択値の上部に、style属性のcolor値を持っているかどうかを判定して、持っていない場合は「現状のコードのまま」、持っていない場合は「上位のspanタグのstyle家を変更」するように、コード回収すればいいです。
と言っても、今回はとりあえず、シンプルに色変更ができる状態のこのままにしておきますので、気になる人は是非手直ししてみてください。
あとがき
WYSIWIG機能を作っていて、気になり始めたんですが、
Webデザインの基本って、CSSなんですよね。
WYSIWIGは、HTMLを整えるエディタなわけですから、この状態でデザインも完了できてしまうわけではないんですよね。
でも、このHTMLとCSSの相関関係って、コーディングを理解できていないとなかなかできないんですよ。
ワードやパワポの様に、最終的な見た目さえできればいいという程度のデザインツールであればこれでもいいかもしれませんが、
Webサイトで使う場合は、HTMLのコードの整理や、効率のいいCSSの設定などが重要にもなるので、
この辺どうしようか悩み中です。
こんな時は、他のNO-CODEツールを参考にするのがいいでしょう。
教えて、NOTION先生!!
0 件のコメント:
コメントを投稿