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

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

HPデザイン「12人の死にたい子どもたち」

f:id:hs1993:20201221145949j:plainf:id:hs1993:20201221150021p:plain

（左の画像：フライヤー、右の画像：ホームページ）

12人の死にたい子どもたちのフライヤーを参考にしてホームページの作り方を

説明します。

12人の死にたい子どもたちで使用したタグの記述はこちら

ホームページのデザインをそのまま使用したい人はコピー&ペーストで

お使いいただけます。

使用した画像は、CSSの下にまとめてUPしているので、画像の下に書いてあるファイル名でご使用ください。

<css>のファイル名は、「１2.css」で保存してください

<html>の場合

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="12.css">
<title>12人の死にたい子供たち</title>
</head>
<body>
<table class="hidari">
<tbody>
<tr>
<td><img src="12-1.jpg
"></td></tr>
<tr>
<td><img src="12-2.jpg"></td></tr>
<tr>
<td><img src="12-3.jpg"></td></tr>
<tr>
<td><img src="12-4.jpg"></td></tr>
<tr>
<td><img src="12-5.jpg"></td></tr>
<tr>
<td><img src="12-6.jpg"></td></tr>
</tbody>
</table>
<table class="naka">
<tbody>
<tr class="aka">
<td>ミッション</td><td>参加者</td><td>場所</td><td>謎</td></tr>
<tr class="moji">
<td>集団安楽死</td><td>12人の未成年</td><td>廃病院</td><td>13人目の死体</td></tr>
<tr>
<td colspan="4"><img src="12-14.png" width="100%"></td></tr>
<tr class="hidari1">
<td colspan="4"><p>その日、<span class="moji1">12人の未成年</span>たちが、安楽死を求め廃病院の密室に集まった。
<span class="moji1">「みんなで死ねば、怖くない<br>から」</span>ところが、彼らはそこで<span class="moji1">13人目のまだ生あたたかい死体</span>に遭遇。
突然の出来事にはばまれる彼らの安楽死。あちこちに残る不自然な犯行の追跡、次々起こる<span class="moji1">奇妙な
出来事</span>。彼らだけしか知らない計画のはず。</p>
<p class="moji2">まさかこの12人の中に殺人鬼が・・・・・？</p>
<p>死体の謎と犯人をめぐり、疑心暗鬼の中<span class="moji1">ウソとダマしあい</span>が交錯し、12人の
死にたい理由が生々しくえぐられていく。</p>
<p class="moji2">全員、ヤバい。気が抜けない。</p>
<p>いつ誰が<span class="moji1">殺人鬼</span>に変身するのか!?パニックは最高
湖に。彼らは安心して<span class="moji1">”死ねるのか”</span>怯えながら
”殺されるのか”</p>
<p>監督　堤幸彦(「SPEC」「イニシェーション・ラブ」)が
仕掛ける。<span class="moji1">出口無しのノンストップ未体験・密室
サスペンスゲームの幕が上がる</span></p>。</td></tr>
</tbody>
</table>
<table class="migi">
<tbody>
<tr>
<td><img src="12-7.jpg"></td></tr>
<tr>
<td><img src="12-8.jpg"></td></tr>
<tr>
<td><img src="12-9.jpg"></td></tr>
<tr>
<td><img src="12-10.jfif"></td></tr>
<tr>
<td><img src="12-11.jpg"></td></tr>
<tr>
<td><img src="12-12.jpg"></td></tr>
</tbody>
</table>
</body>
</html>

<css>の場合

body{
background-image:url("12.jpeg");
background-repeat:no-repeat;
background-position:10% 45%;
background-color:#333c5e;
color:#ffffff;
}

.hidari{
float:left;
}

.hidari1{
text-align:left;
text-size:20px;
}

.naka{
float:left;
width:65.5%;
text-align:center;
position:absolute;
top:20%;
left:17%;
}

.migi{
position:absolute;
top:3%;
right:1%;
}

.aka{
background-color:#ff0000;
}

.moji{
font-weight:bold;
font-size:25px;
}

.moji1{
font-weight:bold;
font-size:20px;
}

.moji2{
font-weight:bold;
font-size:20px;
color:#ff0000;
}

使用した画像はこちら

f:id:hs1993:20201221151317j:plain f:id:hs1993:20201222160829j:plain f:id:hs1993:20201222161017j:plain
12.jpeg 12-1.jpg 12-2.jpg
f:id:hs1993:20201222161115j:plain f:id:hs1993:20201222161137j:plain f:id:hs1993:20201222161152j:plain
12-3.jpg 12-4.jpg 12-5.jpg
f:id:hs1993:20201222161204j:plain f:id:hs1993:20201222161220j:plain f:id:hs1993:20201222161259j:plain
12-6.jpeg 12-7.jpg 12-8.jpg
f:id:hs1993:20201222161357j:plain f:id:hs1993:20201222161412j:plain f:id:hs1993:20201222161832j:plain
12-9.jpg 12-10.jpg 12-11.jpg
f:id:hs1993:20201222161858j:plain f:id:hs1993:20201222162617p:plain
12-12.jpeg 12-14.png

背景に画像をいれ、表を３つ横並べに置く

このページの特徴は、表が３つ横並びになっているので、そこを中心に

説明していきたいと思います。

1、背景に画像を入れるとき

2,　表<table>～</table>の１つ目を置くとき

3，表<table>～</table>の２つ目を置くとき

4，表<table>～</table>の３つ目を置くとき

1，背景に画像を入れるとき

HTMLの記述部分

背景画像や文字の色はCSSで直接設定するので、

HTMLで特に設定することはありません。

CSSの記述と説明

body{
background-image:url("12.jpeg");
background-repeat:no-repeat;
background-position:10% 45%;
background-color:#333c5e;
color:#ffffff;

}

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

background-image（背景の画像）:url("12.jpeg")（画像のファイル名）;
background-repeat（背景の繰り返し）:no-repeat（繰り返し無）;
background-position（背景の位置）:10% 45%（横：10%、縦：45%）;
background-color（背景の色）:#333c5e（紺色）;
color（文字の色）:#ffffff（白色）;

2，表<table>～</table>を１つ置くとき

HTMLの記述部分

<table class="hidari">
<tbody>
<tr>
<td><img src="12-1.jfif"></td></tr>
<tr>
<td><img src="12-2.jpg"></td></tr>
<tr>
<td><img src="12-3.jpg"></td></tr>
<tr>
<td><img src="12-4.jpg"></td></tr>
<tr>
<td><img src="12-5.jpg"></td></tr>
<tr>
<td><img src="12-6.jpg"></td></tr>
</tbody>
</table>

HTMLの説明

表の設定をCSSでしたいので、Classを使用します。

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

(ここでは"hidari"というクラス名で設定しています。)

表をグループ化したいので<tbody>~</tbody>を使用します。

画像を一段ずつ並べたいので、<tr><td>~</td></tr>を一段に一つずつ使用します。

CSSの記述と説明

.hidari{
float:left;
}

右側に表を２つ並べたいので、ここに左詰めの設定を記述します。「Class="hidari"」に対して、CSSを一度に設定

float（回り込み）:left（左詰め）;

3，表<table>～</table>の２つ目を置くとき

HTMLの記述部分

<table class="naka">
<tbody>
<tr class="aka">
<td>ミッション</td><td>参加者</td><td>場所</td><td>謎</td></tr>
<tr class="moji">
<td>集団安楽死</td><td>12人の未成年</td><td>廃病院</td><td>13人目の死体</td></tr>
<tr>
<td colspan="4"><img src="12-14.png" width="100%"></td></tr>
<tr class="hidari1">
<td colspan="4"><p>その日、<span class="moji1">12人の未成年</span>たちが、安楽死を求め廃病院の密室に集まった。
<span class="moji1">「みんなで死ねば、怖くない<br>から」</span>ところが、彼らはそこで<span class="moji1">13人目のまだ生あたたかい死体</span>に遭遇。
突然の出来事にはばまれる彼らの安楽死。あちこちに残る不自然な犯行の追跡、次々起こる<span class="moji1">奇妙な
出来事</span>。彼らだけしか知らない計画のはず。</p>
<p class="moji2">まさかこの12人の中に殺人鬼が・・・・・？</p>
<p>死体の謎と犯人をめぐり、疑心暗鬼の中<span class="moji1">ウソとダマしあい</span>が交錯し、12人の
死にたい理由が生々しくえぐられていく。</p>
<p class="moji2">全員、ヤバい。気が抜けない。</p>
<p>いつ誰が<span class="moji1">殺人鬼</span>に変身するのか!?パニックは最高
湖に。彼らは安心して<span class="moji1">”死ねるのか”</span>怯えながら
”殺されるのか”</p>
<p>監督　堤幸彦(「SPEC」「イニシェーション・ラブ」)が
仕掛ける。<span class="moji1">出口無しのノンストップ未体験・密室
サスペンスゲームの幕が上がる</span></p>。</td></tr>
</tbody>
</table>

HTMLの説明

表の２つ目を横に並べるときは、<table>~</table>を新しく使用します。

表と一段ずつの設定をCSSでしたいので、Classを使用します。

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

(ここでは"naka","aka","moji","moji1"というクラス名で設定しています。)

表をグループ化したいので<tbody>~</tbody>を使用します。

<td>~</td>(セル)を２個以上結合させるために、<colspan>を使用します。

文字の基本色が白色になっているので、その文字を赤色に変えるために<span>~</span>を使用します。

CSSの記述と説明

.naka{
float:left;
width:65.5%;
text-align:center;
position:absolute;
top:20%;
left:17%;
}

右側に３つ目の表を並べたいので、ここに左詰めの設定を記述します。

「Class="naka"」に対して、CSSを一度に設定

float（回り込み）:left（左詰め）;
width（横幅）:65.5%（65.5％）;
text-align（画像の位置）:center（中央）;
position（配置方法）:absolute（絶対値）;
top（画像から上の文字の位置）:20%（20%）;
left（画像から左の文字の位置）:17%（17%）;

※絶対値は、Pがある方側に設定すると簡単に覚えておきましょう。

.aka{
background-color:#ff0000;
}

「Class="aka"」に対して、CSSを一度に設定

background-color（背景の色）:#ff0000（赤色）;

.moji{
font-weight:bold;
font-size:25px;
}

「Class="moji"」に対して、CSSを一度に設定

font-weight（文字の太さ）:bold（太い）;
font-size（文字の大きさ）:25px（25px）;

.moji1{
font-weight:bold;
font-size:20px;
}

「Class="moji1"」に対して、CSSを一度に設定

font-weight（文字の太さ）:bold（太い）;
font-size（文字の大きさ）:20px（20px）;

.moji2{
font-weight:bold;
font-size:20px;
color:#ff0000;
}

「Class="moji2"」に対して、CSSを一度に設定

font-weight（文字の太さ）:bold（太い）;
font-size（文字の大きさ）:20px（20px）;
color（文字の色）:#ff0000（赤色）;

4，表<table>～</table>の３つ目を置くとき

HTMLの記述部分

<table class="migi">
<tbody>
<tr>
<td><img src="12-7.jpg"></td></tr>
<tr>
<td><img src="12-8.jpg"></td></tr>
<tr>
<td><img src="12-9.jpg"></td></tr>
<tr>
<td><img src="12-10.jfif"></td></tr>
<tr>
<td><img src="12-11.jpg"></td></tr>
<tr>
<td><img src="12-12.jpg"></td></tr>
</tbody>
</table>
</body>
</html>

HTMLの説明

表の３つ目を横に並べるときは、<table>~</table>を新しく使用します。

表を一段ずつの設定をCSSでしたいので、Classを使用します。

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

(ここでは"migi"というクラス名で設定しています。)

表をグループ化したいので<tbody>~</tbody>を使用します。

画像を一段ずつ並べたいので、</tr><td>~</td></tr>を一段に一つずつ使用します。

CSSの記述と説明

.migi{
position:absolute;
top:3%;



right:1%;
}

「Class="migi"」に対して、CSSを一度に設定

position（配置方法）:absolute（絶対値）;
top（画像から上の文字の位置）:3%（3%）;
right（画像から右の文字の位置）:1%（1%）;