ゆっくりでいいから…

ゆっくりでいいから…

枠

これまで表示したものをすぐに利用できるように
記録していこうと思います。
基本的な事をわからずにやっているので
間違いなどが多いと思います。
（ブログ内ではまた少しちがった表示になるかもしれませんが･･）


BTﾎｰﾑ1 BTバック1 BTネクスト1 BTトップ1
題名or項目
結果表示
HTMLコード
枠に文字
(幅･高さ設定)
ﾌﾞﾛｸﾞ

文章を書いてください。

<p style="width:150px;height:50px;text-align:left;font-size:25px;color:#00ff00;padding:15px;border-style:ridge;border-width:3px;border-color:#ff3399">文章を書いてください。 </p>
枠に文章
(幅のみ設定)
ﾌﾞﾛｸﾞ

文章を書いてください。文章を書いてください。文章を書いてください。

<div align="center"><p style="width:150px;text-align:left;font-size:18px;color:#666600;padding:15px;border-style:double;border-width:3px;border-color:#003399">文章を書いてください。文章を書いてください。文章を書いてください。</p></div>
枠に背景
(色)
(幅･高さ設定)

ここに、文章を書いてください。

<div align="center"><p style="width:150px;height:70px;background-color:#ff9933;text-align:left;font-size:12px;color:#009966;padding:15px;border-style:dotted;border-width:6px;border-color:#003399"> ここに、文章を書いてください。 </p></div>
枠に背景
(画像)
(幅･高さ設定)
ﾌﾞﾛｸﾞ

猫ちゃんのイラストを背景に入れてみました。 ここに、文章を書いてください。

※枠の幅と高さを設定しているので、それ以上に文字があるとはみ出ます
<div align="center"><p style="width:150px;height:70px;background-image:url( 画像のｱﾄﾞﾚｽ );text-align:left;font-size:18px;color:#666600;padding:15px;border-style:double;border-width:3px;border-color:#003399"> 猫ちゃんのイラストを背景に入れてみました。 ここに、文章を書いてください。 </p></div>
文字に枠(1)
ﾌﾞﾛｸﾞ
.　　破線の枠です　　.
<font style="border:dashed 7px;border-color:#ffcc00;font-size:20px;color:#cc55ff">.　　破線の枠です　　.</font>
文字に枠(2)
全角SP
　　　　　実線　　　　　
<font style="border:solid 5px;border-color:#00cc00;font-size:20px;color:#0000ff">　　　　　実線　　　　　</font>
文字に枠(3)
半角SP
盛上枠
<font style="border:outset 5px;border-color:#006600;font-size:20px;color:#6600ff">　　　　盛上枠　　　　</font>

※半角スペースは表示できないので、全角スペースを入力しています
文字に枠(4)
特殊文字
      窪み枠      
<font style="border:inset 5px;border-color:#99cc00;font-size:20px;color:#cc0000">＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;窪み枠＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;＆nbsp;</font>

 ※特殊文字：＆nbsp;（半角スペース）･･記号を表示するために　｢ ＆ ｣は全角文字にしています
文字に枠(5)
ﾏｰｼﾞﾝ(px)
盛上線
<font style="border:ridge 5px;border-color:#ddcc00;font-size:20px;color:#00ff66"><font style="margin-left:30px;margin-right:30px">盛上線</font></font>
文字に枠(6)
ﾏｰｼﾞﾝ(pt)
窪み線
<font style="border:groove 5px;border-color:#ddcc00;font-size:20px;color:#00ff66"><font style="margin-left:30pt;margin-right:30pt">窪み線</font></font>
文字に枠(7)
ﾏｰｼﾞﾝ(cm)
破線
<font style="border:dashed 5px;border-color:#ddcc00;font-size:20px;color:#00ff66"><font style="margin-left:1cm;margin-right:1cm">破線</font></font>
文字に枠(8)
ﾏｰｼﾞﾝ(in)
点線
<font style="border:dotted 5px;border-color:#ddcc00;font-size:20px;color:#00ff66"><font style="margin-left:0.5in;margin-right:0.5in">点線</font></font>
文字に枠(9)
ﾏｰｼﾞﾝ(%)
実線
<font style="border:solid 5px;border-color:#ddcc00;font-size:20px;color:#00ff66"><font style="margin-left:20%;margin-right:20%">実線</font></font>

※画面のサイズの割合で表示される？


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