WEBサイト制作の勉強

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

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

Visual Studio Codeの設定

2023年1月クラス
IDE（統合開発環境）とは

IDE (Integrated Development Environment)とは、従来、コンパイラ、テキストエディタ、デバッガなどがばらばらで利用していたものをひとつの対話型操作環境から利用できるようにしたものです。

以下からVS Codeをダウンロードします
code.visualstudio.com

中でもMicrosoftが開発したVisual Studio Code（VS Code）はオープンソースで主要なプログラミング言語がほぼすべてサポートされています。JavaScript、TypeScript、CSS、HTML などの一般的な Web ベース言語が標準で搭載されており、豊富な拡張機能を利用すれば、さらに多くの事が出来るようになる、非常に高機能なIDEです。




まずはとりあえず必要なプラグインをダウンロードしましょう。

VS Codeにダウンロードするプラグイン
表示言語を日本語にする

VS Codeは基本的には日本語に対応しているので自動で日本語表示になりますが、アップデートをしたりすると英語表記に戻ってしまう事があるので、その場合の手動での設定方法を覚えましょう。

VSCode上で「Ctrl+Shift+P」を押してコマンドパレットを開き、

>Configure Language

と入力し、言語設定をjaに変えます。



次にemmetの設定をします。
emmetは標準装備されているので、そのままでemmetを使用出来ます。
デフォルトではbracketsと同じようにlang属性が「en」になってしまっています。
これを毎回「ja」に打ち替えるのは面倒なので、設定ファイルを弄って直しましょう。

基本設定＞設定に進み、検索窓にVariablesと入力すると[emmet:Variables]という設定が出てくるのでsettings.jsonで編集するをクリックして、jsonファイルに以下のように追加してください。

"emmet.variables": {
    "lang" : "ja"
    }

12月27日作業データ（家具屋のECサイト）

2022年11月クラス

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>家具屋のECサイトの作成</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<h1>Furniture-store</h1>
</header>
<nav id="g-nav">
<ul>
<li><a href="#">Brands</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Catalogs</a></li>
<li><a href="#">Styling tips</a></li>
<li><a href="#">Partners & Press</a></li>
</ul>
</nav>

<nav id="g-nav-sp">
<ul>
<li><a href="#">Brands</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Stores</a></li>
<li><a href="#">Catalogs</a></li>
<li><a href="#">Styling tips</a></li>
<li><a href="#">Partners & Press</a></li>
</ul>
</nav>

<main>
<div class="content-wrapper">
  <div class="content-box">
    <div class="content-txt">
      <h2>Lorem, ipsum dolor.</h2>
      <p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p>
      <p class="more-btn"><a href="#">view more</a></p>
    </div><!-- /.content-txt -->
    <div class="content-img">
      <img src="img/main01.jpg" alt="">
    </div><!-- /.content-img -->
  </div><!-- /.content-box -->
  <div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
<div class="content-img">
<img src="img/main02.jpg" alt="">
</div><!-- /.content-img -->
  </div><!-- /.content-box -->
  <div class="content-box">
<div class="content-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti, unde.</p>
<p class="more-btn"><a href="#">view more</a></p>
</div><!-- /.content-txt -->
<div class="content-img">
<img src="img/main03.jpg" alt="">
</div><!-- /.content-img -->
  </div><!-- /.content-box -->
</div><!-- /.content-wrapper -->

<div class="col-1">
<h2>この文章はダミーです。<br class="sp-on">文字の大きさ、量</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.<br>Eveniet perferendis deserunt voluptatem vero quidem.</p>
</div><!-- /.col-1 -->

<div class="col-3-wrapper">
<div class="col-3-box">
<div class="col-3-img">
<img src="img/col-3-1.jpg" alt="">
</div>
<div class="col-3-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="icon"><img src="img/icon-1.svg" alt=""></p>
</div>
</div><!-- /.col-3-box -->

<div class="col-3-box">
<div class="col-3-img">
<img src="img/col-3-2.jpg" alt="">
</div>
<div class="col-3-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="icon"><img src="img/icon-2.svg" alt=""></p>
</div>
</div><!-- /.col-3-box -->

<div class="col-3-box">
<div class="col-3-img">
<img src="img/col-3-3.jpg" alt="">
</div>
<div class="col-3-txt">
<h2>Lorem, ipsum dolor.</h2>
<p class="icon"><img src="img/icon-3.svg" alt=""></p>
</div>
</div><!-- /.col-3-box -->
</div><!-- /.col-3-wrapper -->
</main>

<footer>
<p><small>&copy; 2022 Furniture-store</small></p>
<ul class="sns">
<li><a href="#"><img src="img/twitter.svg" alt=""></a></li>
<li><a href="#"><img src="img/instagram.svg" alt=""></a></li>
<li><a href="#"><img src="img/envelope-regular.svg" alt=""></a></li>
</ul>
</footer>
</body>
</html>


style.css

@charset "utf-8";

/* 変数の設定 */
:root{
--color_1:#eeeed1;
--color_2:#d1eed7;
--color_3:#eed9d1;
--color_4:#efd9f2;
--color_5:#ddeed1;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
}
ul{
list-style: none;
}
img{
vertical-align: bottom;
}

/* PCレイアウト */
header{
height: 100px;
background-color: var(--color_1);
text-align: center;
}
h1{
line-height: 100px;
}
#g-nav{
position: sticky;/* 指定した位置まで来たらfixed */
top: 0;
width: 100%;
height: 50px;
background-color: var(--color_2);
}
#g-nav>ul{
display: flex;
justify-content: center;
align-items: center;
height: 50px;
max-width: 960px;
margin: 0 auto;
}
#g-nav li{
margin: 0 20px;
}
#g-nav a{
color: #222;
padding: 10px 14px;
}
#g-nav a:hover{
text-decoration: underline 4px #ee96eb;
text-underline-offset: 5px;
}
/* sp用のナビは非表示にする */
#g-nav-sp{
display: none;
}

/* メイン部分のレイアウト */
main{
padding: 10px;
max-width: 1366px;
margin: 0 auto;
}
.content-box{
display: flex;
justify-content: space-between;
height: 600px;
margin-bottom: 10px;
}
.content-box:nth-of-type(odd){
flex-direction: row-reverse;
}
.content-txt{
width: calc((100% - 20px) / 3);
background-color: var(--color_3);
padding: 40px;
}
.content-txt>h2{
margin-bottom: 40px;
}
.text{
font-size: 18px;
line-height: 2;
margin-bottom: 60px;
}
.more-btn{
width: 80%;
margin: 0 auto;
height: 50px;
background-color: #f9fcde;
}
.more-btn>a{
display: block;
line-height: 50px;
text-align: center;
color: #222;
}
.more-btn>a::after{
display: inline-block;
content: "";
width: 10px;
height: 10px;
border-top: 1px solid #222;
border-right: 1px solid #222;
transform: rotate(45deg);
margin-left: 16px;
}

.content-img{
width: calc((100% - 20px) / 3 * 2 + 10px);
height: 600px;
}
.content-img>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.content-box:nth-of-type(2)>.content-txt{
background-color: var(--color_4);
}
.content-box:nth-of-type(3)>.content-txt{
background-color: var(--color_5);
}

/* col-1部分 */
.col-1{
width: 100%;
height: 400px;
background-color: var(--color_1);
margin-bottom: 10px;
text-align: center;
padding:100px 20px 20px;
}
.col-1>h2{
margin-bottom: 50px;
}
.sp-on{
display: none;
}
@media (max-width:560px){
.sp-on{
display: block;
}
}

/* col-3部分 */
.col-3-wrapper{
display: flex;
justify-content: space-between;
}
.col-3-box{
width: calc((100% - 20px) / 3);
}
.col-3-img{
width: 100%;
height: 260px;
}
.col-3-img>img{
object-fit: cover;
width: 100%;
height: 100%;
}
.col-3-txt{
background-color: var(--color_3);
padding: 50px 20px;
}
.icon{
width: 80px;
padding: 16px;
margin: 0 auto;
border-radius: 50%;/* 正方形を正円にする */
background-color: #FFF;
}
.col-3-box:nth-of-type(2)>.col-3-txt{
background-color: var(--color_4);
}
.col-3-box:nth-of-type(3)>.col-3-txt{
background-color: var(--color_5);
}
.col-3-txt>h2{
text-align: center;
margin-bottom: 40px;
}

/* footer部分 */
footer{
margin: 0 10px 10px;
background-color: var(--color_2);
padding: 20px;
}
footer>p{
text-align: center;
margin-bottom: 40px;
}
.sns{
display: flex;
justify-content: center;
}
.sns>li{
width: 44px;
margin: 0 20px;
}
.sns>li:nth-of-type(-n+2){
width: 36px;
}

fancyboxのcdnを使用する

高機能モーダルウィンドウ「Fancybox」のCDNを使ってギャラリーページを作ってみる

fancybox CSS

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

fancybox JS

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>




https://web.archive.org/web/20210325170940/https://fancyapps.com/fancybox/3/docs/

課題4-既存サイトの分析


shibaco.wp.xdomain.jp