ブログをデザインするときCSSを使いますよね。

CSSを使うときは見やすくするためにhtmlとCSSに別々に分けて書くことが多いです。

その方がコードが読みやすくなったり、使いまわすときにコードの量を減らすことができます。


しかしBloggerなどの無料ブログではhタグ以外基本的にCSSは各ページに書くと思います。たぶん。

hタグは確実に使い、多用するのでブログ本体に入れたほうがいいですよね。


でもCSSで文字を囲う枠のデザインとか使うとき、ずっと同じ枠を使うとは限りません。

数回しか使わない枠をブログ本体に書き込むのはコードの乱雑さの原因となります。

それに色とかも毎回変えられた方が便利ですよね。


そこでインラインで入力することが求められます。

インラインで入力すれば毎回書くコードの量は増えますが使うときだけ使う分だけ使えます。

またデザインを毎回自分で簡単にいじることもできます。


方法

今回は文字を囲う吹き出しを例に取り上げます。


吹き出しの中身です

 

こんな感じのものですね。

疑似要素

この吹き出しのコードはCSSの疑似要素を使うことでhtmlとCSSを分けてすっきりさせて書くことができます。
それが以下のコードです。

html 
<div class="hukidasi">
  <p>吹き出しの中身です。</p>
</div>
CSS 
.hukidasi{
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
}
.hukidasi:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}
.hukidasi:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}
.hukidasi p {
  margin: 0;
  padding: 0;
}
これについては前に紹介しました。

これをインラインで書くにはどうすればよいでしょうか。

インライン

疑似要素をインラインで書く、すなわちhtmlの中で1つにまとめるには疑似要素に対応させた<div>を使います。

疑似要素とは対象のタグに装飾を付け加えるものです。
今回は「hukidasi」クラスにあとから装飾を付け加えています。

CSSをhtmlの中に書くときはstyle="CSSのコード"という風に書きます。

まず最初の.hukidasiではそのhukidasiクラスの要素の中にそのまま書き加えています。
そのためインラインに直すには「class="hukidasi"」の部分を「style=".hukidasiの{}の中身"」に変えるだけです。

次の.hukidasi:beforeではさっきと異なりbeforeというものがついています。
このbeforeはそのhukidasiクラスの<div>の中の一番最初に追加するという意味です。
すなわちその<div>の直後に追加するという意味です。

どのように追加するかというと
<div style="さっきのコード">
<div style=".hukidasi:beforeの｛｝の中身">
<p>~
という感じです。
<div>の中の最初に追加されるため、<p>よりも前に記述されます。

ではその次のafterはというと、hukidasiクラスの<div>の一番最後に追加するという意味です。
すなわち</div>の手前ですね。

最後の.hukidasi pはそのままpタグの中に追加するだけです。

このようにして追加したのが以下の通りです。

<div style="position: relative;  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
 box-sizing: border-box;">
 <div style="content: "";  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
 z-index: 2;"></div>
  <p style="margin: 0;  padding: 0;">吹き出しの中身です。</p><div style="  content: "";  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;"></div>
</div>

このようにしてインライン化できます。
しかし実際はこれでは動きません。
実はcontent=""の部分のcontentというものは疑似要素の中でしか使えません。
そのためcontent=""の部分を削る必要があります。

また、無料ブログであるBloggerではcontentを削っただけだと吹き出しの三角の部分が消えてしまいます。
bloggerでは勝手にコードが補完されるようで、上のコードを入力して何か変更して保存するとafterとbeforeの三角形を構成するborder全体が透明になるようにコードが補完されてしまいます。
これを防ぐにはborder-rightだけではなく、left,top,bottomについても自分で記述する必要があります。

吹き出しの三角形の作り方

吹き出しの三角形はborderを重ねるとその境界が斜めになることを利用しています。
例えばtopとleftを重ねると上と左の線がぶつかって以下のような2つの三角形ができます。
ここでtopの方を透明にすればleftだけの三角形を描画することができます。

しかし、bloggerでは指定していないものを補完しようとし、rightとbottomについて記述されていないとborder全体を透明にするコードが勝手に入るのです。
そのため、bloggerではrightだけの三角形を描画する場合でもtop,bottom,left,rightすべて書かないといけません。


以上のことを踏まえてBlogger用に吹き出しをインラインに直すと以下のようなコードとなります。
<div style="background: rgb(255, 255, 255); border: 3px solid rgb(85, 85, 85); box-sizing: border-box; color: #555555; display: inline-block; font-size: 16px; margin: 1.5em 0px 1.5em 15px; max-width: 100%; min-width: 120px; padding: 7px 10px; position: relative;">
  <div style="border-bottom: 12px solid transparent; border-color: transparent rgb(255, 255, 255) transparent transparent; border-left: 12px solid transparent; border-right: 12px solid #FFF; border-style: solid; border-top: 12px solid transparent; border-width: 12px; left: -24px; margin-top: -12px; position: absolute; top: 50%; z-index: 2;"></div>
  <p style="margin: 0px; padding: 0px;">吹き出しの中身です</p>
  <div style="border-bottom: 14px solid transparent; border-left: 14px solid transparent; border-right: 14px solid; border-top: 14px solid transparent; left: -30px; margin-top: -14px; position: absolute; top: 50%; z-index: 1;"></div></div>