はじめに
こんにちは!中学2年生のWardHamamatsu67と申します! 前回予告した通り、HTML,CSSのみで青看板をつくったことについて書きました。
準備
どのような青看板にするかを決めます。
今回は次のような感じの青看板です。(場所:神奈川県秦野市国道246号上)
次に、必要に応じて取り除く文字を選びます。ここでは、「松田」と「渋沢駅」の「渋沢」、「200m」などを除きます。
HTMLのコード
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>青看板</title>
</head>
<link rel="stylesheet" href="blue.css">
<body>
<div class="outer">
<div class="box" id="one" style="text-align:center;">沼津
<br>Numazu<br></div>
</div>
<div class="outer1">
<div class="box1" id="one1">駅
<br>Sta.<br>
</div>
</div>
<div class="outer2">
<div class="box2" id="one2" style="text-align:right;">大倉
<br>Okura<br></div>
</div>
<div class="outer3">
<div class="box3" id="one3">↑</div>
</div>
<div class="outer4">
<div class="box4" id="one4">→</div>
</div>
<div class="outer5">
<div class="box5" id="one5">←</div>
</div>
</body>
</html>
HTMLではただdivタグと表示する文字などを決めるだけなので詳しい説明は省きます。難しいのはCSSです。
CSSのコード
* {
box -sizing: border-box;
}
.box {
width: 500px;
height: 400px;
background: red;
color: white;
font-size: 30px;
}
#one {
position: fixed;
top: 80px;
left: 10px;
background: blue;
}
.outer {
width: 500px;
height: 300px;
padding-left: 150px;
}
* {
box-sizing: border-box;
}
.box1 {
width: 400px;
height: 200px;
background: red;
color: white;
font-size: 30px;
}
#one1 {
position: fixed;
top: 250px;
left: 10px;
background: blue;
}
.outer1 {
width: 500px;
height: 300px;
padding-left: 150px;
}
* {
box-sizing: border-box;
}
.box2 {
width: 400px;
height: 200px;
background: red;
color: white;
font-size: 30px;
}
#one2 {
position: fixed;
top: 250px;
right: 750px;
background: blue;
}
.outer2 {
width: 500px;
height: 300px;
padding-right: 150px;
}
* {
box-sizing: border-box;
}
.box3 {
width: -100px;
height: 200px;
background: red;
color: white;
font-size: 175px;
}
#one3 {
position: fixed;
top: 175px;
right: 910px;
background: blue;
}
.outer3 {
width: 500px;
height: 300px;
padding-right: 150px;
}
* {
box-sizing: border-box;
}
.box4 {
width: 10px;
height: 200px;
background: red;
color: white;
font-size: 75px;
}
#one4 {
position: fixed;
top: 250px;
right: 910px;
background: blue;
}
.outer4 {
width: 500px;
height: 300px;
padding-right: 150px;
}
* {
box-sizing: border-box;
}
.box5 {
width: 10px;
height: 200px;
background: red;
color: white;
font-size: 75px;
}
#one5 {
position: fixed;
top: 250px;
right: 1152px;
background: blue;
}
.outer5 {
width: 500px;
height: 300px;
padding-right: 150px;
}
HTMLで表示する文字が入った青看板をいくつも重ねていくような感じでやるとうまくいきます。そして気を付けてほしいのが、最初の青看板(class="outer")が一番大きくなるようにしないといけないことです。こうしないと、あとからほかの青看板を重ねるので、形が変になってしまうからです。
boxというクラスで、青看板の位置を指定することができます。(top,right,leftなど)
矢印をつける際は、大きさに注意しましょう。
完成図
どうでしょう。「駅」と「大倉」の文字が少しずれてしまいましたが何とか完成できました。
最後に
自分は2年前から地図に興味を持っており、特に道路などには興味がありました。ですので、前々から青看板をつくろうと思っていました。予想の10倍くらい難しかったです。
これからもHTML,CSSなどに関する記事を投稿していきますので、興味のある方はいいねとフォローをしてくれると嬉しいです。
参考