２月１３日授業内容
・うちのにゃんこの作成
CSSレイアウト 解答例
＊マークアップとはidやclass名をつけないh1,ｐなどの基本タグの入力のことをさす。
＊ページ構成はＨＴＭＬ ５outlinerで入力項目をいれて確かめることができる。
＊box-shadowP250
*スタイルシートは大枠設定→上の方から下のほうに設定していく。
・floatの復習と回り込み
例：
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>float とclear</title>
<style>
.section{width:760px;
margin:50px auto;}
p>img{float:left;
margin-right:20px;}
</style>
</head>
<body>
<div class="section">
<h3>●すばる<span class="cat-type male">白キジトラ・オス</span></h3>
<p><img src="html5css3_sdl/chapter01/lesson03/before/img/subaru.jpg" width="320" height="100" alt="イケメンの白キジトラオスのすばる" class="ph">目と耳が大きくてすばらしくイケメン。鳴き声もなかなかかわゆい。幼少期を1Kアパートで過ごしたせいか、他のネコにあまり関心がないらしく、性格はいたってマイペース。<br>
段ボール箱のかどや柱で爪とぎをするのが大好き。................................................................................................</p><!--回り込みとはpの中にあるimgにfloatをかけたときに右もしくは左に文章が来ることを意味する-->
</div>
</body>
</html>
＊clearとは上との関係性をなくすという意味なのでmargin-top設定できない。
・数あるclass設定の中から特定のオブジェクトだけ別でcss設定したい場合
＊複数クラスがある中である特定のもののみ設定をしたい場合はクラスを２つ設定できる。
ex1：html
<p class="more bottom"><a href="html5css3_sdl/chapter01/lesson03/before/cats/nezuko.html">もっと見る→</a></p>
</div><!--nezuko-->
p.more{text-align:right;
padding-right:20px;
background:url(../../lesson07/before/img/icon-arw01.png) no-repeat right center;
clear:left;}＊左方向への回り込みを防止する＊
p.bottom{margin-bottom:20px;}
・サイト上の中から欲しいimgのみを切り出し大きさ、色を修正する方法
ウインドウズには全てのプログラム→アクセサリ→snipping toolというのがありこれを
使うと囲ったところ切り取りし保存ができる。
これをphotoshopで加工することができる。
＊切り取った画像の大きさ色を変更したい場合は、イメージ→カンバスサイズで基準位置、
幅、高さ、色を設定する。
＊レイヤーの状態では色が付けられないので、レイヤー→レイヤーから背景へで変更する。
・２枚のimgを重ねた状態でレイヤー及びグラデーションツールを使い合成写真作成
画像をctrl + A→コピー→置きたい対象の画層の上にペースト→レイヤーマスクを追加→
レイヤーの中の写真横の白い部分をalt + クッリクする。白いキャンバスが出るのでその上でグラデーションツールで白黒の
グラデーションをかけると、黒い部分が透けて下の写真が見えるようになる。
もし、黒丸の形で塗るとそこに穴が開いて後ろが見える。
・セピア加工及び消しゴム加工
色調補正→色相・彩度で色相を変えることでセピアに設定できる。
この状態で消しゴムで消すとモノクロの中にカラーを演出できる。
・イメージ角度の変更
定規ツール→線を引いて→イメージ→画像の回転
・レイヤーマスク
・アンシャープマスク（フィルター→シャープの中）・・・お肉の汁加工
・スマートシャープ（フィルター→シャープの中）・・・お肉の汁加工
