Webデザイン基礎B/2020/1026 をテンプレートにして作成

開始行:
*第７回 CSS入門 その２ [[Webデザイン基礎B/2020]]｜造形短期大学部｜''2020.10.26''... [[情報共有シート>https://docs.google.com/spreadsheets/d/1... // ID：zokei // PW：ksu ~ ***AGENDA -以下名簿が表示されます。ご自身の「出席欄」にチェックをつ... &fontawesome(far fa-hand-point-right);　[[情報共有シート>... -前回に引き続き、CSSのコーディングについて学びます。 -最後に　GitHubへのアップロードを求ています。 //&fontawesome(far fa-hand-point-right);　[[特設サイト>ht... ~ #hr '''''%%以下、LIVE動画をご覧下さい。記事に沿って解説してい... #hr ~ ~ ***本日のメニュー #contents2_1 ~ **はじめに #image(CSS/html_css.png,right,45%) 今回は、CSSによるページのレイアウトについて学びます。CSS... 箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜... ~ ~ **1. CSSによるページレイアウト #image("CSS/boxModel.png",right,40%) ***1.1. ボックスモデルを理解する 箱組みをする際には、どこにどのような余白をつくるかが非常... -margin　境界の外側の余白 -border　境界 -padding　境界の内側の余白 -width, height　内容部分の幅と高さ #clear ~ ***1.2. ユニバーサルセレクタによる余白のリセット ブラウザにはデフォルトCSSというものがあって、特に指定のな... 　ユニバーサルセレクタ（ * ）を使うと、すべての要素に一斉... * { margin: 0; padding: 0; } この例では、すべての要素に対して余白をゼロにリセットして... SampleSite では、以前の授業で、この部分をコメントアウトし... ~ ***1.3. レイアウトに必須の手法 とりあえず、以下の２つの手法で大半のレイアウトは可能にな... -[[Flexbox>CSS/Flexbox]]・・子要素を横に並べる -[[Position>CSS/Position]]・・要素を任意の位置に配置する ~ ***1.4. Flexboxを用いたレイアウト &color(red){サンプルでは、メニュー部分と、main の中を左右... ''親要素（Flexコンテナ） に display: flex; を設定''するこ... 以下、メニューを横に並べる事例です。 -HTML側の記述 <ul> <li><a href="#">about</a></li> <li><a href="#">gallery</a></li> <li><a href="#">links</a></li> </ul> -CSS側の記述 ul { display: flex; flex-direction: row; } li { width: 120px; margin-right: 20px; } 詳しくは、[[CSS/Flexbox]]をご覧下さい。 ~ ***1.5. positionを用いたレイアウト &color(red){サンプルでは、H1 のページタイトル部分に、すで... 通常の「箱詰め作業」では、要素同士が重なるような配置はで... -位置の基準となるブロック（親要素）に position: relative; と書きます。これで基準となるブロックの左上が原点（0,0）と... -対象となるブロックに position: absolute; top: Ypx; left: Xpx; と書きます。これで当該ブロックは（X,Y）の位置に表示されま... ~ ~ **2. 演習｜レイアウトの変更 みなさんのお手元にあるSampleSite の中の style.css をエデ... &color(red){SampleSite は、あくまでも練習用のものです。こ... ~ ***2.1. Flexbox の機能の確認 -main 部分の左右を入れ替える display: flex; で、main に Flexbox が適用されて、flex-dir... main{ display: flex; flex-direction: row; } flex-direction:column; とすると section と aside が縦に並... ~ -main 部分の左右の比率を変える section と aside は、main を親として、兄弟関係にあります... section{ flex: 3; padding: 3rem; background: #EEE; } aside{ flex: 1; padding: 3rem; background: #DDD; } ~ ***2.2. Position の機能の確認 -タイトルの表示位置を変える 以下、top と left の値を変えて、＜h1＞ 要素の位置を自由に... header h1{ position: absolute; top: 3rem; left: 3rem; font-size: 2rem; color: white; } ~ ~ **付記：画像・動画が縮まらない問題 前回の演習で、article の中に、img や iframe で画像・動画... これを解消するには、画像や動画の幅を、親要素に対してフレ... ~ ***画像の幅をフレキシブルに img タグの width の記述を削除するとともに CSSで幅を制御し... -HTML <img src="images/sample.jpg" alt="サンプル"> -CSS article img{ display: block; width:75%; /* 親要素の 75%幅になります */ } ~ ***YouTube動画の埋め込み この問題は、多くの人を悩ませているようで、Webで検索すると... -HTML：iframe を <div> で囲んで、CLASS名を与えます。 <div class="youtube"> <iframe src="https://www.youtube.com/embed/EexXu1UhLMY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> -CSS：かなりトリッキーな書き方ですが、以下のパターンが良... .youtube { position: relative; padding-bottom: 56.25%; /* 16:9の場合*/ height: 0; overflow: hidden; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ~ 以上、以下に全体を反映したサンプルを掲載しています。 -DEMO：https://koichi-inoue.github.io/SampleSite03/ -CODE：https://github.com/koichi-inoue/SampleSite03/ ~ ~ **3. 本日の成果をGitHub にアップロード -本日手を加えた最新の データ（index.html と画像を含んだ i... -手順は以下です。 --GitHub で あなたの SampleSite リポジトリを開いてくださ... --[File Upload] をクリックして下さい。 --本日更新した、index.html、imagesフォルダ をドラッグ＆ド... --[Commit Canges] をクリックすると、新しいファイルでリポ... -リポジトリが以下のように構成されていれば正解です。 #image(GitHubPages/SampleSite02.jpg) ~ -[[特設サイト>https://design.kyusan-u.ac.jp/OpenSquareJP_... ==GitHub Pages== * https : //JaneSmith.github.io/SampleSite <br> ~ ''第７回目は、以上をもって終了とします。お疲れ様でした。'' ''第８回は、レスポンシブデザインについて学びます。'' ~ ~ ~

終了行:
*第７回 CSS入門 その２ [[Webデザイン基礎B/2020]]｜造形短期大学部｜''2020.10.26''... [[情報共有シート>https://docs.google.com/spreadsheets/d/1... // ID：zokei // PW：ksu ~ ***AGENDA -以下名簿が表示されます。ご自身の「出席欄」にチェックをつ... &fontawesome(far fa-hand-point-right);　[[情報共有シート>... -前回に引き続き、CSSのコーディングについて学びます。 -最後に　GitHubへのアップロードを求ています。 //&fontawesome(far fa-hand-point-right);　[[特設サイト>ht... ~ #hr '''''%%以下、LIVE動画をご覧下さい。記事に沿って解説してい... #hr ~ ~ ***本日のメニュー #contents2_1 ~ **はじめに #image(CSS/html_css.png,right,45%) 今回は、CSSによるページのレイアウトについて学びます。CSS... 箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜... ~ ~ **1. CSSによるページレイアウト #image("CSS/boxModel.png",right,40%) ***1.1. ボックスモデルを理解する 箱組みをする際には、どこにどのような余白をつくるかが非常... -margin　境界の外側の余白 -border　境界 -padding　境界の内側の余白 -width, height　内容部分の幅と高さ #clear ~ ***1.2. ユニバーサルセレクタによる余白のリセット ブラウザにはデフォルトCSSというものがあって、特に指定のな... 　ユニバーサルセレクタ（ * ）を使うと、すべての要素に一斉... * { margin: 0; padding: 0; } この例では、すべての要素に対して余白をゼロにリセットして... SampleSite では、以前の授業で、この部分をコメントアウトし... ~ ***1.3. レイアウトに必須の手法 とりあえず、以下の２つの手法で大半のレイアウトは可能にな... -[[Flexbox>CSS/Flexbox]]・・子要素を横に並べる -[[Position>CSS/Position]]・・要素を任意の位置に配置する ~ ***1.4. Flexboxを用いたレイアウト &color(red){サンプルでは、メニュー部分と、main の中を左右... ''親要素（Flexコンテナ） に display: flex; を設定''するこ... 以下、メニューを横に並べる事例です。 -HTML側の記述 <ul> <li><a href="#">about</a></li> <li><a href="#">gallery</a></li> <li><a href="#">links</a></li> </ul> -CSS側の記述 ul { display: flex; flex-direction: row; } li { width: 120px; margin-right: 20px; } 詳しくは、[[CSS/Flexbox]]をご覧下さい。 ~ ***1.5. positionを用いたレイアウト &color(red){サンプルでは、H1 のページタイトル部分に、すで... 通常の「箱詰め作業」では、要素同士が重なるような配置はで... -位置の基準となるブロック（親要素）に position: relative; と書きます。これで基準となるブロックの左上が原点（0,0）と... -対象となるブロックに position: absolute; top: Ypx; left: Xpx; と書きます。これで当該ブロックは（X,Y）の位置に表示されま... ~ ~ **2. 演習｜レイアウトの変更 みなさんのお手元にあるSampleSite の中の style.css をエデ... &color(red){SampleSite は、あくまでも練習用のものです。こ... ~ ***2.1. Flexbox の機能の確認 -main 部分の左右を入れ替える display: flex; で、main に Flexbox が適用されて、flex-dir... main{ display: flex; flex-direction: row; } flex-direction:column; とすると section と aside が縦に並... ~ -main 部分の左右の比率を変える section と aside は、main を親として、兄弟関係にあります... section{ flex: 3; padding: 3rem; background: #EEE; } aside{ flex: 1; padding: 3rem; background: #DDD; } ~ ***2.2. Position の機能の確認 -タイトルの表示位置を変える 以下、top と left の値を変えて、＜h1＞ 要素の位置を自由に... header h1{ position: absolute; top: 3rem; left: 3rem; font-size: 2rem; color: white; } ~ ~ **付記：画像・動画が縮まらない問題 前回の演習で、article の中に、img や iframe で画像・動画... これを解消するには、画像や動画の幅を、親要素に対してフレ... ~ ***画像の幅をフレキシブルに img タグの width の記述を削除するとともに CSSで幅を制御し... -HTML <img src="images/sample.jpg" alt="サンプル"> -CSS article img{ display: block; width:75%; /* 親要素の 75%幅になります */ } ~ ***YouTube動画の埋め込み この問題は、多くの人を悩ませているようで、Webで検索すると... -HTML：iframe を <div> で囲んで、CLASS名を与えます。 <div class="youtube"> <iframe src="https://www.youtube.com/embed/EexXu1UhLMY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen> </iframe> </div> -CSS：かなりトリッキーな書き方ですが、以下のパターンが良... .youtube { position: relative; padding-bottom: 56.25%; /* 16:9の場合*/ height: 0; overflow: hidden; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } ~ 以上、以下に全体を反映したサンプルを掲載しています。 -DEMO：https://koichi-inoue.github.io/SampleSite03/ -CODE：https://github.com/koichi-inoue/SampleSite03/ ~ ~ **3. 本日の成果をGitHub にアップロード -本日手を加えた最新の データ（index.html と画像を含んだ i... -手順は以下です。 --GitHub で あなたの SampleSite リポジトリを開いてくださ... --[File Upload] をクリックして下さい。 --本日更新した、index.html、imagesフォルダ をドラッグ＆ド... --[Commit Canges] をクリックすると、新しいファイルでリポ... -リポジトリが以下のように構成されていれば正解です。 #image(GitHubPages/SampleSite02.jpg) ~ -[[特設サイト>https://design.kyusan-u.ac.jp/OpenSquareJP_... ==GitHub Pages== * https : //JaneSmith.github.io/SampleSite <br> ~ ''第７回目は、以上をもって終了とします。お疲れ様でした。'' ''第８回は、レスポンシブデザインについて学びます。'' ~ ~ ~

ページ名: