HPデザイン「3D彼女編」
(左の画像：フライヤー 右の画像：ホームページ)
3D彼女のフライヤーを参考にしてホームページの作り方を説明します。
３D彼女のキャスト紹介はこちらからアクセスできます！
超初心者のためのホームページデザイン (hatenablog.com)
3D彼女編で使用したタグの記述はこちら
ホームページのデザインをそのまま使用したい人はコピー&ペーストで
お使いいただけます。
使用した画像は、CSSの下にまとめてUPしているので、画像の下に書いてある
ファイル名でご使用ください。
<html>の場合
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="1.css">
<title>3D彼女ーリアルガールー</title>
</head>
<body>
<div class="bizyo"><h1>「美女と<span class="iro">オタク</span>」の笑って泣けるラブコメディ！</h1>
<img src="3d 1.jpg" width="100%">
<p><span class="iro1">Story</span><br>
書店で万引きの濡れ衣を着せられた<br>
学校一の美少年・五十嵐色葉を助けたのは、<br>
２次元を愛する超絶オタク・つっつんこと筒井光。<br>
色葉から突然の告白を受けたつっつんは<br>
新手のイジメだと疑いながらも、<br>
正反対のふたりの交際がスタートする。</p></div>
<h2 class="bizyo1">「今まで＂圏外”だった人がまさかの理想の相手!?</h2>
<img src="3d 3.png" width="50%">
<img src="3d 2.png" width="50%">
<table class="float_none">
<tbody>
<tr>
<td width="15%"><img src="3d 4.jpg" width="100%"></td>
<td class="waku">リア充美女と恋愛経験ゼロの２次元オタク、<br>
住む世界がまったく違うふたりの一途でピュアな恋の行方は――!?</td><td width="15%">
<img src="3d 5.jpg" width="100%"></td></tr></tbody></table>
<div class="gazou"><img src="3d 6.jpg" width="19.5%">
<img src="3d 7.jpg" width="19.5%">
<img src="3d 8.jpg" width="19.5%">
<img src="3d 9.jpg" width="19.5%">
<img src="3d 10.jpeg" width="19.5%"></div>
<p class="moji3">完璧なルックスを持つヒロインがオタクに恋をする斬新な設定で話題を呼んだ那波マオの同名コミックを、大ヒット映画『ヒロイン
失格』の監督、スタッフが映画化。中条あやみ、佐野勇斗をはじめ清水尋也、恒松祐里、上白石萌歌、ゆうたろうなど次世代を狙う
フレッシュなキャストが集結し、つっつんがこよなく愛するキャラクター、魔法少女えぞみちの声をつとめるのは神田沙也加。</p>
<div class="gazou"><img src="3d 11.png" width="49.5%">
<img src="3d 13.jpg" width="49.5%">
<p>MUSIC<br>
完成作を観て心動かされたという西野カナが映画<br>
『ヒロイン失格』の「トリセツ」に続いて主題歌<br>
「Bedtime Story」を書き下ろし、観ると恋がした<br>
くなるラブコメディの後味を、より一層鮮やかなもの<br>
にしている。</p>
</div>
</body>
</html>
<css>の場合
body{
background-color:#ffffd1;
}
h1{
color: #ff1493;
font-size: 30px;
text-align: center;
font-weight: bold;
padding-top:1%;
}
.bizyo{
background-color:#ffffd1;
position:relative;
}
.bizyo p{
color:#ffffff;
position:absolute;
top:100%;
left:5%;
font-size:20px;
}
.bizyo1{
background-color:#ff1493;
color:#ffff00;
font-size:30px;
text-align:center;
font-weight:bold;
}
.gazou{
position:relative;
float:left;
color:#d2691e;
}
.gazou p{
position:absolute;
top:10%;
right:5%;
}
.moji3{
color:#ff84c1;
}
.moji4{
color:#d2691e;
position:absolute;
top:50%;
right:5%;
}
.iro{
color:#4169e1;
}
.iro1{
color:#ffff00;
}
.float_none{
clear:both;
}
img{
float:left;
}
.waku{
color:#e4007f;
font-weight:bold;
font-size:24px;
width:70%;
text-align:center;
background-color:orange;}
使用した画像はこちら
 |
 |
 |
| 3d 1.jpg | 3d 2.png | 3d 3.png |
 |
 |
 |
| 3d 4.jpg | 3d 5.jpg | 3d 6.jpg |
 |
 |
 |
| 3d 7.jpg | 3d 8.jpg | 3d 9.jpg |
 |
 |
 |
| 3d 10.jpeg | 3d 11.png | 3d 12.jpg |
画像の上に文章を重ねる
このページの特徴は、画像の上に文章が重なっているところなので、そこを中心に
説明していきたいと思います。
1，画像の上に<p>～</p>を重ねたいとき
2，画像の上に<p>~</p>を２個以上重ねたいとき
1，画像の上に<p>～</p>を重ねたいとき
HTMLの記述部分
<div class="bizyo"><h1>「美女と<span class="iro">オタク</span>」の笑って泣けるラブコメディ！</h1>
<img src="3d 1.jpg" width="100%">
<p><span class="iro1">Story</span><br>
書店で万引きの濡れ衣を着せられた<br>
学校一の美少年・五十嵐色葉を助けたのは、<br>
２次元を愛する超絶オタク・つっつんこと筒井光。<br>
色葉から突然の告白を受けたつっつんは<br>
新手のイジメだと疑いながらも、<br>
正反対のふたりの交際がスタートする。</p></div>
HTMLの説明
複数の要素にまとめてCSSを設定したいので、<div>～</div>を使用します。
クラス名は任意の名前を指定してください。
(ここでは"bizyo"というクラス名で設定しています。)
オタクとStoryという字だけ色を変えたいので、<span>～</span>を使用します。
クラス名は任意の名前を指定してください。
(オタクは"iro"・Storyは"iro1"というクラス名で設定しています。)
CSSの記述部分と説明
h1{
color: #ff1493;
font-size: 30px;
text-align: center;
font-weight: bold;
padding-top:1%;
}
h1タグに対して、CSSを一度に設定
color（文字の色）: #ff1493（ピンク）;
font-size（文字の大きさ）: 30px（30ピクセル）;
text-align（文字の位置）: center（中央）;
font-weight（文字の太さ）: bold（太い）;
padding-top（ボックス内の間隔ー上）:1%（枠内上から1％の位置）;
.bizyo{
background-color:#ffffd1;
position:relative;
}
bizyoというクラス名に対して、CSSを一度に設定
background-color（背景の色）:#ffffd1（薄黄色）;
position（配置方法）:relative（相対位置）;
※相対位置は、imgがある方側に設定すると簡単に覚えておきましょう。
.bizyo p{
color:#ffffff;
position:absolute;
top:100%;
left:5%;
font-size:20px;
}
bizyoというクラス名の中にあるPタグに対して、CSSを一度に設定
color（文字の色）:#ffffff（白）;
position（配置方法）:absolute（絶対値）;
top（画像の上からの文字の位置）:100%（100%）;
left（画像の左からの文字の位置）:5%（5%）;
font-size（文字の大きさ）:20px（20ピクセル）;
※本来ならtopが100%はおかしいのですが、私のPCではこれでしか位置がちょうどいい
場所に設定できなかったのでこのまま紹介しています。
※絶対値は、Pがある方側に設定すると簡単に覚えておきましょう。
.iro{
color:#4169e1;
}
iroというクラス名に対して、CSSを一度に設定
color（文字の色）:#4169e1（薄青）;
.iro1{
color:#ffff00;
}
iro 1というクラス名に対して、CSSを一度に設定
color（文字の色）:#ffff00（黄色）;
2，画像の上に<p>~</p>を２個以上重ねたいとき
※<p>~</p>は１画像の１つだけしか重ねることができないので、２つ以上文章を重ねたいときには、内容に変更のない方の文章を画像に直接書いてしまいましょう。
HTMLの記述部分
<div class="gazou"><img src="3d 11.png" width="49.5%">
<img src="3d 13.jpg" width="49.5%">
<p>MUSIC<br>
完成作を観て心動かされたという西野カナが映画<br>
『ヒロイン失格』の「トリセツ」に続いて主題歌<br>
「Bedtime Story」を書き下ろし、観ると恋がした<br>
くなるラブコメディの後味を、より一層鮮やかなもの<br>
にしている。</p>
</div>
HTMLの説明
複数の要素にまとめてCSSを設定したいので、<div>～</div>を使用します。
クラス名は任意の名前を指定してください。
(ここでは"gazou"というクラス名で設定しています。)
CSSの記述部分と説明
.gazou{
position:relative;
float:left;
color:#d2691e;
}
gazouというクラス名に対して、CSSを一度に設定
position（配置方法）:relative;（相対位置）;
※相対位置は、imgがある方側に設定すると簡単に覚えておきましょう。
float（回り込み）:left（左詰め）;
color（文字の色）:#d2691e（薄茶）;
.gazou p{
position:absolute;
top:10%;
right:5%;
}
position（配置方法）:absolute（絶対値）;
top（画像の上からの文字の位置）:10%（10%）;
right（画像の右からの文字の位置）:5%（5％）;
