---
# System prepended metadata

title: 【A講座】Webプログラミング講座2回目

---

# 【A講座】Webプログラミング講座2回目

## 初期準備
Teams上にアップロードした資料をシンクライアント上にダウンロードしてください。
Zipファイルですので解凍してデスクトップにフォルダを配置してください。
今日の授業で使うのは「02_lp」というフォルダです。
このフォルダをVsCodeで開いた状態で授業に進んでいきます。

本日使う授業フォルダに入っているもの。
```
index.html
css/style.css
css/reset.css
img/色々 //課題のサイト用の画像
js/main.js　
kadai_sample/02_lp.pdf //課題のデザイン詳細資料
kadai_sample/02_lp.png //課題のデザイン詳細資料png版
kadai_site_text.txt　　//課題サイトで使うテキスト一覧（ここからコピペで使う）
```
今日の授業では主にindex.htmlとstyle.cssを使います。
reset.cssはブラウザデフォルトのCSSを初期化してプレーンな状態にするためのCSSファイルです。実際のwebでは導入するのが一般的です。

## セクション１　header作成(横並びの練習) 
### 1-1 VsCode上でindex.htmlを開いてbodyタグ内にheaderというClass名のdivを作成
```
<div class="header">

</div>
```
```
エメットコマンド
.header + tabキー
```
### 1-2 先ほど作成したdivの中にh1で囲ったimgタグを記述
```
<div class="header">
    <h1 class="logo"><img src="img/header_logo.png" alt=""></h1>//追加！
</div>
```
```
エメットコマンド
h1.logo + tabキー
その後に
img + tabキー
```
### 1-3 さらにメニューエリアにあたるリストタグを記述
```
<div class="header">
    <h1 class="logo"><img src="img/header_logo.png" alt=""></h1>
    
    <ul class="header__nav">
      <li>ABOUT</li>
      <li>COURSE</li>
      <li>NEWS</li>
      <li>ACCESS</li>
      <li>CONTACT</li>
    </ul>
</div>
```
```
エメットコマンド
ul.header__nav + tabキー
その後に
li*5 + tabキー
```
### 1-4 header__nav内のliを横並びにするCSSをstyle.cssに記述
```
.header__nav {
    display: flex;
}
```

### 1-5 header__nav内のliの左側に余白をつけるCSSをstyle.cssに記述
```
.header__nav li {
    margin-left: 40px;
}
```

### 1-6 headrを横並びにするCSSをstyle.cssに記述（logoとnavの横並び）
```
/* header */
.header {
    display: flex;
    justify-content: space-around;
    align-items: center;
}
```

## セクション2　mainvisual作成(画像の上に文字の練習)
### 2-1 headerのdivの終了タグの後に新たにmainvisualというclass名のdivを作成
```
<div class="mainvisual">
    
</div>
```
```
エメットコマンド
.mainvisual + tabキー
```
### 2-2 mainvisualのdiv内にタイトルとサブタイトルを入れる
```
<div class="mainvisual">
    <h2 class="mainvisual__title">セカイを変えるチーズを作ろう</h2>//追加！
    <p class="mainvisual__subtitle">チーズ職人養成学校「チーズアカデミーTOKYO」</p>//追加！
</div>
```
```
エメットコマンド
h2.mainvisual__title + tabキー
その後に
p.mainvisual__subtitle + tabキー
```

### 2-3 mainvisualに背景画像を指定するCSSをstyle.cssに記述
```
/* mainvisual */
.mainvisual {
    height: 400px;//高さ指定
    background: url("../img/mainbg.png");//画像背景
    background-position: center;//画像の位置
    background-size: cover;//画像のサイズ
    background-repeat: no-repeat;//画像を繰り返すか
}
```
### 2-4 タイトルとサブタイトルを調整するCSSをstyle.cssに記述
```
.mainvisual__title {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    padding-top: 180px;
}

.mainvisual__subtitle {
    font-size: 30px;
    font-weight: bold;
    color: #fff;
    text-align: center;
    margin-top: 20px;
}
```
## セクション3 about作成(テキストと余白の練習)
### 3-1 mainvisualのdivの終了タグの後に新たにaboutというclass名のdivを作成
```
<div class="about">
    
</div>
```
```
エメットコマンド
.about + tabキー
```
### 3-2 aboutのdiv内にタイトルとサブタイトルとテキストを入れる
```
 <div class="about">
    <h3 class="about__title">About</h3>
    <p class="about__subtitle">チーズアカデミーについて</p>
    <p class="about__text">チーズアカデミーは、チーズ職人養成学校です。</p>
    <p class="about__text">
      チーズの素晴らしさを、自給自足を通じて、できるだけ多くの人に知っていただきたい。
      そして、食卓にはいつもチーズがあった、あの頃の当たり前をこの手で取り戻したい。
    </p>
    <p class="about__text">
      そんな思いから、チーズ職人養成学校「チーズアカデミーTOKYO」は歩みを始めています。
      卒業後、チーズ自給自足のバックアップはもちろんのこと、チーズ職人への就職・転職もサポートします。
    </p>
</div>
```
```
エメットコマンド
h3.about__title + tabキー
その後に
p.about__subtitle + tabキー
その後に
p.about__subtitle*3 + tabキー
```
### 3-3 aboutエリアを調整するCSSをstyle.cssに記述
```
.about {
    text-align: center;
    margin: 50px 0;
    width: 60%;
    margin-left: auto;
    margin-right: auto;
}
```
### 3-4 タイトルとサブタイトルとテキストを調整するCSSをstyle.cssに記述
```
.about__title {
    font-size: 30px;
    font-weight: bold;
    color: #ffd61a;
    margin-bottom: 20px;
}

.about__subtitle {
    margin-bottom: 20px;
    font-size: 20px;
}

.about__text {
    margin-bottom: 20px;
    text-align: center;
}
```
## セクション4 imgBox作成(画像の調整の練習)
### 4-1 aboutのdivの終了タグの後に新たにimgBoxというclass名のdivを作成
```
<div class="imgBox">
    
</div>
```
```
エメットコマンド
.imgBox + tabキー
```
### 4-2 imgBoxのdiv内にpタグで囲ったimgタグを4つ配置し画像を呼び出し
```
<div class="imgBox">
    <p><img src="img/about_01.jpg" alt=""></p>
    <p><img src="img/about_02.jpg" alt=""></p>
    <p><img src="img/about_03.jpg" alt=""></p>
    <p><img src="img/about_04.jpg" alt=""></p>
</div>
```

### 4-3 imgBoxを横並びにするCSSをstyle.cssに記述
```
.imgBox {
    display: flex;
    margin-bottom: 50px;
}
```
### 4-4 画像を囲っているpタグの横幅を指定するCSSをstyle.cssに記述
```
.imgBox p {
    width: 25%;
}
```
### 4-5 imgタグの最大横幅を100%に指定してpタグからはみ出さないようにCSSをstyle.cssに記述
```
.imgBox p img {
    width: 100%;
}
```
## セクション5 course作成(入れ子構造等の高度なCSSの練習)
### 5-1 imgBoxのdivの終了タグの後に新たにcourseというclass名のdivを作成
```
<div class="course">
    
</div>
```
```
エメットコマンド
.course + tabキー
```
### 5-1 courseのdiv内にタイトルとテキストを記述
```
<div class="course">
    <h3 class="course__title">Course</h3>
    <p class="course__text">
    　　未経験からでもスタートができるよう、カリキュラムは多くの専門家や
     現役チーズ職人のアドバイスのもと、作られました。
    　</p>
</div>
```
```
エメットコマンド
.course + tabキー
```
### 5-1 courseエリアとタイトルテキストを調整するCSSをstyle.cssに記述
```
.course {
    margin: 50px 0;
}

.course__title {
    font-size: 25px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 20px;
}

.course__text {
    text-align: center;
    font-size: 16px;
    margin: 0 70px;
    margin-bottom: 50px;
}
```
### 5-2 courseのdiv内にcourse__boxというclass名のdivを1つ作成
```
<div class="course">
    <h3 class="course__title">Course</h3>
    <p class="course__text">
    　　未経験からでもスタートができるよう、カリキュラムは多くの専門家や
     現役チーズ職人のアドバイスのもと、作られました。
    　</p>
     
     <div class="course__box"></div>
    
</div>
```
```
エメットコマンド
.course__box + tabキー
```

### 5-2 course__boxのdiv内にcourse__innerというclass名のdivを1つ作成
```
<div class="course__box">
      <div class="course__inner">
      
      </div>
</div>
```
```
エメットコマンド
.course__inner + tabキー
```
### 5-3 course__innerのdiv内にcourse__contentというclass名のdivを2つ作成
```
<div class="course__box">
  <div class="course__inner">
        <!--  コンテンツ1  -->
      <div class="course__content"></div>
      
        <!--  コンテンツ2  -->
      <div class="course__content"></div>
  </div>
</div>
```
```
エメットコマンド
.course__content*2 + tabキー
```
### 5-4 course__contentの1つ目のdiv内にimgタグを記述して画像呼び出し
```
<div class="course__box">
  <div class="course__inner">
        <!--  コンテンツ1  -->
      <div class="course__content"><img src="img/course_01.jpg" alt=""></div>
      
        <!--  コンテンツ2  -->
      <div class="course__content">

      </div>
  </div>
</div>
```
### 5-5 course__contentの2つ目のdiv内にcontent__leftというclass名のdivを作成
```
<div class="course__box">
  <div class="course__inner">
        <!--  コンテンツ1  -->
      <div class="course__content"><img src="img/course_01.jpg" alt=""></div>
      
        <!--  コンテンツ2  -->
      <div class="course__content">
            <div class="content__left">
            
            </div>
      </div>
  </div>
</div>
```
```
エメットコマンド
.content__left + tabキー
```

### 5-6 content__leftのdiv内にタイトルとテキストを追加
```
~~~~省略~~~~
<div class="content__left">
    <h4 class="content__title">本格的な農園を使った実地研修</h4>
    <p class="content__text">チーズアカデミーでは、本格的な農園を使った実地研修を
      行うことができます。プロとして活躍するチーズ職人も
      使用するような、広大で環境も整った農園を余すところ
      なく使い、卒業時には本格的なチーズを自分の力で作れる
      実践力の養成を目指します。
    </p>
</div>
~~~~省略~~~~
```
```
エメットコマンド
h4.content__title + tabキー
その後に
p.content__text + tabキー
```

### 5-7 course__boxのデザイン調整CSSをstyle.cssに記述
```
.course__box {
    margin-top: 50px;
}
```
### 5-8 course__innerとcourse__contentの中央揃えCSSをstyle.cssに記述
```
.course__inner {
    display: flex;
}

.course__content {
    width: 50%;
    display: flex;
    align-items: center;
}
```
### 5-9 course__content内のimgタグを調整CSSをstyle.cssに記述
```
.course__content img {
    width: 100%;
    vertical-align: top;
}
```
### 5-10 course__left内のタイトルとテキストデザイン調整CSSをstyle.cssに記述
```
.content__title {
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 40px;
}

.content__text {
    width: 100%;
}
```
### 5-11 course__leftのデザイン調整CSSをstyle.cssに記述
```
.content__left {
    width: 70%;
    margin-left: 50px;
}
```

### 5-12 course__innerのdivの開始から終了までをコピーして2つcourse__boxのdiv内に追加

```
<div class="course__box">

　　　　<!-- 画像左 -->
  <div class="course__inner">
       ~~~省略~~~
  </div>
  
 　　<!-- 画像右 -->
  <div class="course__inner">
       ~~~省略~~~
  </div>
  
  <!-- 画像左 -->
  <div class="course__inner">
       ~~~省略~~~
  </div>
  
</div>
```

### 5-13 course__inner2つ目のdivは画像が右なので右寄せデザイン用にclass名を２箇所変更し上下を入れ替える
```
１箇所目
content__leftが入っている親要素のcourse__contentのclass名をcourse__content__rightに変更

２箇所目
content__leftをcontent__rightに変更

```
最終完成形
```
<!-- 画像右 -->
<div class="course__inner">
    <div class="course__content__right">
        <div class="content__right">
            <h4 class="content__title">必要な知識もしっかりと取得</h4>
            <p class="content__text">チーズ作りには、しっかりとした食に関する知識が
              欠かせません。チーズアカデミーでは、一流講師陣による、
              チーズ作りに必要ないろはを余すところなく学べます。
              チーズそのものでなく、栄養学全般を学ぶことも
              可能ですので、チーズ以外への展開も夢ではないでしょう。
              </p>
        </div>
    </div>
    <div class="course__content"><img src="img/course_02.jpg" alt=""></div>
</div>
```

### 5-14 右寄せデザイン用のCSSをstyle.cssに記述
```
.course__content__right {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: right;
}
.content__right {
    width: 70%;
    margin-right: 50px;
}
```

## セクション6 GitHubの使い方

### 6-1 ブラウザでGithubを検索しTOPページから登録

### 6-2 登録時のユーザーネームは以下のルールに従う
```
y2-name
y2-nakano
```
### 6-3 リポジトリ作成
Create repositoryボタンをクリック

### 6-4 リポジトリ名は以下のルールに従う
設定はPublic
```
リポジトリの命名ルール
課題提出する回数を末尾に 書くこと 
1回目:kadai01 
2回目:kadai02 
3回目:kadai03
```
### 6-5 リポジトリが完成したら提出するフォルダをアップロード
uploadin an existing fileというリンクをクリックして表示された画面にドラックアンドドロップ

### 6-6　完了したら課題提出用のリンクをコピー
```
https://github.com/ユーザー名/リポジトリ名
例：https://github.com/y2-nakano/kadai01
```

### 6-7　課題提出する場合は以下の通り
```
名前
リンク
````
この三つをTeamsの課題提出投稿に返信する形で投稿してください。