項目を作る１

***　項目を作る１　***

今日は、項目を作るタグをやってみようと思います。
普通　HPで使う項目は、ココでは使えない為、
ちょっと違う方法でやってみますネ♪(⌒∇⌒)

↓ココで使うタグはコレ

<p style="width:★;height:☆;overflow:scroll;">
ここにリスト
</p>

★…枠（スクロール）の横幅
☆…　　　〃　　　　の縦幅

↑上記の幅を、それぞれ『100』と入れ、『ココにリスト』の所に表示される文字を、『テスト』と書いて見てみると…

テスト
テスト
テスト
テスト
テスト
テスト

こんな感じになります。
表示される文字は　通常の文字と同じで、改行する時は<br>ですよ♪
もちろん、リンクも可能なので、リンクの一覧を作ってもOK！☆ъ(*゜ー＾）

このタグは、文字や画像が　指定した枠の幅以上になった時に、
スクロールを付けるというタグですので、横幅は『１００』で足りている為　動かないのです。
なので、次は　スクロールの表示の有無を指定してみましょう。。。

***スクロールの有無を指定する***

↓ココで使うタグはコレ

<p style="width:★;height:☆; overflow-y:scroll;overflow-x:auto; ">
ここにリスト
</p>

この『overflow-y:scroll;overflow-x:auto』という所が、さっきと違う所です。
『overflow-y:***』…は、縦のスクロールの有無。『overflow-x:***』…は、横の　〃　有無を指定します。
『***』の所へ入るのは、

scroll スクロールを表示させる
auto 枠の指定幅を超えた時に表示させる

上記の他にもありますが、とりあえず使いそうなのだけ書きますネ☆これを見てみると…

テスト
テスト
テスト
テスト
テスト
テスト

こうなる訳です。。。v(=∩_∩=)

***枠を付ける***

次に、インセット（凹み枠）等の　枠を付けてみましょう♪ココで使うタグはコレ↓

<p style="width:★;height:☆;overflow-y:scroll;overflow-x:auto; border-style:inset ">
ここにリスト
</p>

枠の種類は、←左の『 枠の種類 』のページを参照して頂くとわかりますが、
ココでは『inset』を使って見てみましょう♪

テスト
テスト
テスト
テスト
テスト
テスト

…と、こんな感じになります♪
ｗ（￣△￣；）ｗおおっ！　旦那が帰宅したので　この辺でｘｘｘｘ
次は、この項目に『背景色・背景画像』を付ける方法を書きますネ♪

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