HPデザイン「かぞくいろ」
(左の画像:フライヤー、右の画像:ホームページ)
かぞくいろのフライヤーを参考にしてホームページの作り方を説明します。
かぞくいろに使用したタグの記述はこちら
ホームページのデザインをそのまま使用したい人はコピー&ペーストで
お使いいただけます。
使用した画像は、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%;
}
使用した画像はこちら
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%);