実技講習｜HTML＋CSS
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*HTML + CSS
はじめてのWebデザイン
~
#image(CSS/html_css.png,right,50%)
Webの技術は対外向けの情報発信のみならず、組織内の情報共有...
Webを支える技術には、[[HTML]], [[CSS]], [[JavaScript]],...
//制作からアップロードまで、すべてオープンソースのフリー...
~
//#clear
***CONTENTS
#contents2_1
~
~
**はじめに
//本講習で体験していただくのは、[[HTML]]と[[CSS]]によるWe...
//~
***機器操作について
Macの実習室での作業となります。基本的な操作について確認し...
[[WebDesign/BasicOperations]]
~
***前提の理解
-インターネットとWebの仕組み
Webページがどのような仕組みで表示されるのか、その基本につ...
-Webはオープンな技術です
Webページを記述するHTMLやCSSは、誰でも自由に見ることがで...
-インターネット上には、オープンなプログラムや画像・音声資...
Webページづくりに必要な技術情報はもちろん、Webページの表...
参考：[[OpenSource]] [[FreeMaterials]] [[CreativeCommon...
-様々なサービスの埋め込みが可能です
--YouTube, vimeo などの動画共有サイトには、埋め込みコード...
--GoogleMaps でも埋め込みコードが提供されます。埋め込み可...
--Twitter, Facebook等のサービスでは、タイムラインを埋め込...
-リンクに許諾は不要です
他のWebサイトへのリンクは、単に道案内をしているだけなので...
~
***開発環境の準備
Webデザインには以下の３種類のソフトウエアが必要です。いず...
-作るソフト [[TextEditor]] ＞ [[VisualStudioCode]]
ただ単に文字を入力・編集する・・プログラミングに用いる最...
-見るソフト [[Browser]] ＞ Firefox, Chrome, Safari, Micr...
-転送するソフト [[FTP]] ＞ FileZilla , FFFTP
~
***サイトフォルダの準備
#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（HyperText Markup Language）とは、ページの内容を記述...
HTMLファイルは、ごく普通のテキストファイル（文字が並ん...
~
***HTMLファイルの作成
以下を ''index.html'' という名前で、作業用フォルダに保存...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample Site</title>
</head>
<body>
<div id="container">
<header>
<h1>Sample Page</h1>
</header>
<nav>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="links.html">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をブラウザで表示確認
HTMLファイル（index.html）は、ブラウザのウインドウにドラ...
-アドレスバーに表示されるURLの違い
--通常のネット接続の場合： http：// www.example.com/inde...
--ファイルを表示した場合： file：//・・・・ /index.html
-見出しや文章を適当に書き変えて「保存」してみて下さい。ブ...
~
***HTMLタグの基本
HTMLは、情報要素を以下のような''タグ''でくくる形で記述し...
<◯◯> 〜 </◯◯> ← 前者を開始タグ、後者を終了タグといい...
以下、基本的なものを列挙します。 ＞ [[詳しくはこちら>HT...
-HTML文書の基本構成
--文書の全体：<html> 〜 </html>
--ページに関する前置き情報：<head> 〜 </head>
--ブラウザの主画面に表示される情報：<body> 〜 </body>
-セクション
--汎用区画：div, section, article, aside,
--ヘッダー：header
--ナビ：nav
--メイン：main
--フッター：footer
-見出し：h1, h2, ・・, h6
-水平線：hr
-文章段落：p
-強制改行：br ← 段落内での改行に使用します。
-リンク：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
<img src="images/sample.jpg" width="320">
--src：ソース（情報源）つまり、画像データの所在を記述しま...
--width：幅 height：高さ
--注意：画像データは文字データと比較すると非常に情報量が...
-様々なコンテンツの埋め込み
--YouTube動画の埋め込み <IFRAME>
YouTubeのサイトには「共有」>「埋め込みコード」があります。
それ(以下例)を<body>内にコピー＆ペーストすれば表示されま...
<iframe width="420" height="315"
src="http://www.youtube.com/embed/[動画個別の記号]"
frameborder="0" allowfullscreen></iframe>
--GoogleMapの埋め込み → Googleマップ＞リンク＞埋め込み...
--その他、Twitterのタイムラインの埋め込みなども試してみて...
~
***参考
-[[HTML/Tags]]
-[[GoogleImage:HTML5 Semantic]]
-[[GoogleImage:HTML5 コンテンツモデル]]
-きれいなソースコードを書くために・・・
--TAB, 半角スペースでインデントをとってHTMLを見やすくしま...
--TAB, 半角スペースは表示上は無視されます。
--要素間の「余白」は CSS でコントロールするのが一般的です。
全角スペースを利用した余白や、<br>タグによる連続強制改行...
~
~
**CSS
***CSSとは
CSS（Cascading Style Sheets）は、表示された要素のビジュア...
~
***３種類の記述方法
-HTMLファイル内の各開始タグの中に直接書く（以下 例）
<h1 style="font-size: 24px;">・・・</h1>
-HTMLファイルのヘッダー部分に<style>タグを使ってまとめて...
-HTMLファイルとは独立した別のファイルに書く（ 拡張子は .c...
で、結論から言うと、''３つめを採用するのがWeb標準''で、こ...
~
***CSSファイルの作成
以下のソースコードをテキストエディタにコピー＆ペーストし...
*{
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 ul li{
margin-right: 2rem;
}
nav ul li a {
color: white;
}
main{
display: flex;
flex-direction: row;
}
section{
flex: 3;
padding: 3rem;
background: #EEE;
}
article{
min-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 href="style.css" rel="stylesheet" >
これで、CSSに書かれた内容が、ページのスタイルに反映します。
-''DEMO'' ＞ https://koichi-inoue.github.io/SampleSite/
~
***CSSの記法
CSSでは''どの部分の・何を・どうするか''を記述します。
記述の基本ルールは以下のとおりです。
セレクタ（どの部分の） {
プロパティー（何を） : 値（どうする） ;
プロパティー（何を） : 値（どうする） ;
:
}
HTML内の特定の要素を''セレクタ''で把握し、その要素をどう...
''付記：親要素 / 子孫要素''
階層構造をもつ文書において対象を特定する際に頻出するキー...
<div> ← 親要素
<p> ・・・ </p> ← 子要素
<p> ← 子要素
<span>・・・</span> ← 孫要素
</p>
<p> ・・・ </p> ← 子要素
</div>
~
***CSSセレクタ
''セレクタには、タグ名、ID名、CLASS名 などが使えます。''...
以下、対象を特定するための代表的な方法を紹介します。
-''セレクタ''が既存のタグの場合
＜body＞や＜h1＞など、タグ要素に対してスタイルを定義する...
article {
background-color : gray;
}
タグ要素の中のタグ要素にスタイルを定義する場合
article p {
line-height : 180%;
}
-''セレクタ''が ID 要素の場合
HTML要素に ''id="任意名称"'' を加え、CSSでは ''#任意名称'...
例：<article id="today">
article#today {
font-weight: bold;
}
article#today は、単に #today と記述しても、同様に機能し...
-''セレクタ''が CLASS 要素の場合
HTML要素に ''class="任意名称"'' を加え、CSSでは ''. 任意...
例：<article class="sunday">
article.sunday {
color : red;
}
article.sunday は、単に .sunday と記述しても、同様に機能...
-CSSにおけるコメントアウトについて
/* color: red; */
のように /* と */ で一定範囲を囲むと、コメント扱いとな...
後で使う可能性のある記述を一時機能停止させたい場合にも使...
~
-参考：様々なセレクタの書き方 ＞ [[CSS/Selector]]
~
~
**CSSによるページレイアウト
#image(CSS/html_css.png,right,45%)
CSSによるレイアウト作業は、''大きな箱の中に小さな箱を詰め...
箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜...
//''参考''：[[ZENGARDEN>http://www.mezzoblue.com/zengarde...
//ZENGARDENは、すべてまったく同じHTMLに対し、CSSの差し替...
~
***ワイヤーフレームを描く
ワイヤーフレームとは、HTMLの枠組み構造を図解した「サイト...
[[GoogleImage:Web ワイヤーフレーム]]
~
#image("CSS/boxModel.png",right,40%)
***ボックスモデルを理解する
箱組みをする際には、どこにどのような余白をつくるかが非常...
-margin 境界の外側の余白
-border 境界
-padding 境界の内側の余白
-width, height 内容部分の幅と高さ
参考:[[CSS/BoxModel]]
#clear
~
***ユニバーサルセレクタによる余白のリセット
ブラウザにはデフォルトCSSというものがあって、特に指定のな...
ユニバーサルセレクタ（ * ）を使うと、すべての要素に一斉...
* {
margin: 0;
padding: 0;
line-height: 100%;
list-style-type: none;
text-decoration: none;
}
この例では、すべての要素に対して余白をゼロに、また装飾を...
~
***レイアウトに必須の手法
とりあえず、以下の２つの手法で大半のレイアウトは可能にな...
-[[Flexbox>CSS/Flexbox]]・・子要素を横に並べる
-[[Position>CSS/Position]]・・要素を任意の位置に配置する
~
***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を用いたレイアウト
通常の「箱詰め作業」では、要素同士が重なるような配置はで...
-位置の基準となるブロック（親要素）に
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...
~
~
**演習
サンプルのHTML構造を変えて（ワイヤーフレーム構造を変えて...
-以下のパターンは、サンプルから比較的簡単に変形できます。
#container{ header{ nav} , main{ section, aside } , foot...
#container{ header, main{ nav, section, aside } , footer }
全体を #container で囲むというのは、初歩の体験として全体...
-header, footer が画面幅100%になるパターン
header{ nav } , main{ section, aside } , footer
-シングルページで校正する場合は、以下のようになります。
header, nav, main{ section, section, section ・・}, foo...
~
**ファイルのアップロードについて
作成したファイル(群)は、Webサーバーにアップして「公開」と...
//&color(red){ここでは、説明のみとなります。};
~
***FTPクライアント
ファイルをサーバーにアップロードするにはFTPクライアント（...
-クロスプラットフォームのツール ''FileZilla''
Mac,Win,Linuxすべての環境用が用意されています。オープンソ...
--本家サイト（最新版はインストーラタイプです）
https://filezilla-project.org/download.php
--オールドバージョン（3.9.0.5は解凍するだけで使えます）
http://mac.filehorse.com/download-filezilla/old-versions/
~
#image(FTP/FileZilla.png,right,30%)
//***FTPクライアントの使い方
//-FTPサーバー（ホスト名）、ユーザID、パスワード の３つを...
//-一般的にはウインドウの左側があなたのPC（ローカルマシン...
//-接続先のサーバーには、Webサイトの構成データを格納する...
//-左のウインドウから右のウインドウへ「アップロード」しま...
//
//-アップロードの仕方とアクセス方法は以下ような関係があり...
//--ドキュメントルート直下の ''index.html''(トップページ)...
// http://xxxxxxxx.com/
//--ドキュメントルート直下の ''test.html'' を閲覧する場合
// http://xxxxxxxx.com/test.html
//--ドキュメントルート直下の ''blog'' フォルダ（中にindex...
// http://xxxxxxxx.com/blog/
//
//つまり、サーバー（ディレクトリ）がひとつあれば、フォル...
//~
***大学のサーバーにアップロード
学生個々人にメールアドレスとホームページ作成用のエリアが...
http://www.kyusan-u.ac.jp/~k19asXXX
-FileZillaを起動します（実習室にはインストール済みです）
-以下の３つの情報を入力して接続します。
--サーバー → ''ftp.ip.kyusan-u.ac.jp'' または直接 ''13...
--ユーザID → K'sLifeで用いているもの
--パスワード → K'sLifeで用いているもの
-接続に成功すると
--ウインドウ右側に、学生個々の個人ディレクトリが見えます...
--''WWW-KSU''というフォルダがWeb公開練習用のフォルダです。
-アップロード
制作中のフォルダ内の各ファイルを、''WWW-KSUフォルダの中へ...
２回目以降（つまりページの更新時）は「上書き」することに...
学内からのみの閲覧とはいえ、不特定多数の人から見える状態...
-アップロードに関する補足（アップしても表示されない場合）
www.kyusan-u.ac.jp/~k19asXXX/ でアクセスできるようにする...
--ホームディレクトリ直下（WWW-KSU の外）にアップした場合
これは基本的にアクセスできません。
--WWW-KSU 直下に index.htmlが無い場合（例えば top.html と...
・・・ac.jp/~k19asXXX/top.html と直接指定すれば閲覧可能で...
--WWW-KSU 直下にサイトのフォルダごとアップした場合
・・・.ac.jp/~k19asXXX/[フォルダ名] と指定すれば閲覧可能...
-ブックマークツールバーの活用
--ローカルにある index.html のブックマーク
file://・・・/デスクトップ/website/index.html
--リモートにある index.html のブックマーク
http://www.kyusan-u.ac.jp/~z00zc000/
//~
//~
~
~
終了行:
*HTML + CSS
はじめてのWebデザイン
~
#image(CSS/html_css.png,right,50%)
Webの技術は対外向けの情報発信のみならず、組織内の情報共有...
Webを支える技術には、[[HTML]], [[CSS]], [[JavaScript]],...
//制作からアップロードまで、すべてオープンソースのフリー...
~
//#clear
***CONTENTS
#contents2_1
~
~
**はじめに
//本講習で体験していただくのは、[[HTML]]と[[CSS]]によるWe...
//~
***機器操作について
Macの実習室での作業となります。基本的な操作について確認し...
[[WebDesign/BasicOperations]]
~
***前提の理解
-インターネットとWebの仕組み
Webページがどのような仕組みで表示されるのか、その基本につ...
-Webはオープンな技術です
Webページを記述するHTMLやCSSは、誰でも自由に見ることがで...
-インターネット上には、オープンなプログラムや画像・音声資...
Webページづくりに必要な技術情報はもちろん、Webページの表...
参考：[[OpenSource]] [[FreeMaterials]] [[CreativeCommon...
-様々なサービスの埋め込みが可能です
--YouTube, vimeo などの動画共有サイトには、埋め込みコード...
--GoogleMaps でも埋め込みコードが提供されます。埋め込み可...
--Twitter, Facebook等のサービスでは、タイムラインを埋め込...
-リンクに許諾は不要です
他のWebサイトへのリンクは、単に道案内をしているだけなので...
~
***開発環境の準備
Webデザインには以下の３種類のソフトウエアが必要です。いず...
-作るソフト [[TextEditor]] ＞ [[VisualStudioCode]]
ただ単に文字を入力・編集する・・プログラミングに用いる最...
-見るソフト [[Browser]] ＞ Firefox, Chrome, Safari, Micr...
-転送するソフト [[FTP]] ＞ FileZilla , FFFTP
~
***サイトフォルダの準備
#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（HyperText Markup Language）とは、ページの内容を記述...
HTMLファイルは、ごく普通のテキストファイル（文字が並ん...
~
***HTMLファイルの作成
以下を ''index.html'' という名前で、作業用フォルダに保存...
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Sample Site</title>
</head>
<body>
<div id="container">
<header>
<h1>Sample Page</h1>
</header>
<nav>
<ul>
<li><a href="index.html">home</a></li>
<li><a href="about.html">about</a></li>
<li><a href="gallery.html">gallery</a></li>
<li><a href="links.html">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をブラウザで表示確認
HTMLファイル（index.html）は、ブラウザのウインドウにドラ...
-アドレスバーに表示されるURLの違い
--通常のネット接続の場合： http：// www.example.com/inde...
--ファイルを表示した場合： file：//・・・・ /index.html
-見出しや文章を適当に書き変えて「保存」してみて下さい。ブ...
~
***HTMLタグの基本
HTMLは、情報要素を以下のような''タグ''でくくる形で記述し...
<◯◯> 〜 </◯◯> ← 前者を開始タグ、後者を終了タグといい...
以下、基本的なものを列挙します。 ＞ [[詳しくはこちら>HT...
-HTML文書の基本構成
--文書の全体：<html> 〜 </html>
--ページに関する前置き情報：<head> 〜 </head>
--ブラウザの主画面に表示される情報：<body> 〜 </body>
-セクション
--汎用区画：div, section, article, aside,
--ヘッダー：header
--ナビ：nav
--メイン：main
--フッター：footer
-見出し：h1, h2, ・・, h6
-水平線：hr
-文章段落：p
-強制改行：br ← 段落内での改行に使用します。
-リンク：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
<img src="images/sample.jpg" width="320">
--src：ソース（情報源）つまり、画像データの所在を記述しま...
--width：幅 height：高さ
--注意：画像データは文字データと比較すると非常に情報量が...
-様々なコンテンツの埋め込み
--YouTube動画の埋め込み <IFRAME>
YouTubeのサイトには「共有」>「埋め込みコード」があります。
それ(以下例)を<body>内にコピー＆ペーストすれば表示されま...
<iframe width="420" height="315"
src="http://www.youtube.com/embed/[動画個別の記号]"
frameborder="0" allowfullscreen></iframe>
--GoogleMapの埋め込み → Googleマップ＞リンク＞埋め込み...
--その他、Twitterのタイムラインの埋め込みなども試してみて...
~
***参考
-[[HTML/Tags]]
-[[GoogleImage:HTML5 Semantic]]
-[[GoogleImage:HTML5 コンテンツモデル]]
-きれいなソースコードを書くために・・・
--TAB, 半角スペースでインデントをとってHTMLを見やすくしま...
--TAB, 半角スペースは表示上は無視されます。
--要素間の「余白」は CSS でコントロールするのが一般的です。
全角スペースを利用した余白や、<br>タグによる連続強制改行...
~
~
**CSS
***CSSとは
CSS（Cascading Style Sheets）は、表示された要素のビジュア...
~
***３種類の記述方法
-HTMLファイル内の各開始タグの中に直接書く（以下 例）
<h1 style="font-size: 24px;">・・・</h1>
-HTMLファイルのヘッダー部分に<style>タグを使ってまとめて...
-HTMLファイルとは独立した別のファイルに書く（ 拡張子は .c...
で、結論から言うと、''３つめを採用するのがWeb標準''で、こ...
~
***CSSファイルの作成
以下のソースコードをテキストエディタにコピー＆ペーストし...
*{
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 ul li{
margin-right: 2rem;
}
nav ul li a {
color: white;
}
main{
display: flex;
flex-direction: row;
}
section{
flex: 3;
padding: 3rem;
background: #EEE;
}
article{
min-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 href="style.css" rel="stylesheet" >
これで、CSSに書かれた内容が、ページのスタイルに反映します。
-''DEMO'' ＞ https://koichi-inoue.github.io/SampleSite/
~
***CSSの記法
CSSでは''どの部分の・何を・どうするか''を記述します。
記述の基本ルールは以下のとおりです。
セレクタ（どの部分の） {
プロパティー（何を） : 値（どうする） ;
プロパティー（何を） : 値（どうする） ;
:
}
HTML内の特定の要素を''セレクタ''で把握し、その要素をどう...
''付記：親要素 / 子孫要素''
階層構造をもつ文書において対象を特定する際に頻出するキー...
<div> ← 親要素
<p> ・・・ </p> ← 子要素
<p> ← 子要素
<span>・・・</span> ← 孫要素
</p>
<p> ・・・ </p> ← 子要素
</div>
~
***CSSセレクタ
''セレクタには、タグ名、ID名、CLASS名 などが使えます。''...
以下、対象を特定するための代表的な方法を紹介します。
-''セレクタ''が既存のタグの場合
＜body＞や＜h1＞など、タグ要素に対してスタイルを定義する...
article {
background-color : gray;
}
タグ要素の中のタグ要素にスタイルを定義する場合
article p {
line-height : 180%;
}
-''セレクタ''が ID 要素の場合
HTML要素に ''id="任意名称"'' を加え、CSSでは ''#任意名称'...
例：<article id="today">
article#today {
font-weight: bold;
}
article#today は、単に #today と記述しても、同様に機能し...
-''セレクタ''が CLASS 要素の場合
HTML要素に ''class="任意名称"'' を加え、CSSでは ''. 任意...
例：<article class="sunday">
article.sunday {
color : red;
}
article.sunday は、単に .sunday と記述しても、同様に機能...
-CSSにおけるコメントアウトについて
/* color: red; */
のように /* と */ で一定範囲を囲むと、コメント扱いとな...
後で使う可能性のある記述を一時機能停止させたい場合にも使...
~
-参考：様々なセレクタの書き方 ＞ [[CSS/Selector]]
~
~
**CSSによるページレイアウト
#image(CSS/html_css.png,right,45%)
CSSによるレイアウト作業は、''大きな箱の中に小さな箱を詰め...
箱は、入れ子状に詰めるのが基本です。外の箱と中の箱が錯綜...
//''参考''：[[ZENGARDEN>http://www.mezzoblue.com/zengarde...
//ZENGARDENは、すべてまったく同じHTMLに対し、CSSの差し替...
~
***ワイヤーフレームを描く
ワイヤーフレームとは、HTMLの枠組み構造を図解した「サイト...
[[GoogleImage:Web ワイヤーフレーム]]
~
#image("CSS/boxModel.png",right,40%)
***ボックスモデルを理解する
箱組みをする際には、どこにどのような余白をつくるかが非常...
-margin 境界の外側の余白
-border 境界
-padding 境界の内側の余白
-width, height 内容部分の幅と高さ
参考:[[CSS/BoxModel]]
#clear
~
***ユニバーサルセレクタによる余白のリセット
ブラウザにはデフォルトCSSというものがあって、特に指定のな...
ユニバーサルセレクタ（ * ）を使うと、すべての要素に一斉...
* {
margin: 0;
padding: 0;
line-height: 100%;
list-style-type: none;
text-decoration: none;
}
この例では、すべての要素に対して余白をゼロに、また装飾を...
~
***レイアウトに必須の手法
とりあえず、以下の２つの手法で大半のレイアウトは可能にな...
-[[Flexbox>CSS/Flexbox]]・・子要素を横に並べる
-[[Position>CSS/Position]]・・要素を任意の位置に配置する
~
***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を用いたレイアウト
通常の「箱詰め作業」では、要素同士が重なるような配置はで...
-位置の基準となるブロック（親要素）に
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...
~
~
**演習
サンプルのHTML構造を変えて（ワイヤーフレーム構造を変えて...
-以下のパターンは、サンプルから比較的簡単に変形できます。
#container{ header{ nav} , main{ section, aside } , foot...
#container{ header, main{ nav, section, aside } , footer }
全体を #container で囲むというのは、初歩の体験として全体...
-header, footer が画面幅100%になるパターン
header{ nav } , main{ section, aside } , footer
-シングルページで校正する場合は、以下のようになります。
header, nav, main{ section, section, section ・・}, foo...
~
**ファイルのアップロードについて
作成したファイル(群)は、Webサーバーにアップして「公開」と...
//&color(red){ここでは、説明のみとなります。};
~
***FTPクライアント
ファイルをサーバーにアップロードするにはFTPクライアント（...
-クロスプラットフォームのツール ''FileZilla''
Mac,Win,Linuxすべての環境用が用意されています。オープンソ...
--本家サイト（最新版はインストーラタイプです）
https://filezilla-project.org/download.php
--オールドバージョン（3.9.0.5は解凍するだけで使えます）
http://mac.filehorse.com/download-filezilla/old-versions/
~
#image(FTP/FileZilla.png,right,30%)
//***FTPクライアントの使い方
//-FTPサーバー（ホスト名）、ユーザID、パスワード の３つを...
//-一般的にはウインドウの左側があなたのPC（ローカルマシン...
//-接続先のサーバーには、Webサイトの構成データを格納する...
//-左のウインドウから右のウインドウへ「アップロード」しま...
//
//-アップロードの仕方とアクセス方法は以下ような関係があり...
//--ドキュメントルート直下の ''index.html''(トップページ)...
// http://xxxxxxxx.com/
//--ドキュメントルート直下の ''test.html'' を閲覧する場合
// http://xxxxxxxx.com/test.html
//--ドキュメントルート直下の ''blog'' フォルダ（中にindex...
// http://xxxxxxxx.com/blog/
//
//つまり、サーバー（ディレクトリ）がひとつあれば、フォル...
//~
***大学のサーバーにアップロード
学生個々人にメールアドレスとホームページ作成用のエリアが...
http://www.kyusan-u.ac.jp/~k19asXXX
-FileZillaを起動します（実習室にはインストール済みです）
-以下の３つの情報を入力して接続します。
--サーバー → ''ftp.ip.kyusan-u.ac.jp'' または直接 ''13...
--ユーザID → K'sLifeで用いているもの
--パスワード → K'sLifeで用いているもの
-接続に成功すると
--ウインドウ右側に、学生個々の個人ディレクトリが見えます...
--''WWW-KSU''というフォルダがWeb公開練習用のフォルダです。
-アップロード
制作中のフォルダ内の各ファイルを、''WWW-KSUフォルダの中へ...
２回目以降（つまりページの更新時）は「上書き」することに...
学内からのみの閲覧とはいえ、不特定多数の人から見える状態...
-アップロードに関する補足（アップしても表示されない場合）
www.kyusan-u.ac.jp/~k19asXXX/ でアクセスできるようにする...
--ホームディレクトリ直下（WWW-KSU の外）にアップした場合
これは基本的にアクセスできません。
--WWW-KSU 直下に index.htmlが無い場合（例えば top.html と...
・・・ac.jp/~k19asXXX/top.html と直接指定すれば閲覧可能で...
--WWW-KSU 直下にサイトのフォルダごとアップした場合
・・・.ac.jp/~k19asXXX/[フォルダ名] と指定すれば閲覧可能...
-ブックマークツールバーの活用
--ローカルにある index.html のブックマーク
file://・・・/デスクトップ/website/index.html
--リモートにある index.html のブックマーク
http://www.kyusan-u.ac.jp/~z00zc000/
//~
//~
~
~
ページ名:
