この記事の所要時間: 246
doi

吹き出しイラストを作ってみよう
の2回目だよ

 

こんにちは、ゆーすけです。

今回の記事は前回の続きなので、まだ読んでない人は

吹き出しイラストを作ってみようを読んでくださいね。

 

material_99_10_sまずはポチっとお願いします。

 

作った画像の吹き出しに文字ボックスを作る

前回の記事では、吹き出し付きの画像を作りました。

今回はその続きで、吹き出しに文字ボックスを作る作業です。

 

 

その前に作った画像をWordpressやサーバーにアップしておきましょう。

 

 

やり方は2通りあるのですが、今回はCSSというレイアウトを

するための命令文をHTMLに直接記入する方式を取ります。

本当はCSSとHTMLは分けたほうがいいのですが、こちらのほうが

直感的に理解できるので採用します。

 

 

《吹き出しイラストのCSS付きHTML》

<div style=”position: relative;”>
<img src=”画像をアップした先のURL” alt=”” width=”630″ height=”100″ />
<div style=”position: absolute; width: 500px; height: 65px; top: 15px; left: 100px;”>
ここに文字を入力
</div>
</div>

 

【htmlとCSSの解説】

黄色で囲まれた見えない箱(div)の中に横630px,縦100pxの画像ファイルを入れておきます。その上に、薄い黄色で示されている見えない箱(div)を横幅500px, 縦65pxの大きさで、上から15px,左から100px離れた場所に表示してね。

 

という命令文なんです。

濃い黄色(一番下)のdivを親ボックス

薄い黄色(一番上)のdivを子ボックスといいます。

image

 

 

((((;゚Д゚))))ガクガクブルブル 難しい・・・。

 

 

一番理解して欲しいポイントは

positon:relativeとpositon: absolute

というところ。

 

 

positon: absoluteという命令文は、子ボックスをブラウザの

好きなところに表示できる(これを絶対位置という)という意味です。

必ず親ボックスに指定されるpositon:relativeと一緒に使うのが普通です。

 

positon:relativeの指定をしないとブラウザの左上が基準になりますが

親ボックスにpositon: relativeを使うことによって、そのボックスの

左上が基準になります。

 

 

今回の吹き出しボックスでは

親ボックスと画像の大きさが同じになります。

(親ボックスの大きさ指定をしてないから)

 

 

子ボックスは親ボックスの左上を基準にするので

そこから左から100px、上から15px離れたところに

横500px、縦65pxの枠を表示しなさいと書いてあるのですね。

 

 

さぁ、読者の9割がついてこれてないね(w

 

<div style=”position: relative;”>
<img src=”画像をアップした先のURL” alt=”” width=”●” height=”●” />
<div style=”position: absolute; width: ●px; height: ●px; top: ●px; left: ●px;”>
ここに文字を入力
</div>
</div>

 

だから、上のタグをコピペしちゃおう(笑)

そして大切なのは子ボックスの指定のみ!!

 

吹き出しイラスト作ってみよう(1)の[15]で

左下に出てた100,15pxと書いてあるのがleft:とtop:のところ

 

image

 

吹き出しイラスト作ってみよう(1)の[16]で点線をくくった時に

500 X 65 pxと書いてあるのが width:とheight:に対応します。

 

image

 

 

吹き出し付きイラストのまとめ

1)イラストを作成

2)イラストをアップロード

3)記事の中に上のタグをコピペして数字合わせだけをする

 

たったのこれだけでOK(笑)

 

 

簡単でしょ!?

 

 

いやぁ・・・今回の記事は難しすぎる。

書いてる自分がうまく説明できてない気がするのですが・・・。

理解できますか?

 

positon: relativeとpostion: absoluteの説明が難しすぎる・・・

こういう時は・・・専門家に振ってしまえ!

 

doi

Web屋の森山さんがきっとコメント欄で解説してくれるよ♪

 

 

material_99_10_sまずはポチっとお願いします。