コンピュータ基礎実習(上級) 第 14 週
「コンピュータ基礎実習(上級)」第 14 週 スタイルシートの練習
今回の授業は、CSS を使った練習問題に回答し、提出してもらいます。
1. CSS の基本(おさらい)
1.1.
CSS とは
CSS は、Cascading Style Sheets の略で、ウェブページの見栄えを設定するための言語です。
HTML でページ内の各要素の意味や構造を定義し、CSS でページの見栄えについて定義することで、
HTML の記述をスッキリさせ、見栄えの編集作業を簡単にします。
2. CSS の書き方
2.1.
基本書式
CSS で設定を記述する際は、どの部分に対して(セレクタ)、どのスタイルを(プロパティ)、どのように(値)適用するかを
記述します。
h1{color:red;}
/* <h1>タグ範囲内の文字色(color)を赤(red)にします。*/
基本的に、セレクタ {プロパティ名:値;} のように記述します。
3. CSS を HTML ファイルで使用する
CSS を HTML 文章に適用するには、大きく分けて 3 つの方法があります。
① 外部 CSS ファイルを読み込んで適用する ( <link>タグ )
② ファイル単位に適用する ( <style>タグ )
③ タグに style 属性を追加して局所的に適用する
3.1.
外部 CSS ファイルを読み込んで適用する ( <link>タグ )
HTML ファイルと別に CSS を記入したファイルを用意して、HTML ファイル内から読み込ませる方法です。
そのためには HTML 文章の<head>タグ内に、以下のような<link>タグを記述し、CSS ファイル名を指定します。
HTML ファイルの内容
<head>
<link rel="stylesheet" type="text/css" href="xxx.css" > /* CSS として xxx.css を読み込む */
</head>
サイト全体に対するデザイン修正のしやすさ などを考慮すると、この方法で CSS を設定するのがおすすめです。
3.2.
タグに style 属性を追加して局所的に適用する
HTML タグに style 属性を追加して、HTML 文章の中に直接 CSS を記述する方法です。
<p style="color:red; line-height:1.5;" >CSS のメリットとは、…</p>
上の例では、指定の<p>タグ範囲のみ、文字色が赤、行間が 1.5 倍の高さになります。
なお style 属性による CSS 設定は、局所的にスタイルを設定する際などには便利ですが、 HTML 記述が複雑になり
がちです。効率良く見栄えを管理するには、 3.1のように外部 CSS ファイルを読み込むのが推奨です。
4. 様々なプロパティ
今週は、CSS で利用できるプロパティをより詳しく解説します。
4.1.
色 に関するプロパティ
CSS では、文字の色や背景の色を color: や background-color: 属性を使って任意に設定できます。
プロパティ
color: 色;
background: 色;
機能
文字の色を変更する。
背景色を変更する。
CSS の特性上、どんな範囲に対しても 文字色 や 背景色 の設定ができるので、うまく応用してください。
4.2.
罫線 に関するプロパティ
<div>タグなどのブロック要素をページ上に作ると、指定した部分を囲う四角形の範囲が定義されます。
この範囲の周囲に罫線を引くことができるのが、以下の罫線に関するプロパティです。
-1-
コンピュータ基礎実習(上級) 第 14 週
プロパティ
border: 線種 太さ 色;
border-top: 線種 太さ 色;
border-bottom: 線種 太さ 色;
border-left: 線種 太さ 色;
border-right: 線種 太さ 色;
機能
範囲の周囲全体に罫線を引く。
それぞれ、範囲の上(top)、下(bottom)、左(left)、右(right) にだけ罫線を引く。
border 関連プロパティでは、値として罫線の 線種 太さ 色 を 1 つ以上のスペースで区切って記述します。
(例) border: solid 1px red;
線種には、none(線を引かない)、solid(一本線)、double(二本線)、dashed(破線)、dotted(点線) 等の種類があります。
太さには、罫線の太さを、単位を付けて指定します。
色には、カラーネーム(black など) や カラーコード(#FF00FF など)が記入できます。
あらゆる範囲の周囲に罫線を引くことができるので、コラムやメニュー等を作るのに役立ちます。
4.3.
CSS における長さの単位
CSS で 幅 や 高さ、線の太さ など長さを記述する時は単位をかならず記入する必要があります。(例外として、値
が 0 の時は単位を省略できます。)
代表的な単位には次のようなものがあります。
単位
詳細
em 要素のフォントサイズ。文字 'M' の横幅が語源。
ex
文字 'x' の高さ(x-height)。
cm センチメートル(1cm=10mm)。
mm ミリメートル(10mm=1cm)
in
インチ(1in=2.54cm)
px
ピクセル(1px=1/96in)
pt
ポイント(1pt=1/72in) フォントの大きさ等
文字などに関しては em など、画像などに関して
は px を使うとよいでしょう。
単位を省略すると正しく動作しない場合がある
ので注意しましょう。
4.4.
(例)
<div style="line-height:1.5em">
行間を<br>広めに取ります。
</div>
line-height プロパティで 1.5em に設定すると
行間は 1.5 文字分になります。
(例)
<span style="font-size:20px">大きな文字</span>
font-size プロパティで 20px に設定すると
文字の大きさが 20 ピクセル分になります。
(例)
<p style="margin-top:1cm">段落に余白を与える</p>
margin-top プロパティで 1cm と指定すると
段落(<p>)の上部(top)に 1 センチ分の余白(margin)が開きます。
余白に関するプロパティ
HTML では行と行との間隔である行間や、段落の上下の空間(余白)などを設定することが出来ませんでしたが、
CSS ではこのような余白の大きさを厳密に設定できます。
プロパティ
line-height: 数値;
width: 横幅;
height: 縦幅;
margin: 数値;
padding: 数値;
機能
行間を指定します。
要素の横幅を指定します。
要素の縦幅を指定します。
隣の要素との間隔(余白)を指定します。
範囲内に何かを記入する場合に、記入されたものと、範囲の境界線との間隔を指定します。
line-height は行間を、4.3 章で紹介したような単位を付けて指定できます。(例) line-height: 1.5em;
行間が狭く読みにくいと感じる場合は、行間を 1.5em(1.5 文字分)程度あけるとよいでしょう。
width と height は要素の縦横サイズを指定できます。
<div>タグなどに設定すると、四角形範囲の大きさを好きに設定できます。
ページのレイアウトが狂わないよう固定する際などに便利です。
margin と padding はよく似た使い方をします。
margin は領域間の余白、padding は領域内の余白です。(右図参照)
(例) margin: 10px;
領域の外側に 10 ピクセル分の余白が確保されます。
サンプル文章サンプル文章サンプル
margin
padding
サンプル文章
padding
margin
サンプル文章サンプル文章
値を一つ指定した場合は、上下左右の余白が全て同じ値に設定されます。
値を四つ指定した場合は、順に[上][右][下][左]方向のマージンの値となります。(上から時計回り)
-2-
margin
コンピュータ基礎実習(上級) 第 14 週
(例) margin: 50px 10px 50px 10px;
領域の外側に、上 50px 右 10px 下 50px 左 10px の余白が確保されます。
なお、border プロパティのように、 margin-top: padding-right: として上下左右の余白を個別に設定することも
出来ます。 (例) margin-left: 2em;
/* 左に２文字分のマージンを確保 */
4.5.
背景画像 に関するプロパティ
CSS ではあらゆる範囲の背景部分に画像を配置できます。
通常、背景画像は範囲いっぱいにタイル状に敷き詰められて表示されますが、CSS なら表示方法を調整できます。
プロパティ
background: url('ファイル名');
background-repeat: 設定値;
設定値 = repeat-x
repeat-y
no-repeat
background-position: 横 縦;
機能
背景に画像を配置する。 (色指定と同時に行うことも出来る。)
背景画像の敷き詰め方法を指定する。
repeat-x 横方向のみ繰り返して敷き詰める。
repeat-y 縦方向のみ繰り返して敷き詰める。
no-repeat 繰り返さない。(画像は 1 つだけ表示される。)
背景画像の表示位置を指定する。
background-position: left top;
左上に表示
background-position: 10px 20px;
左上から 10px、下に 20px
background-position: left;
left center と同じ
background-position: top;
center top と同じ
background-position: center;
center center と同じ
background-position: 50% 50%;
center center と同じ
background-position: right 20px; bottom:0px;
右から 20px、下から 0px
background プロパティを記述すれば、あらゆる要素に対して背景画像を配置できます。
背景に敷く画像ファイルの名前を、値として指定します。
CSS では他のファイルや他のページの URL を参照する時は、url( ) 関数を使う必要があるので注意してください。
(例) background: url('myface.jpg') ;
背景画像は通常、タイル状に敷き詰められますが、background- repeat プロパティを記述すれば、縦か横方向だけ
に敷き詰めて表示したり、敷き詰めをやめさせたりできます。
(例) background-repeat:repeat-x;
background-repeat プロパティで、
背景にグラーデーションなどをつく
れます。
ページ背景 や 見出し など を
より豪華な見栄えにできます。
repeat-x
横方向に敷き詰められる
元画像
4.6.
各要素の配置 に関するプロパティ
HTML では、文字や画像などがページの左上から改行しつつ下に向かって表示されます。
そのため、画像などを自由な位置に配置することが難しいです。
しかし、CSS なら画像などを自由に配置できます。 ページのレイアウトがより簡単になります。
プロパティ
float: 設定値;
設定値 =
clear: 設定値;
設定値 =
position: 設定値;
設定値 =
left
right
left
right
both
static
absolute
fixed
機能
対象の要素を左または右に寄せて配置する。後に続く内容は反対側に回り込みます。
left 左に寄せる。後に続く内容はその右側に回り込む。
right 右に寄せる。後に続く内容はその左側に回りこむ。
float プロパティで右か左に回りこんでいる状態を解除する。
続く内容は通常、要素の一つ下の行に配置されます。
left 左寄せされた要素の回り込みを解除。
right 右寄せされた要素の回りこみを解除。
both 左右寄せどちらの回り込みも解除。
ブロック要素などを配置する基準位置を設定する。
static
初期設定。
absolute
親となる要素の端を基準位置として絶対的な位置に配置する。
fixed
absolute と似ているが、ページをスクロールしても位置が固定されたまま。
float プロパティを使うと、画像などをページの左か右に寄せられます。 さらに、余ったスペースに文字などを回
-3-
コンピュータ基礎実習(上級) 第 14 週
りこませることができます。
(HTML では通常、画像を左右に寄せた場合、余ったスペースを利用でき
ないため、回りこみを実現するためには<table>タグなどを併用する必
要がありました。)
回りこみを中断し、次の行に進むには clear:both; などを使います。
position プロパティを使うとブロック要素などを配置する位置(基準位
画像(<img>タグ)に
置)を
float:right;を設定した例
指定できます。
基準位置を position:absolute; に指定した場合、さらに top、bottom、left、right を併用して、基準位置からの距離を
設定する必要があります。
基準位置は親となる要素の端部分となり、top、bottom、left、right はそれぞれ親要素の上端、下端、左端、右端か
らの距離となります。
※ただし、親となる要素にも position:static; 以外 が設定されている必要があります。
親要素に position:static;が設定されている場合は、基準位置はウェブページの画面端になります。
(例)
外側の div タグ その１に position:absolute; を、
内側の div タグ その２ に position:absolute; top:50px; left:50px; を設定した例。
div タグその１ の上端から 50px 左端から 50px の位置に div タグその２ が書かれる。
position:absolute; を使うと、まるで WORD のオブジェクトのように、ページ上の自由な位置に文字や画像を配置
できるので、ページレイアウトの幅が広がります。
4.7.
特殊なプロパティ１ 表の罫線関連
HTML で表を作成すると、罫線は立体的に表現されます。
しかし 表に対して 特別な CSS プロパティ border-collapse を使うと
表の境界線は隣の境界線と密着するため、フラットなデザインの罫線となります。
HTML の標準的な表デザイン
WORD の表のような、よりシンプルなデザインで表を表現できます。
プロパティ
border-collapse: 設定値;
設定値 = collapse
separate
機能
表の罫線を隣のセルと密着させる。
collapse
密着させる。
separate
密着させない。(初期設定)
<table>タグに対して border-collapse: collapse; のように CSS を設定すれば効果を発揮します。
border: プロパティなども併用すれば、表の罫線を様々に調整できます。
(例) table , td { border-collapse:collapse; border: solid 1px gray; }
4.8.
特殊なプロパティ２ リンク関連
CSS では特殊な書き方で、ハイパーリンクの書式を設定できます。
CSS 表記
a:link {color:#0000ff;}
a:visited {color:#00ccff;}
a:hover {color:#ffffff; background:#0000cc;}
a:active {color:#ffff00;}
/*未訪問のリンクの色*/
/*訪問済みのリンクの色*/
/*カーソルが乗っているリンクの色*/
/*クリック中のリンクの色*/
マウスがリンクに重なった瞬間、見栄えが変化するため、面白い効果が得られるはずです。
また、リンクは通常下線が引かれますが、text-decoration: none; などで下線を除去することも出来ます。
5. 課題
上記を踏まえて、コンピュータ基礎実習のページ内にある[練習問題]に回答し、その制作物の URL を moodle に記
載してください。
コンピュータ基礎実習(上級) http://www.cc.kyoto-su.ac.jp/~shimizu/jyokyu.php
提出する URL の例 http://www.cc.kyoto-su.ac.jp/~g000000/rensyu/menu.html
提出期限は、次回の授業日いっぱいとします。
以上
-4-
© Copyright 2024 Paperzz
