初めに。
はい、タイトルのまんまです。
家で夏休みをのんびりと過ごしていたら、急に頭の中で西郷隆盛さんが現れて踊り出し、
「コーディング〜コーディング〜」と歌い出したので、コーディングをしたくなったという話です。
茶番ここまで。
とりあえず、2カラムのページを作ります。
なお、テーマカラーは#72C3FAです。
1.headerを作ってみる。
まずはheaderを作ってみます。
html
<!DOCTYPE html>
<html style="margin: 0;">
<head>
<title>header</title>
<link rel="stylesheet" href="reset.css">
</head>
<body style="margin: 0;">
<header class="header">
<p class="disc">サイトの説明文</p>
<h1 class="title">サイト名</h1>
</header>
</body>
</html>
はい、ここでポイントは<link rel="stylesheet" href="reset.css">です。
これは、リセットCSSと言ってブラウザ特有のCSSデザインを全て解除する役割を果たしています。
CSS
header{
background-color: #72C3FA;
height: 140px;
margin: 0px;
padding: 0px;
}
.disc{
text-align: center;
color: #FFFFFF;
padding: 14px;
font-size: 14px;
}
.title{
text-align: center;
color: #FFFFFF;
font-size: 34px;
margin:30px;
}
成果物
codepenにあげておきます。
https://codepen.io/railway-fun/pen/xxWqNxV
実行するとこんな感じ。
2.footerを作ってみる。
次はサイトの一番下、footerを作ってみましょう。
html
<footer class="footer">
<div class="footer-site-name">
サイト名
</div>
<div class="footer-spacer-1"></div>
<div class="footer-credit">
© 2022 I-AM-RAILWAY-FAN.
</div>
</footer>
css
footer{
background-color: #72C3FA;
height: 90px;
display: flex;
}
.footer-site-name{
margin: 30px;
width: 20%;
color: #FFFFFF;
font-size: 20px;
}
.footer-spacer-1{
width: 30%;
}
.footer-credit{
width: 50%;
margin: 34px;
text-align: right;
color: #FFFFFF;
font-size: 14px;
}
コードは先ほどのものに追記しちゃってください。
成果物
こちらもcodepenにあります。
https://codepen.io/railway-fun/pen/ZExKzgB
実行するとこんな感じ。
3.bodyを2カラムにしてみる。
html
<div class="body">
<main class="main">
春はあけぼの。やうやう白くなりゆく山際、少し明かりて、紫だちたる雲の細くたなびきたる。
夏は夜。月のころはさらなり、闇もなほ、蛍の多く飛びちがひたる。また、ただ一つ二つなど、ほのかにうち光て行くもをかし。雨など降るもをかし。
秋は夕暮れ。夕日の差して山の端いと近うなりたるに、烏の寝所へ行くとて、三つ四つ、二つ三つなど飛び急ぐさへあはれなり。まいて雁などの連ねたるが、いと小さく見ゆるは、いとをかし。日入り果てて、風の音、虫の音など、はた言ふべきにあらず。
冬はつとめて。雪の降りたるは言ふべきにもあらず、霜のいと白きも、またさらでもいと寒きに、火など急ぎおこして、炭持て渡るも、いとつきづきし。昼になりて、ぬるくゆるびもていけば、火桶の火も、白き灰がちになりてわろし。
</main>
<sub class="sub">
a
</sub>
</div>
CSS
.body{
display: flex;
background-color: #f4f5f7;
}
.main{
background-color: #FFFFFF;
width: 70%;
margin: 1%;
}
.sub{
background-color: #FFFFFF;
width: 28%;
margin: 1%;
}
成果物
codepenに載せてます。
https://codepen.io/railway-fun/pen/NWYjWjx
組み合わせると...
これらを組み合わせると、こんな感じになります。
次回からは管理画面を作ろうと思います。
追記
あ、メニュー作り忘れた。