下記スクリーンショットの範囲を作成していきます。
Web起業で～部分
ファーストビュー下、Web起業の説明箇所をサクッと作りましょう。
シンプルなコーディングですが、文章部分の幅をcol-10クラスで指定する場合は注意が必要。
rowクラスを挟まずに.containerの中でcol-*クラスを使うと、paddingの分だけデザイン図のグリットとサイズが変わってしまいます。
.containerにつけている左右paddingをなくす必要がありますね。
そのために「px-0」クラスを新しく作成しました。
h2の大きさを設定したら完成です。
問題提起セクション
1.大枠の作成
まずはざっくりと、下記部分のレイアウトを作りましょう。
lp.html
<!-- ============================
/ problem & solution
/============================= -->
<section class="container">
<h3 class="text-center">起業を考えた時、こんな課題はありませんか？</h3>
<div class="row">
<div class="col-4"></div>
<div class="col-4"></div>
<div class="col-4"></div>
</div>
</section>
問題は、イメージ画像の部分です。
今回は、大きくは下図３パーツに分けて作っていきます。
2.背景画像を表示した全体枠
まず、背景に画像を入れた、全体の枠となる部分を作ります。
col-4クラスの中に、新しくdivを加えましょう。
<div class="col-4">
<div class="problem1 mx-auto ">
</div>
</div>
新しく作成したクラスはproblem1。
problem1~problem3とクラスを分けることで、お悩みごとにそれぞれ背景画像を設定していきます。
とは言え、divの大きさ等は共通。
同じ部分はセレクタの複数指定で、まとめて書いたほうが楽です。
style.css
/* ---------------------- */
/* problem & solution
/* ---------------------- */
.problem1,
.problem2,
.problem3{
width: 300px;
max-width: 100%;
height: 200px;
background-size: cover;
margin-bottom: 2rem;
border-radius: 8px;
}
.problem1{
background-image: url('images/problem1@2x-8.png');
}
3.半透明の黒背景 + テキスト
①で作成した枠の中に「オウンドメディア設立(独自のWebメディア）」の文字を入れましょう。
下部に配置するために、problem1クラスのdivにもflex関連のクラスを追加します。
flexアイテム下寄せのクラスは作っていなかったので、cssも書いておきます。
lp.html
<div class="col-4">
<div class="problem1 mx-auto d-flex align-items-end">
<div class="d-flex flex-column justify-content-center">
<p class="my-0 text-center text-white">
オウンドメディア設立<br>
<span class="fsize-12">(独自のWebメディア）</span>
</p>
</div>
</div>
</div>
style.css
/* それぞれ似たクラスの並びに追加してください */
.align-items-end{
align-items: flex-end;
}
.my-0{
margin-top: 0;
margin-bottom: 0;
}
.fsize-12{
font-size: 12px;
}
pタグを囲っているdivに「problem-text」クラスを追加。
.problem-textをセレクタにして、CSSで背景色やサイズを指定します。
4.吹き出しを作る
吹き出しは position: absolute; を使って、<div class="problem1 ...">から少し上にはみ出した場所に配置します。
positionプロパティの指定も共通クラス化しておきましょう。
htmlからも基準がどこかが分かりやすいですしね。
<div class="problem1 ...">に「position-relative」クラスを追加。
そのすぐ下にh4タグを挿入し、「position-absolute」クラスを追加します。
hタグに設定されているmargin等は要らないので、既存のクラスも加えて扱いやすい状態にしておきましょう。
lp.html
<div class="col-4">
<div class="problem1 position-relative mx-auto d-flex align-items-end">
<h4 class="position-absolute my-0 text-white text-center">
マネタイズに不安が
</h4>
<div class="problem-text d-flex flex-column justify-content-center">
<p class="my-0 text-center text-white">
オウンドメディア設立<br>
<span class="fsize-12">(独自のWebメディア）</span>
</p>
</div>
</div>
</div>
style.css
.position-relative{
position: relative;
}
.position-absolute{
position: absolute;
}
この状態では、まだ位置指定をしていないので文字が重なって表示されます。
スタイル指定がしやすいよう、h4タグに「problem-baloon」クラスを加えます。
<h4 class="problem-baloon position-absolute my-0 text-white text-center">
マネタイズに不安が
</h4>
CSSで位置や、吹き出しに見えるように背景色・サイズ等を指定していきましょう。
吹き出しの角は擬似クラスの::afterを使って作成します。
style.css
.problem-baloon{
display: flex;
align-items: center;
justify-content: center;
top: -50px;
right: 5px;
width: 180px;
height: 40px;
background-color:#FF0069 ;
border-radius: 10px;
}
.problem-baloon::after{
content: "";
position: absolute;
top: 40px;
right: 40px;
border-top: 18px solid #FF0069;
border-right: 22px solid transparent;
}
↓
吹き出しが出来ました。
.problem1のdivを閉じた直後に、pタグで説明文を入れておきます。
lp.html
<div class="col-4">
<div class="problem1 position-relative mx-auto d-flex align-items-end">
<h4 class="problem-baloon position-absolute my-0 text-white text-center">
マネタイズに不安が
</h4>
<div class="problem-text d-flex flex-column justify-content-center">
<p class="my-0 text-center text-white">
オウンドメディア設立<br>
<span class="fsize-12">(独自のWebメディア）</span>
</p>
</div>
</div>
<p>
得意分野に特化したメディアサイトを作りたいが、アドセンスを載せるだけのサイトはちょっと…。ビジネスとして発展させていくために、どうすれば良いか知りたい。
</p>
</div>
●疑似要素（before, after）とは
上記CSSでセレクタにしている .problem-baloon::after 。
この「::after」は擬似要素と呼ばれる、CSSで作られた疑似的な要素の一つ。
HTMLには書かれていなくとも、もう一つ要素があるかのように扱うことが出来ます。
::beforeと::afterの場合は、空の<div></div>が挿入されるようなイメージです。
- before⇒要素の直前にコンテンツを追加
- after⇒要素の直後にコンテンツを追加
::beforeもしくは::afterを使って疑似要素を作る場合は、contentプロパティ（content: " ";）の記述が必須となっています。中身が空っぽの要素が欲しい場合は、今回のようにクオート間に何も書かずに記述します。
特定の文字やアイコンなどを表示させたい場合は、contentのクオート間に表示させたいものを記述します。
今回の実習でもページ下部、お問い合わせの部分では::beforeを使ってアイコンを表示させますよ。
● borderを使ったCSS三角形
CSSのborderは上下左右の４方向の指定が可能です。
borderプロパティで書かず、下記のようにも書けます。
<div class="test"></div>
<style>
.test{
width: 100px;
border-top: 50px solid red;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
border-left: 50px solid green;
}
</style>
↓ 結果
top,right,bottom,leftそれぞれ、角の部分が斜めで三角形になりますね。
この中から不要な部分を透明にすると、画面上には三角形が表示されます。
<div class="test2"></div>
<style>
.test2{
width: 100px;
border-top: 50px solid red;
border-right: 50px solid yellow;
border-bottom: 50px solid blue;
border-left: 50px solid green;
}
</style>
↓ 結果
画面上でプレビューを見ながら、CSSを作ってくれるジェネレーターもあります。
便利なので、活用させていただきましょう。
http://apps.eky.hk/css-triangle-generator/ja
5.残り2つの“お悩み”を作成
完成したdiv.col-4部分を複製して、3つのブロックを作ります。
下記３箇所を変更してください。
- 各テキストを差し替える
- problem1クラスをproblem2とproblem3にする
- cssで.problem2と.problem3の背景画像を設定
lp.html
style.css
6.文字サイズ・余白を調整する
このままでは間隔が詰まって、重なってしまっている部分があります。
余白を加えて見やすくしましょう。
今回はそこまでデザインにピッタリ合わせなくても良いので、共通クラスにしちゃいます。
間隔を作るためのクラス(.mt-5rem)を作って、margin-topを指定。
また、h3の「起業を考えた時～」という文字も小さいので、大きくします。
7.背景を設定する
最後に背景を設定しましょう。
- “お悩み”部分を囲っている角丸の白い長方形
- 下に少しだけ被っている黄色の背景色（全幅）
まず、角丸の長方形。
ここは２つのクラスを組み合わせて表現することにします。
- 背景色を白にするクラス（bg-white）
- 角丸にするクラス（round-border）
次に、下部だけに付いている黄色の背景色。
今の作りだとsection全体がコンテナ幅（.container）になっているため、背景色もその部分にしか付きません。
sectionタグ直下に、divタグを入れて2重に囲む形に変更します。
sectionタグに指定していたクラス「container mt-5rem bg-white round-border」は、新しく作ったdivタグの方に移動させます。
sectionタグには「problem」と「position-relative」クラスを追加してください。
エディターの折りたたみ表示を使うと、作業しやすいです。
吹き出しでも使った疑似要素（ ::after ）を使って、黄色い背景を作ります。
style.css
.problem::after {
position: absolute;
content: "";
z-index: -1; /*背面に配置する*/
bottom: 0;
width: 100%;
height: 6rem;
background-color: #FFE20D;
}
角丸が見にくいですが、出来ました。
余白は次の結果セクション「SkillHub アントレなら～」以下を作る時に、一緒に設定しましょう。
黄色背景の入れ方に関して
今回は疑似要素を使って設定した黄色の背景部分。
「ネガティブマージンで下のセクションを引き上げれば良くない？」「background: linear-gradient()を使ったほうが楽じゃない？」と思われた方もいらっしゃると思います。
どの方法が間違い、正解ということはありません。
表示領域のサイズが変わった時に崩れたりしなければ、どの方法を使って表現しても良いのです。ご自身のコーディングでは作りやすい方法を使ってください。