自分のサイトのメニュー部分の仕上げ ／ カテゴリパネル説明

(22)11/15火 自分のサイトのメニュー部分の作成 ← 今日
(23)11/18金　仕上げ作業 テンプレート完成
(24)11/22火　仕上げ作業 メニューと各カテゴリー(コンテンツ)ページの完成
(25)11/25金　仕上げ作業 jQueryを組み込み完成
(26)11/29火　仕上げ作業 SNSやWEBツール等の埋め込み表示完成

１２月
(27)12/02金　仕上げ作業 作品集ページの完成1
(28)12/06火　仕上げ作業 作品集ページの完成2
(29)12/09金　仕上げ作業 ※最終のアップロードは忍者サーバへ

Adobeサポート 日本語サイト公式 Dreamweaver のCSS設定のパネルの説明
https://helpx.adobe.com/jp/dreamweaver/using/set-css-properties.html



書体(タイプ)

Font-family

書体を優先順にを 1 つまたは複数設定。

Font-style

フォントスタイル

「normal」普通、「italic」「oblique」

斜体

Line-height

行の高さ

Text-decoration

テキストにアンダーライン、オーバーライン、取り消し線、点滅、なし

初期設定は「none」です。リンクの初期設定は「underline」です。

Font-weight

太さ。通常は 400、「bold」は 700 。

Font-variant

テキストにスモールキャプスを設定します。サポートしていないブラウザ多

Text-transform

大文字/小文字属性。

選択範囲の各単語の最初の文字を大文字にするか、

あるいはテキストのすべての文字を大文字または小文字にするかを設定します。

カラー

テキストカラー

Font-size

テキストのサイズ

背景

エレメントの背景イメージを指定します。

Background-repeat

• 「no-repeat」開始位置に 1 回表示。
• 「repeat」背景イメージが水平or垂直方向にタイル状に表示。
• 「repeat-x」水平に帯状に表示「repeat-y」垂直に帯状に表示

背景の固定

背景イメージを元の場所に固定するか、コンテンツと共にスクロールするかを指定します。

Background-position（X)、Background-position（Y)

背景イメージをページの縦方向（Y）中央および横方向（X）中央に揃えることができます。

背景色

エレメントの背景色を指定します。

ブロック(文字周り余白)

間隔と整列の設定。

Letter-spacing

文字間のスペースを

Text-indent

テキストの最初の行をどれだけ飛び出しor入れ込みするか

Vertical-align

部品の縦方向の整列。

Text-align

テキストの整列方法

White-space

ホワイトスペースの処理方法

Display

表示または非表示

Word-sapcing

単語間のスペースを設定します。

ボックス(箱)余白およびマージンを適用する場合は、エレメントの個々の辺に設定を適用できます。また、「すべて同一」を使用して、エレメントのすべての辺に同じ設定を適用することもできます。

フロート

部品のどちら側に他のパーツを配置するかを指定。

詳しくは、http://css-tricks.com/all-about-floats/ を参照。

クリア

フロートの解除

余白(padding)

内側の部品の境界線との隙間の量を指定。「すべて同一」オプションをオフにするとそれぞれの辺の余白を設定できます。

すべて同一

オンにすると、上下左右に同じ余白になります。 

マージン

外側

の部品との間のスペースの量を指定します。

height weight = 幅および高さ

エレメントの幅と高さを設定します

CSS スタイルのボーダープロパティの定義 

CSS ルール定義ダイアログボックスの「ボーダー」カテゴリーを使用して、エレメントを囲むボーダーの幅、カラー、スタイルなどの設定を定義します。

幅

エレメントのボーダーの太さを設定します。幅属性は、両方のブラウザーでサポートされています。「すべて同一」オプションをオフにすると、エレメントのそれぞれの辺のボーダー幅を設定できます。

すべて同一

オンにすると、エレメントの上下左右に同じボーダーのスタイルプロパティが適用されます。

カラー

ボーダーのカラーを指定します。各辺のカラーを個別に設定できますが、表示はブラウザーに依存します。「すべて同一」オプションをオフにすると、エレメントのそれぞれの辺のボーダーカラーを設定できます。

タイプ

ボーダーのスタイルの表示方法を設定します。スタイルの表示方法は、ブラウザーに依存します。「すべて同一」オプションをオフにすると、エレメントのそれぞれの辺のボーダースタイルを設定できます。

CSS スタイルのリストプロパティの定義 

CSS ルール定義ダイアログボックスの「リスト」カテゴリーでは、リストタグのリスト設定（ブレットサイズやタイプなど）を定義します。

List-style-type

ブレットまたは番号の表示方法を設定します。タイプ属性は、両方のブラウザーでサポートされています。

List-style-position

リスト項目のテキストを折り返してインデントを行うか（外側）、またはテキストを折り返して左マージンから表示するか（内側）を設定します。 

List-style-image

ブレットに使用するカスタムイメージを指定します。「参照」（Windows）または「選択」（Mac OS）をクリックしてイメージを参照するか、イメージのパスを入力します。 

CSS スタイルの位置プロパティの定義 

位置スタイルプロパティは、選択した CSS スタイルに関連付けされたコンテンツをどのようにページに配置するかを指定します。

以下のプロパティは、このスタイルにおいて重要でない場合は空白にしておきます。

位置

ブラウザーでの選択したエレメントの配置方法を以下のように指定します。

• 「absolute」では、最も近い絶対位置または相対位置に配置された祖先を基準にして、「Placement」の各ボックスに入力した座標値を使用してコンテンツを配置します。絶対位置または相対位置に配置された祖先が存在しない場合は、ページの左上隅を基準にします。
• 「relative」 では、ドキュメントのテキストフローでのブロックの位置を基準として、「Placement」の各ボックスに入力した座標値を使用してコンテンツブロックを配置します。例えば、相対位置で 20px の上と左の座標をエレメントに指定すると、それぞれがエレメントをフローの標準位置から 20px 右および 20px 下に移動します。また、上、左、右、または下の各座標を指定し、または指定せずに、エレメントを相対位置に配置し、絶対位置の子のコンテキストを設定することができます 
• 「fixed」 では、ブラウザーの左上を基準として、「Placement」の各ボックスに入力した座標値を使用してコンテンツを配置します。ユーザーがページをスクロールする場合、コンテンツはこの位置に固定されたままになります。
• 「static」 では、テキストフロー内の位置にコンテンツを配置します。これは、配置可能なすべての HTML エレメントの初期設定の位置です。

Z インデックス

コンテンツの重ね順を指定します。Z-Index が大きいエレメントが、Z-Index が小さい（または、何も設定されてない）エレメントの上に表示されます。プラスとマイナスの両方の値を指定できます。コンテンツが絶対位置に配置されている場合は、AP エレメントパネルを使用して重ね順を簡単に変更できます。 

オーバーフロー

コンテナのコンテンツ（例えば、Div または P）がそのサイズを超過した場合に生じる動作を設定します。これらのプロパティは、コンテナのサイズを次のように制御します。

• 「visible」 を選択すると、コンテンツがすべて表示されるように、コンテナのサイズが拡大します。コンテナは、右下方向に拡大します。
• 「hidden」 を選択すると、コンテナのサイズは変更されず、これより大きいコンテンツは切り捨てられます。スクロールバーは表示されません。
• 「scroll」 を選択すると、コンテンツがコンテナのサイズを超えているかどうかにかかわらず、コンテナにスクロールバーが表示されます。スクロールバーの表示を明示的に指定すると、動的な環境でスクロールバーが表示されたり非表示になったりすることによる混乱を回避できます。このオプションは、ドキュメントウィンドウでは表示されません。
• 「auto」 を選択すると、コンテナのコンテンツがボーダーに収まらない大きさになった場合にのみスクロールバーが表示されます。このオプションは、ドキュメントウィンドウでは表示されません。

Clip

コンテンツのどの部分を表示するかを定義します。切り抜き領域を指定すれば、JavaScript のようなスクリプト言語でその領域にアクセスしてプロパティを操作し、ワイプなどの特殊効果を作成することができます。このようなワイプは、「プロパティの変更」ビヘイビアーを使用して設定できます。

Placement

コンテンツブロックの位置とサイズを指定します。ブラウザーでの位置の解釈は、「Position」の設定により異なります。サイズの値は、コンテンツブロックのコンテンツが指定サイズを越えた場合は無視されます。

初期設定では、位置とサイズの単位はピクセルです。単位として、pc（パイカ）、pt（ポイント）、in（インチ）、mm（ミリメートル）、cm（センチメートル）、（ems）、（exs）、%（親の値に対する割合）を指定することもできます。単位は、値の後にスペースを入れず続けて入力します（例：3mm）。

表示／非表示

コンテンツの初期表示を設定します。「Visibility」プロパティを指定しない場合、初期設定により、コンテンツは親タグの値を継承します。body タグの初期設定の可視性を表示できます。以下の可視性オプションのいずれかを選択します。

• 「inherit」 では、コンテンツの親の表示/非表示プロパティが継承されます。
• 「visible」では、親の値には関係なく、コンテンツが表示されます。
• 「hidden」では、親の値には関係なく、コンテンツは非表示になります。

CSS スタイルの拡張プロパティの定義 

拡張スタイルプロパティには、Filter、改ページオプション、および Cursor オプションがあります。 

Cursor

このスタイルによって制御されているオブジェクト上にポインターが移動するとポインターイメージが変化するように設定します。ポップアップメニューから、設定するオプションを選択します。この属性は、Internet Explorer 4.0 以降および Netscape Navigator 6 でサポートされています。

Filter

このスタイルによって制御されているオブジェクトに、ぼかしや反転などの特殊効果を適用します。ポップアップメニューから効果を選びます。 

Page-break-before

設定すると、印刷時に、このスタイルによって制御されているオブジェクトの前または後で強制的に改ページします。ポップアップメニューから、設定するオプションを選択します。このオプションは 4.0 ブラウザーではサポートされませんが、将来のバージョンでサポートされる可能性があります。