便箋のようなデザインにする:CSS小技

ブログが作りたい!CSSの小技 > 便箋のようなデザインにする:CSS小技

便箋のようなデザインにする:CSS小技

便箋(びんせん)のようなデザイン:CSS小技

CSSの小技(30)

今回は、便箋(びんせん)のようなデザインにする CSSの小技です。

Web上では、便箋に文字をのっけるデザインって、ややこしいんですよね。どうしたって、ブラウザで文字サイズを変更してしまえば、下線はずれてしまいますから。

とりあえず、今回ご紹介する方法は、下線はずれないんですが、あまりかっこ良くもありません。残念ながら。


便箋のようなデザインとは?

次のように、お手紙っぽいデザイン表現になります。

便箋(びんせん)に書くようなデザイン

サンプルは、上の画像とほぼ同じですが、良かったらサンプルもご覧になってみてください。

おそらく、右端で下線が揃わないだとか、最後の行は下線が文字分しか表示されないとか、いろいろと不満な箇所が発見できるはずです。


便箋のようなデザインにする方法

1:ソースコード

(1)HTMLコード
(2)CSSコード

2:ポイント解説

ポイントは、ブロックレベルの<p>タグを、「display: inline;」することで、インライン要素にしていることです。

こうすると、文章に下線がついてくるので、文字と下線がずれて重なったりすることはありません。途中で改行したい場合は、brタグを使います。

ちなみに、冒頭でも少しお話しましたが、下線(罫線)を背景画像で使う方法もありますが、ブラウザで文字サイズだけ大きく表示すると、次のようにずれて重なってしまいます。

文字と下線が重なる

これはこれで、あまりかっこう良くありません。現状、「こうすれば、バッチリだぜ!」という方法はないのではないかしらん。

前の記事へ
次の記事へ

次回予告

次回は、目次のようなデザインにする CSSの小技をご紹介したいと思います。


関連記事

CSSに関連する記事の一部を、ご紹介します。

作成日:2009/05/26 更新日:2009/05/26

コメントありがとうございます。

お手数ですが、コメント前に留意事項をご覧くださいませ。

また、現在ご質問にお答えする余裕がない状態にあります。よろしくお願いいたします。

No title

こういうお手紙調の表示にCSSで出来るんですね~
画像かと思いました(^_^;)
最近CSS関連をいじくっているので、とてもタメになっています。
最高の小技を楽しみにしておりますm(__)m

手紙っぽい

fuminchuさん、こんばんは!(・∀・)/ぐいぶにん
コメントありがとうございます。

そうですね、ちょっとかっこう悪いところもありますが、
手紙っぽくできますね。(´Д`;)

さらに、上部と下部に、ちょい紙がめくれるような画像を使えば、
もっと手紙っぽくなるかもしれません。


さ、さ、さ、さ、最高の小技!
・・・ネタ切れ間近です。il||li _| ̄|○ il||li

とほほ。( TДT)

コメントの投稿

内緒のときは、チェックしてください。

トラックバック

http://kumacrow.blog111.fc2.com/tb.php/520-b77722cd
 | トップページ | 

FC2ブログの作り方・作成

GIMP2で画像を編集しよう

イラストが描ける Inkscape

初心者のためのSEO対策

Google Analytics入門

アクセス解析QLOOK

アイデアの作り方

超ビギナー向けHTML入門

超ビギナー向けのCSS入門

FC2ブログのカスタマイズ

初心者向けのCSS小技

Web制作に役立つ本

ブログでお小遣い稼ぎ

これはうまい!

誰にでも才能はあるのです

RSSフィード

プロフィール

KumaCrow(クマクロ)

KumaCrow

FC2ブログによるブログの作り方をご紹介しています。「初心者の人にも分かりやすく!」がモットーです。

Twitter KumaCrow

リンクフリー♪
フォローも、ふりっふり~

伝わる文章を書くコツ

最近の記事

最近のコメント

パソコン入門

アクセスの多かった記事

先月アクセスが多かった記事を、ご紹介します。

【1位】
GIMP2の使い方
【2位】
プリントスクリーンの方法
【3位】
GIMP2 パスの使い方
【4位】
GIMPとは?
【5位】
レイヤーとは?

初心者のデジカメ撮影術

ホームページ制作にJimdo

このブログの評価

自分を見つめなおす

ブログランキング

クリックしちゃいなよ!You、クリックしちゃいなよ!そして、Canして、Doしちゃいなよ!

FC2ブログランキングに参加してみませんか?見に来てくれる人が少しだけ増える・・・かもしれません。

FC2カウンター

ブログ開始(2007年7月)から、ユニークユーザ数が「のべ240万人」に達しました。いつもご覧いただきまして、ありがとうございます。(2011/01/05、FC2カウンター故障・データ消失により、10万人分くらいマイナスとなりました)

子どもの教育

最近のトラックバック

+++ お友達のブログ・お世話になっているサイトさま +++

ふわふわふわりん
無料ウェブ素材 Tyto-Style
海外のSEO対策・SEOツールをわかりやすく解説するブログ
日南商工会議所による情報化支援ブログ
気になるけど
聞き捨てならん!!
かちびと.net
ありのごとくあつまりて