ランディングページ制作 コーディング編②
Contents
cssファイルの作成・リンク設定
html_css/lp内にcssフォルダを作成し、その中にstyle.cssを作成しましょう。
「style.css」の一行目に@charset “UTF-8”;と入力します。「@charset」と「UTF-8;」の間は半角スペースです。
@charset "UTF-8";style.cssをindex.htmlにリンクさせます。Bootstrapのフレームワークを読み込んでくることが記述されている<link>タグの下にもう一つ<link>タグを作ります。<link rel=”stylesheet” href=”css/style.css”>と書きましょう。href=”○○”の○○はcssの場所を記述しています。
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<!-- style.cssの読み込み -->
<link rel="stylesheet" href="css/style.css">
<title>Dental beauty</title>
</head>
<body>
<h1>私は仕事が大好きです。</h1>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>試しにh1のスタイルを変更してみましょう。style.cssにh1{font-size:60px;}と記述しプレビューしてみましょう。「Dental beauty」の文字が大きくなっていたらOKです。
@charset "UTF-8";
h1 {
font-size: 60px;
}Bootstrapのグリッドシステムを使った骨格作り
htmlのbodyの下に<div>を作ります。それに対して「container」というclass名を付けましょう。さらに.containerの中に「row」というclass名のdivをさらに作ります。さらにその中に「col-8」というclass名のdivを作ってその中に先ほどのh1を入れましょう。
<!-- 省略 -->
<body>
<div class="container">
<div class="row">
<div class="col-8">
<h1>Dental beauty</h1>
</div>
</div>
</div>
<!-- 省略 -->
</body>前回プレビューしたタブが残っている方はそのタブをリロードしてください。
すると、変更内容が反映されます。
プレビューのタブが残っていない場合は新しくプレビューしてください。
「Dental beauty」の文字が少し中央に寄ったと思います。「col-8」というclass名が何を意味するかというと、rowの幅を12等分したものの８個分の大きさという意味です。
col-4はrowを12等分した幅の４つ分です。上の図の場合、col-4はrowを３等分したもの、col-６は２等分したものになります。Bootstrapではこのようなグリッドシステムが用意されています。カラムの大きさによって何列で並ぶかの設定ができます。余白を作りたい場合は「offset」という値を使用します。
試しに.col-8のdivをコピーし、複製し、col-4と名前を付けてみましょう。
<!-- 省略 -->
<body>
<div class="container">
<div class="row">
<div class="col-8">
<h1>Dental beauty</h1>
</div>
<div class="col-4">
<h1>Dental beauty</h1>
</div>
</div>
</div>
<!-- 省略 -->
</body>プレビューしてみると、下のようになっているはずです。
これはどういう状態かというと、左のカラムが画面幅を12等分した幅の8個分で、右側のカラムが４つ分になります。画面の幅を縮めてみると、同じ比率を保ったまま小さくなります。
文字だけではわかりにくいかもしれませんが、このように8:4の比率で.rowの中のdivが構成されている状態です。２つのdivを「col-6」とした場合は6:6（つまり1:1）の割合で並びます。
画像の表示
divの中に画像を入れていきましょう。今、h1が入っている二つのdivを「col-6」というクラス名にし、h1の代わりに書き出した画像を入れていきます。画像を読み込む場合は<img>タグを使います。src以降は画像の場所を記述します。imgタグには「alt」を必ず入れましょう。
「alt」（代替テキスト）の目的は、一つは視覚障がい者への補助テキストとして、音声読み上げのためです。Webサイトには視覚障がい者に、画像の内容を伝えるための代替テキストを読み上げてくれる機能があります。
もう一つは、SEO対策のためです。SEOとはsearch Engine Optimization（サーチエンジンオプティマイゼーション）の頭文字をとって略したもので、日本語にすると「検索エンジン最適化」という意味になります。検索エンジンとは、インターネット上の情報を検索するシステムのことで、検索しているユーザーにとって、もっとも適したサイトを表示するためシステムです。alt属性に用いたキーワードが検索で用いられるため、検索結果で上位表示されやすくなります。SEOについては詳しく説明すると長くなりますが、Webサイトを作る上では欠かせない知識なので、正しく理解しておきましょう。ネットで検索すると無数の関連する記事が出てきます。
<!-- 省略 -->
<body>
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/maintext.png" alt="目立たない強制治療">
</div>
<div class="col-6">
<h1>Dental beauty</h1>
</div>
</div>
</div>
<!-- 省略 -->
</body>プレビューして確認してみましょう。左側にキャッチコピーの画像が入った状態になっているはずです。
<col-6>のdivをコピーして、同じものを下に入れてあげましょう。
<!-- 省略 -->
<body>
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/maintext.png" alt="目立たない強制治療">
</div>
<div class="col-6">
<img src="images/maintext.png" alt="目立たない強制治療">
</div>
</div>
</div>
<!-- 省略 -->
</body>これで同じ画像が２つ左右に並んだ状態になります。
実際には左側は「rightimg.png」という画像が入るので、書き換えます。alt属性は「女性」としておきます。
<!-- 省略 -->
<body>
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/maintext.png" alt="目立たない強制治療">
</div>
<div class="col-6">
<img src="images/rightimg.png" alt="女性">
</div>
</div>
</div>
<!-- 省略 -->
</body>画像の幅調整
画像が大きすぎて箱(カラム)からはみ出している状態なので、きちんと箱の中に納まるように設定していきます。その設定もBootstrapの記述の中に用意されていますので、そちらを使います。imgタグに「img-fluid」というclassをあてます。これは、画像をカラムの中で100%表示させるという設定が書かれているclassになります。
<!-- 省略 -->
<body>
<div class="container">
<div class="row">
<div class="col-6">
<img src="images/maintext.png" alt="目立たない強制治療" class="img-fluid">
</div>
<div class="col-6">
<img src="images/rightimg.png" alt="女性" class="img-fluid">
</div>
</div>
</div>
<!-- 省略 -->
</body>画像がそれぞれcol-6の中に100％幅で収まるようになりました。実際にはcol-6にpadding（内側の余白）が付いているので、その分の余白がある状態です。
「img-fluid」はあらかじめBootstrapで用意されているクラスですが、自分でcss名を追加し、そのclassに対してスタイルを書くこともできます。試しに、img-fluidをclass名から外して、imgに対してオリジナルのスタイルをあててみましょう。今はcol-6というclassしかありませんが、classの値はいくつでも付けることができるので、１番目のcol-6に「leftimg」という名前を付けてみます。２番目のcol-6には「rightimg」という名前をつけます。classの値を追加するときは、classとclassの間に半角スペースを空けて記述します。
<!-- 省略 -->
<body>
<div class="container">
<div class="row">
<div class="col-6 leftimg">
<img src="images/maintext.png" alt="目立たない強制治療">
</div>
<div class="col-6 rightimg">
<img src="images/rightimg.png" alt="女性">
</div>
</div>
</div>
<!-- 省略 -->
</body>それぞれのクラスにスタイルを記述していきます。cssでクラスにスタイルの指定を書くときはクラス名にドットを付けて書き始めます。わかりやすいよう、背景色を指定して見ましょう。.leftimg{background-color: blue;}と指定してみてください。
左の画像の背景が青くなりました。同じように.rightimgにも背景色を設定してみます。.rightimg{background-color: yelow;}と指定して見ましょう。
/* 省略 */
.leftimg {
background-color: blue;
}
.rightimg {
background-color: yellow;
}
このようにそれぞれ指定した背景色になっていたらOKです。先ほどのimg-fluidを解除しているので、画像が箱からはみ出しています。箱の中にきちんと納まるようにそれぞれのimgに、箱に対して100%幅での表示をさせる記述をします。
/* 省略 */
.leftimg {
background-color: blue;
}
.rightimg {
background-color: yellow;
}
.leftimg img {
width: 100%;
}
.rightimg img {
width: 100%;
}「.leftimg img」とは、「leftimg」の中のimgタグのことを指します。「.rightimg img」も同じです。
それぞれにwidth: 100%;を指定しましょう。
これで箱から画像がはみ出さず、中に収まりました。
画像がはみ出さないことを確認できたので.leftimgと.rightimgの背景色に関する記述を削除しておきましょう。
Bootstrapのrow・colの使い方
先ほど挿入した「maintext.png」と「rightimg.png」はそれぞれ「col-6」の中に入っています。同じようにして、「campainwindow.png」を入れてみましょう。「campainwindow.png」は１行分の幅を分割しないので、「col-12」の中に配置します。「small-window.png」は１行分を３等分するので、それぞれを「col-4」の中に配置します。「col-1」は「row」を12等分したものなので、「col-○」の○の数字は足して１行分の合計が12になるようになっています。
スマホのレイアウト変更方法
スマホで表示させる場合、PCとは画面幅が異なるため、横長の画像が小さく表示されてしまいます。そのため、スマホでは左右に並べていた画像を上下に並べて表示させことが必要となります。ここでいうと「maintext.png」の下に「rightimg.png」を回り込ませるようになります。具体的には画面幅が768px以下になると下のように縦並びになる設定となっています。これは、Bootstrapには画面幅によって画像の並び方を切り替える設定があらかじめ記述されているからです。
「col-6」を「col-md-6」に書き換えてプレビューしてみてください。画面幅を縮めていくと、画面幅が768px以下になったとき、画像が縦並びに切り替わるようになったと思います。このようにクラス名に「-md-」が入ると、画面幅によって切り替わる設定が適用されるようになっています。画面幅の切り替えポイントは768pxだけでなく、992pxや、576pxなどいくつかあります。切り替えたいポイントによってクラス名が「-md-」だったり「-sm-」など指定方法が異なります。例えば、「col-sm-4」であれば、「-sm-」(Small)のブレークポイント（切り替えポイント）が576pxなので、576pxより画面幅が大きい時は４カラム（３列）、576pxより画面幅が小さい時は12カラム（１列）で表示されます。
完成コード
<!doctype html>
<html lang="ja">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" />
<!-- style.cssの読み込み -->
<link rel="stylesheet" href="css/style.css" />
<title>Dental beauty</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-6 leftimg">
<img src="images/maintext.png" alt="目立たない強制治療" />
</div>
<div class="col-6 rightimg">
<img src="images/rightimg.png" alt="女性" />
</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
-->
</body>
</html>@charset "UTF-8";
h1 {
font-size: 60px;
}
.leftimg img {
width: 100%;
}
.rightimg img {
width: 100%;
}