HPデザイン「ファンタスティック・ビーストと黒い魔法使いの誕生」その7
〇約25分でやったこと
1,文字に下線を付ける
2,文字の前に縦線を入れる
3,画像の準備
4,画像の配置
5,QRコードの準備
6,QRコードの配置
7,完成
1,文字に下線を付ける
「ハリーポッター」「ファンタスティック・ビースト」・・・の文章に下線を付けます
<html>の場合
<p class="moji9">「ハリーポッター」「ファンタスティック・ビースト」にまつわる最新情報はこちらでチェック!</p>
<css>の場合
.moji9{
text-decoration: underline;
position:absolute;
top:124%;
left:-10%;
font-size:15px;
color:#e4007f;
}
HTMLの説明
文字の位置や下線を設定するために<class>を使用します
クラス名は、任意の名前を指定してください
ここでは"moji9"というクラス名を指定しています
CSSの説明
moji9というクラス名に対して、CSSを一度に設定
text-decoration(文字の装飾): underline(下線);
position(配置方法):absolute(絶対値);
top(画面の上からの文字の位置):124%(124%);
left(画面の左からの文字の位置):-10%(-10%);
font-size(文字の大きさ):15px(15px);
color(文字の色):#e4007f(マゼンタ);
2,文字の前に縦線を入れる
文字の前に縦線を入れる方法はいくつかありますが、ここでは「ctrt ¥」=『|』 で入力しています
<html>の場合
<p class="moji10">| ウィザーディング・オフィシャルサイト |</p>
<css>の場合
.moji10{
position:absolute;
top:134%;
left:-10%;
font-size:18px;
color:#000000;
}
HTMLの説明
文字の位置を設定するために<class>を使用します
文字の前の縦線は、CSSでは設定していないので、<Class>は使用しません
クラス名は、任意の名前を指定してください
ここでは"moji10"というクラス名を指定しています
CSSの説明
moji10というクラス名に対して、CSSを一度に設定
position(位置方法):absolute(絶対値);
top(画面の上からの文字の位置):134%(134%);
left(画面の左からの文字の位置):-10%(-10%);
font-size(文字の大きさ):18px(18px);
color(文字の色):#000000(白色);
3,画像の準備
fan8.jpg |
ネットで「ファンタスティックビースト」と調べて、名前を付けて保存します
ページにうまく入るように、画像のサイズを設定します
・ファイルをひらいて、さっき保存した画像を見つけます
・画像を右クリックして、編集をクリックします
・ペイントが開くので、サイズ変更をクリックします
・ピクセル・縦横比を維持するをクリックします
・水平方向300px、垂直方向176pxに設定して、OKをクリックします
・サイズ変更→ピクセルをクリックして画像のサイズを確認します
・保存マークをクリックして、画像の準備は終わりです
4,画像の配置
文字の横に画像を配置します
<html>の場合
<div class="g7"><img src="fan8.jpg"></div>
<css>の場合
.g7{
position:absolute;
top:135%;
left:60%;
}
HTMLの説明
画像の位置を設定するために<class>を使用します
クラス名は、任意の名前を指定してください
ここでは"g7"というクラス名を指定しています
CSSの説明
g7というクラス名に対して、CSSを一度に設定
position(配置方法):absolute(絶対値);
top(画面の上からの画像の位置):135%(135%);
left(画面の左からの画像の位置):60%(60%);
5,QRコードの準備
ファンタスティックビーストのオフィシャルサイトのQRコードを作成します
・ここからは、スマホでの説明します
・まず、ネットでファンタスティックビーストのオフィシャルサイトを
開いて、URLをコピーします
・「Colorful」というアプリを開きます
(インストールしていない方はアプリストアで『QRコード作成』と
検索してください)
・下の方に入力スペースがあるのでさきほどコピーしたURLをペーストします
・保存マークをクリックします
・ファンタスティックビーストのオフィシャルサイトのQRコードは完成です
6,QRコードの配置
さっき作ったQRコードを、ホームページに配置します
<html>の場合
<div class="g8"><img src="fan9.jpg"></div>
<css>の場合
.g8{
position:absolute;
top:154%;
left:40%;
}
HTMLの説明
画像の位置を設定するために<class>を使用します
クラス名は、任意の名前を指定してください
ここでは"g8"というクラス名を指定しています
CSSの説明
g8というクラス名に対して、CSSを一度に設定
position(位置方法):absolute(絶対値);
top(画面の上からの画像の位置):154%(154%);
left(画面の左からの画像の位置):40%(40%);
7,完成
「ファンタスティック・ビーストと黒い魔法使いの誕生」の完成ページはこちらです