カルーセルで画像を表示するための領域を作り、スタイリングをしていきます。
- 雛形コード
- 表示領域の作成
- style.cssの作成
雛形コード
・前回まででHTMLのファイルの作成と必要な画像ファイルの作成をしていきました。
・今回はHTMLのマークアップとCSSのスタイリングをやっていきます。
・では早速HTMLのマークアップをしていきましょう。
・HTMLの構成は大きく分けて<!DOCTYPE html><html lang="ja"> </html>を書いていきその中に<head>タグと<body>タグを書いていきます。
・headタグの中にはWEBサイトの情報が入ってくるので文字の種類、タイトル、CSSのリンクなどをいれていきます。
・bodyタグの中にはページに表示させる内容をいれていきます。
・この辺はほとんど同じ構造になっているので雛形を自分で作っておいてもいいでしょう。
表示領域の作成
・次にdivタグを使って画像を表示させるための領域を作っておきましょう。
・また、クラス属性もつけておきます。今回はこのdivタグが親要素になるのでcontainerと名付けておきます。
・ただdivタグというのはこのままだと目で見ることができないのでスタイリングを軽くやっていき、見やすいようにしておきましょう。
cssファイルの作成
・CSSファイルはheadタグの中に書いていくのが一般的です。
・linkタグを使って書いていきましょう。refはstylesheet、としてあげてhrefは"css/style.css”とフォルダ名とファイル名を書いていきましょう。
・こんな感じですね。
<link rel="stylesheet" href="css/style.css">
・VS Codeを使っている場合は"css/style.css”の部分をマウスホバーすることでリンク先を表示とでてくるのでそこをクリックするかcommand + クリックすることで新しいファイルを作ることができます。
・ファイルを作れたらCSSの内容を書いていきましょう。
・クラス名がcontainerなので、セレクタは.containerとしてあげてスタイリングをしていきます。
・今回は幅を全体の80％にしてあげて高さを220pxの長方形の領域を作っていきます。そして中央揃えにします。また見やすいように外側を赤い実線で覆ってあげましょう。
・まず幅を80％にしたい場合はwidth: 80%;と書いてあげればいいですね。そして高さを220pxにしたい場合はheight: 220px;と書いてあげましょう。
・中央揃えはmargin: 0 auto;でできるのですが今回は上下に余白を作りたいのでmargin: 16px auto;としておきましょう。
・次に外側を赤い実線で覆いたいのですがいろいろな方法があるのですが今回はoutlineを使って行きたいと思います。
・今回は８pxくらいで実線を作りたいのでoutline: 8px solid red;と書いていきましょう。
・outlineの利点としては領域の外に線を引いてくれて領域の中の高さや幅に影響を与えません。
・borderとの違いを知っておくといいかもしれませんね。