【InFiNiTO Club】プログラミング講座2回目

# 【InFiNiTO Club】プログラミング講座2回目 ## 初期準備 Teams上にアップロードした資料をダウンロードしてください。今日の授業で使うのは「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">  <div class="course__content"></div>  <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">  <div class="course__content"><img src="img/course_01.jpg" alt=""></div>  <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">  <div class="course__content"><img src="img/course_01.jpg" alt=""></div>  <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; } ``` ## 今週の課題チーズアカデミーを完成させてください！ kadai_sampleフォルダの中にある02_lpというPDFの指示通りに同じものを再現してください。さらにご自身のアイディアや遊び心を踏まえたサイトに仕上げてください。 ``` 【課題提出方法】 index.html・画像・cssファイルを一つのフォルダにまとめて「kadai01_ローマ字の氏名_00」と名前を付けてTeamsで指定されたDropBoxに提出してください。 ``` 提出用フォーム https://forms.gle/8qDKcL4uNkCf9D4Y7