PAGE TOP

Top Page > スポンサー広告 > ○会話式!引き出しタグを作ろう!▽FC2blog > HTML関連 > ○会話式!引き出しタグを作ろう!

スポンサーサイト

--------  編集する スポンサー広告 
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

○会話式!引き出しタグを作ろう!

2014-01-20  編集する コメント数:1  HTML関連 


○やすぅーな


よーし、今回は「吹き出しコメント」のCSSとHTMLを紹介しよう!



○そーにゃ


わーぃ!って、またなんで?




○やすぅーな


え?まぁ、いいじゃん!


1.でぇ、まずは「画像」からね~

10

の10枚(右クリックで保存ね~)。


2.次に「CSS」ね~

/* 吹き出し
---------------------------------------------------------------------------------------- */
div.HUKI {
margin-bottom:5px;
}

div.HUKI-text {
color:#4d4d4d;
line-height:1.3;
        font-weight:bold;
        font-size:large;
}
div#main div.HUKI-image img {
alt: ; 
         border: 0;
         width: 100px;/* 画像の幅 */
         height: 100px;/* 画像の高さ */
}
div.sidecolumn div.HUKI-image {
margin-bottom:5px;
}
div.sidecolumn div.HUKI-image img {
width:16px;
height:16px;
}
p.HUKI2 {font-size: .8em;
          font-weight: normal;
          }
span.HUKI2{margin-bottom:50px;
margin-top:24px;
}

/* 左吹き出し
-------------------------------------------------------- */
div#main div.HUKI-left div.HUKI-image {
float:left;
width:60px;
}
div#main div.HUKI-left div.HUKI-text {
margin-left:105px;
         margin-right:20px;
}
div#main div.HUKI-left div.hu-top {
padding-left:14px;
background:url(画像/left_top_l.gif) no-repeat 0 0;
}
div#main div.HUKI-left div.hu-top-inner {
height:10px;
background:url(画像/left_top_r.gif) no-repeat 100% 0;
}
div#main div.HUKI-left div.hu-bottom {
padding-left:14px;
background:url(画像/left_bottom_l.gif) no-repeat 0 0;
}
div#main div.HUKI-left div.hu-bottom-inner {
height:10px;
background:url(画像/left_bottom_r.gif) no-repeat 100% 0;
}
div#main div.HUKI-left div.hu-body {
background:url(画像/left_body_l.gif) repeat-y 0 0;
}
div#main div.HUKI-left div.hu-body-inner {
background:url(画像/left.gif) no-repeat 0 0;
padding-left:11px;
}
div#main div.HUKI-left div.hu-body-inner2 {
border-right:#a2a2a2 solid 1px;
background:#fff;
padding:0 10px 5px;
}
div.sidecolumn div.HUKI-left div.HUKI-image {
margin-bottom:5px;
}
div.sidecolumn div.HUKI-left div.hu-top {
padding-left:4px;
background:url(画像/white_top_l.gif) no-repeat 0 0;
}
div.sidecolumn div.HUKI-left div.hu-top-inner {
height:10px;
background:url(画像/white_top_r.gif) no-repeat 100% 0;
}
div.sidecolumn div.HUKI-left div.hu-bottom {
padding-left:4px;
background:url(画像/white_bottom_l.gif) no-repeat 0 100%;
}
div.sidecolumn div.HUKI-left div.hu-bottom-inner {
height:10px;
background:url(画像/white_bottom_r.gif) no-repeat 100% 100%;
}
div.sidecolumn div.HUKI-left div.hu-body {
padding:0 10px;
background:#fff;
border:#a2a2a2 solid;
border-width:0 1px;
}



3.最後は「HTML」だけど~

<div class="HUKI HUKI-left"><div class="HUKI-image"><img src="吹き出し横に来る画像" /></div><div class="HUKI-text"><div class="hu-top"><div class="hu-top-inner"></div></div><div class="hu-body"><div class="hu-body-inner"><div class="hu-body-inner2"><p class="HUKI2">○名前</p><br /><span class="HUKI2">吹き出しの内容</span><br /><br /><br /></div></div></div><div class="hu-bottom"><div class="hu-bottom-inner"></div></div></div></div><!-- /HUKI -->

※「HTML」は詰めて書いてあるけど、このまま使ってね!


ここまで~
これで、吹き出しの完成だよ~





○そーにゃ


そぉか。
お疲れ様。





○やすぅーな


そぉそぉ、右吹き出しにしたいときは、吹き出し画像10枚のやつそれぞれを反転させて使ってね~

それと「CSS3」と「HTML5」が使える環境がベースだから気をつけてね~(IE9についてはこちらまで~






コメントの投稿   コメント入力へ


やすぅーなさん(2014-01-29|18:04) コメント入編集へ


今、思ったんだけどさぁ...
「CSS」ってソースだけじゃなくってさぁ
【.css】ファイルのダウンロードとか出来るようにした方が、
使う側って便利なんじゃないかなぁ?







◎表情







カテゴリ
プロフィール

Jackman

管理人:Jackman
名前:Jackman
担当:管理人
趣味:ネタ収集


◇登場人物・・・

名前:アザズゥー
担当:ツッコミ
趣味:人間観察


名前:クロウェー
担当:情報収集
趣味:占い・絵


名前:穂坂
担当:独断行動
趣味:森羅万象


名前:カク
担当:Android
趣味:潜入捜査


名前:くのいち
担当:PC
趣味:戦国無双


名前:AGIRI
担当:難問解答
趣味:密偵


名前:そーにゃ
担当:研修生
趣味:読書


名前:やすぅーな
担当:サイト拡張
趣味:日々発見


名前:長渡
担当:ユーロB
趣味:エレクトロ


名前:脳筋Ash
担当:筋肉活動
趣味:肉体覚醒


名前:片阜
担当:隠遁の術
趣味:火遁の術

No.
最新記事
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。