Dreamweaver8＋CSS入門・動画講座（スタイルシートの使い方） - スタイルシート 定番テクニック集 - （2）背景画像を使ったノート罫線の作り方
|
初心者webデザイナーさんのための、ホームページ制作無料講座です。Dreamweaver8を使ったXHTML＋CSSコーディングの方法を紹介します。
スタイルシート初心者の方に役立つように作ってみました。
※Adobe® Dreamweaver® はAdobe Systems Incorporated（アドビ システムズ社）の商標です。
|
（2）背景画像を使ったノート罫線の作り方
|
7分56秒
 |
|
|
|
|
Tweet |
|
|
解説
スタイルシートを使ったwebデザインのテクニック、今回は背景に点線の画像を敷いて、ノート風にしてみます。 おすすめメニューやおしながき、メモ帳など、 短いテキストでタテに長くなりがちのテキストの場合、横に罫線が入ることで読みやすくなります。 コツとしては、背景画像の高さと、テキストのline-heightの高さを揃えることと、 １行目の上にも罫線が来るように、背景画像のリピート位置を、タテ方向にマイナスで指定すること。 ボックスのmargin-topに同じ高さ（この場合24px）を入れて、揃うようにしています。 動画の最後で、画像をどんなふうに作ってあるかも紹介してますので（ファイヤーワークスの画面です）、参考にしてみてくださいね。 ＊＊＊＊＊ 最近作った大阪のポータルサイトです。 京橋タウンガイド ここで、今回作った画像を使ってノート風にしていますので、見てやってください。 タイ古式マッサージ サワディバンコク 大阪京橋 ＊＊＊＊＊ このサイトはxoopsで構築しました。 地図やおすすめメニューなどのついたショップガイド、各お店からの新着ニュースや、クチコミ投稿、求人情報や、イベント・タウンガイドなどの機能が盛りだくさん。 URLの静的生成と正しいマークアップでseo対策済み。携帯にも対応しています。 xoopsを使った様々なポータルサイトの構築も受けていますのでお気軽にご相談ください。 デザイン：webの森 協力／xoopsシステム構築：A-XYZ |
 |
|
カテゴリー内最新記事
マニュアル カテゴリ一覧
マニュアル エントリ一覧