CSSメモ_1：半透明の背景を画像に重ね、キャプションを表示する

そこそこ普通に使っているCSSですが、ブラウザの違いでうまく動作しない場合はもちろん、単純な指定ミスなどで時間をとられることが未だ多い僕です。その都度調べながら、ハック的な情報を吸収するのですが忘れてしまう…てことで、CSSのメモを兼ねて勉強することにしました。

第1回目は「半透明の背景を画像に重ね、キャプションを表示する」です。"5 Ways to Spice up Your Images with CSS"の"Image with Caption"を参考にしております。

demoを見る

HTML
<div id="desc">
<img id="image" src="sample.jpg" alt="test" />
<cite>2008年11月11日 福岡市動物園にて</cite>
</div>
CSS
#desc{
position:relative;
display:block;
width:406px;
height:306px;
}

#image{
padding:2px;
border:1px solid #999;
}

cite{
font-style:normal;/* citeはitaric表示になるため */
font-size:1em;
background:#000;
-moz-opacity:.65;/* もう少ないだろうけどNN用 */
filter:alpha(opacity=65);/* IE用 */
opacity:.65;/* Firefox,Safari,Opera用 */
color:#fff;
position:absolute;
bottom:3px;
left:3px;
width:397px;
padding:5px 0px 5px 3px;
}
こんな具合です。
1度見てしまえば簡単やなとか思うわけですが、自力でやったら出来んかった…。メモとしては、クロスブラウザ対応の透過の書き方で、これはチェックです。引き続き気付いた点があればメモしていこうと思います。

＊余談
以前のエントリーで、コードをわかりやすく表示してくれるプログラムを入れたのですが、bloggerの僕の設定ではコード内の改行が<br>で表示されるため使うのやめました。なので、見にくいですが<code>～</code>でやらせていただきます。

《関連記事》

• "css Zen Garden"に挑戦
• 『position』て何？

"css Zen Garden"に挑戦

WEB業界で働く方ならみんな知っているらしい"css Zen Garden"にチャレンジしてみました。htmlはいじらずcssのみを打ち、デザインを変えていくというものです。
デザインする上では今回あまり考えなかったのでどうもこうもないのですが、ただどうしても上手く行かない箇所が1点あり、それは結局改善することができませんでした。htmlをいじることが出来るならすぐに解決する問題なのですが、ホントに口惜しいです。アシスタントの方にも聞いて考え抜いて試したのですが、駄目なのです。

ただ、悩む中でpositionのことを学んだり、きちんと計算立ててレイアウトを組んでいくことを身につけることも多少はできたので、良い勉強になりました。

また、学校の課題として出されたものだったので、クラスの友達の作ったものも見させてもらいました。当たり前ではあるのですがどれ1つとして同じものは無く、興味深かったです。中でも印象的だったのは僕の隣の席の方で、まったく関係の無い「僕イケメン！」でお馴染みの狩野英孝を全面に押し出したデザインとなってました。だいぶ笑った。

『position』て何？

2月の頭からソフトを使った実技の勉強が始まったのですが、これまでに習ったものは…

• ソフト→Illustrator / Photoshop / Fireworks / Dreamweaver
• 言　語→html / css

です。
今現在授業ではJava Scriptの勉強をしておりますが、これもこれまで同様何が何かわかりません。課題などをこなすにつれ上記の物々は、「理解し始めた」とは言えないまでも徐々に抵抗感はなくなってきています。

とはいえ、その程度のレベルで仕事をこなせるわけがないので本などを読みながら勉強したりもします。学校では沢山の参考書をいただきました。本屋に行くと新しいものが欲しくなったりもするのですが、学校でいただいた参考書が手付かずで残っているので最近は下の本で勉強しています。

実践Web Standards Design―Web標準の基本とCSSレイアウト&Tips

posted with amazlet at 08.05.29

市瀬 裕哉 福島 英児 望月 真琴
九天社
売り上げランキング: 1681

Amazon.co.jp で詳細を見る

DreamweaverのおかげでCSSもある程度は慣れてきたのですが、それでも放置していたよくわからない要素があり、それが『position』です。この本にある「実践レイアウト」では、positionやfloatといった要素の特性を解説しながらレイアウトを組んでいく方法が紹介されており、そこを見ているうちに何となくわかってきた気がしました。
今日は『position』を少し自分のものにできたので良かった。

現状まったく意味が分からないJava Scriptに関しても辞典があり、聞く人がおり、ネット上に解説サイトもあるわけなので、早くものにしていかなければ。