CSS解説 CSSComic 吹き出しの制御
今日はCSSで画像に置いた吹き出しの位置を調整するよ。
用意した絵の上に吹き出しの画像を乗っけるんですね。
うん、下のようになるようにする。
ぷかぷか～
あら、あおびさんですね。ぷかぷか浮いて可愛らしいですね。
うん！まず、HTML部分は下のように書く。
【HTML】
<div class="himeaobi700">
<div class="picture">
<img src="../image/chara/himeaobi/himeaobi700_s.png" width="500" height="512">
</div>
<div class="fukidashi">
<img src="../image/chara/fukidashi_kobetu/bottom_133_92.png">
<p class="moji">ぷかぷか～</p>
</div>
</div>
親クラスとして「himeaobi700」、子クラスとして「fukidashi」、その子として「moji」を配置する。
「himeaobi700」は全体の枠を定義するようなもので、「position: relative;」で現在位置に配置する。その中の「fukidashi」と「moji」は「position: absolute;」で、「top: ～px;」「left: ～px;」を調整して位置を決める。
【CSS】
/* 囲い、親*/
.himeaobi700{
width: 502px;/*自ホームページのコンテンツ幅ぐらい*/
position: relative;
padding: 0px; /* 吹き出し画像4辺の余白 */
margin-left: 0px; /* 左の位置調整 */
margin-bottom: 0px;
height: 514px; /* 画像の高さ ＋ 枠線・余白 */
}
.himeaobi700 .picture{
border: 1px solid #000000;
position: absolute;/*現在の表示位置から位置を決める。*/
top: 0px;
left: 0px;
}
/* 吹き出しの自体の文字設定*/
.himeaobi700 .fukidashi{
position: absolute;/*現在の表示位置から位置を決める。*/
top: 17px;/*上からの位置 */
left: 355px;/*左からの位置 */
width: 98px;
margin-bottom: 10px;
}
/* 吹き出しの文字設定*/
.himeaobi700 .moji{
font-size: large;
position: absolute;/*親要素(吹き出し本体)から位置を決める。*/
top: 15px;/*上からの位置 */
left: 6px;/*左からの位置 */
width: 98px;
height: 25px;
}
一回、作成してしまえば、「top」「left」の調整だけで、位置を自由に変えられて便利ですね✨
お名前
