HPデザイン「10万分の１」その２ - 超初心者のためのホームページデザイン

前の１時間でやったことはこちらを参考にしてください

HPデザイン「10万分の１」その１ - 超初心者のためのホームページデザイン (hatenablog.com)

〇１時間でやったこと

f:id:hs1993:20210108221956p:plain

1，文字の大きさを設定

2，文字に下線を付ける

3，画像を横に並べる

1，文字の大きさを設定

f:id:hs1993:20210108222252p:plain

<html>の場合

<p class="moji3">蓮を演じるのはEXILEのパフォーマーであり、GENERATIONS<br>
from EXILE TRIBEのリーダーを務めると共に、主演作「貴族降臨-PRINCE OF LEGEND-」などで俳優としても圧倒的なパフォーマンスを披露する白濱亜嵐。<br>

莉乃には「honey」など青春映画に欠かせない存在となり、まぶしいほどの輝きで観る者を魅了する平祐奈。<br>
　共演は若手実力派の優希美青、白州迅。莉乃の祖父役には<br>
名優・奥田瑛二。監督は大ヒット作『植物図鑑　運命の恋、<br>
ひろいました』の三木康一郎。<br>
　本当に大切なものは何かが見え始めたこの時代に、人と人<br>
のつながりの素晴らしさを描き、どんな逆境にも立ち向かう力<br>
をくれる感動の純愛ラブストーリー。</p></td></tr>
</tbody>
</table>

<css>の場合

.moji3{
font-size:18px;
}

HTMLの説明

文字の大きさを設定するためにClassを使用します

クラス名は、任意の名前を指定してください

（ここでは”moji3”というクラス名で設定しています）

CSSの説明

moji3というクラス名に対して、CSSで一度に設定する

font-size（文字の大きさ）:18px（18px）;

2，文字に下線を付ける

f:id:hs1993:20210108224236p:plain

<html>の場合

<p class="moji5">告白して気まずくなるくらいなら友達のままでいい。学校中の女子はもちろん、男子からも憧れの存在である<br>
桐谷蓮に想いを寄せる桜木莉乃は、そう思っていた。<br>
ところがある日、蓮の方から打ち明けられ、誰もがうらやむ両想いの日々が始まる。２人で過ごす時間が何よりも<br>
大切なものに変わる頃、「10万分の1」の確率でしか起こらない、ある運命が降りかかる―――。</p>

<css>の場合

.moji5{
text-decoration: underline;
position:absolute;
top:99%;
left:2%;
font-size:14px;
}

HTMLの説明

文字の大きさや配置を設定するためにClassを使用します

クラス名は、任意の名前を指定してください

（ここでは”moji5”というクラス名で設定しています）

CSSの説明

moji5というクラス名に対して、CSSで一度に設定する

文字に下線を引くために、{text-decoration: underline;}を使用する

text-decoration（文字の装飾）: underline（下線）;
position（配置方法）:absolute（絶対値）;
top（画像の上からの文字の位置）:99%（99%）;
left（画像の左からの文字の位置）:2%（2%）;
font-size（文字の大きさ）:14px（14%）;