２月４日の授業内容
おはようございます。
今日も毎度のことながら授業内容をまとめていきたいと思います。
２月４日は１時間目に急遽手代木先生によるWeb関係の就職先、そして就職活動するにあたりどのような心構えで臨むのが良いかというお話がありました。
私は知識的にはまだまだですが毎日コツコツ頑張って数ヶ月後の就活に胸を張って臨めるよう努力していきたいと思います。
過去にフェリカの生徒を採用してくださった会社を数社載せたいと思います。
以下、授業内容です。
授業内容
・小論文・レポートの書き方・・・上位表示には作文の書き方が良くないといけない。
webdesignbegineer.hatenablog.com
overflow: hidden;・・・レイアウトの高さ調整のに使う。Ｐ144～145 *はみ出たら隠すという意味ではない!!
値を取得して高さを調整するという意味。
clear:both;・・・・回り込みを調整するのに使う。それ以外では使わないこと！！
記入例
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/02-04-1.css">
<title>無題ドキュメント</title>
</head>
<body>
<div id="container">
<div id="header">ここに＃headerの内容が入る</div>
<div id="nav">ここに＃navの内容が入る</div>
<div id="wrapper">
<div id="content">ここにcontentの内容が入る</div>
<div id="sidebar">ここにsidebarの内容が入る</div>
</div><!--wrapperの留め-->
<div id="footer">ここにfooterの内容が入る</div><!--clearは回り込み防止のときのみ使う-->
</div><!--#containerの留め-->
</body>
</html>
<html lang="ja">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="CSS/02-04-1.css">
<title>無題ドキュメント</title>
</head>
<body>
<div id="container">
<div id="header">ここに＃headerの内容が入る</div>
<div id="nav">ここに＃navの内容が入る</div>
<div id="wrapper">
<div id="content">ここにcontentの内容が入る</div>
<div id="sidebar">ここにsidebarの内容が入る</div>
</div><!--wrapperの留め-->
<div id="footer">ここにfooterの内容が入る</div><!--clearは回り込み防止のときのみ使う-->
</div><!--#containerの留め-->
</body>
</html>
.......................................
@charset "utf-8";
/* CSS Document */
html,body{font-family:"Hiragino Kaku Gothic proN",/*divは入れなくても大丈夫*/
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;}
body{font-size:16px;
background:#FFF;}
#container{width:780px;
margin:0 auto;
padding:10px;
background:#97B591;}
#header{height:100px;
margin-bottom:10px;
background:#98E7E7;
}
#nav{height:60px;
background:#DBCD24;
margin-bottom:10px;}
#wrapper{width:780px;/*wrapperでは高さをつけないので視覚化するためにはoverflow:hidden;を使う*/
overflow:hidden;
margin-bottom:10px;
}
#sidebar{width:200px;
height:300px;
background:#8EC572;
float:left;}
#content{width:570px;
height:300px;
background:#F93;
float:right;}
#footer{height:60px;
background:#963;}
/* CSS Document */
html,body{font-family:"Hiragino Kaku Gothic proN",/*divは入れなくても大丈夫*/
Meiryo,
sans-serif;
margin:0;
padding:0;
line-height:1.0;}
body{font-size:16px;
background:#FFF;}
#container{width:780px;
margin:0 auto;
padding:10px;
background:#97B591;}
#header{height:100px;
margin-bottom:10px;
background:#98E7E7;
}
#nav{height:60px;
background:#DBCD24;
margin-bottom:10px;}
#wrapper{width:780px;/*wrapperでは高さをつけないので視覚化するためにはoverflow:hidden;を使う*/
overflow:hidden;
margin-bottom:10px;
}
#sidebar{width:200px;
height:300px;
background:#8EC572;
float:left;}
#content{width:570px;
height:300px;
background:#F93;
float:right;}
#footer{height:60px;
background:#963;}
フォトショップの起動時（ダブルクリックの２回目）にalt + ctrl +shiftで前回のデータをリセットできる。
・画像切り取りの手順
昨日も画像の切り抜きについて説明しましたが今回はまた違った方法を掲載します。
①ネットで画像を検索し画面表示させコピーする→Photoshopで新規ファイルを作成（ドキュメントの種類はクリップボードで）→新規ファイルにペーストする。（このとき、コピーしたクリップボードのデータを軽くするには新たに新規ファイル（幅、高さ１０で作成した所にペーストして削除する））
②長方形ツールを選択した状態でコントロールパネルのスタイルで”固定”を選択し幅、高さをpxで入力する。画像解像度は標準は72。
メニューバーのイメージの切り抜きを選択する。メニューバーのイメージで画像解像度を確認。
＊幅、高さを変えてweb用で保存するときは画像解像度の再サンプルにチェックをいれた状態ですること！！
③Web用に保存
・無料勉強ツール
・無料サーバー
・おススメサーバー（月２５０円）
