見出しをCSSで吹き出し風にしてみました。

どうも、牛丼デザイナーのぽてこです。
今日はCSSで吹き出しを作る方法についてご紹介します。

最近ブログがひとりごとばっかだなぁ。
なんかモチベーションあがんねぇなぁ。

もともと、仕事中に調べて勉強になったことをまとめるブログだったので
ネタは山ほどあるはずなの！に！
なのにですよ！

モチベーションがこない

これは大問題。

モチベーション上がらないのは、ブログデザインを弄ってる途中だからだ！
半端だからだ！
かわいくしよう！

ということで、記事の子見出しを吹き出し風にしてみました。
今回はその方法と軽い解説になります。

CSSで吹き出しを作る

牛丼ブログに使用した吹き出しCSSをまずはご覧くださいまし。
（ふきだしーえすえす。。。！）

【CSS】

 .fukidashi{
        margin-bottom: 50px;
	padding: 20px;
	border: 3px solid #283f5e;
        position: relative;
	width: auto;
	min-width: 115px;
	height: auto;
	line-height: 34px;
	color: #283f5e;
	background: #F5F5F5;
	text-align: center;
	z-index: 0;
}
.fukidashi:before {
	margin-left: -9px;
	border-style: solid;
	border-width: 9px 9px 0 9px;
	border-color: #F5F5F5 transparent transparent transparent;
	content: "";
	position: absolute;
	bottom: -8px;
        left: 50%;
	width: 0px;
	height: 0px;
	z-index: 0;
}
.fukidashi:after {
	margin-left: -10px;
	border-style: solid;
	border-width: 10px 10px 0 10px;
	border-color: #283f5e transparent transparent transparent;
	content: "";
	position: absolute;
	bottom: -12px;
        left: 50%;
	width: 0px;
	height: 0px;
	z-index: -1;
}

ちなみに、はてブロの見出しに吹き出しをつけたい場合は、
「.fukidashi」を「.entry-content h◯」にすればいいだけ。のはず。

簡単適当な解説

ぱっと見、たくさんのプロパティが書かれているし、
なんでCSSで三角形が作れるのか謎い。
YES小並感。

だけども、仕組みは意外と簡単みたいです。
borderを使って三角形を作って、
その三角形をpositionで任意の場所に持ってくるだけの簡単なお仕事。

わかりにくい場合は、
ファイアーバグなどで要素の検証をして
borderの色を変えてみると良いかもしれません。
色を実際に変えたのがこちら。

参考画像：この間投稿した記事の見出しタグ。

CSSで三角形を作る

では、なんでborderだけで三角形が作れるのでしょーか。
じっとりねっとり調べてみました。

結論からいうと、
いらない部分を見えなくして三角形を作っているだけです。
（ズバーン）

width、height、共にサイズ無しのdivの中にborderをひくと、
線の太さが反映された四角い箱ができます。
この四角いborderの箱をいじいじしていきましょう。

borderの上下左右の色を変更しよう

まず、borderの色は上下左右別々に指定することができるので
それぞれ違う色を指定して確認してみましょう。

【CSSはこう書くよ】

.border {
        width: 0;
        height: 0;
        border−top: solid 10px #ff00ff;
        border−right: solid 10px #ffff00;
        border−bottom: solid 10px #0000ff;
        border−left; solid 10px #ff0000;
}

そうすると、こんな感じの四角ができるはずです。
画像では洒落こいた色にしておりますが、
もっと、#ff00ffとかわかり易い色がいいと思います。
（管理人トラップではありません。）

いらない部分を消しちゃおう

色を付けることで必要な部分とそうでない部分がはっきりしました。
いらない部分の色をtransparentで透明にしてやると、形が変わるという仕組みです。

今回の下向き三角の場合は、top意外が不要なので以下のようなCSSになります。

【CSS】

.border {
        width: 0;
        height: 0;
        border−top: solid 10px #ff00ff;
        border−right: solid 10px transparent;
        border−bottom: solid 10px transparent;
        border−left; solid 10px transparent;
}

簡潔に書いてみよう

もっと簡潔に書くと、以下のようになります。

【CSS】

.sankaku{
        border-color:transparent;
        border−top: solid 10px #ff00ff;
}

このくらいのコードで全然いい感じの三角形ができちゃいます。

吹き出しのコードにもこっちを使っていいくらいだと思うんだ。
コーディングするときはできるだけ簡潔なコードにしたいですもんね。

三角形のCSSで台形も作れるってさ。

そういえば。
三角形いじれば台形も作れるんじゃね？
……って思っていじいじしていたのですが。
台形の場合は少しやり方が違うみたいです。

やり方は、三角形を作ってwidth指定して幅を広げるだけ。
おお。簡単。ぱねぇっす。

応用もきく便利なCSSなので原理を覚えておくと役にたつかもしれません。

こばなし。という名の編集後記

おお、久しぶりにおえかきしました。
あの絵柄はコンビニ飯ブログ以来です…w

でもあの絵柄って、やっぱり、楽しいなぁ自分らしいなぁと思うのです。
すごく簡単に描けちゃうので(w)今度から積極的にらくがきしてこーと思いましたん。