Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【CSS/実験】罫線背景

 どうも!LSSです!!

ちょっと背景を罫線にしてみました。

line-height で、行の高さもあわせてみたのですが…
さていかがなものか?

…これが、一見うまくいっているように見えて、「ちょっとした事」で崩れたりします^^;

例えば…ちょっと文字を大きくしてみたりとか。
あと、他の要素(見出しとか)が入る事でも、ズレてきたりしますね。←すでにズレてきていますw

 

 

コード

<style>
.keisen{
line-height:2.5em;
background:linear-gradient(transparent 75%,#444488 75% 80%,transparent 80%) 0px 0px/100% 2.5em;
}
.keisen *{
margin:2.5em 0px!important;
}
</style>
<div class="keisen"><p>ここに文章を入れます。改行・改段落も可。</p></div>

 

なので、例えば記事の内容部分の全てを罫線化する事も可能ではありますが、ここでは「keisen」というクラス名をつけた<div>タグ内でのみ、罫線背景が有効となるようにしました。

<style>~</style>は一度書いておけば、同記事内で何度でも

<div class="keisen"><p></p></div>

を使う事が出来ます。

ちなみに、記事内容全てを罫線にするには、

 

コード

<style>
.entry-content{
line-height:2.5em;
background:linear-gradient(transparent 75%,#444488 75% 80%,transparent 80%) 0px 0px/100% 2.5em;
}
.entry-content *{
margin:2.5em 0px!important;
}
</style>

 

というコードで、「entry-content」クラスに対して指定する事で実現します。(はてなブログの場合。ですが前述の通り、すぐに崩れるのでオススメはしません^^;)

 

 

あとがき

とりあえずやってみましたが、やはり厳しいものがありますね^^;

こうしてクラス名で指定した要素内で限定的に使う分には良いですが、文字をちょっと大きくしたり、見出しとか画像とかを入れても崩れないようにする方法があるかは不明です。

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^