My Web道

WEB制作科 受講記録 …とその後も続くWEB制作に関する活動・学習記録です。

2/10 ①[CSS] リセットCSS / ②[PS] 起動と各種設定・選択範囲

f:id:sntkk3:20140228225012g:plain

  1. CSS(リセットCSS
  2. Photoshop(起動と各種設定・選択範囲)


f:id:sntkk3:20140228223731g:plain

リセットCSS

全称セレクタ(ユニバーサルセレクタ)による手法:

 以下記入例のように、プロパティ直前に * (アスタリスク) を用いて記述する方法。HTMLの全要素に同じスタイルを適用することができるという便利な手法です。

【記入例】

/* reset css */ ← この部分はコメントアウト
 * {
   margin: 0;
   padding: 0;
 }

ただ、この方法(全称セレクタによる方法)は、以前は使われていたものの、今は主流ではないようです。
理由の一つは、そのパフォーマンスの悪さへの懸念からのよう。
とにかくすべての要素に一律で適用されてしまうということは、一見便利ではあるものの、それだけ無駄な負荷がかかるということになりますものね。
なので、現在では、以下記入例のように、必要なセレクタだけを指定する方法が用いられているようです。

要素を指定して記述する手法:

【記入例】

/* reset css */
html, body, h1, p, ul, li {
margin: 0;
padding: 0;
}

コメント記述時の注意点:

[誤] コメントがセミコロンの前に記述されている

h2{
  background-color: #355584 /*背景色の指定*/;
  color: #FFFFFF;
}

[正] コメントがセミコロンの後に記述されている

h2{
  background-color: #355584; /*背景色の指定*/
  color: #FFFFFF; /*文字色の指定*/
}
【演習】リセットCSS

リセット前

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>リセットCSSを記述する前に</title>
<style>
body{
  font-family:
  "Hiragino Kaku Gothic PronN",
  Meiryo,
  sans-serif;
}
h1, p,ul {
  color:#FFF;
}
h1{
  background-color:#95CCE2;
}
p {
  background-color:#EFB15F;
}
li{
  background-color:#98DC77;
}
</style>
</head>

<body>
<h1>ページのテーマ</h1>
<p>ここに本文が入る</p>
<ul>
<li>箇条書き</li>
<li>箇条書き</li>
<li>箇条書き</li>
</ul>

</body>
</html>

[実行結果]
↓各要素間に余白ができます。


リセット後
先程のコードに以下スタイルを追加

html, body, h1, p, ul, li {
  margin:0;
  padding:0
}

[実行結果]
↓余白がなくなりました。


Photoshop

起動について

通常は、プログラムのアイコンをダブルクリックするだけでも良いのですが、
今日初めてPhotoshopを起動するにあたり、以下の方法を習いました。

1. Phontoshop起動中(プログラムアイコンのダブルクリック直後)、
[Ctrl] + [Alt] + [Shift]キーを押したままの状態を保つ。

すると、
f:id:sntkk3:20140215201533g:plain
のように、「設定ファイルを削除しますか」という確認メッセージが表示されます。

2. ここで、「はい(Y)」を選択し、Photoshopを起動。

この方法で起動すると、環境設定が初期化されるようです。

では、何のために環境設定を初期化するのか?

環境設定を初期化すると、

  • 無駄に消費されているメモリの記憶がリセットされる。
  • それにより、前回使用時からの不具合を引き継がずに、作業を開始することができる。

という効果が見込めるとのことです。

Photoshopは比較的消費メモリの大きなソフトウェア、
毎回こうした起動方法に拘る必要はなくとも、今後頻繁に使用することになるであろうユーザーとしては、ぜひ心得ておきたい起動方法と言えそうです。

Photoshop 各種設定

f:id:sntkk3:20140216111417p:plain環境設定 [Ctrl] + [K]
単位: pixelで設定

色の設定:


f:id:sntkk3:20140216111417p:plain選択範囲

選択ツール

自動選択ツール (magic wand)

対象:

地 グラウンド(ground)
図 フィガー(figure)


その他、選択に関するショートカット

  • 選択解除 [Ctrl] + [D]
  • 選択反転 [Ctrl] + [shift] + [i] ← i はインバートの意
  • 選択追加 [shift]
  • 不要部分削除 [alt] + クリック