WebDesign/速習入門講座
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*Webデザイン入門
HTML+CSS の速習講座
~
#image(CSS/html_css.png,right,50%)
Webの技術は、対外向けの情報発信のみならず、組織内部の情報...
ここでは、Web標準技術としてのHTMLとCSSを用いたWebページの...
~
#clear
~
***CONTENTS
#contents2_1
~
**はじめに
~
***開発環境の準備
-作るソフト [[TextEditor]] ＞ [[Atom]]
ただ単に文字を入力・編集する・・プログラミングに用いる最...
-見るソフト [[Browser]] ＞ Firefox , Chrome
-転送するソフト [[FTP]] ＞ FileZilla
~
***サイトフォルダの準備
#image(WebDesign/Basics/folder.jpg,right,30%)
-一般にWebサイトは複数のファイルから構成されます。はじめ...
-1ページ = 1ファイル（〜.html）が基本です。
-写真やイラストなどの画像は imagesフォルダで管理します。
''注）フォルダ名、ファイル名は必ず半角英数で''
images page01.html page-01.html page_01.html logoMark...
Webサイトを構成するフォルダやファイルの名称は、すべて英字...
#clear
~
~
**HTML
~
***HTMLの記述例
HTMLとは、ページの内容を記述するためのマークアップ言語で...
まずは、以下のソースコードをテキストエディタにコピー＆ペ...
''index.html'' という名前で、作業用フォルダに保存して下さ...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Sample Site</title>
</head>
<body>
<div id="container">
<header>
<h1>Sample Page</h1>
</header>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
<main>
<section>
<article>
article 01
</article>
<article>
article 02
</article>
</section>
<aside>
aside
</aside>
</main>
<footer>
© http://www.example.com
</footer>
</div>
</body>
</html>
~
***HTMLをブラウザで表示確認
-index.html をブラウザへドラッグ＆ドロップするだけで表示...
-アドレスバーに表示されるURLの違い
--通常のネット接続の場合： http：// www.example.com/inde...
--ファイルを表示した場合： file：//・・・・ /index.html
-見出しや文章を適当に書き変えて「保存」してみて下さい。ブ...
~
~
***HTMLタグの基本
HTMLは、情報要素を以下のような''タグ''でくくる形で記述し...
<◯◯> 〜 </◯◯> ← 前者を開始タグ、後者を終了タグといい...
以下、基本的なものを列挙します。 ＞ [[詳しくはこちら>HT...
-HTML文書：<html> 〜 </html>
-ヘッドとボディー ※HTMLは２つの部分から構成されます。
--ページに関する前置き情報：<head> 〜 </head>
--ブラウザの主画面に表示される情報：<body> 〜 </body>
-セクション ※紙面を構成する大きな枠組みを定義するのに用...
--汎用区画：div, article, aside, section
--ヘッダー：header
--フッター：footer
--ナビ：nav
-見出し：h1 ※ h1 から h6 まで６段階あります
-文章段落：p
-リンク：a ※以下の２種類の使い方があります。
--内部リンク（サイト内にある別のhtmlファイルへのリンク）
<a href="gallery.html">（リンク文字、画像）</a>
--外部リンク（外部サイトへのリンク）
<a href="http://www.abc.com">（リンク文字、画像）</a>
-箇条書き： <ul>と<li> ※以下、サイトナビの書き方の例。
<ul>
<li><a href="index.html">home</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="links.html">links</a></li>
<li><a href="about.html">about</a></li>
</ul>
-メディア：img, audio, videoなど
--画像の配置：img
//sample.jpgという画像データがimagesフォルダの中にあると...
<img src="images/sample.jpg" width="320">
//※属性 src ソース width 表示幅
画像はWebに最適なサイズにリサイズ ＞ 参考：[[WebDesign/...
--動画の配置：video
//同様に動画の掲載も可能です。ただし動画ファイルは「重い...
<video src="movies/sample.mp4" width="320"></video>
-その他
--強制改行：br
--水平線：hr
~
~
***参考
-HTML5 Semantic の基本形：[[GoogleImage:HTML5 Semantic]]
-きれいなソースコードを書くために・・・
--TAB,半角スペースでインデントをとってHTMLを見やすくしま...
--TAB,半角スペースは表示上は無視されます。
--要素間の「余白」は後に学習するCSSでコントロールします。
全角スペースの利用は様々なトラブルのもとになるので、避け...
-様々なコンテンツの埋め込み
--YouTube動画の埋め込み <IFRAME>
YouTubeのサイトには「共有」>「埋め込みコード」があります。
それ(以下例)を<body>内にコピー＆ペーストすれば表示されま...
<iframe width="420" height="315"
src="http://www.youtube.com/embed/[動画個別の記号]"
frameborder="0" allowfullscreen></iframe>
--GoogleMapの埋め込み → Googleマップ＞リンク＞埋め込み...
--その他、Twitterのタイムラインの埋め込みなども試してみて...
~
~
**CSS
***CSSでページのスタイルを定義
CSSとは、表示された要素のビジュアルを定義するためのもので...
まずは、以下のソースコードをテキストエディタにコピー＆ペ...
''style.css''としてWebSiteフォルダに保存して下さい。
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#container{
width: 84%;
max-width: 1280px;
min-width: 512px;
margin: 0 auto;
}
header {
position:relative;
height: 8rem;
background: #333;
box-shadow: 0 4px 0.3125rem rgba(0,0,0,.3);
}
header h1{
position: absolute;
top: 3rem;
left: 3rem;
font-size: 2rem;
color: white;
}
nav {
padding: 1rem 3rem ;
background: #333;
}
nav ul {
display: flex;
flex-direction: row;
}
nav li {
margin-right: 2rem;
}
nav a {
color: white;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section {
flex: 3;
padding: 3rem;
background: #EEE;
}
article {
height: 8rem;
padding: 1rem;
margin-bottom: 2rem;
background: #FFF;
}
aside {
flex:1;
padding: 3rem;
background: #DDD;
}
footer {
padding: 2rem 3rem;
text-align: center;
background: #333;
color: white;
}
~
***HTMLとCSSの関連づけ
index.html の<head>内に、以下の１行を追記して下さい。
<link rel="stylesheet" type="text/css" href="style.css">
これで、CSSに書かれた内容が、ページのスタイルに反映します。
注）CSSを記述する方法は３つあります。
・ HTMLファイルに書かれた各タグの中に直接書く
・ HTMLファイルのヘッダー部分にまとめて書く
・ HTMLファイルとは独立した別のファイルに書く（ 拡張子は ...
で、結論から言うと、''３つめを採用するのがWeb標準''で、こ...
''最初の index.html と この style.css を組み合わせた結果'...
~
~
***CSSの記法
CSSでは''どの部分の・何を・どうするか''を記述します。
記述の基本ルールは以下のとおりです。
セレクタ（どの部分の） {
プロパティー（何を） : 値（どうする） ;
プロパティー（何を） : 値（どうする） ;
:
}
HTML内の特定の要素を''セレクタ''で把握し、その要素をどう...
セレクタとしては、タグ名を使うのが最もシンプルですが、...
-''セレクタ''が既存のタグの場合
＜body＞や＜h1＞など、タグ要素に対してスタイルを定義する...
article {
background-color : gray;
}
タグ要素の中のタグ要素にスタイルを定義する場合
article p {
line-height : 180%;
}
-''セレクタ''が ID 要素(ページ内に１つ)の場合（ 例：<div ...
#sideBar {
background-color : white;
}
-''セレクタ''が CLASS 要素(ページ内に複数)の場合（ 例：<p...
.column {
background-color : gray;
}
-その他の様々なセレクタの書き方 ＞ [[CSS/Selector]]
-参考：コメントアウトについて
/* color: red; */
のように /* と */ で一定範囲を囲むと、コメント扱いとな...
後で使う可能性のある記述を一時機能停止させたい場合にも使...
~
~
***CSSによるページレイアウト
#image(CSS/html_css.png,right,45%)
CSSによるレイアウト作業は、''大きな箱の中に小さな箱を詰め...
箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜...
~
''参考''：[[ZENGARDEN>http://www.mezzoblue.com/zengarden/...
ZENGARDENは、すべてまったく同じHTMLに対し、CSSの差し替え...
~
~
#image("CSS/boxModel.png",right,40%)
***ボックスモデルを理解する
箱組みをする際には、どこにどのような余白をつくるかが非常...
-margin 境界の外側の余白
-border 境界
-padding 境界の内側の余白
-width, height 内容部分の幅と高さ
#clear
~
~
***ユニバーサルセレクタ
ユニバーサルセレクタ（ * ）を使うと、すべての要素に一斉制...
CSSによる精密なレイアウトコントロールの際は、CSSの先頭で...
* {
margin: 0;
padding: 0;
line-height: 100%;
list-style-type: none;
text-decoration: none;
}
この例では、すべての要素に対して余白をゼロに、また、余計...
~
~
***flexboxを用いたレイアウト
親要素(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]]をご覧下さい。
~
~
***floatを用いたレイアウト
&color(red){上記 flexbox 仕様の登場で、あまり使用されなく...
-特定のブロック（箱）のCSSに float を書き加えると、ブロッ...
float : left; （ float : right; ）
-ただし、回り込みは一旦定義すると、左右に余白がある限り、...
clear : both; （clear : left; clear : right; ）
と書きます。
~
~
***positionを用いたレイアウト
floatを用いた「箱詰め作業」では、スペースに余裕がなければ...
-位置の基準となるブロック（一般的には #container）に
position:relative;
と書きます。これで基準となるブロックの左上が原点（0,0）と...
-対象となるブロックに
position:absolute;
top: Ypx;
left: Xpx;
と書きます。これで当該ブロックは（X,Y）の位置に表示されま...
~
~
***テンプレートから個別ページへ
#image(CSS/html_css_2.png,right,40%)
index.html と style.css のセットは、いわばページのテンプ...
gallery.html や links.html など、新しいページは、index.ht...
~
-参考：テンプレート http://www.oswd.org/designs/browse/
~
~
**ファイルのアップロードについて
作成したファイル(群)は、Webサーバーにアップして「公開」と...
[[詳しくはこちら>FTP]]};
-FTPクライアントソフト(FileZilla)を起動。
-FTPサーバー（ホスト名）、ユーザID、パスワード の３つを入...
-一般的にはウインドウの左側があなたのPC（ローカルマシン）...
-左のウインドウから右のウインドウへ「アップロード」します...
-アップロードの仕方とアクセス方法は以下ような関係がありま...
--ドキュメントルート直下の ''index.html''(トップページ) ...
http://xxxxxxxx.com/
--ドキュメントルート直下の test.html を閲覧する場合
http://xxxxxxxx.com/test.html
--ドキュメントルート直下にsampleフォルダ(中にindex.html)...
http://xxxxxxxx.com/sample/
つまり、サーバー（ディレクトリ）がひとつあれば、フォルダ...
~
~
**最後に
~
-Webサイトはオープンなソースコードでできているので、ブラ...
右クリック ＞ ページのソースを表示
とすると、そのページのHTMLソースを見ることができます。ま...
-本講習では、HTML+CSS のみでWebページをつくる演習を行いま...
~
~
~
~
終了行:
*Webデザイン入門
HTML+CSS の速習講座
~
#image(CSS/html_css.png,right,50%)
Webの技術は、対外向けの情報発信のみならず、組織内部の情報...
ここでは、Web標準技術としてのHTMLとCSSを用いたWebページの...
~
#clear
~
***CONTENTS
#contents2_1
~
**はじめに
~
***開発環境の準備
-作るソフト [[TextEditor]] ＞ [[Atom]]
ただ単に文字を入力・編集する・・プログラミングに用いる最...
-見るソフト [[Browser]] ＞ Firefox , Chrome
-転送するソフト [[FTP]] ＞ FileZilla
~
***サイトフォルダの準備
#image(WebDesign/Basics/folder.jpg,right,30%)
-一般にWebサイトは複数のファイルから構成されます。はじめ...
-1ページ = 1ファイル（〜.html）が基本です。
-写真やイラストなどの画像は imagesフォルダで管理します。
''注）フォルダ名、ファイル名は必ず半角英数で''
images page01.html page-01.html page_01.html logoMark...
Webサイトを構成するフォルダやファイルの名称は、すべて英字...
#clear
~
~
**HTML
~
***HTMLの記述例
HTMLとは、ページの内容を記述するためのマークアップ言語で...
まずは、以下のソースコードをテキストエディタにコピー＆ペ...
''index.html'' という名前で、作業用フォルダに保存して下さ...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title>Sample Site</title>
</head>
<body>
<div id="container">
<header>
<h1>Sample Page</h1>
</header>
<nav>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">gallery</a></li>
<li><a href="#">links</a></li>
</ul>
</nav>
<main>
<section>
<article>
article 01
</article>
<article>
article 02
</article>
</section>
<aside>
aside
</aside>
</main>
<footer>
© http://www.example.com
</footer>
</div>
</body>
</html>
~
***HTMLをブラウザで表示確認
-index.html をブラウザへドラッグ＆ドロップするだけで表示...
-アドレスバーに表示されるURLの違い
--通常のネット接続の場合： http：// www.example.com/inde...
--ファイルを表示した場合： file：//・・・・ /index.html
-見出しや文章を適当に書き変えて「保存」してみて下さい。ブ...
~
~
***HTMLタグの基本
HTMLは、情報要素を以下のような''タグ''でくくる形で記述し...
<◯◯> 〜 </◯◯> ← 前者を開始タグ、後者を終了タグといい...
以下、基本的なものを列挙します。 ＞ [[詳しくはこちら>HT...
-HTML文書：<html> 〜 </html>
-ヘッドとボディー ※HTMLは２つの部分から構成されます。
--ページに関する前置き情報：<head> 〜 </head>
--ブラウザの主画面に表示される情報：<body> 〜 </body>
-セクション ※紙面を構成する大きな枠組みを定義するのに用...
--汎用区画：div, article, aside, section
--ヘッダー：header
--フッター：footer
--ナビ：nav
-見出し：h1 ※ h1 から h6 まで６段階あります
-文章段落：p
-リンク：a ※以下の２種類の使い方があります。
--内部リンク（サイト内にある別のhtmlファイルへのリンク）
<a href="gallery.html">（リンク文字、画像）</a>
--外部リンク（外部サイトへのリンク）
<a href="http://www.abc.com">（リンク文字、画像）</a>
-箇条書き： <ul>と<li> ※以下、サイトナビの書き方の例。
<ul>
<li><a href="index.html">home</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="links.html">links</a></li>
<li><a href="about.html">about</a></li>
</ul>
-メディア：img, audio, videoなど
--画像の配置：img
//sample.jpgという画像データがimagesフォルダの中にあると...
<img src="images/sample.jpg" width="320">
//※属性 src ソース width 表示幅
画像はWebに最適なサイズにリサイズ ＞ 参考：[[WebDesign/...
--動画の配置：video
//同様に動画の掲載も可能です。ただし動画ファイルは「重い...
<video src="movies/sample.mp4" width="320"></video>
-その他
--強制改行：br
--水平線：hr
~
~
***参考
-HTML5 Semantic の基本形：[[GoogleImage:HTML5 Semantic]]
-きれいなソースコードを書くために・・・
--TAB,半角スペースでインデントをとってHTMLを見やすくしま...
--TAB,半角スペースは表示上は無視されます。
--要素間の「余白」は後に学習するCSSでコントロールします。
全角スペースの利用は様々なトラブルのもとになるので、避け...
-様々なコンテンツの埋め込み
--YouTube動画の埋め込み <IFRAME>
YouTubeのサイトには「共有」>「埋め込みコード」があります。
それ(以下例)を<body>内にコピー＆ペーストすれば表示されま...
<iframe width="420" height="315"
src="http://www.youtube.com/embed/[動画個別の記号]"
frameborder="0" allowfullscreen></iframe>
--GoogleMapの埋め込み → Googleマップ＞リンク＞埋め込み...
--その他、Twitterのタイムラインの埋め込みなども試してみて...
~
~
**CSS
***CSSでページのスタイルを定義
CSSとは、表示された要素のビジュアルを定義するためのもので...
まずは、以下のソースコードをテキストエディタにコピー＆ペ...
''style.css''としてWebSiteフォルダに保存して下さい。
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
#container{
width: 84%;
max-width: 1280px;
min-width: 512px;
margin: 0 auto;
}
header {
position:relative;
height: 8rem;
background: #333;
box-shadow: 0 4px 0.3125rem rgba(0,0,0,.3);
}
header h1{
position: absolute;
top: 3rem;
left: 3rem;
font-size: 2rem;
color: white;
}
nav {
padding: 1rem 3rem ;
background: #333;
}
nav ul {
display: flex;
flex-direction: row;
}
nav li {
margin-right: 2rem;
}
nav a {
color: white;
}
main {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
section {
flex: 3;
padding: 3rem;
background: #EEE;
}
article {
height: 8rem;
padding: 1rem;
margin-bottom: 2rem;
background: #FFF;
}
aside {
flex:1;
padding: 3rem;
background: #DDD;
}
footer {
padding: 2rem 3rem;
text-align: center;
background: #333;
color: white;
}
~
***HTMLとCSSの関連づけ
index.html の<head>内に、以下の１行を追記して下さい。
<link rel="stylesheet" type="text/css" href="style.css">
これで、CSSに書かれた内容が、ページのスタイルに反映します。
注）CSSを記述する方法は３つあります。
・ HTMLファイルに書かれた各タグの中に直接書く
・ HTMLファイルのヘッダー部分にまとめて書く
・ HTMLファイルとは独立した別のファイルに書く（ 拡張子は ...
で、結論から言うと、''３つめを採用するのがWeb標準''で、こ...
''最初の index.html と この style.css を組み合わせた結果'...
~
~
***CSSの記法
CSSでは''どの部分の・何を・どうするか''を記述します。
記述の基本ルールは以下のとおりです。
セレクタ（どの部分の） {
プロパティー（何を） : 値（どうする） ;
プロパティー（何を） : 値（どうする） ;
:
}
HTML内の特定の要素を''セレクタ''で把握し、その要素をどう...
セレクタとしては、タグ名を使うのが最もシンプルですが、...
-''セレクタ''が既存のタグの場合
＜body＞や＜h1＞など、タグ要素に対してスタイルを定義する...
article {
background-color : gray;
}
タグ要素の中のタグ要素にスタイルを定義する場合
article p {
line-height : 180%;
}
-''セレクタ''が ID 要素(ページ内に１つ)の場合（ 例：<div ...
#sideBar {
background-color : white;
}
-''セレクタ''が CLASS 要素(ページ内に複数)の場合（ 例：<p...
.column {
background-color : gray;
}
-その他の様々なセレクタの書き方 ＞ [[CSS/Selector]]
-参考：コメントアウトについて
/* color: red; */
のように /* と */ で一定範囲を囲むと、コメント扱いとな...
後で使う可能性のある記述を一時機能停止させたい場合にも使...
~
~
***CSSによるページレイアウト
#image(CSS/html_css.png,right,45%)
CSSによるレイアウト作業は、''大きな箱の中に小さな箱を詰め...
箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜...
~
''参考''：[[ZENGARDEN>http://www.mezzoblue.com/zengarden/...
ZENGARDENは、すべてまったく同じHTMLに対し、CSSの差し替え...
~
~
#image("CSS/boxModel.png",right,40%)
***ボックスモデルを理解する
箱組みをする際には、どこにどのような余白をつくるかが非常...
-margin 境界の外側の余白
-border 境界
-padding 境界の内側の余白
-width, height 内容部分の幅と高さ
#clear
~
~
***ユニバーサルセレクタ
ユニバーサルセレクタ（ * ）を使うと、すべての要素に一斉制...
CSSによる精密なレイアウトコントロールの際は、CSSの先頭で...
* {
margin: 0;
padding: 0;
line-height: 100%;
list-style-type: none;
text-decoration: none;
}
この例では、すべての要素に対して余白をゼロに、また、余計...
~
~
***flexboxを用いたレイアウト
親要素(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]]をご覧下さい。
~
~
***floatを用いたレイアウト
&color(red){上記 flexbox 仕様の登場で、あまり使用されなく...
-特定のブロック（箱）のCSSに float を書き加えると、ブロッ...
float : left; （ float : right; ）
-ただし、回り込みは一旦定義すると、左右に余白がある限り、...
clear : both; （clear : left; clear : right; ）
と書きます。
~
~
***positionを用いたレイアウト
floatを用いた「箱詰め作業」では、スペースに余裕がなければ...
-位置の基準となるブロック（一般的には #container）に
position:relative;
と書きます。これで基準となるブロックの左上が原点（0,0）と...
-対象となるブロックに
position:absolute;
top: Ypx;
left: Xpx;
と書きます。これで当該ブロックは（X,Y）の位置に表示されま...
~
~
***テンプレートから個別ページへ
#image(CSS/html_css_2.png,right,40%)
index.html と style.css のセットは、いわばページのテンプ...
gallery.html や links.html など、新しいページは、index.ht...
~
-参考：テンプレート http://www.oswd.org/designs/browse/
~
~
**ファイルのアップロードについて
作成したファイル(群)は、Webサーバーにアップして「公開」と...
[[詳しくはこちら>FTP]]};
-FTPクライアントソフト(FileZilla)を起動。
-FTPサーバー（ホスト名）、ユーザID、パスワード の３つを入...
-一般的にはウインドウの左側があなたのPC（ローカルマシン）...
-左のウインドウから右のウインドウへ「アップロード」します...
-アップロードの仕方とアクセス方法は以下ような関係がありま...
--ドキュメントルート直下の ''index.html''(トップページ) ...
http://xxxxxxxx.com/
--ドキュメントルート直下の test.html を閲覧する場合
http://xxxxxxxx.com/test.html
--ドキュメントルート直下にsampleフォルダ(中にindex.html)...
http://xxxxxxxx.com/sample/
つまり、サーバー（ディレクトリ）がひとつあれば、フォルダ...
~
~
**最後に
~
-Webサイトはオープンなソースコードでできているので、ブラ...
右クリック ＞ ページのソースを表示
とすると、そのページのHTMLソースを見ることができます。ま...
-本講習では、HTML+CSS のみでWebページをつくる演習を行いま...
~
~
~
~
ページ名:
