WEBサイトを作っている時に色々をこうしたい、ああしたいなどが気になるかと思います。たとえば、角をまるくしてきれいにしたいとか、Yahooのようなタブの画面を作りたいとかやってみたくなります。そんなあなたのためにCSSでイカしたデザインをする方法をご紹介しています。
部品により若干使用方法が違いますがほとんど変わりません。
- 左欄から色を選択
- サイズ等を入力し、変更ボタンをクリック
- 右側にサンプル画像、ダウンロードファイル、ソースコードが表示されます。
- ダウンロードファイルを右クリックで、編集するHTMLファイルと同じフォルダに保存
- ソースコードを編集するHTMLファイルにコピー
角を丸くする(その1)
角を丸くするだけで印象は随分と違ってきますね。
|
|
|
|
|
ようこそ
こちらの掲示板に気軽に書き込んでください。
(^-^)/ |
|
|
|
|
|
| -> |
|
会社のホームページなどのでは単純な四角形よりも角を丸くした方がいい印象を与えます。
こちらのcssのテクニックは背景が白の場合のみ有効ですので必ず背景は白にして使ってください。
角を丸くする(その2)
文字を入れたメニューバーも丸くするとやさしいイメージになるどころか、デザイン性を感じさせてくれます。
|
| -> |
 |
送信
|
 |
|
|
こんにちわ
|
 |
 |
生活必需品 |
こちらのメニュバーは白抜き文字を使って処理してください。
ヤフーのタブメニュー風
yahooのメニューバーを画像で表現しているサイトは沢山見かけますが、これをcssだけで表現するとページがシンプルになっておすすめです。
|
特集 |
|
|
|
|
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
一覧
|
|
|
| -> |
|
特集 |
 |
|
|
|
あいうえお
かきくけこ
さしすせそ
たちつてと
なにぬねの
一覧 |
|
|
|
yahooっぽくなっていますね。これも白の背景でお願いします。
角丸のタブ
今度はヤフーのタブを斜めから曲線にしたものです。
丸みを帯びて、楽しい印象になりますね。
|
| -> |
|
掲示板 |
 |
|
|
|
掲示板です。何でも書き込んで下さい。
|
|
|
|
テーブルを使ったデザインは四角形で構成されていて、さすがに飽きてしまいますが、丸みがあるとイメージが変わります。
白抜きを丸くする
背景に色があって白抜きで角を丸くする場合です。
背景色と同じもの画像を使用してください。
