HPデザイン「ちはやふる」
（左の画像：フライヤー、右の画像：ホームページ）
ちはやふるのフライヤーを参考にしてホームページの作り方を説明します。
ちはやふるに使用したタグの記述はこちら
ホームページのデザインをそのまま使用したい人はコピー&ペーストで
お使いいただけます。
使用した画像は、CSSの下にまとめてUPしているので、画像の下に書いてあるファイル名でご使用ください。
<css>のファイル名は、「ti.css」で保存してください
<html>の場合
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="ti.css">
<title>ちはやふる</title>
</head>
<body>
<h1>ちはやふる ー結びー</h1>
<img src="ti1.png">
<h3>それぞれの未来へ――</h3>
<p class="moji">広瀬すず / 野村周平 / 新田真剣佑<br>
上白石萌音 / 矢本悠馬 / 森永悠希 / 清水尋也 / 優希美青<br>
佐野勇斗 / 清原果那松岡茉優 / 賀来賢人 / 松田美由紀 / 國村隼<br>
<p class="moji1">原作：末次由紀『ちはやふる』（講談社「BE-LOVE」連載）
監督・脚本：小泉徳宏 企画・プロデューサー：北島直明 プロデューサー：巣立恭平</p>
<div class="migi"><p>2018.<span class="moji3">3.17</span></p></div>
</body>
</tbody>
</html>
<CSS>の場合
body{
background-image:url("ti.jpg");
color:#c70067;
font-size:30px;
}
h1{
writing-mode:tb-rl;
color:#ff3399;
font-size:50px;
width:12%;
}
img{
position:absolute;
top:5%;
width:45%;
right:25%;
}
h3{
position:absolute;
writing-mode:tb-rl;
color:#f09199;
font-size:30px;
top:20%;
width:90%;
right:12%;
}
.moji{
position:absolute;
font-size:20px;
top:80%;
}
.moji1{
position:absolute;
font-size:10px;
top:95%;
}
.moji3{
font-size:40px;
}
.migi{
position:absolute;
left:80%;
top:80%;
}
使用した画像はこちら
 |
 |
| ti.jpg | ti1.png |
このページの特徴は、文字が縦書きになっているところなのでそこを中心に説明していきたいと思います。
１，文字を縦に書くとき
２，文字の色を途中で変更するとき
１，文字を縦に書くとき
HTMLの説明文字の色や大きさは、CSSで<h1>/<h3>に直接設定するので、Classは使用しません。
CSSの記述と説明
h1{
writing-mode:tb-rl;
color:#ff3399;
font-size:50px;
width:12%;
}
h1というクラス名に対して、CSSを一度に設定
writing-mode（書字方向[縦横]）:tb-rl（縦書き）;
color（文字の色）:#ff3399（赤紫）;
font-size（文字の大きさ）:50px（50px）;
width（横幅）:12%（12%）;
h3{
position:absolute;
color:#f09199;
font-size:30px;
top:20%;
width:90%;
right:12%;
}
position（配置方法）:absolute（絶対値）;
※画面全体を基準として場所を決めるときに絶対値を使用します。
writing-mode（書字方向[縦横]）:tb-rl（縦書き）;
color（文字の色）:#f09199（桃色）;
font-size（文字の大きさ）:30px（30px）;
top（画像から上の文字の位置）:20%（20%）;
width（横幅）:90%（90%）;
right（画像から右の文字の位置）:12%（12%）;
２，文字の色を途中で変更するとき
〇文字色の設定が多くなるため、基本色を<body>の中に設定します。
body{
color:#c70067;
}
color（文字の色）:#c70067（ルビー）
