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

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

HPデザイン「かぞくいろ」

f:id:hs1993:20201230122434j:plainf:id:hs1993:20201230122503p:plain

(左の画像:フライヤー、右の画像:ホームページ)

かぞくいろのフライヤーを参考にしてホームページの作り方を説明します。

かぞくいろに使用したタグの記述はこちら

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

お使いいただけます。

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

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

<html>の場合

<!doctype html>
<html>
<head>
<link rel="stylesheet" href="ka.css">
<title>かぞくいろ</title>
</head>
<body>
<img src="ka.jpg">
<p class="moji">お義父さん<br>
血のつながらないキミ<br>
そして、何も持っていない私<br>
3人の旅はいま始まったばかっり。</h3>

<h1>かぞくいろ</h1>
<h2>―RAILWAYS わたしたちの出発―</h2>
<p class="mozi">有村架純 / 國村隼</p>
<p class="mozi1">桜庭ななみ / 歸山竜成 / 木下ほうか / 筒井真理子 / 板尾創路 / 青木崇高</p>

<p class="hi">11.30 Fri<br>
ロードショー</p>

<p class="mozi2">エグゼクティブプロデューサー:阿部秀司 監督・脚本:吉田康弘 音楽:富貴晴美</p>
<p class="mozi3">プロデューサー:石田和義 / 秋吉朝子 / ライン・プロデューサー:渡辺栄二</p>
<p class="mozi4">撮影:柴崎幸三 照明:上田なりゆき 美術:吉積弘二 装飾:小林宙央 録音:白取貢 編集:村上雅樹 サウンドプロデュース:北田雅也</p>
<p class="mozi5">特機:奥田悟 衣裳:岡田敦之 / 牧亜矢美 ヘア・メイク:宮内三千代 スクリプター:赤澤環 助監督:甲斐聖太郎 制作担当:間口彰</p>
<p class="mozi6">特別協賛:出水酒造 協賛:鹿児島県阿久根市/映画『かぞくいろ』制作を応援する会 撮影協力:肥薩おれんじ鉄道 / 九州旅客鉄道</p>
<p class="mozi7">制作:「かぞくいろ」制作委員会 企画:阿部秀司事務所 / ROBOT 制作プロダクション:ROBOT 配給:松竹 ©2018「かぞくいろ」制作委員会</p>
</body>
</tbody>
</html>

 

<css>の場合

body{
color:#ff9e9e;
font-size:30px;
}

.moji{
position:absolute;
color:#ffffff;
font-size:25px;
top:85%;
width:50%;
left:1%;
right:25%;
}

h1{
position:absolute;
font-size:150px;
top:85.5%;
width:60%;
left:26%;
}

h2{
position:absolute;
font-size:55px;
top:124%;
width:60%;
left:20%;
}

.mozi{
position:absolute;
font-size:30px;
color:#000000;
top:140%;
width:60%;
left:40%;
}

.mozi1{
position:absolute;
font-size:19px;
color:#000000;
top:150%;
width:50%;
left:25%;
}

.mozi2{
position:absolute;
font-size:10px;
color:#000000;
top:155%;
width:50%;
left:40%;
}

.mozi3{
position:absolute;
font-size:10px;
color:#000000;
top:157%;
width:50%;
left:40%;
}

.mozi4{
position:absolute;
font-size:10px;
color:#000000;
top:159%;
width:50%;
left:30%;
}

.mozi5{
position:absolute;
font-size:10px;
color:#000000;
top:161%;
width:50%;
left:30%;
}

.mozi6{
position:absolute;
font-size:10px;
color:#000000;
top:163%;
width:50%;
left:32%;
}

.mozi7{
position:absolute;
font-size:10px;
color:#000000;
top:165%;
width:50%;
left:30%;
}

.hi{
border-color:##ff9e9e;
position:absolute;
top:155%;
width:50%;
left:5%;
}

使用した画像はこちら

f:id:hs1993:20201230123608j:plain
ka.jpg

 このページの特徴は、

positionを使用して文字の位置を細かく設定するところなので、

そこを中心に説明していきたいと思います。

 

文字の位置を細かく設定したいとき

HTMLの記述部分

<p class="moji">お義父さん<br>
血のつながらないキミ<br>
そして、何も持っていない私<br>
3人の旅はいま始まったばかっり。</h3>

<h1>かぞくいろ</h1>
<h2>―RAILWAYS わたしたちの出発―</h2>
<p class="mozi">有村架純 / 國村隼</p>
<p class="mozi1">桜庭ななみ / 歸山竜成 / 木下ほうか / 筒井真理子 / 板尾創路 / 青木崇高</p>

<p class="hi">11.30 Fri<br>
ロードショー</p>

<p class="mozi2">エグゼクティブプロデューサー:阿部秀司 監督・脚本:吉田康弘 音楽:富貴晴美</p>
<p class="mozi3">プロデューサー:石田和義 / 秋吉朝子 / ライン・プロデューサー:渡辺栄二</p>
<p class="mozi4">撮影:柴崎幸三 照明:上田なりゆき 美術:吉積弘二 装飾:小林宙央 録音:白取貢 編集:村上雅樹 サウンドプロデュース:北田雅也</p>
<p class="mozi5">特機:奥田悟 衣裳:岡田敦之 / 牧亜矢美 ヘア・メイク:宮内三千代 スクリプター:赤澤環 助監督:甲斐聖太郎 制作担当:間口彰</p>
<p class="mozi6">特別協賛:出水酒造 協賛:鹿児島県阿久根市/映画『かぞくいろ』制作を応援する会 撮影協力:肥薩おれんじ鉄道 / 九州旅客鉄道</p>
<p class="mozi7">制作:「かぞくいろ」制作委員会 企画:阿部秀司事務所 / ROBOT 制作プロダクション:ROBOT 配給:松竹 ©2018「かぞくいろ」制作委員会</p>

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

(ここは"moji","mozi","mozi1","hi","mozi2","mozi3","mozi4","mozi5","mozi6","mozi7"

というクラス名で設定します。)

<h1>と<h2>は、CSSで直接設定します。

CSSの記述と説明

.moji{
position:absolute;
color:#ffffff;
font-size:25px;
top:85%;
width:50%;
left:1%;
right:25%;
}

mojiに対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
color(文字の色):#ffffff(白色);
font-size(文字の大きさ):25px(25px);
top(画像から上の文字の位置):85%(85%);
width(横幅):50%(50%);
left(画像から左の文字の位置):1%(1%);
right(画像から右の文字の位置):25%(25%);

h1{
position:absolute;
font-size:150px;
top:85.5%;
width:60%;
left:26%;
}

h1に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
font-size(文字の大きさ):150px(150px);
top(画像から上の文字の位置):85.5%(85.5%);
width(横幅):60%(60%);
left(画像から左の文字の位置):26%(26%);

h2{
position:absolute;
font-size:55px;
top:124%;
width:60%;
left:20%;
}

h2に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
font-size(文字の大きさ):55px(55px);
top(画像から上の文字の位置):124%(124%);
width(横幅):60%(60%);
left(画像から左の文字の位置):20%(20%);

.mozi{
position:absolute;
font-size:30px;
color:#000000;
top:140%;
width:60%;
left:40%;
}

moziに対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
font-size(文字の大きさ):30px(30px);
color(文字の色):#000000(黒色);
top(画像から上の文字の位置):140%(140%);
width(横幅):60%(60%);
left(画像から左の文字の位置):40%(40%);

.mozi1{
position:absolute;
font-size:19px;
color:#000000;
top:150%;
width:50%;
left:25%;
}

mozi1に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
font-size(文字の大きさ):19px(19px);
color(文字の色):#000000(黒色);
top(画像から上の文字の位置):150%(150%);
width(横幅):50%(50%);
left(画像から左の文字の位置):25%(25%);

.mozi2{
position:absolute;
font-size:10px;
color:#000000;
top:155%;
width:50%;
left:40%;
}

mozi2に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
font-size(文字の大きさ):10px(10px);
color(文字の色):#000000(黒色);
top(画像から上の文字の位置):155%(155%);
width(横幅):50%(50%);
left(画像から左の文字の位置):40%(40%);

.mozi3{
position:absolute;
font-size:10px;
color:#000000;
top:157%;
width:50%;
left:40%;
}

mozi3に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
font-size:10px(10px);
color(文字の色):#000000(黒色);
top(画像から上の文字の位置):157%(157%);
width(横幅):50%(50%);
left(画像から左の文字の位置):40%(40%);

.mozi4{
position:absolute;
font-size:10px;
color:#000000;
top:159%;
width:50%;
left:30%;
}

mozi4に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
font-size:10px(10px);
color(文字の色):#000000(黒色);
top(画像から上の文字の位置):159%(159%);
width(横幅):50%(50%);
left(画像から左の文字の位置):30%(30%);

.mozi5{
position:absolute;
font-size:10px;
color:#000000;
top:161%;
width:50%;
left:30%;
}

mozi5に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
font-size:10px(10px);

color(文字の色):#000000(黒色);
top(画像から上の文字の位置):161%(161%);
width(横幅):50%(50%);
left(画像から左の文字の位置):30%(30%);

.mozi6{
position:absolute;
font-size:10px;
color:#000000;
top:163%;
width:50%;
left:32%;
}

mozi6に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
font-size(文字の大きさ):10px(10px);
color(文字の色):#000000(黒色);
top(画像から上の文字の位置):163%(163%);
width(横幅):50%(50%);
left(画像から左の文字の位置):32%(32%);

.mozi7{
position:absolute;
font-size:10px;
color:#000000;
top:165%;
width:50%;
left:30%;
}

mozi7に対して、CSSを一度に設定

position(配置方法):absolute(絶対値);
font-size(文字の大きさ):10px(10px);
color(文字の色):#000000(黒色);
top(画像から上の文字の位置):165%(165%);
width(横幅):50%(50%);
left(画像から左の文字の位置):30%(30%);

.hi{
position:absolute;
top:155%;
width:50%;
left:5%;
}

 hiに対して、CSSを一度に設定
position(配置方法):absolute(絶対値);
top(画像から上の文字の位置):155%(155%);
width(横幅):50%(50%);
left(画像から左の文字の位置):5%(5%);