アイコンと吹き出しをCSSで作ってみた

こんばんは！　永理だよ。

最近タスク管理がうまく行くようになってきてて（当人比）ノリノリだよ！　そして今日は先日作ったアイコン画像を利用して吹き出しっぽいUIをCSSで作ってみた！

ところで、先日久しぶりにブログを書いたんだけど、所要時間が二時間もかかっていたことが判明！　

ブログはできれば毎日更新したいけど、毎日二時間もとれないなあと思って、今試行錯誤中。しばらくフリーダムに更新するよ！

進捗：Twitterプロフィール画像作成

先日のブログ更新で、何に時間がかかってるのかっていうと、ヘッダ画像のイラストだった…。

↑これね。　こんなしょぼい絵。顔だけ。

でも今の自分にはそのくらい時間かかるかなあ。うーん。しょうがない。

それに以前からTwitter用のプロフを作りたいと思ってたので、まあそれはよい。ことにする。

そのあとアイキャッチ画像からちょっと修正＆調整してTwitterのプロフはこうなったよ。

アイキャッチ画像からどこが変わっているかわかるだろうか（笑

今日のアイキャッチ画像について解説

で、今日のアイキャッチ画像↓が何かというと。

キャラっぽいアイコン画像をつくったので、台詞しゃべってるかのようなCSSを作ってみた。

永理

こんなやつね。ブログの途中にはさんだりすると、ちょっとアクセントになっていいんじゃない？

以前も吹き出しっぽいのつくったことあったんだけど、スマホでみたらデザインが崩れたりとかしてしまってたので、今回はレスポンシブに対応。

↑こちらのサイトで、いろんなブラウザサイズで表示が確認できます。

台詞のCSSは、まず「幅固定+リキッドレイアウトにする方法」で、画像領域と、可変の台詞領域を作成し、台詞divの中に「吹き出しやリストマーカーに使える三角形を CSS で作る」を参考に、吹き出しのしっぽを作りました。

で、枠の角丸は下記のジェネレータで作成。

インターネット便利すぎて死にそう。

でもまたこんなのごちゃごちゃ作ってたら、文章の投稿も含め、トータルで二時間かかってるのかも。あうあう…。

もし知りたい人いたら、上の台詞のとこのソースコードだよ

＜CSS＞

/* fukidashi */
.fukidashi {
	overflow: hidden;
	margin-bottom: 10px;
}
.eiri_photo {
	width: 80px;
	margin: 0;
	height: 80px;
	float:left;
	background: url("images/icon_80.png") no-repeat;
	-webkit-border-radius: 40px;
	-moz-border-radius: 40px;
	border-radius: 40px;
	text-align: center;
	font-weight: 400;
	color: white;
	font-size: 12px;
	line-height: 16px;
}
.bubble{
	float:right;
	width:100%;
	margin: 0;
	margin-left:-88px;
	padding: 0;
}

.bubble .eiri{
	display:block;
	position:relative;
	margin: 0;
	padding: 10px;
	padding-top: -10px;
	margin-left:88px;
	min-height:60px;
	background-color: orange;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px;
}

.bubble .eiri::before {
	position:absolute;
	content: "";
	display: inline-block;
	border: 8px solid transparent;
	border-right-color: orange;
	margin-top: 20px;
	margin-left: -26px;
}

＜html＞

    <div class="fukidashi">
    	<div class="eiri_photo">永理</div>
    	<div class="bubble">
    	<div class="eiri">台詞の内容</div>
    	</div>
    </div>

進捗：Twitterプロフィール画像作成

今日のアイキャッチ画像について解説

最近の野望