CSSのみ・画像無しで吹き出しを作る


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/mildleaf/www/alc/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/mildleaf/www/alc/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

CSS Arrow Please!(吹き出しジェネレータ)
で、簡単に作れます。

ジェネレータで指定できるのは以下の項目。
Position:三角形の位置(上、右、下、左)
Size:三角形の大きさ
Color:吹き出しの背景色
Border width:吹き出しの枠線の太さ。0を指定すれば、枠無しとなる。
Border color:枠線の色。

吹き出し部分がどうやって実現されているのかの考え方は、以下の記事を読むと理解出来るかと思います。
CSSのみで三角形を作る方法を解説するよ!|ついでに扇型や吹き出しも作ってみる(アイデアハッカー)

2013年度グッドデザイン賞の受賞結果発表


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/mildleaf/www/alc/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/mildleaf/www/alc/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

2013年10月1日に、2013年度グッドデザイン賞の受賞結果が発表されました。

2013年度グッドデザイン賞受賞結果
グッドデザイン・ベスト100
2013年度グッドデザイン大賞候補

普段、Webサイトを作ったりしていますが、サイト上のデザインやコンテンツ以外を見ることは刺激になることが多いので、こういうものをばーっと眺めてみるのが結構楽しかったりします。

ベスト100に選ばれたものの中で私が気になったのは、
デジタルアーカイブ [東日本大震災アーカイブ]
東日本大震災アーカイブ

ストアーズ・ドット・ジェーピー
STORES.jp

防災用折り畳み式ヘルメット [№100 ブルーム]
トーヨーセフティー

松葉杖 [ドライカーボン松葉杖]
株式会社メディカルチャープラス

自転車 [ノイズ カーゴ]
株式会社NOiS

ドライカーボン松葉杖とノイズカーゴ以外は以前から知ってましたが、改めて見て良いなーと。

特に松葉杖は、以前オーエックスエンジニアリングの車椅子を初めて見た時と似た感覚。
軽さ・デザイン含め、素晴らしいなと思いました。

tableの枠線にborder-radiusを適用する時の注意


Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/mildleaf/www/alc/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

Warning: Use of undefined constant user_level - assumed 'user_level' (this will throw an Error in a future version of PHP) in /home/mildleaf/www/alc/wp-content/plugins/ultimate-google-analytics/ultimate_ga.php on line 524

tableの枠線にborder-radiusを適用する時に、ちょっと苦労したのでメモ。

<table>
<tr><th>ブラウザ</th><th>開発元</th></tr>
<tr><td>Internet Explorer</td><td>マイクロソフト</td></tr>
<tr><td>Google Chrome</td><td>Google Inc.</td></tr>
<tr><td>Mozilla Firefox</td><td>Mozilla Foundation</td></tr>
</table>

こんなテーブルがある場合。

table {
	border-collapse:collapse;
	border:1px solid #000;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}

と書いてみても、枠線の角は丸くならなかった。

ブラウザ 開発元
Internet Explorer マイクロソフト
Google Chrome Google Inc.
Mozilla Firefox Mozilla Foundation

原因は
border-collapse:collapse;
の部分でした。

どうも、
border-collapse:separate;
でないと、テーブルにはborder-radiusが適用されないようで。

というわけで、以下の様に直してみたら問題なく枠線の角が丸くなりました。

table {
	border-collapse:separate;
	border:1px solid #000;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	border-radius:10px;
}
ブラウザ 開発元
Internet Explorer マイクロソフト
Google Chrome Google Inc.
Mozilla Firefox Mozilla Foundation