1月27日 授業内容

head  コンピュータに対して書く情報
body ブラウザに対して書く情報
 
要素の正しい使い方をしないと検索上位からは外れてしまう。
 
画像の幅、高さが分からないときは対象画像のプロパティ詳細で確かめる。
 
絶対パス:httpから始まる決まった住所っみたいなもの

ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の一つで、装置内の最上位階層から目的のファイルやフォルダまでのすべての道筋を記述する方式。

フォルダの中の階層を、「/」(スラッシュ)を使って区切ります。

相対パス:自分のフォルダを指定するときに使う

ハードディスクなどでファイルやフォルダの所在を示す文字列(パス)の表記法の一つで、起点となる現在位置から、目的のファイルやフォルダまでの道筋を記述する方式。

起点となるフォルダを「.」で、上位フォルダを「..」であらわす。

*分からない時は教科書P45,46参照


ひとつ上の階層を表すには「../」を使います

 ホテルの法則
 
・target="blank"・・・ブラウザ上で表示する時に新たなタブでの表示にすることができる。(ユーザーに優しい)
target="blank"は<a>タグのアドレスの後ろに入れる。
 
・インライン(教科書P65)は使わないこと。
・外部参照を仕事では主に使うこと。(link要素を使う方法を主に使う)
 
 
 
ボックスモデル(1つの箱の中に入れるイメージ=div(bodyの中に入れる))
 
セレクターの種類と基本ルール
 
 
  ・id 例1 <p id="fujiwara"> *ID名及びclass名の最初の文字に数字を使うと機能しないので使わないこと
p#fujiwara(スタイルタグでの書き方)
 
*id名は一回しか使えないので同じid名を複数作るときは<p class="fujiwara"></p>というふうにする
p.fujiwara(スタイルタグでの書き方)
 
記入例
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>HTMLの復習</title>
<style>
div#container{/* タグ#名前で書くときはid*/
  width:600px;
  height:300px;
  background-color:#666;}
h1{color:#ff0000;
font-size:2.0em;}
p{color:white;
font-size:20px;
}
p#fujiwara {color:red;
font-size:48;
}
p.yuji{color:blue;/* タグ.名前で書くときはclass*/
font-size:40;
background-color:red;}
</style>
</head>
<body>
<div id="container">
<h1>大見出し</h1>
<p>本文</p>
<p id="fujiwara">本文2</p> /* idは個別指定*/
<p class="yuji">本文3</p> /* classは共通idの時*/
<p class="yuji">本文4</p>
<p class="yuji">本文5</p>
<p><a href="http://secondglobe.com/wp-content/uploads/2013/08/Yellowstone-glory-pool.jpg" target="blank"><img src="../img/02/01.jpg" width=600px" height="300" alt="イエローストーン、アメリカの国立公園"></a></p>
</div>
</body>
</html>
 
 
 
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ボックスモデルの練習</title>
<style>
div#box1{background-color:pink;
width:200px;
height:200px;/*BOXの高さが200px*/}
div.size{width:300px; /* divのBOX2とBOX3の高さ、幅を指定*/
height:300px;}
div#box2{background-color:green;}
div#box3{background-color:yellow;}
</style>
</head>
 
<body>
<div id="box1"></div>
<div id="box2" class="size"></div>
<div id="box3" class="size"></div>
</body>
 
 
 
 
 
 
 
 
 
 
フォトショップ(レイヤーを重ねて作っていく)
 
・リセットしたい時は一旦閉じてフォトショップの上に矢印を合わせてダブルクリックをする。そのとき、2回目のクリックに合わせてshift,ctrl,altを同時に押す。
 ・編集の中の環境設定の中の定規、単位で定規、文字をpixにする。
 ・新規ファイルで開くときはプリセットをWebにする。
 ・ctrl+D:選択の解除
 ・レイヤーの目玉マークを押すとそのレイヤーは表示が消える。
  ・ctrl + 1:100%表示
  ・ctrl + 0:原寸表示
 
①新規レイヤーを開く
②円を書く
③色を塗る  描画色で塗るとき alt+backspace
    背景色で塗るとき ctrl+backspace
一面を塗るとき(選択):ctrl+A
 
 
・自動選択ツール(上から4番目のツール)・・・練習1使う
 ①外枠を押す
 ②選択範囲→選択範囲を反転(ctrl+shifi + I) 
 
・マグネット選択ツール(上から3番目のところ)・・・線で囲んで始点まで戻りクリックを押すか、ctrlを押したままクリックすると選択完了
・選択範囲を細かく設定したい場合はクイックマスクモード(1番左下)を押した状態でブラシツール、消しゴムツールを使って微調整する。
 
・他の画像を移す作業(使うのは練習1のダッキー、スカイ)
①ダッキーのタグをちょっとずらすとスカイとダッキーの二つが表示される。
②自動選択ツールでダッキーのみ指定してから移動ツールで選択する。
③ctrl + T(transform):形を拡大縮小する(均等で拡大、縮小する時はshiftを押しながら)
④ダッキーのレイヤーをコピーしたい場合はダッキーのレイヤーを新規レイヤーまでドラッグする。
*変更を確定しないと先に進めない(右上の○か×を押す)
⑤ダッキーのレイヤーを2つ準備し、ひとつのダッキーを反転するには編集→変形→水平方向に変形