プラグインを使って簡易的なサイトを作成しましょう
下記のカンプを見て、自分の好きなテーマに沿ってサイトを作成して見ましょう。
色や余白などは自分で設定し、アレンジも加えられたらやって見ましょう。
例えば、
- GoogleFontsを使い自分のテーマに合う書体を選んで設定
- タイトルなども仮の文字のままではなく、文章も入れる
object-fitの設定について
bxsliderのスライド写真はフルードイメージ（max-width:100%）で指定されているのでレスポンシブがかかった時にスライドショーの高さも小さくなってしまいます。
ある程度の高さを維持させたい場合は「object-fit」を使って img の親要素にはまず、サイズの指定。
imgに対して親要素を写真で覆う指定（object-fit）というのを設定します。
今回は全ての親要素（main-visual）と直の親要素（li）に対してのサイズ指定が必要です。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>プラグインの練習</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/jquery.bxslider.css">
<link rel="stylesheet" href="css/hamburgers.css">
<link rel="stylesheet" href="css/lightbox.css">
</head>
<body>
<header class="header">
<div class="container">
<h1>マイテーマ</h1>
<p class="hamburger hamburger--spin" id="ham-btn">
<span class="hamburger-box">
<span class="hamburger-inner"></span>
</span>
</p>
</div><!-- /.container -->
</header><!-- /.header -->
<nav id="gnav"></nav><!-- /#gnav -->
<div class="container">
<main class="main">
<h2>bxsliderの実装</h2>
<div class="main-visual">
<ul class="bxslider">
<li><img src="img/slider-01.jpg" alt=""></li>
<li><img src="img/slider-02.jpg" alt=""></li>
<li><img src="img/slider-03.jpg" alt=""></li>
<li><img src="img/slider-04.jpg" alt=""></li>
<li><img src="img/slider-05.jpg" alt=""></li>
</ul><!-- /.bxslider -->
</div><!-- /.main-visual -->
<h2>Lightboxの実装</h2>
<div class="lightbox-wrapper">
<div class="box">
<a href="img/lightbox-01.jpg" data-lightbox="images" data-title="画像１">
<img src="img/lightbox-01.jpg" alt="">
<h3>Photo Title 01</h3>
<p>01写真の説明文</p>
</a>
</div><!-- /.box -->
<div class="box">
<a href="img/lightbox-02.jpg" data-lightbox="images" data-title="画像２">
<img src="img/lightbox-02.jpg" alt="">
<h3>Photo Title 02</h3>
<p>01写真の説明文</p>
</a>
</div><!-- /.box -->
<div class="box">
<a href="img/lightbox-03.jpg" data-lightbox="images" data-title="画像３">
<img src="img/lightbox-03.jpg" alt="">
<h3>Photo Title 03</h3>
<p>03写真の説明文</p>
</a>
</div><!-- /.box -->
<div class="box">
<a href="img/lightbox-04.jpg" data-lightbox="images" data-title="画像４">
<img src="img/lightbox-04.jpg" alt="">
<h3>Photo Title 04</h3>
<p>04写真の説明文</p>
</a>
</div><!-- /.box -->
<div class="box">
<a href="img/lightbox-05.jpg" data-lightbox="images" data-title="画像５">
<img src="img/lightbox-05.jpg" alt="">
<h3>Photo Title 05</h3>
<p>05写真の説明文</p>
</a>
</div><!-- /.box -->
<div class="box">
<a href="img/lightbox-06.jpg" data-lightbox="images" data-title="画像６">
<img src="img/lightbox-06.jpg" alt="">
<h3>Photo Title 06</h3>
<p>06写真の説明文</p>
</a>
</div><!-- /.box -->
</div><!-- /.lightbox-wrapper -->
</main><!-- /.main -->
</div><!-- /.container -->
<footer class="footer">
<p><small>2023 © mytheme</small></p>
</footer><!-- /.footer -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script src="js/lightbox.js"></script>
<script>
$(function(){
//bxslider
$('.bxslider').bxSlider({
mode: 'fade',/* フェイドアウト */
speed: 3000,/* 画像の切り替わるスピード */
pause: 3000,/* 画像の静止する時間 */
/* speedとpauseを同じ大きな値を入れる事でクロスフェードにすることができる */
controls: false,/* 左右の矢印：false（消す） */
auto: true,/* 自動再生 */
pager: false,/* 画像下のページ表示のドット */
});
//ハンバーガーメニュー
$('#ham-btn').on('click',function(){
$(this).toggleClass('is-active');
});
</script>
</body>
</html>@charset "utf-8";
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul,li {
list-style: none;
}
a {
text-decoration: none;
color: inherit;
}
img {
vertical-align: bottom;
max-width: 100%;
}
/* 共通
-------------------------------- */
.container {
max-width: 960px;
margin: 0 auto;
}
h2 {
text-align: center;
margin-bottom: 20px;
}
/* header
---------------------------------- */
.header {
background-color: #fdd405;
padding: 20px 0;
margin-bottom: 50px;
}
.header > .container {
display: flex;
justify-content: space-between;
align-items: center;
}
/* ナビゲーション部分
---------------------------------- */
#gnav {
width: 50%;
height: 100vh;
background-color: rgba(149, 125, 4, 0.8);
position: fixed;
top: 100px;
right: 0;
z-index: 10;
transform: translateX(100%);
transition: .2s;
}
#gnav.show {
transform: translateX(0);
}
/* bxslider部分
---------------------------------- */
.main-visual {
margin-bottom: 100px;
}
/* lightbox部分
---------------------------------- */
.lightbox-wrapper {
display: flex;
flex-wrap: wrap;
gap: 60px 30px;
margin-bottom: 100px;
}
.box {
width: calc((100% - 60px) / 3);
text-align: center;
}
.box img {
margin-bottom: 10px;
}
/* footer
---------------------------------- */
.footer {
background-color: #947c04;
padding: 30px 0;
text-align: center;
color: #fff;
}
/* レスポンシブ設定
---------------------------------- */
/* 960px以下 */
@media (max-width:960px){
.lightbox-wrapper {
padding: 0 20px;
}
.box {
width: calc((100% - 30px) / 2);
}
}
/* 500px以下 */
@media (max-width:500px){
h2 {
font-size: 24px;
}
.box h3 {
font-size: 20px;
}
/* bxsliderの画像の高さを維持したい場合 */
.main-visual {
/* 親の箱のサイズを指定 */
width: 100%;
height: 350px;
}
/* 画像の直の親にもサイズを指定 */
.main-visual li {
width: 100%;
height: 350px;
}
/* object-fit: cover;箱のサイズを写真で覆う設定をする */
/* width・height共に100%画像で覆うと指定する */
.main-visual img {
object-fit: cover;
width: 100%;
height: 100%;
}
.box {
width: 100%;
}
}
