------------------------------------------------------------------------------------------------
ここからスタイルの記述です。
※レスポンシブ対応になっております。
------------------------------------------------------------------------------------------------
<style>
/*----------全体スタイル----------*/
#father-day-2022{
font-size:14px;
max-width: 900px;
}
#father-day-2022 h2{
font-size:24px;
text-align: center;
}
#father-day-2022 h3{
font-size:24px;
margin-bottom: 50px;
text-align: center;
}
#father-day-2022 ul{
list-style:none;
padding:0;
margin: 5px;
display: flex;
flex-wrap:wrap;
justify-content: center;
text-align: center;
}
#father-day-2022 p{
text-align: center;
}
#father-day-2022 a{
text-decoration: none;
text-align: center;
color: #333333;
}
#father-day-2022 a:hover{
cursor: pointer;
opacity: 0.5;
}
/*----------見出し----------*/
.fv{
width: 100%;
}
.fv img{
width: 100%;
height: auto;
}
#section-intro{
padding-top: 50px;
padding-bottom: 50px;
}
/*----------人気ランキング----------*/
#section-ranking{
background-color: #F8F8F8;
padding-top: 50px;
padding-bottom: 50px;
}
#section-ranking h3{
color: #1B435D;
}
#section-ranking ul li{
margin: 5px;
position: relative;
}
#section-ranking ul li:nth-child(1)::before{
content: "1";
color: #FFDD00;
font-size:50px;
font-weight: 900;
position: absolute;
bottom:-30px;
right:5px;
text-shadow: 3px 3px 0 #D2D2D2;
}
#section-ranking ul li:nth-child(2)::before{
content: "2";
color: #FFFFFF;
font-size:50px;
font-weight: 900;
position: absolute;
bottom:-30px;
right:5px;
text-shadow: 3px 3px 0 #D2D2D2;
}
#section-ranking ul li:nth-child(3)::before{
content: "3";
color: #FFA43B;
font-size:50px;
font-weight: 900;
position: absolute;
bottom:-30px;
right:5px;
text-shadow: 3px 3px 0 #D2D2D2;
}
#section-ranking ul li:nth-child(4)::before{
content: "4";
color: #545454;
font-size:50px;
font-weight: 900;
position: absolute;
bottom:-30px;
right:5px;
text-shadow: 3px 3px 0 #D2D2D2;
}
#section-ranking ul li:nth-child(5)::before{
content: "5";
color: #545454;
font-size:50px;
font-weight: 900;
position: absolute;
bottom:-30px;
right:5px;
text-shadow: 3px 3px 0 #D2D2D2;
}
#section-ranking ul li img{
width: 130px;
}
/*----------予算から選んでプレゼント 上----------*/
#section-budget{
padding-top: 100px;
padding-bottom: 100px;
}
.budget-up ul{
margin-bottom: 80px;
}
.budget-up ul li{
background: #FFA43B;
border-radius: 10px;
width: 200px;
font-weight: bold;
margin: 10px;
}
#section-budget .budget-up ul li a{
color:#FFFFFF;
padding: 15px 0;
display:block;
}
.budget-up ul li:nth-child(2){
background-color: #6DC2E8;
}
.budget-up ul li:nth-child(3){
background-color: #1B435D;
}
/*----------予算から選んでプレゼント 下----------*/
#section-budget__price{
display: block;
}
.budget-under__category li{
box-shadow: 0 0 5px 1px #C8C8C8;
position: relative;
margin: 10px;
width: 240px;
}
.budget-under__category a{
display: block;
margin: 20px;
}
.budget-under__category__title{
font-weight: bold;
font-size:16px;
margin-bottom: 5px;
}
.budget-under__category__title::before{
content: "【";
}
.budget-under__category__title::after{
content: "】";
}
.budget-under__category__text img{
width: 100%;
height: auto;
}
#father-day-2022 .budget-under__category__text p{
margin-top: 5px;
margin-bottom: 0;
text-align: left;
}
/*----------3000未満----------*/
#father-day-2022 .budget-under__title-orange{
text-align: left;
font-weight: bold;
border-bottom: dashed 2px #FFA43B ;
color: #FFA43B;
font-size:24px;
margin-top: 50px;
margin-bottom: 50px;
padding-left: 10px;
}
.budget-under__category-orange a::before{
content: "";
position: absolute;
border-left: 25px solid transparent;
border-bottom: 25px solid #FFE4C5;
height: 0;
width: 0;
bottom:3%;
right:3%;
}
/*----------3000以上5000未満----------*/
#father-day-2022 .budget-under__title-lightblue{
text-align: left;
font-weight: bold;
border-bottom: dashed 2px #6DC2E8 ;
color: #6DC2E8;
font-size:24px;
margin-top: 50px;
margin-bottom: 50px;
padding-left: 10px;
}
.budget-under__category-lightblue a::before{
content: "";
position: absolute;
border-left: 25px solid transparent;
border-bottom: 25px solid #DCF4F5;
height: 0;
width: 0;
bottom:3%;
right:3%;
}
/*----------5000以上----------*/
#father-day-2022 .budget-under__title-navyblue{
text-align: left;
font-weight: bold;
border-bottom: dashed 2px #1B435D ;
color: #1B435D;
font-size:24px;
margin-top: 50px;
margin-bottom: 50px;
padding-left: 10px;
}
.budget-under__category-navyblue a::before{
content: "";
position: absolute;
border-left: 25px solid transparent;
border-bottom: 25px solid #4283AE;
height: 0;
width: 0;
bottom:3%;
right:3%;
}
/*----------プレゼントの選び方のヒント----------*/
#section-hint p{
margin-bottom: 80px;
}
.hint-content div{
margin: 0 5px 10px;
background-color: #1B435D;
padding: 20px 10px 10px;
border-radius:20px;
}
.hint-content dt{
color: #FFFFFF;
font-size: 20px;
font-weight: bold;
text-align: left;
padding-left: 10px;
padding-bottom:10px;
}
.hint-content dd{
background-color: #FFFFFF;
padding: 10px;
line-height: 25px;
text-align: left;
border-bottom-left-radius: 15px;
border-bottom-right-radius: 15px;
margin-left: 0;
}
@media screen and (max-width: 768px){
/*----------人気ランキング----------*/
#section-ranking .scroll-x{
overflow-x: scroll;
padding-bottom: 20px;
}
#section-ranking ul{
flex-wrap: nowrap;
justify-content: left;
}
/*----------予算から選んでプレゼント 下----------*/
.budget-under__category li{
width: 100%;
max-width: 550px;
}
.budget-under__category div{
display: flex;
align-items: center;
}
.budget-under__category__text img{
width: 150px;
}
.budget-under__category div p{
margin-left: 20px;
}
.budget-under__title-orange,.budget-under__title-lightblue,.budget-under__title-navyblue{
width: 100%;
max-width: 550px;
margin-left: auto;
margin-right: auto;
padding-left: 0;
}
.budget-under__category-orange a::before,.budget-under__category-lightblue a::before,.budget-under__category-navyblue a::before{
bottom:8%;
}
.budget-under__category__title{
background: #EDEDED;
padding-top:5px;
padding-bottom: 5px;
margin-top: -8px;
}
}
@media screen and (max-width: 480px){
/*----------予算から選んでプレゼント 上----------*/
.budget-up ul li{
width: 100%;
}
/*----------予算から選んでプレゼント 下----------*/
.budget-under__category li{
margin: 10px 0;
}
}
</style>
------------------------------------------------------------------------------------------------
ここまでがスタイルの記述です。
------------------------------------------------------------------------------------------------
------------------------------------------------------------------------------------------------
ここからHTMLの記述です。
------------------------------------------------------------------------------------------------
<section id="father-day-2022">
<div class="fv">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/bnr-fathers-day.jpg" alt="父の日特集バナー">
</div>
<section id="section-intro">
<h2>2022年 父の日 プレゼントギフト</h2>
<p>
いつも頑張ってくれているお父さんに。<br>
ゆっくりとくつろげるお父さんだけのアイテムを揃えました。<br>
なつかしい「い草」の香りを一緒にくつろぎのひと時を贈りませんか？
</p>
</section>
<section id="section-ranking">
<h3>人気ランキング TOP5</h3>
<div class="scroll-x">
<ul>
<li>
<a href="#">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-02.jpg" alt="ほね枕の画像">
</a>
</li>
<li>
<a href="#">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-04.jpg" alt="草履の画像">
</a>
</li>
<li>
<a href="#">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-06.jpg" alt="寄りかかりクッションの画像">
</a>
</li>
<li>
<a href="#">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-07.jpg" alt="ごろりんクッションの画像">
</a>
</li>
<li>
<a href="#">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-08.jpg" alt="い草マットの画像">
</a>
</li>
</ul>
</div>
</section>
<section id="section-budget">
<section class="budget-up">
<h3>予算から選んでプレゼント</h3>
<ul>
<li>
<a href="#price__Less-than-3000">~¥3,000</a>
</li>
<li>
<a href="#price__From-3000-to-less-than-5000">¥3,000~¥5,000</a>
</li>
<li>
<a href="#price__Over-5000">¥5,000~</a>
</li>
</ul>
</section>
<section class="budget-under">
<ul id="section-budget__price">
<li id="price__Less-than-3000">
<p class="budget-under__title-orange">~¥3,000まで</p>
<ul class="budget-under__category budget-under__category-orange">
<li>
<a href="#">
<p class="budget-under__category__title">スマホスタンド</p>
<div class="budget-under__category__text">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-01.jpg" alt="スマホスタンドの画像">
<p>長時間の動画視聴もこれがあれば疲れしらず。珍しいい草のスマホグッズ。</p>
</div>
</a>
</li>
<li>
<a href="#">
<p class="budget-under__category__title">ほね枕</p>
<div class="budget-under__category__text">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-02.jpg" alt="ほね枕の画像">
<p>しっかりした中材で支えるミニ枕。お昼寝にピッタリ。</p>
</div>
</a>
</li>
<li>
<a href="#">
<p class="budget-under__category__title">枕パッド</p>
<div class="budget-under__category__text">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-03.jpg" alt="枕パッドの画像">
<p>ひんやり触感で、心地よく眠りにつくことができます。</p>
</div>
</a>
</li>
</ul>
</li>
<li id="price__From-3000-to-less-than-5000">
<p class="budget-under__title-lightblue">¥3,000~¥5,000</p>
<ul class="budget-under__category budget-under__category-lightblue">
<li>
<a href="#">
<p class="budget-under__category__title">草履</p>
<div class="budget-under__category__text">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-04.jpg" alt="草履の画像">
<p>夏のデニムや甚平にも。ざっくり編んだソールが気持ちいい草履です。</p>
</div>
</a>
</li>
<li>
<a href="#">
<p class="budget-under__category__title">除湿シート</p>
<div class="budget-under__category__text">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-05.jpg" alt="除湿シートの画像">
<p>気になる寝汗もこれでお手入れのタイミングが分かりやすい</p>
</div>
</a>
</li>
<li>
<a href="#">
<p class="budget-under__category__title">寄りかかりクッション</p>
<div class="budget-under__category__text">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-06.jpg" alt="寄りかかりクッションの画像">
<p>朝までひんやりが長続き。なめらかな竹シーツです。</p>
</div>
</a>
</li>
</ul>
</li>
<li id="price__Over-5000">
<p class="budget-under__title-navyblue">¥5,000以上</p>
<ul class="budget-under__category budget-under__category-navyblue">
<li>
<a href="#">
<p class="budget-under__category__title">ごろりんクッション</p>
<div class="budget-under__category__text">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-07.jpg" alt="ごろりんクッションの画像">
<p>スマホや読書の時に寄りかかって便利なクッション。</p>
</div>
</a>
</li>
<li>
<a href="#">
<p class="budget-under__category__title">い草マット</p>
<div class="budget-under__category__text">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-08.jpg" alt="い草マットの画像">
<p>国産い草を使用した、なめらかでやわらかい肌触り。</p>
</div>
</a>
</li>
<li>
<a href="#">
<p class="budget-under__category__title">置き畳</p>
<div class="budget-under__category__text">
<img src="https://gigaplus.makeshop.jp/ik1886/img/tokusyu/father-day/2022-father-day-09.jpg" alt="置き畳の画像">
<p>やっぱり畳が気持ちいい！簡単にフローリングに畳スペースを作れます。</p>
</div>
</a>
</li>
</ul>
</li>
</ul>
</section>
</section>
<section id="section-hint">
<h3>プレゼントの選び方のヒント</h3>
<p>意外と迷いやすい、父の日のプレゼント。<br>
一体どんなプレゼントだったらお父さんに喜んでもらえるのか？<br>
プレゼント選びに迷った時のヒントをご紹介いたします。<br>
ふだん、面と向かっては照れくさいお父さんへの感謝の気持ちを<br>
プレゼントにのせて贈りましょう。<br>
</p>
<dl class="hint-content">
<div>
<dt>父の日の由来</dt>
<dd>父の日の由来は、1909年アメリカが由来と言われています。ワシントン州に住んでいた ソノラ・スマート・ドッド婦人が、「母の日」ができたことを知り父親に感謝する「父の日」もあるべきだと提唱し、6月に礼拝したことがきっかけといわれています。母を早くに亡くし、男手ひとつで育てられたドット婦人。感謝を伝えたい気持ちも人一倍だったのかもしれません。</dd>
</div>
<div>
<dt>趣味や年代に合わせて</dt>
<dd>仕事で使えるものや、お父さんの趣味に合わせたものを贈ると、家族の絆を感じてもらえるのではないでしょうか。個性に合わせて、自分の時間で使ってもらえる、そんな”ちょっと嬉くなるアイテム”を選びましょう。</dd>
</div>
<div>
<dt>健康を願う気持ちが伝わるもの</dt>
<dd>仕事で汗を流したり、夜遅くまで頑張ったり。ふだん頑張っているからこそ帰りが遅くなって、家族との会話が減ってしまうことも。頑張り屋のお父さんには、体をいたわる商品を。お家でゆっくりリラックスしたり、体を休めるアイテムを贈って感謝の気持ちを伝えましょう。</dd>
</div>
<div>
<dt>メッセージを添えよう</dt>
<dd>なんとなく面と向かって感謝を伝えるのは恥ずかしい・・・。そんな時には、ぜひプレゼントにメッセージを添えて。口に出しては照れくさいことも、文字にすると伝わりやすく、長く大切にしてくれるものです。</dd>
</div>
</dl>
</section>
</section>
------------------------------------------------------------------------------------------------
ここまでがHTMLの記述です。
------------------------------------------------------------------------------------------------