HPデザイン「君の瞳が問いかけている」その３
前の１時間でやったことはこちらを参考にしてください
HPデザイン「君の瞳が問いかけている」その２ - 超初心者のためのホームページデザイン (hatenablog.com)
〇４０分でやったこと（１時間もかかりませんでした）
1，画像の配置を設定
2，文字の大きさを設定
3，文章を改行する
4，完成
1，画像の配置を設定
使用した画像はこちら
 |
| ga11.jpg |
三木監督さんの写真と名前に下に、画像がくるように設定します。
<html>の場合
<div class="ga1"><img src="ga11.jpg"></div>
<css>の場合
.ga1{
position:absolute;
top:100%;
left:1%;
}
HTMLの説明
複数の要素にまとめてCSSを設定したいので、<div>～</div>を使用します。
クラス名は任意の名前を指定してください。
（ここでは"ga1"というクラス名で設定しています）
CSSの説明
ga1というクラス名に対して、CSSを一度に設定
position（配置方法）:absolute（絶対値）;
top（画像の上からの文字の位置）:100%（100%）;
left（画像の左からの文字の位置）:1%（1%）;
2，文字の大きさを設定
主題歌の名前と歌手名の文字を大きくします
<html>の場合
<p class="moji2">主題歌<span class="iro1">「Your eyes tell」BTS</span></p>
HTMLの説明
文字の大きさを変えたいので<span>～</span>を使用します。
クラス名は任意の名前を指定してください。
（主題歌は"moji2",Your eyes tellは"iro1"というクラス名で設定しています）
CSSの説明
moji2というクラス名に対して、CSSを一度に設定
position（配置方法）:absolute（絶対値）;
top（画像の上からの文字の位置）:130%（130%）;
left（画像の左からの文字の位置）:2%（2%）;
iro2というクラス名に対して、CSSを一度に設定
font-size（文字の大きさ）:20px（20px）;
3，文章を改行する
長い文章を改行するために<br>を使用します。
ページ全体と文章のバランスを調整しながら文を改行します。
Produced by Gustav Mared, UTA<br>
Written by Gustav Mared, JUNG KOOK, UTA,JUN<br>
主題歌「Your eyes tell」は、本映画への完全書き下ろし。<br>
JUNG KOOKが、作曲を担当。作品世界のイメージと合う、<br>
切ないバラードを完成させた。この曲が収録されたニュー<br>
アルバム「MAP OF THE SOUL: 7～THEJOURNEY～」は<br>
7月15日にリリース。
4，完成
「君の瞳に問いかけている」の完成ページはこちらです
