Dreamweaver8＋CSS入門・動画講座（スタイルシートの使い方） - スタイルシート 定番テクニック集 - （5）CSSを使った角丸ボックスの作り方（前編）
|
初心者webデザイナーさんのための、ホームページ制作無料講座です。Dreamweaver8を使ったXHTML＋CSSコーディングの方法を紹介します。
スタイルシート初心者の方に役立つように作ってみました。
※Adobe® Dreamweaver® はAdobe Systems Incorporated（アドビ システムズ社）の商標です。
|
（5）CSSを使った角丸ボックスの作り方（前編）
|
4分21秒
 |
|
|
|
|
Tweet |
|
|
解説
スタイルシートを使ったwebデザインの定番のテクニック、その5は、CSSを使った角丸ボックスの作り方。 いろんなブログで作り方が紹介されてますし、いろんな方法があると思いますが、 今回は、ulの背景に上部の角丸背景を。</ul>の手前に、divをひとつ追加してそこへ下部の角丸背景を入れる方法にしてみます。 上部の背景画像を縦長に作っておくと、テキストが増えた時にも対応できて便利です。 本当は、 ul:after疑似要素に 下部背景を指定したかったんですが、IEで表示されないのであきらめました・・・ ＊＊＊＊＊ 最近作った大阪のポータルサイトです。 京橋タウンガイド 表紙にあるイベント新着情報でこの画像を使っています。見てみてください。 このサイトはxoopsで構築しました。 地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。 URLの静的生成と正しいマークアップでseo対策済み。 xoopsサイトの型にはまったデザインを一新して、オールCSSコーディング。 今風のテイストに変えてしまってますので、そのへんも見てくれると嬉しいなぁ～。。。。 オールCSSにしてあることで、携帯表示にも対応できるというわけです。 xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。 デザイン：webの森 協力／xoopsシステム構築：A-XYZ |
 |
|
カテゴリー内最新記事
マニュアル カテゴリ一覧
マニュアル エントリ一覧