WEB、始めました

半年間WEB制作の学校に通います。その記録。

34日目　DOM

配列を使った掛け算
http://tototo.webcrow.jp/script/0310/array03.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配列を使った掛け算</title>
<style>

table {
  border: 1px solid #666;
  border-collapse: collapse;
}
th,td {
  border: 1px solid #666;
  width: 100px;
  padding: 5px;
  text-align: center;
}

th {
  background: #f6f6f6;
}

</style>
<script>
var a = new Array(3);
var b = new Array(3);
var kai;
a[0] = 5;
a[1] = 12;
a[2] = 18;
b[0] = 33;
b[1] = 14;
b[2] = 65;

function ans(i) {
  kai = a[i]*b[i];

  alert('答えは' + kai + 'です');
  console.log(a[i]);
  console.log(b[i]);
  console.log(kai);

}
</script>
</head>

<body>
<h1>配列を使った掛け算</h1>
<table>
<tr>
<th>添字</th><th>a</th><th>b</th><th>a*bを計算</th>
</tr>
<tr>
<th>0</th><td>5</td><td>33</td><td><button onclick="ans(0)">計算結果</button></td>
</tr><!--ans(引数の番号を使って計算する)-->
<tr>
<th>1</th><td>12</td><td>14</td><td><button onclick="ans(1)">計算結果</button></td>
</tr>
<tr>
<th>2</th><td>18</td><td>65</td><td><button onclick="ans(2)">計算結果</button></td>
</tr>
</table>

</body>
</html>


1年後の曜日を表示する
http://tototo.webcrow.jp/script/0310/array04.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>1年後の曜日を表示する</title>
</head>

<body>
<script>
var days = new Array('日','月','火','水','木','金','土');
var today = new Date;  //今日（今現在）の値

today.setFullYear(today.getFullYear() + 1);
//setFullYearで日付指定
console.log( today );
document.write('<h1>一年後は' + days[today.getDay()] +'曜日</h1>');
//days[today.getDay()]の「today」がtoday.setFullYear(today.getFullYear() + 1);になっている
</script>
</body>
</html>


小さい順にsortされる
http://tototo.webcrow.jp/script/0310/array05.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Arrayオブジェクトのsortメソッド</title>
<script>
function compare(a,b) {
  return a - b;//どちらが大きいか比較する関数
}
</script>
</head>

<body>
<script>
var ages = new Array(6,87,4,35,76,9,11,25);
  ages = ages.sort(compare);
  document.write(ages.join(' < '));
</script>
</body>
</html>


連想配列
for～in文

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>連想配列</title>
</head>

<body>
<script>
var colors = new Object();
colors['white'] = '白色';
colors['red'] = '赤色';
colors['green'] = '緑色';
colors['yellow'] = '黄色';

for (var eigo in colors) {
document.write( '<h2>' + eigo + '：' + colors[eigo] + '</h2>' );
}
</script>
</body>
</html>

33日目　オブジェクト　new Date new Array Math

何年何月何日何曜日
http://tototo.webcrow.jp/script/0309/youbi.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>何年何月何日何曜日</title>
</head>

<body>
<script>
var n= new Date();
var f= n.getFullYear();
var m= n.getMonth()+1;
var d= n.getDate();

var y= n.getDay();
var w=[ '日', '月', '火', '水', '木', '金', '土'];
y = w[y];
//var num=[ 10, 100, 1000, 10000];  console.log(num[0]);

document.write('<h1>今日は' + f +'年' + m + '月' + d + '日' + y + '曜日です。</h1>' );
</script>
</body>
</html>


new Array

http://tototo.webcrow.jp/script/0309/array01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配列を使う</title>
</head>

<body>
<script>
var names = new Array(4);
names[0] = '山田太郎';
names[1] = '鈴木一郎';
names[2] = '佐藤花子';
names[3] = '田中健一';

document.write( '<h2>こんにちは' + names[0] + 'さん</h2>' );
document.write( '<h2>こんにちは' + names[2] + 'さん</h2>' );
</script>
</body>
</html>

new Array
for文で全て表示

http://tototo.webcrow.jp/script/0309/array02.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>配列を使うfor</title>
</head>

<body>
<script>
var names = new Array(4);
names[0] = '山田太郎';
names[1] = '鈴木一郎';
names[2] = '佐藤花子';
names[3] = '田中健一';

for(var i = 0; i<names.length; i++) {

document.write( '<h2>こんにちは' + names[i] + 'さん</h2>' );
}
</script>
</body>
</html>


Math.random
おみくじをひく

http://tototo.webcrow.jp/script/0309/math_random.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>おみくじ</title>
<script>
function omikuji() {

var rdm = Math.random();

if( rdm< 0.25 ) {
  document.write( '<h1>大吉</h1>' );
} else if( rdm<0.5 ) {
  document.write( '<h1>中吉</h1>' );
} else if( rdm<0.75 ) {
  document.write( '<h1>小吉</h1>' );
} else {
  document.write( '<h1>凶</h1>' );
}

}
</script>
</head>

<body>
<h1>おみくじ</h1>
<p>下のボタンをクリックするとおみくじが引けます。</p>
<p><button onclick="omikuji()">おみくじを引く</button></p>

</body>
</html>


Math.random
Math.floor（小数点切り捨て）

http://tototo.webcrow.jp/script/0309/math_random02.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>乱数の実験</title>
</head>

<body>
<script>
MAX = 10;  //定数
var rdm;
for( var i=0; i<10; i++)  //( var i=1; i<=10; i++)でもおｋ
{
  rdm = Math.floor( Math.random()*(MAX+1) );   //0.08(=0)とかが出てしまう為１を足している
  console.log( rdm );
  document.write( rdm + '<br>' );
}
</script>
</body>
</html>

Math.random
更新するたびに画像が変わる

http://tototo.webcrow.jp/script/0309/math_random03.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イメージをランダムに表示する</title>
<style>
body {
  text-align: center;
}
img {
  width: 600px;
  height: 400px;
}

</style>
</head>

<body>
<h1>今日のイメージ</h1>
<script>
numOfImg = 4;
var num;
num = Math.floor( Math.random()*numOfImg);  //これだと０～３までの値しかでないので１～４だと計算式に＋１する
console.log( num );
document.write( '<img src ="img/' + num + '.jpg" alt="">' );  //画像の名前が01.jpgだったらimg/0'と入れればおｋ

</script>
</body>
</html>

32日目　配列　連想配列　オブジェクト　new Date

配列

http://tototo.webcrow.jp/script/0308/hairetu_array.html

<|html|


|

31日目　サムネイル　while文 for文　

サムネイル
画像置換

html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>画像置換</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="imgbox">
<h1>癒される柴犬</h1>
<div class="thumbnail">
<img src="img/s01.jpg" alt="" onmouseover="swap.src='img/01.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s02.jpg" alt="" onmouseover="swap.src='img/02.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s03.jpg" alt="" onmouseover="swap.src='img/03.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s04.jpg" alt="" onmouseover="swap.src='img/04.jpg'" onmouseout="swap.src='img/01.jpg'"><img src="img/s05.jpg" alt="" onmouseover="swap.src='img/05.jpg'" onmouseout="swap.src='img/01.jpg'">
</div><!--/.thumbnail-->
<div class="mainImg">
<img src="img/01.jpg" alt="" name="swap">
</div><!--/.mainImg-->
</div><!--/.imgbox-->
</body>
</html>

css

@charset "utf-8";

/* reset */
html, body, h1, p {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

a {
  text-decoration: none; /* 下線を消す */
}
img {
  border: 0;
}
img, input {
  vertical-align: bottom;
}


.imgbox {
  width: 650px;
  margin: 50px auto;
}


.thumbnail {
  width: 625px;
  text-align: center;
  margin-bottom: 20px;
}



.thumbnail img {
  margin-left: 25px;
}
.thumbnail img:fist-child {
  margin-left: none;
}

.mainImg {
  width: 600px;
  height: 400px;
  margin: 10px auto 0;
  padding: 10px;
  box-shadow: 0 0 15px #999;
}

h1 {
  text-align: center;
  margin-bottom: 15px;
}

while文
while文での繰り返し処理01

while文での繰り返し処理01


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>while文での繰り返し処理01</title>
</head>

<body>
<script>
var i = 1;
while ( i <= 10 ) {
  document.write( i );
  console.log( i );
  i++;
//i=i+1と同じ意味
}
</script>
</body>
</html>


while文での繰り返し処理02


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>while文での繰り返し処理02</title>
</head>

<body>
<script>
var a = 1;
while ( a <= 100 ) {
  a *= 2;
	//a=a*2と同じ
  console.log( a );
	//console.logが下にくる場合は１は省かれる。１に２が掛けられた上体で繰り返し。a *= 2;より上にきた場合は１を出した後に１＊２が始まる
}
console.log( '終了' );
</script>
</body>
</html>

for文
for文の繰り返し処理01
http://tototo.webcrow.jp/script/0307/for.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し処理01</title>
</head>

<body>
<script>
for (var i = 1 ; i <= 5 ; i++) {
  console.log( i + '回目' );
}
</script>
</body>
</html>


for文での繰り返し処理02
年齢選択プルダウン

http://tototo.webcrow.jp/script/0307/for2.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し処理02</title>
</head>

<body>
<p>年齢を選択して下さい。</p>
<select>
<script>
for (var i = 20 ; i <= 70 ; i++) {
  document.write('<option value=" ' + i + ' ">'+ i + '歳</option>');
}
</script>
</select>
</body>
</html>

for文での繰り返し処理03
和暦西暦　表組み

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し処理03</title>
<style>
table {
  border-collapse: collapse;
  border: 1px solid #666;
  width: 300px;
}
th,td {
  border: 1px solid #666;
  padding: 5px;
}
th {
  background: #F7F7F7;
}
td {
  text-align: center;
}

span {
  font-size: 14px;
}

</style>


</head>
<body>
<table>
<tr><th>和暦<span>(平成)</span></th><th>西暦</th></tr>

<script>
for (var i = 1 ; i <= 28 ; i++) {
  document.write('<tr>');
  document.write('<td>' + i + '年</td>');
  document.write('<td>' + ( i + 1988 ) +'年</td>');
  document.write('</tr>');
}
</script>
</table>
</body>
</html>

for文での繰り返し処理04
偶数の合計

http://tototo.webcrow.jp/script/0307/for4.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し処理04</title>
<script>
function total() {
  var ans = 0;
  for(var i=2 ; i<=100 ; i+=2) {
  console.log( i + '回目');
  ans += i ;
  console.log( ans );
}

  alert('2、4、6、8、…、100の偶数の合計は、' + ans + 'です。');
}

</script>
</head>

<body>
<h3>偶数の合計</h3>
<p>以下のボタンをクリックすると、<br>
2、4、6、8、…、100の偶数を全て合計した結果を表示できます。</p>
<p><button onclick="total()">計算結果</button></p>

</body>
</html>

for文での繰り返し処理05
1から100までの合計

http://tototo.webcrow.jp/script/0307/for5.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し処理05</title>
</head>

<body>
<h3>1から100までの合計</h3>
<p>以下のボタンをクリックすると、<br>
1～100を全て合計した結果を表示できます。</p>
<p><button onclick="total()">計算結果</button></p>
<script>
function total() {
  var ans = 0;
  for(var i=1 ; i<=100 ; i+=1) {
  console.log( i + '回目' );
  ans += i ;
  console.log( ans );
}

  alert('1～100全ての合計は、' + ans + 'です。');
}
</script>
</body>
</html>


for文での繰り返し処理06
入力した数字までの合計
http://tototo.webcrow.jp/script/0307/for6.html


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し処理06</title>
<script>

function total() {
  var ans = 0;
  var maxNum;

maxNum = prompt('半角で数字を入力して下さい。','100');
maxNum = parseInt( maxNum );

  for(var i=1 ; i<=maxNum ; i++) {
  ans += i ;
  console.log( ans );
}

  alert('1～' + maxNum + 'の合計は、' + ans + 'です。');
}

</script>
</head>

<body>
<h3>入力した数字までの合計</h3>
<p>以下のボタンをクリックすると、<br>
入力した数字までの合計を求めて表示します。</p>
<p><button onclick="total()">計算結果</button></p>

</body>
</html>


for文での繰り返し処理07
九九表
http://tototo.webcrow.jp/script/0307/for7.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>for文での繰り返し処理07</title>
<style>
table {
     border-collapse: collapse;
}
td,th {
     width: 50px;
     text-align: center;
}
th {
     background-color: #CCC;
}

</style>
</head>

<body>
<h3>九九表</h3>
<table width="500" border="1">
<tr>
<th>&nbsp;</th><th>1</th><th>2</th><th>3</th><th>4</th><th>5</th><th>6</th><th>7</th><th>8</th><th>9</th>
</tr>

<script>
for (var i=1 ; i<=9 ; i++) {
  document.write('<tr>');
  document.write('<th>' + i + '</th>');

    for (var j=1 ; j<=9; j++) {
      document.write('<td>' + i*j + '</td>');
    }

  document.write('</tr>');
}
</script>


</table>
</body>
</html>

30日目　javascript　　イベント　swich文　演習

イベント
http://tototo.webcrow.jp/script/on01.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>イベント（１）</title>
</head>

<body>
<p><img src="img/01.jpg" alt="" onmouseover="console.log('マウスが乗りました');" onmouseout="console.log('マウスが外れました');"></p>

<p><img src="img/01.jpg" alt="" onmouseover="this.src='img/01_o.jpg'" onmouseout="this.src='img/01.jpg'"></p>
</body>
</html>

swich 文
http://tototo.webcrow.jp/script/swich.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>swich文で月を判定する</title>
<script>
var month;

function season() {
	month = prompt('月を入力してください','1から12の値を半角数字で入力');
	month = Number( month );
	//NumberはparseIntと同じ
	
	switch(month) {
		case 12:
		case 1:
		case 2:
		  document.write("<h1>冬です。</h1>");
		break;
		
		case 3:
		case 4:
		case 5:
		  document.write("<h1>春です。</h1>");
		break;
		
		case 6:
		case 7:
		case 8:
		  document.write("<h1>夏です。</h1>");
		break;
		
		case 9:
		case 10:
		case 11:
		  document.write("<h1>秋です。</h1>");
		break;
		
		default:
		  document.write("<h1>1から12の値を入力してください</h1>");
	}
	
}

</script>
</head>

<body>

<h1>月別に季節を判別</h1>
<p>ボタンをクリックすると月を入力するウィンドウが表示されます。</p>
<p><button onclick='season()'>月別に季節を判別する</button></p>
</body>
</html>

演習

Q1.同一ディレクトリ内のJavaScriptファイル「sample.js」をHTMLファイルに読み込むには、どのように記述すればよいか書きなさい

A.

<script src="sample.js"></script>


Q2.以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？

<script>
  var x = 10, y = 20;
  x = y;
  y = x;
  console.log (y);
</script>


A.10


Q3.以下のスクリプトを実行した結果、コンソールに表示される値はなんですか？

<script>
var x = 10;
x += '10';
console.log(x);
</script>

A.1010



Q4.1年が何秒かを表示するJavaScriptを記述しなさい。

A.

<script>
var byou = 60;
var fun = 60;
var jikan =24;
var niti = 365;
var time = byou * fun * jikan * niti;

console.log(time);

</script>

Q5.
「長いメッセージの場合は、
改行します。」
と表示するJavaScriptを記述しなさい。


A.

<script>
document.write('長いメッセージの場合は、' + '<br>' + '改行します。');


</script>


Q6.以下のように表示するJavaScriptを記述しなさい。

f:id:chawannmusi:20160309155004p:plain


A.

<script>
prompt('好きな花は？','ひまわり');

</script>

Q7.
画像をクリックでアラートを表示するJavaScriptを記述しなさい。
（写真は自由。）「function」は使用しない通常のアラート。


f:id:chawannmusi:20160309155109p:plain

A.

<script>
<body>
<p><img src="img/01.jpg" alt="茨城県産のいちご・あまおう" onclick="alert('茨城県産の「あまおう」です！');"></p>


</body>

</script>

Q8.マウスオーバーでアラートを表示するJavaScriptを記述しなさい。（写真は自由。）

f:id:chawannmusi:20160309155250p:plain

A.

<script>
<body>
<p><img src="img/01_o.jpg" alt="ショートケーキ" onMouseOver="alert('「あまおう」を使ったショートケーキの写真です！');"</p>

</body>

</script>


Q9.ページを開いた瞬間にアラートを表示するJavaScriptを記述しなさい。（写真は自由。）

A.

<script>
<body>
<p><img src="img/01.jpg" alt="茨城県産のいちご・あまおう" onload="alert('茨城県産の「あまおう」です！');"></p>

</body>
</script>

29日目　javascript if文

偶数・奇数判別
if文


<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>偶数・奇数判別</title>
</head>

<body>
<script>
var num;

num = prompt( '半角数字を入力して下さい', 2 );
num = parseInt( num ); 

//偶数か奇数か
//if (num%2 === 0 )｛偶数｝でもok
if ( num%2 === 1 ) {
	console.log( '入力された' + num + 'は奇数です。' );
	document.write( '入力された' + num + 'は奇数です。' );
}

else {
	document.write( '入力された' + num + 'は偶数です。' );
}
</script>
</body>
</html>

10以上20未満かそれ以外か

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>10以上20未満かそれ以外か</title>
</head>

<body>
<script>
var x;

x = prompt( '整数を半角数字で入力して下さい', '2' );
x = parseInt( x ); 

//10以上20未満かそれ以外か
if ( x >= 10 && x < 20 ) {
	document.write( '入力された' + x + 'は10以上20未満です。' );
}
else {
	document.write( '入力された' + x + 'は10以上20未満以外です。' );
}
</script>
</body>
</html>


イベント駆動型モデル

http://tototo.webcrow.jp/kadai/index03.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>無題ドキュメント</title>
<script>
var num;

function oddEven() {
num = prompt( '半角数字を入力して下さい', 2 );
num = parseInt( num ); 

if ( num%2 === 1 ) {
  document.write( '入力された数字 ' + num + ' は奇数です。' );
}
else {
  document.write( '入力された数字 ' + num + ' は偶数です。' );
}

}
</script>
</head>

<body>
<h1>偶数か奇数かの判別をします</h1>
<p>ボタンをクリックすると数値を入力するウィンドウが表示されます。</p>
<p><button onclick="oddEven()">判別する</button></p>
</body>
</html>


if文

http://tototo.webcrow.jp/kadai/index04.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>合否判断</title>
<script>
var score;  //点数
var refValue = 80;  //基準値
var compValue = 100;  //満点

function point() {
  score = prompt( '点数を入力して下さい','半角数字で入力' );
  score = parseInt( score );

if ( score >= refValue ) {

  if ( score === compValue ) {
    document.write('<h1>百点満点!</h1>');
    document.write('<p>よくがんばりました。</p>');
    } else {
    document.write('<h1>合格です。</h1>');
    document.write('<p>よくがんばりました。</p>');
    }
  }
else {
    document.write('<h1>不合格です。</h1>');
    document.write('<p>もう少しがんばりましょう。</p>');
}

}

</script>
</head>

<body>
<h1>基準値をもとに評価します</h1>
<p>ボタンをクリックすると点数を入力するウインドウが表示されます。</p>
<p><button onclick="point()">基準値をもとに評価する</button></p>
</body>
</html>

28日目　スライス と　Psのレイヤー描画モード

スライスの続き。

f:id:chawannmusi:20160306225903p:plain


ガイドで線を引き終わったら
スライスツールでスライスしていきます。
この時にスライス選択ツールでスライスした部分をダブルクリックして名前も決めていきます。この名前が各ファイル名になります。

webおよびデバイス用に保存で保存します。
この時画像によって拡張子を変更できます。
変更したい画像をクリックとShift＋クリックで同時に選択して右側で拡張子を選択します。
そのまま他の拡張子にしたいものを選び直して拡張子に変更します。

全ての拡張子を選択したら保存をクリック
保存の画面で
スライス：すべてのユーザー定義とスライスを選択
設定：その他→ファイル名の相互性全てにチェック
最適化ファイル→画像をフォルダに保存：フォルダ名になる
OKをおせば保存完了



コーディング。
LOFTの練習ページ

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>LOFTの練習ページ</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<header>
<h1>LOFT</h1>
<nav>
<ul>
<li><img src="images/LOFT_nav01.gif" alt="#"></li>
<li><img src="images/LOFT_nav02.gif" alt="#"></li>
<li><img src="images/LOFT_nav03.gif" alt="#"></li>
</ul>
</nav>
</header>

<div id="wrapper">
<div id="content">
<ul>
<li><img src="images/LOFT_01.png" alt="#"></li>
<li><img src="images/LOFT_s02.png" alt="#"></li>
<li><img src="images/LOFT_s03.png" alt="#"></li>
<li><img src="images/LOFT_s04.png" alt="#"></li>
<li><img src="images/LOFT_s05.png" alt="#"></li>
<li><img src="images/LOFT_s06.png" alt="#"></li>
<li><img src="images/LOFT_s07.png" alt="#"></li>
<li><img src="images/LOFT_s08.png" alt="#"></li>
<li><img src="images/LOFT_s09.png" alt="#"></li>
<li><img src="images/LOFT_s10.png" alt="#"></li>
<li><img src="images/LOFT_s11.png" alt="#"></li>
<li><img src="images/LOFT_s12.png" alt="#"></li>
<li><img src="images/LOFT_s13.png" alt="#"></li>
<li><img src="images/LOFT_s14.png" alt="#"></li>
<li><img src="images/LOFT_s15.png" alt="#"></li>
</ul>
</div><!--/#content-->

<div id="sidebar">
<p><img src="images/LOFT_m01.png" alt="#"></p>
<p><img src="images/LOFT_m02.png" alt="#"></p>
<p><img src="images/LOFT_m03.png" alt="#"></p>
</div><!--/#sidebar-->

</div><!--/#wrapper-->
</div><!--/#container-->

<footer><img src="images/LOFT_footer.gif" alt="#"></footer>
</body>
</html>


@charset "UTF-8";

/* reset */
html, body, header, footer, h1, p, ul, li {
  margin: 0;
  padding: 0;
  line-height: 1.0;
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo, 
    sans-serif;
}

ul {
  list-style: none;
}
a {
  text-decoration: none;
}
img {
  border: 0;
  vertical-align: bottom;
}

body {
  background: #efa246;
}

#container {
  width: 960px;
  margin: 9px auto 50px;
  background: #eb8b36;
  overflow: hidden;
}

header {
  width: 120px;
  height: 540px;
  float: left;
  position: relative;
}
header h1 {
  width: 120px;
  height: 162px;
  background: url(images/LOFT_logo.gif) no-repeat #FFF;
  white-space: nowrap;
  text-indent: 100%;
  overflow: hidden;
}


nav {
  position: absolute;
  bottom: 0;
  left: 0;
}

#wrapper {
  width: 840px;
  float: right;
  overflow: hidden;
}

#content {
  width: 600px;
  float: right;
}
#sidebar {
  width: 216px;
  float: left;
  margin: 0 12px;
}
#sidebar p {
  margin-top: 9px;
  margin-bottom: 18px;
}

#sidebar p:last-child {
  margin-bottom: 9px;
}

#content ul {
  overflow: hidden;
}

#content li {
  float: left;
  margin: 9px 12px;
}

footer {
  text-align: right;
  background: #000;
}

Photoshopでレイヤーマスクではなく描画モードを使って文字抜きをする

・スクリーンモード

レイヤー１に浮き上がらせたい写真を貼る
レイヤー２に黒字で文字を書く
レイヤー２をレイヤーの上部にある描画モードをスクリーンにすると
文字が透明になって下の写真がでてくる

f:id:chawannmusi:20160307154234p:plain
スクリーンモードにすると黒が100%透明になる。白は0%



・乗算モード

レイヤー１までは同じで
レイヤー２を黒で塗りつぶし白で文字を書く
レイヤー２の描画モードを乗算にすると
文字が透明になって下の写真がでてくる

f:id:chawannmusi:20160307154438p:plain
乗算モードにすると白が100%透明になる。黒は0%


グレーはどちらも50%透明になる

文字のレイヤーにグレーの四角を描いて乗算モードをすると

f:id:chawannmusi:20160307154814p:plain
こうなる！