Simplicityを少し改造してみた part18 見出しのデザインを使いやすく変更する

さて、本日は書きためていたものを連続放出です。

Simplicityの見出しデザインは、各見出しレベルに対して何かしら用意されています。例えば、

こういう感じのやつとか

こういう感じのですね

しかし、もっと有効に使う方法があるのです。これは見出しレベルに対してデザインをするのではなく、デザインしたものをそれぞれの見出しレベルに適用するというものです。

まぁ例を見てもらった方がわかりやすいと言うことで、サンプルを貼ってみます。

See the Pen 見出しバリエーション by Hidekichi (@Hidekichi) on CodePen.

色々なデザインがありますが、これらは一部を除き、どの見出しレベルでも表示することが可能です。
例えば、センター表示でh3とか、吹き出し表示でh2とか。

デザインを見出しレベルで固定するよりは、このように汎用性があるようにした方が便利に使えるかも知れませんと言う提案です。

どのようにして実現しているか

まず、.article内にあるh1〜h6までのものを初期化しています。
これは、Simplicityのデフォルトの内容を一旦初期化して、新たにデザインするためのものです。

次に、各見出しレベルのフォントサイズ等を設定します。確認しながらやったわけではないので、だいたいですがこんな感じぐらいだろうという感覚でやっています。

今回は、サブテキストと言うbootstrap等で言う、セカンダリテキストと言うのを入れてます。と言うか、入れられるようにしていますので、見出しはそれぞれflexを使って、

こういった設定にしています。つまり、見出しの中のものは縦並びになるということです。サブテキストは、それぞれ見出しのフォントサイズの70%で設定しています。
使い方は、

こういう感じです。

これらに対してclassを入れることで各デザインを適用しています。

このような感じです。吹き出しで、balloonクラスだけを入れた場合は左寄せで表示し、centerが入れば中央寄せ、rightなら右寄せという具合です。

デザインのクラスは現在、4種類あって、

吹き出し : balloon
重ね : pileup
上下ボーダー : topBottom
ストライプ : stripe

とあります。この中で、重ね(pileup)だけはサブテキストは非推奨です。擬似要素で作った背景ラインの上に文字を重ねて、text-shadowでなんとか背景のラインを文字部分だけわかりにくいようにしてありますので、サブテキストを入れるとなんだかなぁな状態になるかと思います。

これらクラスは増やすことは簡単にできますし、また色も別途色クラスを作れば、見出し色と、サブテキスト色を別で設定することもできます。

最後の方に、例えば夏目漱石の「吾輩は猫である」を見出しでデザインした場合はどうなるかの例も入れておきました。

これら使い方は無限大(?)、なので、その内デザインが色々できたらパーツスキンとして配布とかもするかも知れません。

2016/06/05 追加分

クラスに下線(.underline)、破線(.dashed)、点線(.dotted)、縦ストライプ(.stripe.vertical)、横ストライプ(.stripe.horizontal)、チェック(.checked)追加
リンクのアンダーラインを解除、リンクカラーを見出しから継承するように設定。

スポンサーリンク

シェアする

フォローする