超初心者のためのホームページデザイン

ホームページ作成初心者でも簡単にデザインが真似できるようにHTML・CSSの記述例を紹介しています。 文章と画像の部分を入れ替えるだけで簡単にフライヤーのようなホームページが作成できます。 動作確認ができるようにデザインに使用した画像もUPしています。 私もまだまだ初心者なので、おかしな記述もあるかもしれませんが、超初心者の方の参考になればと思います。 使用しているブラウザは、Microsoft edgeです。

HPデザイン「ファンタスティック・ビーストと黒い魔法使いの誕生」その7

〇約25分でやったこと

f:id:hs1993:20210124181741p:plain

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,画像の準備

f:id:hs1993:20210124190159j:plain
fan8.jpg

ネットで「ファンタスティックビースト」と調べて、名前を付けて保存します

ページにうまく入るように、画像のサイズを設定します

・ファイルをひらいて、さっき保存した画像を見つけます

f:id:hs1993:20210124190925p:plain

・画像を右クリックして、編集をクリックします

f:id:hs1993:20210124191129p:plain

・ペイントが開くので、サイズ変更をクリックします

f:id:hs1993:20210124191354p:plain

ピクセル・縦横比を維持するをクリックします

f:id:hs1993:20210124191713p:plain

・水平方向300px、垂直方向176pxに設定して、OKをクリックします

f:id:hs1993:20210124192044p:plain

・サイズ変更→ピクセルをクリックして画像のサイズを確認します

f:id:hs1993:20210124192231p:plain

・保存マークをクリックして、画像の準備は終わりです

f:id:hs1993:20210124192444p:plain

 

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コードを作成します

・ここからは、スマホでの説明します

 f:id:hs1993:20210124193148j:plain

・まず、ネットでファンタスティックビーストのオフィシャルサイトを

開いて、URLをコピーします

・「Colorful」というアプリを開きます

(インストールしていない方はアプリストアで『QRコード作成』と

検索してください)

 f:id:hs1993:20210124193503j:plain

 ・下の方に入力スペースがあるのでさきほどコピーしたURLをペーストします

f:id:hs1993:20210124193925j:plain

・保存マークをクリックします

f:id:hs1993:20210124194053j:plain

・ファンタスティックビーストのオフィシャルサイトの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,完成

ファンタスティック・ビーストと黒い魔法使いの誕生」の完成ページはこちらです

f:id:hs1993:20210124220126p:plain