項目を作る３

***　項目を作る３　***

それでは、項目の最後です。背景に画像を入れてみましょう｡｡｡

★背景に画像を入れる★

↓ココで使うタグはコレ

<p style="width:★;height:☆;overflow:scroll; background-attachment:fixed;
background-image:url( http://～ここに画像のURL )">
ここにリスト（文字・画像）
</p>

★…枠（スクロール）の横幅
☆…　　　〃　　　　の縦幅
background-attachment:fixed; …背景を固定する
background-image:url( http://～ここに画像のURL ) …『http～』の所に、画像の倉庫からURLを貼り付ける
※()は消さないでネ。

↑上記の幅を、『横…200・縦…100』と入れて見てみると…

項目を作る２
項目を作る２
項目を作る２
項目を作る２
項目を作る２
項目を作る２

こんな感じになります。背景画像を固定しない場合は、『background-attachment:fixed;』を取って下さいネ☆彡

合わせて、横のスクロールをナシにする
『 overflow-y:scroll;overflow-x:auto; 』と
スクロールの色を付け加えてみると、このようなタグになります。

<p style="width:200;height:100;overflow:scroll;background-attachment:fixed;
background-image:url(http://plaza.rakuten.co.jp/***);
overflow-y:scroll;overflow-x:auto;
scrollbar-face-color:#******; scrollbar-track-color:#******;
scrollbar-arrow-color:#******; scrollbar-highlight-color:#******;
scrollbar-shadow-color:#******; scrollbar-3dlight-color:#******;
scrollbar-darkshadow-color:#******;">
<a href="リンク先のURL">ページ１</a><br>
<a href="リンク先のURL">ページ２</a><br>
</p>

↓↓↓

項目１
項目２
項目３
項目４
項目５
項目６
項目7
項目8
項目9
項目10
項目11
項目12

もう一つ、インセット『 border-style:inset; 』枠も付けてみると…

<p style="width:200;height:100;overflow:scroll;background-attachment:fixed;
background-image:url(http://***); overflow-y:scroll;overflow-x:auto;
scrollbar-face-color:#******; scrollbar-track-color:#******;
scrollbar-arrow-color:#******; scrollbar-highlight-color:#******;
scrollbar-shadow-color:#******; scrollbar-3dlight-color:#******;
scrollbar-darkshadow-color:#******; border-style:inset; ">
<a href="リンク先のURL">ページ１</a><br>
<a href="リンク先のURL">ページ２</a><br>
</p>

↓↓↓

項目１
項目２
項目３
項目４
項目５
項目６
項目7
項目8
項目9
項目10
項目11
項目12

タグとタグの間にある『：（コロン）』と『；（セミコロン）』に気を付けながら、
上手く組み合わせて作ってみて下さいネ♪

項目で使った効果一覧
基本
<p style="width:横幅;height:縦幅; overflow:scroll; ">
overflow-y:***
縦のスクロールの有無
overflow-x:***
横のスクロールの有無
※↑***に入れる効果
※『overflow:scroll;』を使わず個々に指定
『scroll…スクロールを表示』
『auto…枠の指定幅を超えた時に表示』
border-style: inset
枠を付けます。詳しくは、 枠の種類 を参照
background-color:#******;
背景色の指定。『******』の所にRGBカラーを指定
scrollbar-****-color:#★;
スクロールの色を個々に指定。詳しくは『項目２』を。
background-attachment:fixed;
背景画像の固定
background-image:url(***)
背景に画像を入れる。『***』の所に画像のURL

とりあえず、これで項目は終わります｡｡｡ヾ(*^▽゜）

© Rakuten Group, Inc.
Design a Mobile Website
スマートフォン版を閲覧 | PC版を閲覧
    Share by: