今日の復習(CSS)

明日からCSSの手打ちがんばります。意味を理解して勉強する!この事を意識していると、生活の中でも「何でだろう?」という疑問な事が増えてきたような気がします。
今日もとても濃い内容でした。

テーブル

・caption:表題(必須)
・summary:その表のより詳しい説明、音声ブラウザに概要を伝える(必須)
・colspanコラムスパン:横方向で結合
・rowspanロウスパン:縦方向で結合
・cellpaddingセルパディング:中の文字から外側の間隔
・cellspacingセルスペーシング:セルとセルの間の空き(標準が"2"なので5以上空ける)

Photoshop

・初期設定で開く→Wクリックをしてctrl+Alt+shift
・カラー設定を「Web・インターネット用・日本」にする
・GIF(可逆圧縮):イラスト
JPEG不可逆圧縮):写真
・最適化書き出し(JPEG
[ファイル]→[Web用に保存]JPEG高画質80にする。

HEXカラー

・HEXadecimal(16進数):0〜9,A〜Fの16の英数字

GIF画像の最適化

・[ファイル]→[Web用に保存]
「GIF」「劣化0」「知覚的」「カラー:32(64)」「誤差拡散法」「透明にチェック」を入れ保存。
・サイズを変更する場合は、「画像の再サンプル」にチェックを入れる。

色調補正

・「色調補正」→「レベル補正」
画像は全体を明るくし、明るい部分はより明るくする。
・アンシャープマスク:ハイライト部分をはっきりさせる(陰影のある画像)
「フィルター」→「シャープ」→「アンシャープマスク」
初期設定値でOK。
・自動補正:寒色の画像には適用は向いてるが、暖色の画像に適用させるとトーンジャンプするので向いていない。

透過GIFの書き出し:エッジの処理

・[ファイル]→[Web用に保存]→[マット]に背景の色を入れる。(写真の場合、写真で多く使われている色を入れる)
※任意の色と組み合わせてエッジの色を変更することを「マット処理」という。

Illustratorから書き出し

・大きめの長方形で囲む、背景がある場合はその内側に長方形を書く。
[オブジェクト]→[トリムエリア(トンボ)]→[作成]→[ファイル]→[Web用に保存]
「GIF」「知覚的」「透明部分」「マット」を入れる。

GIFアニメの作成

Illustratorで描きPhotoshopに書き出す。
・カーラーモードはRGBでIllsutaratorで作成する。
・レイヤーの複製をし「ファイル」→「書き出し」:PSD形式
・「RGB」「72ppi」「レイヤーを保持」「アンチエイリアス」にチェック。
・「PSD」形式ファイルを、ImageReadyで開く
・「レイヤーからフレームを作成」を選択する。
・各フレームの時間を設定する。
・「Web用に保存」→「GIF」形式で保存する。

CSS(Cascading Style Sheet)

CSSの構文

    h1    {   color : #ff0000 ;}

  大見出しの  文字色を   赤にする

※ h1「セレクタ」、color「プロパティ」、#ff0000「バリュー(値)」

idセレクタ

ページ内にある1つの要素にだけスタイルを適用させたい場合に使う。

要素名#ID名 { プロパティ:値;}

#ID名 { プロパティ:値;}

クラスセレクタ

・同じ要素の中で特定の部分にだけスタイルを適用させたい場合に使う。

「idセレクタ」と違って、同じページ内で複数の場所に指定ができる。

要素名#クラス名 { プロパティ:値;}

.クラス名 { プロパティ:値;}

子孫セレクタ

・特定の要素の子要素または子孫要素にスタイルを適用させたい場合に使用。
 要素名との間にスペースを挿入し区切って設定する。

親要素 子要素 { プロパティ:値;}

 ・body:表示範囲全体
 ・background:背景色
 ・padding:内容(文字)のまわりにできる余白
 ・margin:内容(文字)のまわりにできる余白の外側のスペース
 ・font-size:文字の大きさ
 ・border:内容(文字)のまわりを囲む線
 ・solid:実線
 ・small:小さく(85〜90%)
 ・x-small:より小さく(70〜85%)
 ・line-height:行間
 ・border:線
 ・dotted:点
 ・font-style:正体か斜体かを指定
 ・text-align:行揃え
 ・border-collapse:collapse; 角の処理、線が繋がって見える、tableに記入(必須)※ブラウザの初期設定「separate」によるずれを防ぐため「collapse」を記述します。
 ・empty-cells:show; 空でも見せる(必須)
 ・th:見出しセル
 ・align:行揃え
CSSでは、あとから記述したものが優先される。

HTMLを検証

Another HTML-lint gatewayで文法チェック

CSSの検証

W3C CSS 検証サービスでCSS文法チェック

グループ化したブロックの設定(レイアウト)

 1. #container
  2. #header
 3. #navi(#nav)
 4. #wrapper
 5. #mainContents(2文字目を大きくする:キャメルボックス
 6. #sidemenu
  7. #footer

CSSシグネチャー(bodyに対して表示させる)
<body id="○○"> body#○○→

・文章構造(HTML) 内→外へ
   1.テキスト
   2.マークアップ
   3.div要素でグループに
CSS 外→内へ
   1.リセット
   2.全体の共通設定
   3.レイアウト(body、a、img)
   4.文字飾り