- 2010-02-01T10:57:51+09:00 ドリームウィーバーを使ったスタイルシートの使い方、小技集。今回は、背景画像を使った見出しを作ってみます。クラスを分けることで色のバリエーションをつけてみましょう。作例では、div class="midasi green"でやっていますが、見出しなのでh2やh3の方が妥当ですね。その場合はh2 class="green"になるわけです。同じパターンのボックスで... http://www.dougamanual.com/blog/87/721/e3366.html 2008-08-20T00:50:00+09:00 2008-08-20T00:50:00+09:00 CSSを使った角丸ボックスの作り方。後編です。ソースがちゃんと見たいという方のためにここにも書いておきますね。*{margin:0;padding:0;}body{ font-size:12px; line-height:18px; margin-top: 20px; margin-left: 40px;}ul{ list-style:disc outside; width:570px; heig... http://www.dougamanual.com/blog/87/721/e3362.html 2008-08-19T00:15:00+09:00 2008-08-19T00:15:00+09:00 スタイルシートを使ったwebデザインの定番のテクニック、その5は、CSSを使った角丸ボックスの作り方。いろんなブログで作り方が紹介されてますし、いろんな方法があると思いますが、今回は、ulの背景に上部の角丸背景を。</ul>の手前に、divをひとつ追加してそこへ下部の角丸背景を入れる方法にしてみます。上部の背景画像を縦長に作っておくと、テキストが増えた時にも対応できて便利です。本当は、... http://www.dougamanual.com/blog/87/721/e3361.html 2008-08-18T23:59:00+09:00 2008-08-18T23:59:00+09:00 今回は、よくつかうスタイルを、スニペットに登録しておいて、コードに貼り付けしてみる方法をやってみます。登録したスタイルは、写真の右寄せスタイル。こうしていろんな場面で使い回すようなよく出現するスタイルを登録しておくと便利です。スニペットは元からいろんなものが登録されてるので、利用することもできます。（私は自分で登録したもの意外使ったことないんですが・・）よく使うJavaScriptや、メタタグ、な... http://www.dougamanual.com/blog/87/525/e2548.html 2008-08-18T10:51:00+09:00 2008-08-18T10:51:00+09:00 スタイルシートを使ったwebデザインのテクニック、今回はdlを使っての見た目「表組」の作り方。web標準でのHTMLの作り方が前提での話です。見出しと本文がセットになった表組みは「表」なのでもちろんテーブルを使ってもいいわけですがdl要素を使うことで、テーブルタグで制御するより管理が簡単になる場合もあります。（ソースが簡潔・更新しやすい・プログラムを組み込みやすい・携帯対応可能・デザインの制御も楽... http://www.dougamanual.com/blog/87/721/e3360.html 2008-08-18T01:19:00+09:00 2008-08-18T01:19:00+09:00 スタイルシートを使ったwebデザインのテクニック、今回は背景に点線の画像を敷いて、ノート風にしてみます。おすすめメニューやおしながき、メモ帳など、短いテキストでタテに長くなりがちのテキストの場合、横に罫線が入ることで読みやすくなります。コツとしては、背景画像の高さと、テキストのline-heightの高さを揃えることと、１行目の上にも罫線が来るように、背景画像のリピート位置を、タテ方向にマイナスで... http://www.dougamanual.com/blog/87/721/e3359.html 2008-08-17T19:38:00+09:00 2008-08-17T19:38:00+09:00 スタイルシートを使ったwebデザインの定番ともいえるテクニックをいくつか紹介していこうと思います。スタイルシートなので、もちろん、エディタだけを使って作ってもokですが、この講座はDreamweaverの講座なので、ドリームウィーバーのエディタ機能を使って効率よくやってみましょう。１回目は、画像を使ったボタン。マウスオーバーで色が変わります。CSSでの背景画像を使って、マウスオーバー時には、背景画... http://www.dougamanual.com/blog/87/721/e3357.html 2008-08-16T02:50:00+09:00 2008-08-16T02:50:00+09:00 ソースコード画面を効率よく使って、CSSデザインを作ってみましょう。１回目は、基本になるテキスト部分のマークアップから。＊＊＊＊＊↓モモンガの森では、webデザイナーを目指している方を応援しています！モモンガの森　Dreamweaverで作るスタイルシートwebデザイン最近こんなホームページ作りました長野県駒ヶ根市　美容室A2森の365日にも遊びに来てください森の365日 http://www.dougamanual.com/blog/87/525/e2544.html 2008-01-17T12:00:00+09:00 2008-01-17T12:00:00+09:00 今回は、CSSのソースを直接書いてみます。Dwの設定で、コードヒントが出るようにしておくと、入力したいスタイルの最初の１文字か２文字を打っただけで、ヒントのところに飛ぶので、プルダウンメニューからスタイルを選択することができます。（弊害として楽してしまうので手打ちのみでやる方法の覚えが悪いと言えばそうなんですが・・・私は一人で仕事していて、ソフトに頼ったほうが効率良いならがんがん利用してヨシと思っ... http://www.dougamanual.com/blog/87/525/e2545.html 2008-01-16T13:08:00+09:00 2008-01-16T13:08:00+09:00 前回からの続き。コードで、テーブルのスタイルを追加してみます。テーブルのスタイルは、テーブルにクラスをふってスタイルシートの方はtable.クラス名{} これで指定できます。ついでに、td　と　th　も指定しちゃいましょう。複数指定するには、table.★,table.★ td,table.★ th{},でつなげれば、３つ同時に指定できます。★はクラス名＊＊＊＊＊↓モモンガの森では、webデザイナ... http://www.dougamanual.com/blog/87/525/e2546.html 2008-01-15T13:30:00+09:00 2008-01-15T13:30:00+09:00