講義内で作成。LPの練習として作成しました。
１カラムで作成する難しさと、デザインカンプからhtmlに移行する難しさを痛感しながら取り組んでいました。
CTAを意識した作りでレイアウトして頂いたものを、ランディングページの基本を学びながら、cssの記入をどうするか、どこに何を使うべきか、など意識して構築しました。
作成日：2024年11月29日
作成時間：2時間30分
各ボタンをクリックすると、表示されているページ横（スマートフォンでは下）にソース、またはcssがテキスト形式で表示されるようにしています。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>LP練習</title> <link rel="stylesheet" href="style5.css"> </head> <body> <header> <h1></h1> </header> <main> <section id="main-img"> <h2>はじめての保険は<br> <span>ほけんの相談屋さん</span>へ<br> 相談してみませんか？</h2> <a href="#">お近くの<span>相談屋さん</span>を探す</a> </section> <section id="point"> <h3>相談屋さん3つのポイント</h3> <ul> <li> <img src="img/point1.jpg" alt=""> <p>年間10万件の<span>実績</span></p> </li> <li> <img src="img/point2.jpg" alt=""> <p>何度でも<span>相談無料</span></p> </li> <li> <img src="img/point3.jpg" alt=""> <p>しつこい<span>勧誘なし</span></p> </li> </ul> </section> <article id="q-a"> <h3>よくあるご質問</h3> <section> <h4><span>Q.1</span> 相談にはお金がかかる？</h4> <div id="q-a1"> <div> <p class="q-a-text"><span>何度でも相談無料！</span><br> 費用は一切かかりません。</p> <p class="q-a-text2">この文章はダミーです、文字の大きさ、量、字間、行間等を確認するために入れています。</p> </div> <img src="img/write.jpg" alt=""> </div> </section> <section> <h4><span>Q.2</span> 申込や細かい手続きが面倒…</h4> <p class="q-a-text">相談から申込、<span>加入後のサポート</span>も行います。</p> <p class="q-a-text2">この文章はダミーです、文字の大きさ、量、字間、行間等を確認するために入れています。</p> </section> <section> <h4><span>Q.3</span> しつこく勧誘されそう…</h4> <p class="q-a-text">相談後の<span>しつこい勧誘はありません。</span></p> <p class="q-a-text2">この文章はダミーです、文字の大きさ、量、字間、行間等を確認するために入れています。</p> </section> <a href="#">お近くの<span>相談屋さん</span>を探す</a> </article> <section id="phone"> <h3>待ち時間なし！オンラインからご予約受付中</h3> <ul> <li> <img src="img/phone.jpg" alt=""> <p>スマホで簡単予約</p> </li> <li> <img src="img/talk.jpg" alt=""> <p>待ち時間なしで相談</p> </li> </ul> </section> <section id="man"> <h3>はじめての保険には<br> プロの無料アドバイスを！</h3> <img src="img/man.jpg" alt=""> <a href="#">お近くの<span>相談屋さん</span>を探す</a> </section> </main> <footer> <p>© ほけんの相談屋さん</p> </footer> </body> </html>
@charset "utf-8";
/*
ブレイクポイント
600px
1000px
濃いオレンジ：#f15a24
薄いオレンジ：#FFDFD1
グレー：#B3B3B3
文字のドロップシャドウ
text-shadow:水平方向の距離 垂直方向の距離 影のぼかし半径 影の色;
要素の不透明度
opacity:0 - 1までの数字;
色指定に不透明度
rgba(255, 255, 255, 0.5)
*/
*{
box-sizing:border-box;
margin:0;
padding:0;
}
html{
font-size:15px;
}
body{
font-family:sans-serif;
}
ul{
list-style:none;
}
a{
text-decoration:none;
color:#000;
}
header {
height: 50px;
border-bottom: 5px solid #f15a24;
}
#main-img {
max-width: 1200px;
width: 100%;
height: 630px;
margin: 0 auto;
background-image: url(img/main.jpg);
background-position: center;
display: flex;
flex-direction: column;
justify-content: center;
}
#main-img h2 {
font-size: 2rem;
}
#main-img h2 span {
font-size: 2.5rem;
color: #f15a24;
}
#main-img a {
margin: 50px 0;
display: block;
width: 260px;
font-weight: bold;
border: 5px solid #f15a24;
text-align: center;
font-size: 1.1rem;
border-radius: 10px;
}
#main-img a span,#q-a span,#man span {
color: #f15a24;
}
#main-img a::after {
content:" >";
color:#f15a24;
}
#point h3 {
display: flex;
width: 700px;
height: 70px;
background-color: #f15a24;
color: #fff;
font-size: 1.8rem;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 10px;
position:relative;
top:-35px;
}
#point ul {
display: flex;
justify-content: center;
margin: 130px auto;
max-width: 960px;
width: 100%;
text-align: center;
}
#point p {
font-size: 1.2rem;
font-weight: bold;
}
#point span {
display: block;
font-size: 1.8rem;
color: #f15a24;
}
#point img {
width: 100%;
}
#q-a {
background-color: #B3B3B3;
margin: 0 auto;
padding: 0 0 50px 0;
}
#q-a h3 {
display: flex;
width: 400px;
height: 70px;
background-color: #f15a24;
color: #fff;
font-size: 1.8rem;
justify-content: center;
align-items: center;
margin: 0 auto;
border-radius: 10px;
position:relative;
top:-35px;
}
#q-a section {
background-color: #fff;
margin: 50px auto;
max-width: 960px;
width: 100%;
padding: 50px;
}
#q-a h4 {
font-size: 1.5rem;
border-bottom: 5px solid #B3B3B3;
padding: 0 0 5px 0;
margin: 0 0 30px 0;
}
#q-a1 {
display: flex;
justify-content: space-between;
}
#q-a img {
margin: 0 0 0 15px;
object-fit: cover;
max-width: 380px;
height: 180px;
width: 100%;
}
.q-a-text {
font-weight: bold;
font-size: 1.6rem;
margin: 0 0 30px 0;
}
.q-a-text2 {
font-size: 1.2rem;
}
#q-a a,#man a {
display: flex;
width: 400px;
height: 70px;
background-color: #fff;
font-size: 1.7rem;
font-weight: bold;
justify-content: center;
align-items: center;
margin: 0 auto;
border: 5px solid #f15a24;
border-radius: 10px;
}
#q-a a::after {
content:" >";
color:#f15a24;
}
#phone {
text-align: center;
margin: 0 0 30px 0;
}
#phone h3 {
font-size: 1.8rem;
color: #f15a24;
margin: 30px 0;
}
#phone ul {
display: flex;
justify-content: space-evenly;
max-width: 960px;
margin: 0 auto;
}
#phone p {
font-size: 1.5rem;
font-weight: bold;
}
#phone img {
margin: 0 0 20px 0;
width: 85%;
}
#man {
padding: 50px 0;
margin: 0 auto;
background-color: #FFDFD1;
text-align: center;
}
#man h3 {
font-size: 3rem;
}
#man img {
margin: 20px 0;
}
footer {
padding: 200px 0 0 0;
text-align: center;
border-top: 5px solid #f15a24;
}
footer p {
color: #fff;
background-color: #333;
padding: 10px 0;
}
@media (max-width: 1000px) {
#point h3 {
max-width: 700px;
width: 100%;
}
#q-a1 {
flex-direction: column-reverse;
}
#phone img {
width: 80%;
}
}
@media (max-width: 600px) {
#main-img {
padding: 0 0 0 10px;
}
#main-img h2 {
font-size: 1.5rem;
}
#main-img h2 span {
font-size: 2rem;
}
#point h3 {
max-width: 500px;
width: 100%;
font-size: 1.5rem;
}
#point ul {
flex-direction: column;
margin: 50px 0;
}
#point ul li {
margin: 30px 0;
}
#point img {
width: 70%;
}
#q-a {
text-align: center;
padding: 30px;
}
#q-a h3 {
max-width: 500px;
width: 100%;
}
#q-a img {
margin: 0 auto 30px;
}
#q-a1 {
flex-direction: column-reverse;
}
#q-a section {
padding: 30px 10px;
}
#phone h3 {
font-size: 1.3rem;
margin: 50px 0 0 0 ;
}
#phone ul {
flex-direction: column;
}
#phone ul li {
margin: 30px 0;
}
#phone img {
width: 70%;
}
#man h3 {
font-size: 2.3rem;
}
#man img {
width: 70%;
}
#q-a a,#man a {
font-size: 1.2rem;
max-width: 300px;
width: 100%;
}
}