WEBサイト制作の勉強

WEBサイト制作の勉強の為の解説ブログです。

フェリカテクニカルアカデミー

3月29日の作業データ（シングルページの）カフェサイト

2022年2月クラス

制作のポイント

・ヒーローヘッダーの導入（画像のサイズの決定）
・Ajaxを使用した箇所とメリットを丁寧に説明
・APIを使うメリットと注意点
・レスポンシブに対応（モバイルフレンドリーテストにかけ、確認）
・img要素にobject-fitを使い、自由にトリミングする
・ファビコンとタッチアイコンを実装
・画像を圧縮しデータ量の軽減を図る
・CSS変数（カスタムプロパティ）を使用したカラーマネジメント
・SNSアイコン素材にsvgデータを使用（インスタ、LINE、Twitter）


index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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">
</head>
<body>
<header>
<h1>Cafe de FELICA</h1>
</header>
<nav id="g-nav">
<ul>
<li><a href="#">TOP<span>トップ</span></a></li>
<li><a href="#">NEWS<span>お知らせ</span></a></li>
<li><a href="#">MOVIE<span>動画</span></a></li>
<li><a href="#">MENU<span>メニュー</span></a></li>
<li><a href="#">SHOP<span>店舗情報</span></a></li>
</ul>
</nav>
<div class="main-visual">
<ul class="bxslider">
<li><img src="img/slide-01.jpg" alt=""></li>
<li><img src="img/slide-02.jpg" alt=""></li>
<li><img src="img/slide-03.jpg" alt=""></li>
</ul>
</div>

<div class="main-copy">
<h2>Cafe de Felicaは食とアートと音楽が交差する空間を創造します。</h2>
<p>シェフ・矢島が提供するのは、スペイン料理に「東京」のエッセンスを取り入れたモダンスパニッシュ。<br>
店内は、新進気鋭のアーティストとコラボレーションしたアートギャラリー。<br>
心地よいチルアウトミュージックが流れる空間でくつろぎのひとときをお過ごしください。</p>
</div>

<main>
<div id="news" class="content">
<h2>NEWS</h2>
<dl id="news-list">
</dl>
</div><!-- /#news -->

<div id="movie" class="content">
<h2>MOVIE</h2>
<div class="movie-inner">
<video src="img/movie.mp4" autoplay muted loop></video>
</div>
</div><!-- /#movie -->

<div id="menu" class="content">
<h2>MENU</h2>
</div><!-- /#menu -->

<div id="shop" class="content">
<h2>SHOP</h2>
</div><!-- /#shop -->

</main>
<footer>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="js/jquery.bxslider.js"></script>
<script>
$(function(){
$('.bxslider').bxSlider({
pager: false,
});


//外部ファイルを呼び出す
$('#news-list').load('news.txt');

});
</script>
</body>
</html>

style.css

@charset "utf-8";

:root{
--main_color:#ac052f;
}

ここにリセット部分

/* PCレイアウト */
/* header部分 */
header{
display: none;/* 要素を非表示 */
}
/* ナビゲーション部分 */
#g-nav{
display: none;
}
/* main-visual部分 */
.main-visual{
width: 100%;
height: 75vh;
margin-bottom: 50px;
}
.main-visual li{
width: 100%;
height: 75vh;
}
.main-visual img{
object-fit: cover;
object-position: center center;
width: 100%;
height: 100%;
}
/* main-copy部分 */
.main-copy{
text-align: center;
margin-bottom: 100px;
}
.main-copy>h2{
margin-bottom: 40px;
}
.main-copy>p{
line-height: 2;
}

/* メインコンテンツ部分 */
.content>h2{
text-align: center;
padding: 50px 0;
color: var(--main_color);
}

/* お知らせ部分 */
#news-list{
display: flex;
flex-wrap: wrap;
max-width: 800px;
margin: 0 auto 100px;
}
#news-list>dt{
width: 30%;
margin-bottom: 20px;
border-bottom: 2px solid var(--main_color);
}
#news-list>dd{
width: 70%;
margin-bottom: 20px;
border-bottom: 2px solid var(--main_color);
padding-bottom: 10px;
}
#news-list>dt:nth-of-type(n+5),#news-list>dd:nth-of-type(n+5){
display: none;
}


/* movie部分 */
.movie-inner{
width: 80%;
height: 60vh;
margin: 0 auto 100px;
}
.movie-inner>video{
object-fit: cover;
width: 100%;
height: 100%;
}