第11回目

日　時：2015年4月11日　13:30～17:00

場　所：かるがも団体交流室 Ⅰ Ⅱ

出席者：受講者　5名、HPWG　11名

講　師：松本恭彦

内　容：

まとめ

全10回の講習で学習した内容を総括してパワーポイントを用いての説明があった。

CSSの書き方３種類
タグ内（インライン）、THMLのhead部分（文書単位）、外部（別ファイル）
外部ファイルのメリット
（ページ構造を簡素化し、複数のページでスタイルを共有できるため、メンテナンス性が格段に向上する）
HTMLの記述方法
タグは半角の「<」と「>」で囲む。開始タグと終了タグで挟む。タグ内に入る要素や属性は、半角の大文字か小文字で統一する（小文字がお勧め）。インライン要素はブロックレベル要素内にを配置すること。
「」で囲まれた部分は非表示になる。htmlソース中に自分用のメモを記述したり、タグを無効にすることができる。
インライン要素とブロック要素
ブロックレベル要素は、見出し・段落・表など、文書を構成する基本となる要素で、一つのブロック（かたまり）として認識され、前後に改行が入る。
インライン要素は、主にブロックレベル要素の内容として用いられる要素で、文章の一部として扱われる。
CSSの記述方法
要素名 { プロパティ: 値; }
.クラス名 { プロパティ: 値; }
#ID名 { プロパティ: 値; }
「 /* 」と「 */ 」で囲まれた部分は無効になる。CSS中に自分用のメモを記述したり、CSSを無効にすることができる。
セレクター一覧
ブロックレベル要素
<address>、<blockquote>、<center>、<div>、<dl>、<fieldset>、<form>、<h1>-<h6>、<hr>、<noframes>、<noscript>、<ol>、<p>、<pre>、<table>、<ul>
インライン要素
<a>、<abbr>、<acronym>、<b>、<basefont>、<bdo>、<big>、<br>、<cite>、<code>、<dfn>、<em>、<font>、<i>、<img>、<input>、<kbd>、<label>、<q>、<s>、<samp>、<select>、<small>、<span>、<strike>、<strong>、<sub>、<sup>、<textarea>、<tt>、<u>、<var>
カスケードの概念（CSS＝カスケーディング・スタイル・シート）
様々なレベルで定義されたスタイルは、上流で定義されたものが下流へ引き継がれて文書に適用さる。
スタイルの継承
文字色や文字サイズに関するプロパティなどは親要素に指定した値が子要素に継承される。ボーダー・マージン・パディング・背景画像など、値が継承されないプロパティもある。
スタイルの優先順位
より後から読み込まれたスタイル、具体性の高いセレクタが優先される。
p#xyz > #xyz > p.abc > .abc > p > *
ボックスの概念　:　幅・高さはマージン　ボーダー　パディングを考慮
フローティング
フロート対象には幅を設定する。フロートの後は解除する。解除に空要素を使わないこと。
<br clear ="all"> はダメ<br style="clear:all;">とする
thmlで<br class ="cll"> としてCSSで　.cl{clear:both;}　とした方がベター
IDとclassの使い分け
タグに名前を付けるには「ID」、タグに種類分けを付けるには「クラス」「ID」はページ内に1回のみ

TOPページの修正

各自のTOPページについて、画像に代替えテキスト・タイトルの挿入、タグ内CSSをhead内CSSに変更、段落間の縦方向スペースの調整を実施した。

代替テキスト・タイトルの挿入その１

画像を選択し、「属性の変更」ボタンをクリックし「IMGの変更」を選択
（画像を右クリックし、「属性の変更」をクリックでも可）
「属性」ダイアルボックスで代替テキスト及びタイトルを入力する。

代替テキスト・タイトルの挿入その２

上記の方法は画像毎に設定する必要があるが、下記の方法はページ内の画像を一括して変更することができるので、画像の多い場合は便利である。

メニューバーの「ツール」から「URLエディター」を選択
ダイアルボックスで画像を選択して、代替テキスト及びタイトルの欄に入力し「更新」ボタンを押す
（代替テキストの右側の「タイトルへ」ボタンが便利）

タグ内CSSをhead内CSSに変更

本文1行目の「パソコンと切り離せない毎日」部分は「<span style="font-size : large;font-weight : bold;color : olive;">パソコンと切り離せない毎日</span>」とspanタグ内にCSSを設定しているので、これを外部CSSに書き出すこととした。ここでは一旦head内に書き出し、外部への書き出しは宿題としました。

ソース部分で「<span style="font-size : large;font-weight : bold;color : olive;">」のstyle以下を削除して「<span>」にする
ページ編集で「パソコンと切り離せない毎日」にカーソルを置き、スタイルエクスプレスのカーソルの位置タブで「span」を右クリックし、ルールの新規作成を選択
ルールの追加ダイアルボックスで「追加する場所」を「xxx_top.html」を選択して「OK」をクリック
フォントタブでサイズを「やや大きい」に、太さを「太い」に設定
色と背景タブで前景色を「オリーブ」に設定し「OK」をクリック
head部分に下記が挿入されたことを確認する

段落間の縦方向スペースの調整

「シニアになっても・・・・」と「そんなつ・・・」の段落の間にある縦方向のスペースはP要素に起因している。ここではこれをdivに変換し、一旦上下のdivに間隔を設定して、相殺されることを確認した後一方のCSSをメモ化した。さらにメモ化した部分を削除した。（メモ化と削除の練習）

「シニアになっても・・・・」の段落にカーソルを置きダブルクリックして選択
注：ドラックで選択するよりも確実
メニューバーの「挿入」から「レイアウトコンテナ」をクリック
「そんな・・・」の段落についても同様に操作
それぞれのdivにID又はクラスを設定し、段落間のスペースを指定
ソースの例　上のBOXに下側15px、下のBOXに上側15pxのマージンを設定

#ue{
margin-bottom : 15px;
}
#sita{
margin-top : 15px;
}

どちらか一方のCSSをメモ化して、見え方に替わりの無いことを確認
ソースの例　下側をメモ化(赤字部分)

#ue{
margin-bottom : 15px;
}
#sita{
/*margin-top : 15px;*/
}

タグに適用したCSSスタイルを削除する方法
スタイルエクスプレスのカーソル位置タブで不要な設定部分を右クリックし、「ID設定」（クラスで設定した場合は「クラス設定」）から「なし」をクリック（タグへの適用が削除される）
スタイルエクスプレスのスタイル構成タブで不要なスタイルを右クリックして「削除」を選択（head部のCSSが削除されたのを確認する）

宿題

１　Topページ以外のページの画像に代替テキストとタイトルを挿入する。
２　Topページのhead部のCSSを新しい外部ファイルに書き出す。