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

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

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

〇1時間でやったこと

f:id:hs1993:20210120141358p:plain

1,表を横並びに置く

2,背景画像の準備

3,背景画像を配置

4,画像の準備

5,画像の配置

 

1,表を横並びに置く

前回配置した表の隣に今回作る表を配置します

<html>の場合

<div class="hyo3"><table width="600" height="1000">~</table>

<css>の場合

.hyo3{
position:absolute;
top:25%;
left:125%;
}

HTMLの説明

表の配置を設定するために、<div>~</div>と<class>を使用します

表を作るために<table>~</table>を使用します

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

(ここでは”moji3”というクラス名を指定しています)

表のサイズは、背景画像のサイズと同じにします

CSSの説明

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

position(配置方法):absolute(絶対値);
top(画面の上からの表の位置):25%(25%);
left(画面の左からの表の位置):125%(125%);

 

2,背景画像の準備

「ファンタビ」のその1,2,3,4とは違う書き方を説明します

今回は、ペイントとアルパカを使用します

①まず、ペイントを開きます

f:id:hs1993:20210121161142p:plain

②用紙のサイズを設定します

・サイズ変更をクリックします

f:id:hs1993:20210121161450p:plain

・サイズ変更と傾斜のページが開くのでサイズ変更項目に注目して

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

f:id:hs1993:20210121161615p:plain

・水平方向を600px、垂直方向を1000pxに設定します

f:id:hs1993:20210121162102p:plain

・入力したことを確認したら、OKボタンをクリックします

f:id:hs1993:20210121162250p:plain

・設定したサイズになっているか再確認をします

f:id:hs1993:20210121162501p:plain

③枠を描いていきます

・図形項目の各丸四角形にして、にします

f:id:hs1993:20210121162717p:plain

・用紙に合わせて図形を描いていきます

f:id:hs1993:20210121170205p:plain

・次の写真のように内側に丸く角を描きます

f:id:hs1993:20210121170527p:plainf:id:hs1993:20210121170540p:plain

④アルパカを開きます

f:id:hs1993:20210121164513p:plain

・ファイルをクリックして、「開く」をクリックします

f:id:hs1993:20210121164638p:plain

・ファイルが開くので、さきほど描いた枠を選択して「開く」をクリックします

f:id:hs1993:20210121164945p:plain

・先ほど描いた枠が表示されます

f:id:hs1993:20210121170850p:plain

②次の写真の赤丸部分を透明にしていきます

f:id:hs1993:20210121171655p:plain

・カラー項目の背景透明の部分をクリックして、フォントサイズを30pxにします

f:id:hs1993:20210121171839p:plain

・角をクリックして、消して背景透明にします

f:id:hs1993:20210121171924p:plain

③画像を、名前を付けて保存します
ファイル引き出すをクリックします

f:id:hs1993:20210121172707p:plain

・引き出しページが開いたら、ファイル形式PNG(透過PNG)と設定してOKを

クリックします

f:id:hs1993:20210121172849p:plain

・ファイルが開くので、画像のファイル名を入力して保存をクリックします

f:id:hs1993:20210121173517p:plain

・アルパカ用でファイルをクリックして名前を付けて保存をクリックします

f:id:hs1993:20210121173216p:plain

・ファイルが開くので、画像のファイル名を入力して保存をクリックします

f:id:hs1993:20210121173906p:plain

 

3,背景画像を配置

さっき描いた枠の画像を、表の背景画像として使用します

<html>の場合

<tr class="ga3">~</tr>

<css>の場合

.ga3{
background-image: url("fa3.png");
}

HTMLの説明

背景画像を設定するために、<class>を使用します

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

(ここでは”ga3”というクラス名を指定しています)

CSSの説明

ga3というクラス名に対して、CSSを一度に設定

background-image(背景画像): url("fa3.png")(画像の名前);

 

 4,画像の準備

3枚の画像を使用します

f:id:hs1993:20210121181024p:plain f:id:hs1993:20210121181042j:plain f:id:hs1993:20210121181107j:plain
fan7.png fan5.jpg fan6.jpg

・ネットで「ハリーポッター 著者」・「幻の動物とその生息地」・「魔法使いの旅 脚本版」と調べて画像を、名前を付けて保存します

 

ハリーポッター 著者」で調べた画像をアイコンみたいに作ります

f:id:hs1993:20210121181600p:plain

・使用するアプリは、ペイントとアルパカです

①まず、ペイントを開きます

f:id:hs1993:20210121181811p:plain

・貼り付け→ファイルから貼り付けるの順にクリックしていきます

f:id:hs1993:20210121182042p:plain

保存した画像を選択して、「開く」をクリックします

f:id:hs1993:20210121182231p:plain

・画像を確認した後、図形項目で楕円形をクリックします

f:id:hs1993:20210121182736p:plain

・画像の上に楕円形を描いていきます

f:id:hs1993:20210121182957p:plain

・楕円形に合わせて、用紙の大きさを合わせます

f:id:hs1993:20210121183204p:plain

・保存マークをクリックして、名前を付けて保存します

f:id:hs1993:20210121183313p:plain

②アルパカを開きます

f:id:hs1993:20210121164513p:plain

・ファイルと開くをクリックします

f:id:hs1993:20210121183722p:plain

ペイントで描いた画像を選択して「開く」をクリックします

f:id:hs1993:20210121183838p:plain

・カラー項目で背景透明をクリックします

f:id:hs1993:20210121184133p:plain

・スナップ項目で曲線スナップ、フォントサイズで30pxをクリックします

f:id:hs1993:20210121184247p:plain

・ペイントで描いた楕円形に沿って、曲線スナップで描いていきます

赤い点はマウスを1クリックしたところです

f:id:hs1993:20210121184459p:plain

・1週したら、ダブルクリックをしてその上をなぞっていきます

f:id:hs1993:20210121184748p:plain

・スナップ項目の「・」をクリックします

f:id:hs1993:20210121184833p:plain

・スナップオフにして外側の余った部分を描いていきます

f:id:hs1993:20210121185022p:plain

・ファイルと引き出しをクリックします

f:id:hs1993:20210121185249p:plain

・ファイル形式をPNG(透過PNG)にして、OKをクリックします

f:id:hs1993:20210121185410p:plain

・フォルダが開くので、画像のファイル名を記入して保存をクリックします

f:id:hs1993:20210121185650p:plain

・アルパカ用でファイルをクリックして名前を付けて保存をクリックします

f:id:hs1993:20210121185950p:plain

・ファイルが開くので、画像のファイル名を入力して保存をクリックします

f:id:hs1993:20210121185826p:plain

 

5,画像の配置

表の中に、さっき準備した画像を配置していきます

<html>の場合

<div class="g3"><img src="fan4.png"></div><br>
<div class="g4"><img src="fan5.jpg"></div><div class="g5"><img src="fan6.jpg"></div>

<css>の場合

.g3{
position:absolute;
top:13%;
left:57%;
}

.g4{
position:absolute;
top:35%;
left:10%;
float:left;
}

.g5{
position:absolute;
top:35%;
left:58%;
}

HTMLの説明

画像の配置をそれぞれ設定するので、<div>~</div>と<class>を使用します

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

(ここでは”g3””g4””g5”というクラス名を指定しています)

CSSの説明

g3というクラス名に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
top(画面の上からの画像の位置):13%(13%);
left(画面の上からの画像の位置):57%(57%);

g4というクラス名に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
top(画面の上からの画像の位置):35%(35%);

left(画面の上からの画像の位置):10%(10%);
float:left;

g5というクラス名に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
top(画面の上からの画像の位置):35%(35%);
left(画面の上からの画像の位置):58%(58%);