Ｐタグ（２）
| パラグラフタグ <p> の使い方を覚えよう！！その２ |
|---|
| p タグは、文章を段落表示したいときに利用しますが、ここでは style 属性を利用して 日記に背景画像を付けてみましょう！ |
| ● 日記に背景をつけるには？ |
日記に背景を付けるには日記でタグを利用しなければなりません。 ここではパラグラフタグを利用して日記に背景をつける方法をやりましょう！ |
|---|
| ● 指定した位置に画像を置いてみる |
日記に背景画像を使用するには次のプロパティを使います。 background-image:url(画像のアドレス); ここでは背景画像を右上に配置してみます。 background-position:right top; 背景画像を連続させないようにします。 background-repeat:no-repeat; |
| <P style=" background-image:url (http://image.space.rakuten.co.jp/lg01/82/0000028382/60/img8fcde24035e2eo.gif); background-repeat:no-repeat;background-position:right top; "> 心のドアをふいに開いた あなたの言葉 深く静かな私の海に 小石を投げて 今ざわめく風に 駆け出す鼓動 空に青い月 もしもこの恋を受けとめたら どんな場所へたどり着くの 永遠という時間の河を どこまでもあなたとふたりで 心の中にひそかに生きる 悲しい愛を いつか私は越えるでしょうか 思い出にして 今揺れるこの想い 見透かしてる 青く光る月 いっそこの恋を踏み出したら 望む場所へだどり着くの 永遠という時間の河を どこまでもあなたとふたりで </P> ↓こんな感じになります。 心のドアをふいに開いた あなたの言葉 深く静かな私の海に 小石を投げて 右上に画像が表示されてますね！（＾＾ |
（注意）説明の都合上、上記の style属性のほかに padding:10px; width:550;height:250; background-color:white; border-style:solid; border-width:1px; border-color:blue; などの属性も指定しています。 これらの指定は日記では特に指定しなくてもかまいません。 |
| なお、背景画像を指定の位置に配置したい場合は次のようにしてください。 左上 background-position: left top; 中央上 background-position: center top; 右上 background-position: right top; 左中央 background-position: left center; 中央 background-position: center center; 右中央 background-position: right center; 左下 background-position: left bottom; 中央下 background-position: center bottom; 右下 background-position: right bottom; |
| ● 画像を連続させる |
日記に背景画像を使用するには上と同じようにします。 background-image:url(画像のアドレス); 背景画像を連続させるようにします。 background-repeat:repeat; （注意）背景画像を連続させた場合には background-position の指定は無効になります。 |
| <P style="background-image:url(http://image.space.rakuten.co.jp/lg01/82/0000028382/60/img8fcde24035e2eo.gif); background-repeat:repeat; "> 心のドアをふいに開いた あなたの言葉 深く静かな私の海に 小石を投げて 今ざわめく風に 駆け出す鼓動 空に青い月 もしもこの恋を受けとめたら どんな場所へたどり着くの 永遠という時間の河を どこまでもあなたとふたりで 心の中にひそかに生きる 悲しい愛を いつか私は越えるでしょうか 思い出にして 今揺れるこの想い 見透かしてる 青く光る月 いっそこの恋を踏み出したら 望む場所へだどり着くの 永遠という時間の河を どこまでもあなたとふたりで </P> ↓こんな感じになります。 心のドアをふいに開いた あなたの言葉 深く静かな私の海に 小石を投げて |
| ● アレンジしてみる |
今度は、背景画像を連続させて、日記をアレンジしてみましょう！ 日記に背景画像を使用するには上と同じようにします。 background-image:url(画像のアドレス); 背景画像を連続させるようにします。 background-repeat:repeat; （注意）背景画像を連続させた場合には background-position の指定は無効になります。 フォントサイズを１４ピクセルにします。 font-size:14px; 日記の左側に隙間を少し空けてみます。 padding-left:10px; 行間を半行分空けてみます。 line-height:150%; 200% にすると１行分空きます。 フォントの種類をＭＳゴシックにしてみる。 font-family:ＭＳ ゴシック; 文字色を濃いピンク色 deeppink にしてみます。 color:deeppink; |
| <P style="background-image:url(http://image.space.rakuten.co.jp/lg01/82/0000028382/60/img8fcde24035e2eo.gif);background-repeat:repeat; font-size:14px;padding-left:10px;line-height:150%;font-family:ＭＳ ゴシック;color:deeppink; "> 心のドアをふいに開いた あなたの言葉 深く静かな私の海に 小石を投げて 今ざわめく風に 駆け出す鼓動 空に青い月 もしもこの恋を受けとめたら どんな場所へたどり着くの 永遠という時間の河を どこまでもあなたとふたりで 心の中にひそかに生きる 悲しい愛を いつか私は越えるでしょうか 思い出にして 今揺れるこの想い 見透かしてる 青く光る月 いっそこの恋を踏み出したら 望む場所へだどり着くの 永遠という時間の河を どこまでもあなたとふたりで </P> ↓こんな感じになります。 心のドアをふいに開いた あなたの言葉 深く静かな私の海に 小石を投げて |
| ● アレンジしてみる その２ |
| さらに点線で下線を引いてみましょう！ 水色っぽい下線を引いてみます。これを FONTタグで指定します。 <font style="border-bottom:dotted dodgerblue 2px;"> （注意）文章中の□は全角スペースを意味しています！ |
| <P style="background-image:url(http://image.space.rakuten.co.jp/lg01/82/0000028382/60/img8fcde24035e2eo.gif);background-repeat:repeat;font-size:14px;padding-left:10px;line-height:150%;font-family:ＭＳ ゴシック;color:deeppink;"> <font style="border-bottom:dotted dodgerblue 2px;"> 心のドアをふいに開いた あなたの言葉 深く静かな私の海に 小石を投げて□□□ 今ざわめく風に 駆け出す鼓動 空に青い月 もしもこの恋を受けとめたら□□□□ どんな場所へたどり着くの 永遠という時間の河を どこまでもあなたとふたりで□ 心の中にひそかに生きる 悲しい愛を いつか私は越えるでしょうか 思い出にして 今揺れるこの想い 見透かしてる 青く光る月 いっそこの恋を踏み出したら□□□ 望む場所へだどり着くの 永遠という時間の河を どこまでもあなたとふたりで□□ </font> </P> ↓こんな感じになります。 心のドアをふいに開いた あなたの言葉 深く静かな私の海に 小石を投げて とても日記っぽくなってますね！（＾＾ |
| ( ・o・)b 今回はパラグラフタグを使って日記に背景画像を付けるやりかたをお話しました。 みなさんも活用してみてください。 それでは、みんなも く(￣Д￣)ﾉｶﾞﾝﾊﾞﾛｰｰｰ♪ |
p tag (2)
ジャンル別一覧
人気のクチコミテーマ
-
-
- ライブ・コンサート
- 福山雅治 WE’RE BROS. TOUR 2026 DOM…
- (2026-08-07 09:22:03)
-
-
-
- きょう買ったCDやLPなど
- マライア・キャリー デイドリーム〜…
- (2026-07-29 06:46:59)
-
-
-
- 人気歌手ランキング
- 第76回 ＮＨＫ紅白歌合戦 全出場歌手…
- (2025-11-15 04:58:28)
-
© Rakuten Group, Inc.
