HPデザイン「ファンタスティック・ビーストと黒い魔法使いの誕生」その5
〇1時間でやったこと
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とは違う書き方を説明します
今回は、ペイントとアルパカを使用します
①まず、ペイントを開きます
②用紙のサイズを設定します
・サイズ変更をクリックします
・サイズ変更と傾斜のページが開くのでサイズ変更項目に注目して
ピクセルと縦横比を維持するをクリックします
・水平方向を600px、垂直方向を1000pxに設定します
・入力したことを確認したら、OKボタンをクリックします
・設定したサイズになっているか再確認をします
③枠を描いていきます
・図形項目の各丸四角形にして、色を青にします
・用紙に合わせて図形を描いていきます
・次の写真のように内側に丸く角を描きます
④アルパカを開きます
・ファイルをクリックして、「開く」をクリックします
・ファイルが開くので、さきほど描いた枠を選択して「開く」をクリックします
・先ほど描いた枠が表示されます
②次の写真の赤丸部分を透明にしていきます
・カラー項目の背景透明の部分をクリックして、フォントサイズを30pxにします
・角をクリックして、消して背景透明にします
③画像を、名前を付けて保存します
・ファイルと引き出すをクリックします
・引き出しページが開いたら、ファイル形式PNG(透過PNG)と設定してOKを
クリックします
・ファイルが開くので、画像のファイル名を入力して保存をクリックします
・アルパカ用でファイルをクリックして名前を付けて保存をクリックします
・ファイルが開くので、画像のファイル名を入力して保存をクリックします
3,背景画像を配置
さっき描いた枠の画像を、表の背景画像として使用します
<html>の場合
<tr class="ga3">~</tr>
HTMLの説明
背景画像を設定するために、<class>を使用します
クラス名は任意の名前を指定してください
(ここでは”ga3”というクラス名を指定しています)
CSSの説明
ga3というクラス名に対して、CSSを一度に設定
background-image(背景画像): url("fa3.png")(画像の名前);
4,画像の準備
3枚の画像を使用します
fan7.png | fan5.jpg | fan6.jpg |
・ネットで「ハリーポッター 著者」・「幻の動物とその生息地」・「魔法使いの旅 脚本版」と調べて画像を、名前を付けて保存します
「ハリーポッター 著者」で調べた画像をアイコンみたいに作ります
・使用するアプリは、ペイントとアルパカです
①まず、ペイントを開きます
・貼り付け→ファイルから貼り付けるの順にクリックしていきます
・保存した画像を選択して、「開く」をクリックします
・画像を確認した後、図形項目で楕円形をクリックします
・画像の上に楕円形を描いていきます
・楕円形に合わせて、用紙の大きさを合わせます
・保存マークをクリックして、名前を付けて保存します
②アルパカを開きます
・ファイルと開くをクリックします
・ペイントで描いた画像を選択して「開く」をクリックします
・カラー項目で背景透明をクリックします
・スナップ項目で曲線スナップ、フォントサイズで30pxをクリックします
・ペイントで描いた楕円形に沿って、曲線スナップで描いていきます
赤い点はマウスを1クリックしたところです
・1週したら、ダブルクリックをしてその上をなぞっていきます
・スナップ項目の「・」をクリックします
・スナップオフにして外側の余った部分を描いていきます
・ファイルと引き出しをクリックします
・ファイル形式をPNG(透過PNG)にして、OKをクリックします
・フォルダが開くので、画像のファイル名を記入して保存をクリックします
・アルパカ用でファイルをクリックして名前を付けて保存をクリックします
・ファイルが開くので、画像のファイル名を入力して保存をクリックします
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%);