CSS
をテンプレートにして作成
LECTURE
担当科目一覧
コンピュータ概論/2024
データサイエンス/2024
3DCG演習/2024
情報デザイン研究/2024
卒業研究/2024
KEYWORDS
WEB DESIGN
SOCIAL DESIGN
SQUARES
LINKS
九州産業大学
芸術学部
芸術研究科
九産大美術館
九産大図書館
年間スケジュール
動画ニュース他
交通情報
気象・環境情報
危機に備えて
K'sLife
Office365Mail
Tools
SEARCH
開始行:
*CSS
Cascading Style Sheets
~
#image("html_css.png",right,45%)
CSS（Cascading Style Sheets）は一般にスタイルシートと呼ば...
文書というものは、タイトル、見出し、本文、箇条書きなど...
CSSを記述する（つまりスタイルを定義する）ことにより、ペ...
-[[CSS/Sample]]
-[[CSS/Selector]]
~
***CONTENTS
#contents2_1
~
**CSSの３つの書き方
CSSを記述する方法は３つあります。
-1) HTMLファイルに書かれた各タグの中に直接書く
-2) HTMLファイルのヘッダー部分にまとめて書く
-3) HTMLファイルとは独立した別のファイルに書く（ 拡張子は...
結論から言うと、3つめが最も推奨される方法です。
以下、それぞれの書き方を紹介しますが、1. と 2. は非推奨で...
~
***1. HTMLファイルに書かれた各タグの中に直接書く
以下のように書くと、h1 の文字色が赤、文字サイズが 24px に...
<h1 style="color: red; font-size:24px; ">HOME</h1>
~
***2. HTMLファイルのヘッダー部分にまとめて書く
以下の例では、h1の見出しの背景色が赤になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>SamplePage</title>
<style type="text/css">
<!--
h1 {
background-color : red;
}
-->
</style>
</head>
<body>
<h1>HOME</h1>
<p>
本文
</p>
</body>
</html>
上のソースコードの中では、以下の3行の部分がCSSです。
「h1の部分の背景色を赤にする」という指示が書かれています。
h1 {
background-color : red;
}
~
***3. HTMLファイルとは独立した別のファイルに書く(推奨)
これが、もっとも推奨される方法です。
-HTMLとCSSの役割を以下のように明確に区別して、相互に関連...
--HTMLには、文書の構造と内容（タイトル、見出し、本文など...
--CSSには、そのビジュアル（レイアウト、色、サイズなど）を...
--HTMLとCSS、２つのファイル を連携させてページをレンダリ...
--すべてのページ(HTML)を、原則１つのCSSファイルで制御する
-HTMLファイル側に必要な記述
HTMLの <head> の中に、以下の一行を挿入します。
// <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="style.css">
これはCSSファイル ''style.css'' をリンクして利用すること...
-CSSファイル側の記述
以下のように指示を列挙するかたちで記述します。
body {
background-color: silver;
}
#container {
width: 800px;
margin: auto;
background-color: white;
}
この例では、bodyの背景色がシルバー、コンテナの幅が800px・...
~
以下、この３つめの方法、すなわち、''HTMLとCSSはそれぞれ別...
~
~
**HTML+CSSで組む
上記３の方法を実際に体験してみましょう。はじめに''Webサイ...
~
***index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title> [ サイトのタイトル ] </title>
</head>
<body>
<div id="container">
<header>
この領域には、ページ見出しやロゴが入ります
</header>
<nav>
この領域には、メニューが入ります
</nav>
<div id="contents">
この領域には、見出し、本文、画像などの
ページの主な内容が入ります
</div>
<footer>
この領域には、署名等の情報が入ります
</footer>
</div>
</body>
</html>
~
***style.css
body {
background-color: silver;
}
#container {
width: 800px;
margin: auto;
background-color: white;
}
header {
padding: 40px;
height: 80px;
}
nav {
padding: 8px 40px;
background-color: black;
color: white;
}
#contents{
padding: 40px;
height : 400px;
}
footer {
padding: 40px;
height: 40px;
background-color : black;
color: white;
}
~
***動作確認
以下のように見えるはずです。
https://koichi-inoue.github.io/CSS_Sample_00/
~
~
**CSSの書式
***基本フォーマット
CSSでは、「見出し(h1)の・背景色を・赤に」のように、''どの...
&size(10){コロン（：）とセミコロン（；）を間違えないよう...
セレクタ（どの部分の） {
プロパティー（何を） : 値（どうする） ;
プロパティー（何を） : 値（どうする） ;
:
}
ひとつのセレクタに複数の指示を与えることができます。
具体に書くと以下のようなイメージです
h1 {
background-color: red;
color : white;
}
~
***CSSにおけるコメントアウトについて
/* color: red; */
のように /* と */ で一定範囲を囲むと、コメント扱いとな...
後で使う可能性のある記述を一時機能停止させたい場合にも使...
~
***記載の順序
CSSファイル内に記載された事項は、基本的に上から順に処理さ...
本格的なサイト構築では、開発チームが定めたコーディングル...
-1) 全体に統一的に利用するルールの定義
--余白を０にするなどのリセット指示
--body（フォント）, a（リンクの色）, p（本文文字サイズ、...
-2) レイアウトに関わる項目をページの上から下へ順に記載
--.header, .nav, .main-content, .aside, .footer など
-3) ページごとに異なる例外事項の上書き指示（追加のCSS）
~
~
**セレクタ
***様々なセレクタ
セレクタは「対象」を特定するキーワードであり、思い通りの...
-要素タグ名
例：<h2> の 文字サイズを18pxに設定するCSS
h2 { font-size: 18px; }
-ID名（任意）
例： <div id="contents"> の背景色を赤にするCSS
#contents { background-color: red; }
&small(ID名の命名には一般に camelCase を使います。);
-クラス名（任意）
例：<span class="note"> の文字を赤にするCSS
.note { color: red; }
&small(クラス名の命名には一般に chain-case を使います。);
&color(red){はじめての方は、上記の３種類のセレクタを使っ...
参考：[[CSS/CodingRule]] ← &small(ある程度経験してから読...
~
***セレクタの具体例
-セレクタ＝既存のタグの場合
＜body＞や＜h1＞など、HTMLタグ要素に対してスタイルを定義...
h1 {
background-color : gray;
}
-セレクタ＝特定のブロック内のタグの場合
＜nav＞の内部にある＜li＞タグにのみスタイル定義する場合
nav li{
background-color : gray;
}
-セレクタ＝ID要素の場合 &color(red){CSS側には # を付けて...
＜div id="block01"＞など、IDに対してスタイル定義する場合
#block01 {
background-color : gray;
}
-セレクタ＝クラス要素の場合 &color(red){CSS側には . を付...
＜span class="text-style-01"＞など、クラスに対してスタイ...
.text-style-01 {
font-weight : bold;
}
''補足''：複数のクラスを適用させる場合
以下のようにクラス名を''半角''スペースで区切って列挙する...
HTML側の記述
<span class="text-style-01 text-style-02">
CSS側の記述
.text-style-01 { font-weight : bold; }
.text-style-02 { color : red; }
より詳細な書き方については [[CSS/Selector]]をご覧下さい。
~
~
&aname(css1);
~
**要素の属性定義
***色・背景
Webサイトの文字や背景の色には、RGB値を16進数で表す16進ト...
-16進トリプレット
先頭に # を書いて、赤・緑・青の順に、各２桁の計６桁を書く...
各成分は 00〜FF（0～255） の光度（intensity）で表現され、...
color : #rrggbb;
-X11 Colors
HTML と CSS に準拠したウェブブラウザで一般化している色名...
color : Maroon;
background-color: white;
配色等については右のページをご覧下さい。＞ [[WebDesign/Co...
-背景画像
背景に画像を使う場合は以下の要領
background-image : url("images/back.gif");
以下、#containerの背景に画像を適用する書き方の例です。
#container{
:
background-image:url(images/back.jpg);
background-repeat:no-repeat;
background-color:#5d0a04; ←画像とシームレスにつながる色
:
}
-背景の表示方法
--サイズに関する制御
https://developer.mozilla.org/ja/docs/Web/CSS/background-...
--繰り返しに関する制御
https://developer.mozilla.org/ja/docs/Web/CSS/background-...
~
***文字
フォント系とテキスト属性で以下のような事項を定義できます。
-font-family:
-font-size:
-font-style:
-font-weight:
-text-align:
-text-decoration:
-line-height:
-letter-spacing:
~
***サイズの単位について
Webサイト上の大きさを指定するには、画面サイズに対して最も...
-px：画素数で指定。画面のサイズ（例えば、1920x1080）に対...
-%：親要素の幅に対する子要素の幅を比率で指定するもの
-em：文字の高さを基準にした単位。1emは1文字分で、環境によ...
この単位は、親要素に対する比率になるので、同じ1.5emでも...
-rem：root+em の略で、ルート要素のフォントサイズを継承し...
~
***ユニバーサルセレクタ [ * ]
ユニバーサルセレクタ（全称セレクタ）は、全ての要素に共通...
CSSにはデフォルト値があり、CSS指定を一切行わなくても適...
* {
margin:0;
padding:0;
line-height: 100%;
list-style-type: none;
text-decoration: none;
}
注意） ここで、 margin: 10px; などとしてしまうと、すべて...
~
&aname(css2);
~
**レイアウトの基礎
CSSによるレイアウト作業は、''大きな箱の中に小さな箱を詰め...
#image("CSS/html_css.png",right,45%)
HTMLの要素タグ、すなわち個々の「箱」は、「入れ子」状に詰...
#clear
~
***HTML5 Semantic
Webサイトのレイアウトには定番のスタイルがあって、似たもの...
[[GoogleImage:HTML5 Semantic]]
-HTMLには一般にセクションタグと呼ばれる以下のような「箱」...
--header：ロゴやサイトタイトルが入る場所（必須）
--nav：ナビゲーション・メニュー（必須）
--main：主たる記事が入る部分
---section：章
---article：記事
---aside：サイドバー
--footer：サイトの管理者情報等（必須）
-レイアウト作業を行う際は、これらのセクションがどのように...
[[GoogleImage:Web ワイヤーフレーム]]
~
***ブロック要素とインライン要素
ページレイアウトの際には、ブロックとインラインというスタ...
-ブロック：「箱」として扱われるスタイル。回り込みを可能に...
h1, h2・・, div, p, li, header, footer, nav, ・・
-インライン：「文字列」と同等に順次横方向に並ぶように置か...
a, img, span, iframe・・
-スタイルシートでは、セレクタに対して以下のような ''displ...
--inline・・・インラインボックス
--block・・・ブロックボックス
--inline-block・・・インラインだが、高さ, 幅, margin, pad...
--table・・・table要素のような表示になる
--table-cell・・・td要素のような表示になる
-デフォルトではインラインとなる < img > をブロックで扱い...
img {
display : block;
width: 70%;
};
-デフォルトでブロックとなる < h1 > をインラインで扱いたい...
h1 { display : inline; };
参考：[[ブロックとインライン>Google: ブロックとインライン]]
~
***余白と境界
箱詰め作業の際には、箱の大きさの把握が重要で、特に margin...
-margin 境界線の外側の余白
-border 境界線
-padding 境界線の内側の余白
-width, height 幅と高さ
''補足''
余白を全角スペースや、<br>でつくるのはやめましょう。スペ...
また、日本語の環境では、全角スペースが要素と要素の隙間（...
~
***ボックスモデル
#lightbox(boxModel.png,right,around,30%)
箱のサイズに関わるプロパティーがどのような関係になるか定...
''このモデルは box-sizing プロパティー（content-box と bo...
''詳細については、[[CSS/BoxModel]] をご覧下さい。''
~
~
**レイアウトの手法
***Float を用いたレイアウト
HTMLのブロック要素は通常上から下へと縦に配列されますが、...
''詳細については、[[CSS/Float]] をご覧下さい。''
~
***Flexbox を用いたレイアウト
CSS3で登場したレイアウト仕様です。2016年ごろに、ほぼすべ...
#image(BoxLayout.png,right,30%)
Flexboxの利用を前提に、ボックスの組み方を工夫すると、レイ...
#clear
''詳細については、[[CSS/Flexbox]] をご覧下さい。''
~
***Grid Layout を用いたレイアウト
CSS Grid Layoutは、格子状の配置・結合が簡単に実装できる C...
親要素（コンテナ）に display: grid; と書いてレイアウト...
''詳細については、[[CSS/GridLayout]] をご覧下さい。''
~
***positionを用いたレイアウト
FloatやFlexboxを用いた「箱詰め作業」では、スペースに余裕...
''詳細については、[[CSS/Position]] をご覧下さい。''
~
~
**レイアウトサンプル
***基本形
#container { header, nav, main { section, aside } , foot...
-DEMO：https://koichi-inoue.github.io/SampleSite
-CODE：https://github.com/koichi-inoue/SampleSite
~
***header の中に nav があるパターン
#image(CSS/sample01.jpg,right,20%)
#container{ header{ nav } , main{ section, aside } , foo...
#clear
~
***main の中に ３つのブロックがあるパターン（３カラム）
#image(CSS/sample02.jpg,right,20%)
#container{ header, main{ nav, section, aside } , footer }
#clear
~
***header, footer が画面幅100%になるパターン
#image(CSS/sample03.jpg,right,20%)
header{ nav } , main{ section, aside } , footer
#clear
上記３つの実現事例（コードまとめ）
-&ref(CSS/LayoutVariations.zip);
~
~
**その他
~
***擬似要素 '':hover''
マウスのロールオーバー（ホバリング）時の処理について、HTM...
-html側の記述
<nav>
<ul>
<li>menu01</li>
<li>menu02</li>
</ul>
</nav>
-css側の記述
nav li:hover { ←擬似クラスといいます。
font-style:italic;
}
~
***擬似要素 '':first-line''
最初の行にだけスタイルを適用できます。
p:first-line {font-weight:bold;}
~
***擬似要素 '':before :after''
before, afterは要素の前後に新たなエレメントを追加します。...
HTML側、CSS側に以下のような記述があると、<p>タグで囲ま...
-html側の記述
<p>これは引用文です</p>
-css側の記述
p:before {
content: "「";
}
p:after {
content: "」";
}
-結果
befor afterがない場合 これは引用文です。
befor afterがある場合 「これは引用文です。」
~
***擬似要素 '':first-line''
最初の行にだけスタイルを適用できます。
p:first-line {font-weight:bold;}
~
***ベンダープレフィックスについて
-ベンダープレフィックス（接頭辞）とは、ブラウザが独自の拡...
-主要ブラウザのベンダープレフィックス
-moz- …… Firefox
-webkit- …… Google Chrome、Safari
-o- …… Opera
-ms- …… Microsoft Edge / Internet Explorer
-例えば、CSSアニメーションの transform を例にとると、以下...
XXXX {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); /* 標準記述も加えます*/
：
}
-事例
以下のページ(CSSアニメーションのサンプル)は、プレフィック...
https://design.kyusan-u.ac.jp/SampleSite/CSS_Animation/
-すでに事実上の標準になっているものであれば、プレフィック...
-ブラウザ対応チェック ＞ http://caniuse.com/#search=tra...
~
&aname(hosoku);
~
**CSSを学んでいる方へ｜補足のお話
***''CSSがめんどくさい… '' と感じている方へ。
サイトを構成するページが３〜４ページ程度で、
しかも、すべてのページが異なる見た目で構わない… という場...
CSSの分離などせず、いきなりザクザク作る方が簡単です。
授業では、大規模かつ持続可能なサイトづくりを前提としてい...
Web標準、スタイルシート分離で、「まずはテンプレートを作り...
という段取りで進めるかたちになっています。
現実に標準的なものとして採用されているわけですから
うまく主旨が理解できると「とても理にかなっている」という
印象に変わると思います。
CSSを分離させるメリットが実感できるサイト＞ [[Zen Garden>...
~
***''frame使えば楽なのに…'' と感じている方へ。
残念ながら、今日では「frameの利用」は過去のものとなりつつ...
＞http://w3g.jp/webstandards/optimize/frame
また新しい規格であるHTML５ではframeタグは削除されました。
＞http://www.html5-guide.com/coming/taken.html
このサイトで紹介するような書き方で、すべてのページに同じ...
それでも、「ナビのソースをひとまとめにして楽したい」と...
-[[SSI（Server Side Include）>HTML/Tips]]を使う
-[[PHP]]のincludeモジュールを使う
-[[CMS]]をカスタマイズして使う
などの方法を検討してみて下さい。
サーバーサイドの知識が必要ですが、関心のある方は是非挑戦...
~
***CSSファイルを分離するメリット
通常Webサイトは、まったく同じ雛形から生成された複数のペー...
ということは、例えば１００ページ以上ある大きなサイトでも...
もし、個々のページ（HTML）にビジュアルの定義（例えば背景...
CSSを記述したファイルを、春バージョン、夏バージョンなどと...
-CSSを分離させるメリットが実感できるサイト ： [[Zen Garde...
同一のHTMLに対して、様々なCSSを適用させる事例を紹介したサ...
~
***CSS分離のメリットが無いケース
例えば個人のサイトで「全部で5ページ程度、しかもすべてのペ...
CSSを分離するメリットは、あくまでも「同一構造の複数ペー...
~
~
終了行:
*CSS
Cascading Style Sheets
~
#image("html_css.png",right,45%)
CSS（Cascading Style Sheets）は一般にスタイルシートと呼ば...
文書というものは、タイトル、見出し、本文、箇条書きなど...
CSSを記述する（つまりスタイルを定義する）ことにより、ペ...
-[[CSS/Sample]]
-[[CSS/Selector]]
~
***CONTENTS
#contents2_1
~
**CSSの３つの書き方
CSSを記述する方法は３つあります。
-1) HTMLファイルに書かれた各タグの中に直接書く
-2) HTMLファイルのヘッダー部分にまとめて書く
-3) HTMLファイルとは独立した別のファイルに書く（ 拡張子は...
結論から言うと、3つめが最も推奨される方法です。
以下、それぞれの書き方を紹介しますが、1. と 2. は非推奨で...
~
***1. HTMLファイルに書かれた各タグの中に直接書く
以下のように書くと、h1 の文字色が赤、文字サイズが 24px に...
<h1 style="color: red; font-size:24px; ">HOME</h1>
~
***2. HTMLファイルのヘッダー部分にまとめて書く
以下の例では、h1の見出しの背景色が赤になります。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>SamplePage</title>
<style type="text/css">
<!--
h1 {
background-color : red;
}
-->
</style>
</head>
<body>
<h1>HOME</h1>
<p>
本文
</p>
</body>
</html>
上のソースコードの中では、以下の3行の部分がCSSです。
「h1の部分の背景色を赤にする」という指示が書かれています。
h1 {
background-color : red;
}
~
***3. HTMLファイルとは独立した別のファイルに書く(推奨)
これが、もっとも推奨される方法です。
-HTMLとCSSの役割を以下のように明確に区別して、相互に関連...
--HTMLには、文書の構造と内容（タイトル、見出し、本文など...
--CSSには、そのビジュアル（レイアウト、色、サイズなど）を...
--HTMLとCSS、２つのファイル を連携させてページをレンダリ...
--すべてのページ(HTML)を、原則１つのCSSファイルで制御する
-HTMLファイル側に必要な記述
HTMLの <head> の中に、以下の一行を挿入します。
// <link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="style.css">
これはCSSファイル ''style.css'' をリンクして利用すること...
-CSSファイル側の記述
以下のように指示を列挙するかたちで記述します。
body {
background-color: silver;
}
#container {
width: 800px;
margin: auto;
background-color: white;
}
この例では、bodyの背景色がシルバー、コンテナの幅が800px・...
~
以下、この３つめの方法、すなわち、''HTMLとCSSはそれぞれ別...
~
~
**HTML+CSSで組む
上記３の方法を実際に体験してみましょう。はじめに''Webサイ...
~
***index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
<title> [ サイトのタイトル ] </title>
</head>
<body>
<div id="container">
<header>
この領域には、ページ見出しやロゴが入ります
</header>
<nav>
この領域には、メニューが入ります
</nav>
<div id="contents">
この領域には、見出し、本文、画像などの
ページの主な内容が入ります
</div>
<footer>
この領域には、署名等の情報が入ります
</footer>
</div>
</body>
</html>
~
***style.css
body {
background-color: silver;
}
#container {
width: 800px;
margin: auto;
background-color: white;
}
header {
padding: 40px;
height: 80px;
}
nav {
padding: 8px 40px;
background-color: black;
color: white;
}
#contents{
padding: 40px;
height : 400px;
}
footer {
padding: 40px;
height: 40px;
background-color : black;
color: white;
}
~
***動作確認
以下のように見えるはずです。
https://koichi-inoue.github.io/CSS_Sample_00/
~
~
**CSSの書式
***基本フォーマット
CSSでは、「見出し(h1)の・背景色を・赤に」のように、''どの...
&size(10){コロン（：）とセミコロン（；）を間違えないよう...
セレクタ（どの部分の） {
プロパティー（何を） : 値（どうする） ;
プロパティー（何を） : 値（どうする） ;
:
}
ひとつのセレクタに複数の指示を与えることができます。
具体に書くと以下のようなイメージです
h1 {
background-color: red;
color : white;
}
~
***CSSにおけるコメントアウトについて
/* color: red; */
のように /* と */ で一定範囲を囲むと、コメント扱いとな...
後で使う可能性のある記述を一時機能停止させたい場合にも使...
~
***記載の順序
CSSファイル内に記載された事項は、基本的に上から順に処理さ...
本格的なサイト構築では、開発チームが定めたコーディングル...
-1) 全体に統一的に利用するルールの定義
--余白を０にするなどのリセット指示
--body（フォント）, a（リンクの色）, p（本文文字サイズ、...
-2) レイアウトに関わる項目をページの上から下へ順に記載
--.header, .nav, .main-content, .aside, .footer など
-3) ページごとに異なる例外事項の上書き指示（追加のCSS）
~
~
**セレクタ
***様々なセレクタ
セレクタは「対象」を特定するキーワードであり、思い通りの...
-要素タグ名
例：<h2> の 文字サイズを18pxに設定するCSS
h2 { font-size: 18px; }
-ID名（任意）
例： <div id="contents"> の背景色を赤にするCSS
#contents { background-color: red; }
&small(ID名の命名には一般に camelCase を使います。);
-クラス名（任意）
例：<span class="note"> の文字を赤にするCSS
.note { color: red; }
&small(クラス名の命名には一般に chain-case を使います。);
&color(red){はじめての方は、上記の３種類のセレクタを使っ...
参考：[[CSS/CodingRule]] ← &small(ある程度経験してから読...
~
***セレクタの具体例
-セレクタ＝既存のタグの場合
＜body＞や＜h1＞など、HTMLタグ要素に対してスタイルを定義...
h1 {
background-color : gray;
}
-セレクタ＝特定のブロック内のタグの場合
＜nav＞の内部にある＜li＞タグにのみスタイル定義する場合
nav li{
background-color : gray;
}
-セレクタ＝ID要素の場合 &color(red){CSS側には # を付けて...
＜div id="block01"＞など、IDに対してスタイル定義する場合
#block01 {
background-color : gray;
}
-セレクタ＝クラス要素の場合 &color(red){CSS側には . を付...
＜span class="text-style-01"＞など、クラスに対してスタイ...
.text-style-01 {
font-weight : bold;
}
''補足''：複数のクラスを適用させる場合
以下のようにクラス名を''半角''スペースで区切って列挙する...
HTML側の記述
<span class="text-style-01 text-style-02">
CSS側の記述
.text-style-01 { font-weight : bold; }
.text-style-02 { color : red; }
より詳細な書き方については [[CSS/Selector]]をご覧下さい。
~
~
&aname(css1);
~
**要素の属性定義
***色・背景
Webサイトの文字や背景の色には、RGB値を16進数で表す16進ト...
-16進トリプレット
先頭に # を書いて、赤・緑・青の順に、各２桁の計６桁を書く...
各成分は 00〜FF（0～255） の光度（intensity）で表現され、...
color : #rrggbb;
-X11 Colors
HTML と CSS に準拠したウェブブラウザで一般化している色名...
color : Maroon;
background-color: white;
配色等については右のページをご覧下さい。＞ [[WebDesign/Co...
-背景画像
背景に画像を使う場合は以下の要領
background-image : url("images/back.gif");
以下、#containerの背景に画像を適用する書き方の例です。
#container{
:
background-image:url(images/back.jpg);
background-repeat:no-repeat;
background-color:#5d0a04; ←画像とシームレスにつながる色
:
}
-背景の表示方法
--サイズに関する制御
https://developer.mozilla.org/ja/docs/Web/CSS/background-...
--繰り返しに関する制御
https://developer.mozilla.org/ja/docs/Web/CSS/background-...
~
***文字
フォント系とテキスト属性で以下のような事項を定義できます。
-font-family:
-font-size:
-font-style:
-font-weight:
-text-align:
-text-decoration:
-line-height:
-letter-spacing:
~
***サイズの単位について
Webサイト上の大きさを指定するには、画面サイズに対して最も...
-px：画素数で指定。画面のサイズ（例えば、1920x1080）に対...
-%：親要素の幅に対する子要素の幅を比率で指定するもの
-em：文字の高さを基準にした単位。1emは1文字分で、環境によ...
この単位は、親要素に対する比率になるので、同じ1.5emでも...
-rem：root+em の略で、ルート要素のフォントサイズを継承し...
~
***ユニバーサルセレクタ [ * ]
ユニバーサルセレクタ（全称セレクタ）は、全ての要素に共通...
CSSにはデフォルト値があり、CSS指定を一切行わなくても適...
* {
margin:0;
padding:0;
line-height: 100%;
list-style-type: none;
text-decoration: none;
}
注意） ここで、 margin: 10px; などとしてしまうと、すべて...
~
&aname(css2);
~
**レイアウトの基礎
CSSによるレイアウト作業は、''大きな箱の中に小さな箱を詰め...
#image("CSS/html_css.png",right,45%)
HTMLの要素タグ、すなわち個々の「箱」は、「入れ子」状に詰...
#clear
~
***HTML5 Semantic
Webサイトのレイアウトには定番のスタイルがあって、似たもの...
[[GoogleImage:HTML5 Semantic]]
-HTMLには一般にセクションタグと呼ばれる以下のような「箱」...
--header：ロゴやサイトタイトルが入る場所（必須）
--nav：ナビゲーション・メニュー（必須）
--main：主たる記事が入る部分
---section：章
---article：記事
---aside：サイドバー
--footer：サイトの管理者情報等（必須）
-レイアウト作業を行う際は、これらのセクションがどのように...
[[GoogleImage:Web ワイヤーフレーム]]
~
***ブロック要素とインライン要素
ページレイアウトの際には、ブロックとインラインというスタ...
-ブロック：「箱」として扱われるスタイル。回り込みを可能に...
h1, h2・・, div, p, li, header, footer, nav, ・・
-インライン：「文字列」と同等に順次横方向に並ぶように置か...
a, img, span, iframe・・
-スタイルシートでは、セレクタに対して以下のような ''displ...
--inline・・・インラインボックス
--block・・・ブロックボックス
--inline-block・・・インラインだが、高さ, 幅, margin, pad...
--table・・・table要素のような表示になる
--table-cell・・・td要素のような表示になる
-デフォルトではインラインとなる < img > をブロックで扱い...
img {
display : block;
width: 70%;
};
-デフォルトでブロックとなる < h1 > をインラインで扱いたい...
h1 { display : inline; };
参考：[[ブロックとインライン>Google: ブロックとインライン]]
~
***余白と境界
箱詰め作業の際には、箱の大きさの把握が重要で、特に margin...
-margin 境界線の外側の余白
-border 境界線
-padding 境界線の内側の余白
-width, height 幅と高さ
''補足''
余白を全角スペースや、<br>でつくるのはやめましょう。スペ...
また、日本語の環境では、全角スペースが要素と要素の隙間（...
~
***ボックスモデル
#lightbox(boxModel.png,right,around,30%)
箱のサイズに関わるプロパティーがどのような関係になるか定...
''このモデルは box-sizing プロパティー（content-box と bo...
''詳細については、[[CSS/BoxModel]] をご覧下さい。''
~
~
**レイアウトの手法
***Float を用いたレイアウト
HTMLのブロック要素は通常上から下へと縦に配列されますが、...
''詳細については、[[CSS/Float]] をご覧下さい。''
~
***Flexbox を用いたレイアウト
CSS3で登場したレイアウト仕様です。2016年ごろに、ほぼすべ...
#image(BoxLayout.png,right,30%)
Flexboxの利用を前提に、ボックスの組み方を工夫すると、レイ...
#clear
''詳細については、[[CSS/Flexbox]] をご覧下さい。''
~
***Grid Layout を用いたレイアウト
CSS Grid Layoutは、格子状の配置・結合が簡単に実装できる C...
親要素（コンテナ）に display: grid; と書いてレイアウト...
''詳細については、[[CSS/GridLayout]] をご覧下さい。''
~
***positionを用いたレイアウト
FloatやFlexboxを用いた「箱詰め作業」では、スペースに余裕...
''詳細については、[[CSS/Position]] をご覧下さい。''
~
~
**レイアウトサンプル
***基本形
#container { header, nav, main { section, aside } , foot...
-DEMO：https://koichi-inoue.github.io/SampleSite
-CODE：https://github.com/koichi-inoue/SampleSite
~
***header の中に nav があるパターン
#image(CSS/sample01.jpg,right,20%)
#container{ header{ nav } , main{ section, aside } , foo...
#clear
~
***main の中に ３つのブロックがあるパターン（３カラム）
#image(CSS/sample02.jpg,right,20%)
#container{ header, main{ nav, section, aside } , footer }
#clear
~
***header, footer が画面幅100%になるパターン
#image(CSS/sample03.jpg,right,20%)
header{ nav } , main{ section, aside } , footer
#clear
上記３つの実現事例（コードまとめ）
-&ref(CSS/LayoutVariations.zip);
~
~
**その他
~
***擬似要素 '':hover''
マウスのロールオーバー（ホバリング）時の処理について、HTM...
-html側の記述
<nav>
<ul>
<li>menu01</li>
<li>menu02</li>
</ul>
</nav>
-css側の記述
nav li:hover { ←擬似クラスといいます。
font-style:italic;
}
~
***擬似要素 '':first-line''
最初の行にだけスタイルを適用できます。
p:first-line {font-weight:bold;}
~
***擬似要素 '':before :after''
before, afterは要素の前後に新たなエレメントを追加します。...
HTML側、CSS側に以下のような記述があると、<p>タグで囲ま...
-html側の記述
<p>これは引用文です</p>
-css側の記述
p:before {
content: "「";
}
p:after {
content: "」";
}
-結果
befor afterがない場合 これは引用文です。
befor afterがある場合 「これは引用文です。」
~
***擬似要素 '':first-line''
最初の行にだけスタイルを適用できます。
p:first-line {font-weight:bold;}
~
***ベンダープレフィックスについて
-ベンダープレフィックス（接頭辞）とは、ブラウザが独自の拡...
-主要ブラウザのベンダープレフィックス
-moz- …… Firefox
-webkit- …… Google Chrome、Safari
-o- …… Opera
-ms- …… Microsoft Edge / Internet Explorer
-例えば、CSSアニメーションの transform を例にとると、以下...
XXXX {
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg); /* 標準記述も加えます*/
：
}
-事例
以下のページ(CSSアニメーションのサンプル)は、プレフィック...
https://design.kyusan-u.ac.jp/SampleSite/CSS_Animation/
-すでに事実上の標準になっているものであれば、プレフィック...
-ブラウザ対応チェック ＞ http://caniuse.com/#search=tra...
~
&aname(hosoku);
~
**CSSを学んでいる方へ｜補足のお話
***''CSSがめんどくさい… '' と感じている方へ。
サイトを構成するページが３〜４ページ程度で、
しかも、すべてのページが異なる見た目で構わない… という場...
CSSの分離などせず、いきなりザクザク作る方が簡単です。
授業では、大規模かつ持続可能なサイトづくりを前提としてい...
Web標準、スタイルシート分離で、「まずはテンプレートを作り...
という段取りで進めるかたちになっています。
現実に標準的なものとして採用されているわけですから
うまく主旨が理解できると「とても理にかなっている」という
印象に変わると思います。
CSSを分離させるメリットが実感できるサイト＞ [[Zen Garden>...
~
***''frame使えば楽なのに…'' と感じている方へ。
残念ながら、今日では「frameの利用」は過去のものとなりつつ...
＞http://w3g.jp/webstandards/optimize/frame
また新しい規格であるHTML５ではframeタグは削除されました。
＞http://www.html5-guide.com/coming/taken.html
このサイトで紹介するような書き方で、すべてのページに同じ...
それでも、「ナビのソースをひとまとめにして楽したい」と...
-[[SSI（Server Side Include）>HTML/Tips]]を使う
-[[PHP]]のincludeモジュールを使う
-[[CMS]]をカスタマイズして使う
などの方法を検討してみて下さい。
サーバーサイドの知識が必要ですが、関心のある方は是非挑戦...
~
***CSSファイルを分離するメリット
通常Webサイトは、まったく同じ雛形から生成された複数のペー...
ということは、例えば１００ページ以上ある大きなサイトでも...
もし、個々のページ（HTML）にビジュアルの定義（例えば背景...
CSSを記述したファイルを、春バージョン、夏バージョンなどと...
-CSSを分離させるメリットが実感できるサイト ： [[Zen Garde...
同一のHTMLに対して、様々なCSSを適用させる事例を紹介したサ...
~
***CSS分離のメリットが無いケース
例えば個人のサイトで「全部で5ページ程度、しかもすべてのペ...
CSSを分離するメリットは、あくまでも「同一構造の複数ペー...
~
~
ページ名:
