前回、GIF画像を使った角丸を紹介しましたが、GIF画像の代わりに透過PNG画像を使った場合、HTMLは同じですが、CSSで少し調整が必要になります。(なお、透過PNG画像は IE6以下では未対応です。) この図を見ればわかると思いますが、それぞれの背景画像に透過PNGを使った場合、重なった部分が見えてしまいます(サンプル)。したがって、各 div に margin を入れて調整します。margin の大きさは、c の背景画像の横幅と同じにします。
斜線の背景も最近のWebデザインの特徴の一つです。Background Image Maker を使えばカンタンに斜線の背景画像を作ることが出来ます。が、もっと便利でかつ汎用的な斜線の背景画像の作り方が Super Stripes で紹介されていたので試してみました。 まずは Fireworks で 4 x 4 ピクセルの新規ドキュメントを作成します。このままだと編集しにくいので、表示比率を 3200% にしておきます。 ラインツールで 1px の「硬い線」を斜めに引きます。 最適化パネルで書き出すファイル形式を GIF にし、さらに「透明化するカラーの追加」で線のカラーを選択します。 書き出しをすれば画像は完成です。 あとは、css で背景画像と背景色を同時に指定します。
「Tips Community » ソースをハイライトで表示してくれるプラグイン」で iG:Syntax Hiliter というプラグインを見つけました。ソースコードをテキストエディタのようにカラー表示してくれるという優れものです。 » iG:Syntax Hiliter プラグインを使わずに普通に書くとこんな感じ。(本来は<code>タグを使うべきですが半角スペースが効かないので<pre>タグを使っています。認識が間違っていました。) // Comment here function HelloWorld() { alert('Hello World!'); } それがこんなふうに表示されます。(一部スタイルを改変してます。)プレーンテキストへの切り替えも付いているので、ソースをコピー&ペーストするときもOK。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く