CSSで装飾をしよう！
こんにちは！ ちばにしです。
前回に引き続き、カフェのトップページ作成です。今回で最後となります。
それでは、よろしくおねがいします！
今回CSSでやりたいこと
CSSは本来別ページで記述を行ってHTMLファイルへリンクを貼るのですが、今回は簡易版でHTMLの<head>の中にある<style>タグの中で表記しちゃおうと思います。
今回行いたいことは、
- 文字列の横幅をブラウザの３０％にそろえ、左に寄せる。
- ブラウザいっぱいにおしゃれな背景画像を入れる。
の二点になります。
使用するコードは以下の４つです。
width: 横幅の大きさの指定;
height: 縦幅の大きさの指定;
background-color: 背景色の指定;
background-image: 背景画像の指定;
ではさっそく、文字列の調整から入っていきたいと思います。
文字列の横幅を調整して、左寄せにする
cssを記述するとき、必ずタグの名前などを使って明確に命令を書いていくことになります。
今回は範囲を指定するものとして<div>で全ての文字列を囲んでいますので、この<div>に対して命令を行っていきます。
以下のコードを<style></style>の間に記述してください。
<style>
div {
width: 30vw;
height: 90vh;
background-color: #957c5c;
}
</style>
保存をし、あらためてデスクトップにあるcafe.htmlのファイルをダブルクリックしてブラウザで開いてみてみましょう。
文字列の大きさが画面の３０％ほどになり、左に寄っている状態になります。
おしゃれな背景画像を設置してみよう！
ちなみに画像はこちらでご用意いたしました。
画像再配布可能な「pixabay」様よりお借りしています。
画像の上で右クリックをし、「名前を付けて画像を保存」を選択し、画像の名前を「cafe_top_image.jpg」にしてください。
必ず一字一句同じ名前にしてください。
コードというのはとても繊細で、
スペルを１つでも間違えたり、半角の空欄を紛れ込ませてしまったりするだけで、とたんに言うことをきかなくなってしまいます。
前準備が終わったところで、CSSで指定していきたいと思います。
以下のコードを、先ほどの<div>への命令が終わる}の下に改行をしてから記述してください。
body {
background-image: url("cafe_top_image.jpg");
}
ちなみに、bodyというのは、ページ全体を現すタグになります。ページ全体に画像を広げたいので、今回はこのタグに対して命令を行っています。
記述が終わりましたら、保存し、デスクトップにあるcafe.htmlのファイルをダブルクリックしてブラウザで開いてみてみましょう。
シックな色合いのエスプレッソの機材とコーヒーの画像が全面に表示されていると思います。
以下に、念のためコード全文を載せます。
<html>
<head>
<meta charset="utf-8">
<title>ChibaNishi CAFE</title>
<style>
div {
width: 25vw;
height: 90vh;
background-color: #957c5c;
}
body {
background-image: url("cafe_top_image.jpg");
}
</style>
</head>
<body>
<div>
<h1>ChibaNishi CAFE</h1>
<p>ChibaNishi CAFEがオープンします</p>
<p>バリスタが丁寧に淹れたエスプレッソをぜひお楽しみください</p>
<p>HOME</p>
<p>ABOUT</p>
<p>MENU</p>
<p>ACCESS</p>
<p>BLOG</p>
</div>
<p>c 2020 ChibaNishi CAFE ALL RIGHTS RESERVED.</p>
</body>
</html>
以上で完成になります！
いざ、ブラウザで開いて確認をして見ましょう。
このようになっていたら成功です！
初めてのWEBページ作成を終えて
いかがでしたでしょうか。
WEBサイトがどのようにして作成されていっているのか、なんとなくお分かりいただけたのではないかと思います。
今回お試しのコーディングをしていただいたわけですが、皆さんおそらくお気づきの通り、HTMLとCSSは英語で出来ています。
そもそも、WEBという仕組みが英語圏で開発されたものだからです。
なので、英語のお勉強にも同時になれるのかなと思います。
WEBデザインを勉強したいなと思った方はぜひ、「初心者」「webデザイン」などで検索をしてみてください。
本当にたくさんの初心者向けの記事がネットにはあります。
そして初心者向けの教科書もたくさん発売されていますので、ぜひチャレンジしてみてください！
長々と続いてしまいましたが今回はここまで！
お付き合いいただき、ありがとうございました。
著者：ちばにし
記事１へのリンク
記事２へのリンク[:]
