#author("2020-10-26T11:56:29+09:00","default:inoue.ko","inoue.ko") #author("2020-11-05T09:04:58+09:00;2020-10-26T11:56:29+09:00","default:inoue.ko","inoue.ko") *第７回 CSS入門 その２ [[Webデザイン基礎B/2020]]｜造形短期大学部｜''2020.10.26''｜''遠隔'' [[情報共有シート>https://docs.google.com/spreadsheets/d/1xUm3kmlOjQCE82ywoCf83WMJ361X5txswkisWJbOR1I/edit?usp=sharing]]｜[[特設サイト>https://design.kyusan-u.ac.jp/OpenSquareJP_MW/index.php/Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%9F%BA%E7%A4%8EB]] // ID：zokei // PW：ksu ~ ***AGENDA -以下名簿が表示されます。ご自身の「出席欄」にチェックをつけて下さい。 &fontawesome(far fa-hand-point-right); [[情報共有シート>https://docs.google.com/spreadsheets/d/1xUm3kmlOjQCE82ywoCf83WMJ361X5txswkisWJbOR1I/edit?usp=sharing]] -前回に引き続き、CSSのコーディングについて学びます。 -最後に GitHubへのアップロードを求ています。 //&fontawesome(far fa-hand-point-right); [[特設サイト>https://design.kyusan-u.ac.jp/OpenSquareJP_MW/index.php/Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%9F%BA%E7%A4%8EB]]（受講生一覧） ~ #hr '''''以下、LIVE動画をご覧下さい。記事に沿って解説しています。''''' '''''%%以下、LIVE動画をご覧下さい。記事に沿って解説しています。%%''''' #hr ~ #YouTube(pLFhHkG5o90 ) https://youtu.be/pLFhHkG5o90 -''LIVE配信：11:00 - ''｜ココ（↑）から配信します。 -LIVE動画のURLは''開始5分前に埋め込み・掲載します''。YouTubeの画面にタイトルが表示されていない（画面が黒いままの）場合は''「再読み込み（リロード）」を行って、ページを最新の状態にして下さい''。 -ご質問等は [[情報共有シート>https://docs.google.com/spreadsheets/d/1xUm3kmlOjQCE82ywoCf83WMJ361X5txswkisWJbOR1I/edit?usp=sharing]]に書き込んで下さい。 ~ ***本日のメニュー #contents2_1 ~ **はじめに #image(CSS/html_css.png,right,45%) 今回は、CSSによるページのレイアウトについて学びます。CSSによるレイアウト作業は、''大きな箱の中に小さな箱を詰めていく作業''と考えるとイメージしやすいでしょう。一般的には、container という外箱の中に、header 、navといった名前の内箱を順に詰め込んでいくことになります。 箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜するような記述をするとレイアウトは正しく表示されないので、''ソースコードを書く際は、きちんとインデントをとってわかりやすく書く''ことをお勧めします。 ~ ~ **1. CSSによるページレイアウト #image("CSS/boxModel.png",right,40%) ***1.1. ボックスモデルを理解する 箱組みをする際には、どこにどのような余白をつくるかが非常に重要です。以下のプロパティーについての理解が必要です。 -margin 境界の外側の余白 -border 境界 -padding 境界の内側の余白 -width, height 内容部分の幅と高さ #clear ~ ***1.2. ユニバーサルセレクタによる余白のリセット ブラウザにはデフォルトCSSというものがあって、特に指定のない要素には自動的に margin, padding また line-height が適用されます。これは、デザイナーが精密な位置調整を行う場合に邪魔になるので、すべての要素に対して「余白のリセット」を行った上で、後に各々に余白の定義をするのが一般的です。 ユニバーサルセレクタ（ * ）を使うと、すべての要素に一斉制御が可能になります。CSSの先頭で、以下のような記述をするとよいでしょう。 * { margin: 0; padding: 0; } この例では、すべての要素に対して余白をゼロにリセットしています。 SampleSite では、以前の授業で、この部分をコメントアウトしているので、この段階で復活させましょう。 ~ ***1.3. レイアウトに必須の手法 とりあえず、以下の２つの手法で大半のレイアウトは可能になります。 -[[Flexbox>CSS/Flexbox]]・・子要素を横に並べる -[[Position>CSS/Position]]・・要素を任意の位置に配置する ~ ***1.4. Flexboxを用いたレイアウト &color(red){サンプルでは、メニュー部分と、main の中を左右に分ける部分で、すでにこれが適用されています。確認するだけでOKです。}; ''親要素（Flexコンテナ） に display: flex; を設定''することで、子要素(Flexアイテム) の並び（縦・横）や順序（上下・左右）を制御する方法です。例えば、親要素に対して、display: flex; flex-direction: row; と書くと、子要素は横に並びます。 以下、メニューを横に並べる事例です。 -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''というプロパティーです。これを使うと、任意のブロックを基準にして、その左上を原点とした座標で、配置したいブロックの位置を指定することができます。 -位置の基準となるブロック（親要素）に 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-direction: row; によって、その子要素が「横に並ぶ」ように設定されています。 main{ display: flex; flex-direction: row; } flex-direction:column; とすると section と aside が縦に並ぶこと、また、flex-direction:row-reverse; とすると、section と aside の左右が逆になることを確認してください。 ~ -main 部分の左右の比率を変える section と aside は、main を親として、兄弟関係にあります。以下の、flex: 3; と flex: 1; は、兄弟が、３：１の比率になることを意味します。簡単な整数比となることを前提に、数字を変えて、比率が変わることを確認してください。 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で調整する必要があります。 ~ ***画像の幅をフレキシブルに 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 と画像を含んだ imagesフォルダ）を 前回作成した リポジトリ（SampleSite ）にアップロード更新して下さい。 -手順は以下です。 --GitHub で あなたの SampleSite リポジトリを開いてください。 --[File Upload] をクリックして下さい。 --本日更新した、index.html、imagesフォルダ をドラッグ＆ドロップします --[Commit Canges] をクリックすると、新しいファイルでリポジトリが更新されます。 -リポジトリが以下のように構成されていれば正解です。 #image(GitHubPages/SampleSite02.jpg) ~ -[[特設サイト>https://design.kyusan-u.ac.jp/OpenSquareJP_MW/index.php/Web%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E5%9F%BA%E7%A4%8EB]]の以下の部分から、サイトにアクセスして本日更新したWebサイトが閲覧できればOKです。 ==GitHub Pages== * https : //JaneSmith.github.io/SampleSite <br> ~ ''第７回目は、以上をもって終了とします。お疲れ様でした。'' ''第８回は、レスポンシブデザインについて学びます。'' ~ ~ ~