スタンダード・デザインラボ

　エンボス効果。ラインの部分だけへこんで見える効果。　いわゆる「でこぼこ」に見えるんだけど、飛び出しているだけの無粋な効果ではない、ちょっとかっこいいあれです。　高品質のウェブサイトや、「ソフトのメニュー画面」などでも使われています。　あれ、実は簡単なので、少し説明してみましょう。...

　バックグランドで画像を使えば、表現の幅は、無限に広がります。（バックグランドのスタイルシートの復習は…「スタイルシートでのデザイン（バックグランド編）」から）　今回はGIFアニメーション画像を使った面白い表現に挑戦したいと思います。　画像の背景と、文字のアンダーライン、リンク文字を、GIFアニメーションで表現すると？...

　簡単にブログを飾る方法の一つに、「背景画像」を使うモノがあります。　絵心がある方であれば、これを駆使するだけで、高品質のテンプレートを組み立てることも出来る大事な要素です。　ウェブ上でダウンロードした画像を使う場合は十分注意してください。日本では特に、著作者が画像をどこかで発表した瞬間に、著作権や肖像権などが発生し、その画像の著作権は法律で守られます。...

　スタイルシートって、色々な書き方があります。　スタイルシートが、何が何だか分からなくなってきますよね。　一度整理してみましょう。...

　マウスオーバー時（マウスがリンクの上に乗っかったとき）のリンクタグ、色々工夫すると楽しいのですが、今回代表的な面白リンクタグがどういう構造に鳴っているのか研究します。この、ボタンを押す感じ、どうやっているの？...

　これで、大体のちょっとしたブログやホームページの「部品」はスタイルシートでデコレーション出来るようになったと思います。　今回は、どんなデザインが出来るのか研究してみましょう。　よく見かけるデザイン部品は、どうやって組み立てているのかの研究です。　最初のページから読むには「スタイルシートで遊ぶ part.1（<span>タグ編）」からどうぞ。...

　最初のページから読むには「スタイルシートで遊ぶ part.1（<span>タグ編）」からどうぞ。　ここまで理解したら、漸く一番楽しいリンクタグのスタイルシートを適応することが出来るようになります。　リンクタグは、HTMLの中で唯一「動き」「アニメーション」が出来る部分です。　マウスオーバーで、アンダーラインを消す。　マウスオーバーで、背景色を変える。　マウスオーバーで、文字を大きくする。　　　：　　　：　...

　最初のページから読むには「スタイルシートで遊ぶ part.1（<span>タグ編）」からどうぞ。　今回までで、テンプレートでの「スタイルシートの編集」まで出来るようになりました。　でも、あと一つだけ重要な問題があります。困ったことが…　例えば、「<strong> ～ </strong>」タグに対し、スタイルシートで「赤背景、青ボーダー」なんて設定していると、サイドバーで使われている<strong>タグ部分であろうと、フッ...

　最初のページから読むには「スタイルシートで遊ぶ part.1（<span>タグ編）」からどうぞ。　今度は、「クラス」というタグの書き方の研究です。　「クラス」というのは、日本でいうと「旗印」「目印」のようなものです。これを使えば、特定のタグに囚われることなく、自由にHTML部分とCSS部分の「旗印」をあわせて、文字はもちろん、その他いろいろなものを「デコ」することが出来るようになります。...

　最初のページから読むには「スタイルシートで遊ぶ part.1（<span>タグ編）」から。　今回は、タグ分離型スタイルシートの書式です。...