jQueryMobileでスマホサイト(CSSで遊ぶ2)
②DIVに画像を貼った上に、文字をのせる練習
使うのは 縦 横 ２００ピクセル の画像です
スタイルシートはリンク貼れば外部にしても動きます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>画像と文字の配置の練習</title>
<style type="text/css">
*{ margin: 0; padding: 0; }
body{ font-size:65%;font: "ＭＳ ゴシック"; }
#page-wrap { width: 400px; margin: 0 auto; }
.area{ font:1em;width: 200px; height: 200px; background: url(images/tweet.jpg) no-repeat; position: relative; float: left; }
.bubblearea {
position: absolute;
left: 50px;
top: 30px;
width: 140px;
height: 100px;
}
#one { font-size:1em;line-height:1em;}
#two { font-size:2em;line-height:2em;
position: absolute; left: 50px; top: 0px;}
#three { font-size:3em; line-height:3em;}
#four { font-size:1em; line-height:2em;}
</style>
</head>
<body>
<div id="page-wrap">
<div class="area" >
<div class="bubblearea">
<p id="one">いつもブログを読んでくれてアリガトウ。私は怠け者なのです。ブログの更新が遅れてごめんね。汗</p>
</div>
</div>
<div class="area" >
<div class="bubblearea">
<p id="two">いつもブログを読んでくれてアリガトウ。私は怠け者なのです。ブログの更新が遅れてごめんね。汗</p>
</div>
</div>
<div class="area" >
<div class="bubblearea">
<p id="three">いつもブログを読んでくれてアリガトウ。私は怠け者なのです。ブログの更新が遅れてごめんね。汗</p>
</div>
</div>
<div class="area" >
<div class="bubblearea">
<p id="four">いつもブログを読んでくれて<br/>アリガトウ。<br/>私は怠け者なのです。ブログの更新が遅れてごめんね。汗</p>
</div>
</div>
</div>
</body>
</html>
なんかhtmlがうまく貼れなかった ・・・orz
