Webデザイン基礎B/2020/1026
をテンプレートにして作成
LECTURE
担当科目一覧
ソーシャルデザイン応用演習/2020
情報デザイン演習IIIA/2020
情報デザイン研究II/2020
卒業研究I,II
情報デザイン概論/地域共創
Webデザイン基礎B/短大
デザイン総合研究
特定演習|情報デザインB
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機管理
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*第7回 CSS入門 その2
[[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. レイアウトに必須の手法
とりあえず、以下の2つの手法で大半のレイアウトは可能にな...
-[[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>
~
''第7回目は、以上をもって終了とします。お疲れ様でした。''
''第8回は、レスポンシブデザインについて学びます。''
~
~
~
終了行:
*第7回 CSS入門 その2
[[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. レイアウトに必須の手法
とりあえず、以下の2つの手法で大半のレイアウトは可能にな...
-[[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>
~
''第7回目は、以上をもって終了とします。お疲れ様でした。''
''第8回は、レスポンシブデザインについて学びます。''
~
~
~
ページ名: