皆様お疲れ様です。。
実はもともと自分は５月生として入学したのですが、都合により７月に移りました。
５月で習っていた時に、その授業が終わる度に復習メールというものが送られてきました。参考程度でいいので軽く目を通して見てください。半端なく長いですがよろしくです。
<HTMLでのフォーム>
フォームについては、辞書の方に
画像付きでタグが出ていますので、
そちらにて説明します。（閉じタグは省略）
■<form action="url" method="形式" enctype="mimetype">タ
グ
p-113、114
フォームを配置するときの基本タグです。
■<input type="text" name="名前" value="記入済み文字"
size="
幅" maxlength="最大文字数">
pー120
１行テキスト入力フィールドを作成
■<input type="radio" name="名前" value="記入済み文字"
checked>
p-124
ラジオボタンを作成。（項目の中から、１個だけ選択する）
選択項目のname値を全部そろえておく事！
デフォルトで選んでおく場合のみcheckedを記入
■<select name="名前" >
<option value="送信値">
<option value="送信値" checked>
p-126
プルダウンのメニューを作成
デフォルトで選んでおく場合のみcheckedを記入
■<input type="chechbox" name="名前" value="送信値"
checked>
p-125
チェックボックスの作成（複数選択可）
■<textarea name="名前" rows="行数" cols="幅">
p-121
複数行テキスト入力フィールドの作成（複数選択可）
ーーーーーーーーーーーーーーーーーーーーーーーーーー
ドリームウィーバー（以後ドリと表記）の基本。
ドリはhtmlを生成するソフトです。
基本的には手打ちで、基礎が解ってないと、
先生がおっしゃったように無駄ソースが
非常に多くなりますので、
htmlのタグの知識は必須です。
これからwebデザイナーを目指す人は
これが使えないと仕事にならない訳ではありませんが、
機能的な面で覚えておかなければいけない事が多いです。
だから、必ず使えるようになってください。
不安な人は（やっぱりですが）練習あるのみです。
ただし！
やっぱりhtmlのタグの知識は必要です。
やる事は多岐にわたり多いですが、頑張って覚えましょう！
ドリで最初にやる事
○サイトの設定
これをまずしないと、ファイルの管理がうまくいきません。
要は、これから作業するフォルダを決める事です。
（メニューの）サイト→ サイト管理→ 新規作成→ サイ
ト
とすると、小窓が出てきます。
ここで、小窓上部のタブを詳細に切り替えておきましょう。
で、”詳細設定”の方を選んでおきます。
まずは左側メニューの“ローカル情報”を選んでおきましょ
う。
そこから、右側のメニューでとりあえず上から２つだけ
設定します。
“サイト名”にはこれからドリで作業するときの
“名前”を決めます。この名前は次で設定する
ローカルルートフォルダ位置のフォルダ名
と同じ必要がありません。
ご自分で管理しやすい名前を付けましょう。
（クライアント名とか、バージョンとか）
名前は何でもかまいません。
次はローカルルートフォルダを設定します。
作業するフォルダを選択します。
これから作成するファイルを保存したい
フォルダを開いておいた状態で“選択”します。
このローカルルートフォルダの設定は
先生の説明にもありましたが、
間違えないように設定してください。
ftp設定はリモート情報から設定しますが、
来週のCPIサーバーの設定の説明か、
それ以降の実習で、説明があると思います。
詳しくは話が出てから解説します。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
次に環境設定での項目を確認します。
今回は、２カ所いじります。
一般の項目の
“HTMLタグの代わりにcssを使用”
のチェックを外します。
これがついていると、ヘッダ内に
インラインでcssが記入されます。
次に<b><i>の代わりに<strong><em>を使用
のチェックは今回はつけました。
あとはいじりませんでした。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
ファイルの作成
ドリでは、いくつか新規ファイルを作成する方法が
ありますが、
１）ファイル→ 新規→ （カテゴリの基本ページ）
→ HTML
２）ファイルパネルを出しておいて、
ファイルパネル上のルートに指定した
フォルダの上で、右クリして、
“新規ファイル”を選ぶ
３）ルートフォルダを選択してしておいてから
ファイルパネル右上のオプションから
新規ファイルを選ぶ
で作成出来ます。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
で、作成されたHTMLをコードビューか分割ビューで
見てみると、基本タグはすべて書かれています。
ここで、一番上の
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://
と
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
をよく見ておきましょう
一番上の記述はドキュタイプ宣言と言います。
詳しくは辞典のp９に出ています。
非常に重要なので、必ず記述します。
これは、作業中のファイルがhtml(orxhtml)で書かれていて、
バージョンがいくつで、モードが何か？
を設定しています。
これはなくても実は表示します。
でも、素人じゃないので、
自分がどのバージョンで記述するのか
理解しながらhtmlを記述しなくていはいけませんので
必ず記述します。
次の<meta>タグですが、
引き続き、このファイルの情報を記述しています。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
辞書にはP19,P20に記述されています。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
操作の基本。
○画面について
分割ビューの状態で、上半分はコードビューです。
下半分はプリビューです。
ドリのプリビューは非常にヘボイので、
ドリでちゃんと表示されていても、
たいていブラウザでの表示は違いますので、
その都度、ブラウザーで確認しましょう！！
で、コードビューでのエンターキーは改行ですが、
プリビューでのエンターキーは<p> </p>
となります。（空白）段落となります。
で、プリビュー画面で改行するには
shift+enterで<br>タグの挿入です。
実はコードビューでも一緒です。
今後乱用しますので、是非覚えてください。
○挿入メニューについて
画面上部のメニューの下に挿入メニューが表示されていますが
、
メニュー方式の表示と、タブ表示の２種類選べますので、
お好きな方を設定してください。
切り替えは、どちらが表示されているかで
違いますが、
メニューが表示されている場合は
左端のプルダウンの一番下に“タブとして表示”とします。
タブが表示されている場合は、
タブの文字の行のどこでもいいので
右クリすると“メニューとして表示”が出てきます。
○半角文字の扱い
半角文字は、ドリでは勝手に修正してくれます。
という事は、意図しない表示になる事も
考えられます。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
文字コード表を辞書の
P174,175,176で確認しておきましょう
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
かなり重要です。
○ブラウザリストの設定
ドリでは、作業ファイルをブラウザーで確認する為の
機能があります。
最初（初期状態）ではIEしか設定されていません。
ご自分のマシンにfirefoxなどのその他のブラウザが
入っている人は、登録しておきましょう。
環境設定→ ブラウザーでプリビュー
から、“＋”ボタンを押して追加します。
で、どのブラウザを追加するかファイルの場所を
聞いてきますので、
winの人は大体、program fileフォルダの中に
macの人は、apprication の中に入ってますので、
選んでおきます。
で、追加すると、IEの下にどんどんブラウザが追加されていき
ますが、
その下に初期設定というチェックボックスがあります。
で、プライマリブラウザというのはF１２キー
で呼び出せるブラウザです
セカンダリプラウザとはctrl+F12で呼び出します。
プライマリが最初
セカンダリが２番目です。
プライマリとセカンダリという呼び方は
コンピューター関連ではちょいちょい出てくるので、
覚えておいて損はないでしょう。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
○画面下のプロパテイィパネル
ここでいろいろ作業します。
画像を選ぶと、画像に追加出来るプロパティが制御出来て、
文字を選ぶと文字のプロパティを制御出来ます。
かなり便利なので、ここをちゃんと使えるようにしておきまし
ょう
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
文字を選んで、出てくるフォーマットという項目は
“段落”“見出し１”など設定出来ます。
ここで変更すると、コードもちゃんと変更されます。
プリビューで選んで設定を変更したら、
コードビューでどのようなコードになるか？
ちゃんと確認＆把握しながらやってください。
実習中の細かい作業は書きませんが、
手打ちでやってた事を簡単に出来るようになるツールですので
、
頼りすぎてはいけません。
かならず、コードでの確認をしてください。
面倒くさいとか、分けわかんないという人は
（手打ちでやった）htmlの実習のファイルから見直して、
復習してください。
ドリでやると、やった事がすぐプリビューで
反映されるので、いまなら簡単です。
まあ、先週くらいまでの事は、これから先、
わかってないと、今後の実習で何をやってるのか？
理解しないまま進行する事になりますので、
必ず復習してください。
本当に、脅しでなくて、復習しないと解りません。
先輩が言うんだから間違いありません。
がっちりやりましょう。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
cssについて
cssは辞書のp178からp292までです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
概念的な事が書いてあるp178-p182までは
必ず読んでおいて下さい。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
html上cssの記述は、３カ所に記述が可能です。
１）外部ファイル
２）headタグ内
３）インライン
です。この３カ所への記述を
ドリではどこから設定するか？
最初にまず、cssスタイルを作成するところから
始めます。
まず、cssスタイルの作成方法です。
○
テキスト→cssスタイル→新規
とするか、
○
デザインパネルのcssスタイルタブの
下に並んでるアイコンの
“新規cssスタイル”を選びます。
で、これをすると、小窓が出てきます。
で、定義場所の項目より、
上（プルダウンメニュー）を選ぶと、外部ファイルへ
記述します。
下の現在のドキュメントのみを選択すると
htmlファイルのhead タグ内に記述されます。
これをちゃんと確認してくださいね。
で、３カ所にかけるという事は、
３カ所いっぺんに書いたらどれが反映されるのか？
という疑問が出てきますね。
順番としては、
１）インライン
２）headタグ内
３）外部ファイル
の順番で強制力が強いのです。
これも覚えておきましょう！！！
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
cssで設定する物は
１：タグの再定義
２：リンク指定
３：クラス
４：ID
です。
これは、先ほどの新規cssスタイルの小窓
の上の方の設定になります。
で、クラスはすべての設定を制御出来ます。
タグはhtmlでのタグのスタイルを再定義します。
詳細は、IDおよびリンクの設定です。
手打ちでやるようになると、
この小窓は使わなくなりますが、
今のうちに覚えておきましょう。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
今回の実習では文字周りのcssを
設定してみました。
実習で使ったところだけ説明します
文字周りの設定はタイプの項目から設定します。
フォントの項目は
フォントの指定をします。
htmlタグではfont-faceの設定になります。
サイズはフォントの大きさを設定します。
htmlタグではfont-sizeの設定になります。
単位は、pxで指定してしまうと、IEで文字サイズが
変更出来なくなちゃうので、emsか％で
指定しましょう。
ウエイトは文字の太さを設定します。
htmlタグではfont-weightの設定になります。
normal（通常）
bold（太字）
lighter（細字）
などの設定をします。
ライン高は行間の設定です。
htmlタグではline-heightの設定になります。
単位はemsか％で指定しましょう。
カラーは文字色です。
htmlタグではfont-colorの設定になります。
パレットから選ぶか、＃○○○○○○で
設定します。
飾りは文字の装飾の設定です。
htmlタグではtext-decorationの設定になります。
大体アンダーラインぐらいしか使いませんが、
タグの再定義において、
無し(none)を設定する事も重要です。
覚えておきましょう。
で、重要なポイントです。
単位を指定する項目において
単位は統一して使いましょう。
ブラウザでレタリングされない事があります。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
○cssの書き出し
今度は新規cssスタイルを
外部ファイルとして書き出します。
新規cssスタイルの小窓から、
新規スタイルシートファイルを選びます。
そうすると次ぎに、外部ファイルを
どこに保存するか聞いてきますので、
保存場所とファイル名を指定します。
ファイル名は○○.cssとしておきます。
必ず拡張子を.cssでつけてください。
そうすると、
<title>タグの下に
<link>というタグが生成されます。
例）
<link href="○○.css" rel="stylesheet" type="text/css">
ドリではこう記述されます。
ここにはファイルのパスと、ファイルの種類が
記述されます。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
次はリンクタグを再定義です
リンクタグは記述順序が決まっています。
この順番を守らないとちゃんと機能しない場合が
ありますので、注意してください。
a:link（クリック前）
a:visited（訪問後）
a:hover（マウスオーバー時）
a:active（マウスボタンを押しっぱなしにしている状態の色）
です。
linkでは下線をつけず、hoverで下線をつける
パターンがはやっていると先生からのコメントがありました。
実はもともと自分は５月生として入学したのですが、都合により７月に移りました。
５月で習っていた時に、その授業が終わる度に復習メールというものが送られてきました。参考程度でいいので軽く目を通して見てください。半端なく長いですがよろしくです。
<HTMLでのフォーム>
フォームについては、辞書の方に
画像付きでタグが出ていますので、
そちらにて説明します。（閉じタグは省略）
■<form action="url" method="形式" enctype="mimetype">タ
グ
p-113、114
フォームを配置するときの基本タグです。
■<input type="text" name="名前" value="記入済み文字"
size="
幅" maxlength="最大文字数">
pー120
１行テキスト入力フィールドを作成
■<input type="radio" name="名前" value="記入済み文字"
checked>
p-124
ラジオボタンを作成。（項目の中から、１個だけ選択する）
選択項目のname値を全部そろえておく事！
デフォルトで選んでおく場合のみcheckedを記入
■<select name="名前" >
<option value="送信値">
<option value="送信値" checked>
p-126
プルダウンのメニューを作成
デフォルトで選んでおく場合のみcheckedを記入
■<input type="chechbox" name="名前" value="送信値"
checked>
p-125
チェックボックスの作成（複数選択可）
■<textarea name="名前" rows="行数" cols="幅">
p-121
複数行テキスト入力フィールドの作成（複数選択可）
ーーーーーーーーーーーーーーーーーーーーーーーーーー
ドリームウィーバー（以後ドリと表記）の基本。
ドリはhtmlを生成するソフトです。
基本的には手打ちで、基礎が解ってないと、
先生がおっしゃったように無駄ソースが
非常に多くなりますので、
htmlのタグの知識は必須です。
これからwebデザイナーを目指す人は
これが使えないと仕事にならない訳ではありませんが、
機能的な面で覚えておかなければいけない事が多いです。
だから、必ず使えるようになってください。
不安な人は（やっぱりですが）練習あるのみです。
ただし！
やっぱりhtmlのタグの知識は必要です。
やる事は多岐にわたり多いですが、頑張って覚えましょう！
ドリで最初にやる事
○サイトの設定
これをまずしないと、ファイルの管理がうまくいきません。
要は、これから作業するフォルダを決める事です。
（メニューの）サイト→ サイト管理→ 新規作成→ サイ
ト
とすると、小窓が出てきます。
ここで、小窓上部のタブを詳細に切り替えておきましょう。
で、”詳細設定”の方を選んでおきます。
まずは左側メニューの“ローカル情報”を選んでおきましょ
う。
そこから、右側のメニューでとりあえず上から２つだけ
設定します。
“サイト名”にはこれからドリで作業するときの
“名前”を決めます。この名前は次で設定する
ローカルルートフォルダ位置のフォルダ名
と同じ必要がありません。
ご自分で管理しやすい名前を付けましょう。
（クライアント名とか、バージョンとか）
名前は何でもかまいません。
次はローカルルートフォルダを設定します。
作業するフォルダを選択します。
これから作成するファイルを保存したい
フォルダを開いておいた状態で“選択”します。
このローカルルートフォルダの設定は
先生の説明にもありましたが、
間違えないように設定してください。
ftp設定はリモート情報から設定しますが、
来週のCPIサーバーの設定の説明か、
それ以降の実習で、説明があると思います。
詳しくは話が出てから解説します。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
次に環境設定での項目を確認します。
今回は、２カ所いじります。
一般の項目の
“HTMLタグの代わりにcssを使用”
のチェックを外します。
これがついていると、ヘッダ内に
インラインでcssが記入されます。
次に<b><i>の代わりに<strong><em>を使用
のチェックは今回はつけました。
あとはいじりませんでした。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
ファイルの作成
ドリでは、いくつか新規ファイルを作成する方法が
ありますが、
１）ファイル→ 新規→ （カテゴリの基本ページ）
→ HTML
２）ファイルパネルを出しておいて、
ファイルパネル上のルートに指定した
フォルダの上で、右クリして、
“新規ファイル”を選ぶ
３）ルートフォルダを選択してしておいてから
ファイルパネル右上のオプションから
新規ファイルを選ぶ
で作成出来ます。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
で、作成されたHTMLをコードビューか分割ビューで
見てみると、基本タグはすべて書かれています。
ここで、一番上の
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01
Transitional//EN"
"http://
と
<meta http-equiv="Content-Type" content="text/html;
charset=Shift_JIS">
をよく見ておきましょう
一番上の記述はドキュタイプ宣言と言います。
詳しくは辞典のp９に出ています。
非常に重要なので、必ず記述します。
これは、作業中のファイルがhtml(orxhtml)で書かれていて、
バージョンがいくつで、モードが何か？
を設定しています。
これはなくても実は表示します。
でも、素人じゃないので、
自分がどのバージョンで記述するのか
理解しながらhtmlを記述しなくていはいけませんので
必ず記述します。
次の<meta>タグですが、
引き続き、このファイルの情報を記述しています。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
辞書にはP19,P20に記述されています。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
操作の基本。
○画面について
分割ビューの状態で、上半分はコードビューです。
下半分はプリビューです。
ドリのプリビューは非常にヘボイので、
ドリでちゃんと表示されていても、
たいていブラウザでの表示は違いますので、
その都度、ブラウザーで確認しましょう！！
で、コードビューでのエンターキーは改行ですが、
プリビューでのエンターキーは<p> </p>
となります。（空白）段落となります。
で、プリビュー画面で改行するには
shift+enterで<br>タグの挿入です。
実はコードビューでも一緒です。
今後乱用しますので、是非覚えてください。
○挿入メニューについて
画面上部のメニューの下に挿入メニューが表示されていますが
、
メニュー方式の表示と、タブ表示の２種類選べますので、
お好きな方を設定してください。
切り替えは、どちらが表示されているかで
違いますが、
メニューが表示されている場合は
左端のプルダウンの一番下に“タブとして表示”とします。
タブが表示されている場合は、
タブの文字の行のどこでもいいので
右クリすると“メニューとして表示”が出てきます。
○半角文字の扱い
半角文字は、ドリでは勝手に修正してくれます。
という事は、意図しない表示になる事も
考えられます。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
文字コード表を辞書の
P174,175,176で確認しておきましょう
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
かなり重要です。
○ブラウザリストの設定
ドリでは、作業ファイルをブラウザーで確認する為の
機能があります。
最初（初期状態）ではIEしか設定されていません。
ご自分のマシンにfirefoxなどのその他のブラウザが
入っている人は、登録しておきましょう。
環境設定→ ブラウザーでプリビュー
から、“＋”ボタンを押して追加します。
で、どのブラウザを追加するかファイルの場所を
聞いてきますので、
winの人は大体、program fileフォルダの中に
macの人は、apprication の中に入ってますので、
選んでおきます。
で、追加すると、IEの下にどんどんブラウザが追加されていき
ますが、
その下に初期設定というチェックボックスがあります。
で、プライマリブラウザというのはF１２キー
で呼び出せるブラウザです
セカンダリプラウザとはctrl+F12で呼び出します。
プライマリが最初
セカンダリが２番目です。
プライマリとセカンダリという呼び方は
コンピューター関連ではちょいちょい出てくるので、
覚えておいて損はないでしょう。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
○画面下のプロパテイィパネル
ここでいろいろ作業します。
画像を選ぶと、画像に追加出来るプロパティが制御出来て、
文字を選ぶと文字のプロパティを制御出来ます。
かなり便利なので、ここをちゃんと使えるようにしておきまし
ょう
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
文字を選んで、出てくるフォーマットという項目は
“段落”“見出し１”など設定出来ます。
ここで変更すると、コードもちゃんと変更されます。
プリビューで選んで設定を変更したら、
コードビューでどのようなコードになるか？
ちゃんと確認＆把握しながらやってください。
実習中の細かい作業は書きませんが、
手打ちでやってた事を簡単に出来るようになるツールですので
、
頼りすぎてはいけません。
かならず、コードでの確認をしてください。
面倒くさいとか、分けわかんないという人は
（手打ちでやった）htmlの実習のファイルから見直して、
復習してください。
ドリでやると、やった事がすぐプリビューで
反映されるので、いまなら簡単です。
まあ、先週くらいまでの事は、これから先、
わかってないと、今後の実習で何をやってるのか？
理解しないまま進行する事になりますので、
必ず復習してください。
本当に、脅しでなくて、復習しないと解りません。
先輩が言うんだから間違いありません。
がっちりやりましょう。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
cssについて
cssは辞書のp178からp292までです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
概念的な事が書いてあるp178-p182までは
必ず読んでおいて下さい。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
html上cssの記述は、３カ所に記述が可能です。
１）外部ファイル
２）headタグ内
３）インライン
です。この３カ所への記述を
ドリではどこから設定するか？
最初にまず、cssスタイルを作成するところから
始めます。
まず、cssスタイルの作成方法です。
○
テキスト→cssスタイル→新規
とするか、
○
デザインパネルのcssスタイルタブの
下に並んでるアイコンの
“新規cssスタイル”を選びます。
で、これをすると、小窓が出てきます。
で、定義場所の項目より、
上（プルダウンメニュー）を選ぶと、外部ファイルへ
記述します。
下の現在のドキュメントのみを選択すると
htmlファイルのhead タグ内に記述されます。
これをちゃんと確認してくださいね。
で、３カ所にかけるという事は、
３カ所いっぺんに書いたらどれが反映されるのか？
という疑問が出てきますね。
順番としては、
１）インライン
２）headタグ内
３）外部ファイル
の順番で強制力が強いのです。
これも覚えておきましょう！！！
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
cssで設定する物は
１：タグの再定義
２：リンク指定
３：クラス
４：ID
です。
これは、先ほどの新規cssスタイルの小窓
の上の方の設定になります。
で、クラスはすべての設定を制御出来ます。
タグはhtmlでのタグのスタイルを再定義します。
詳細は、IDおよびリンクの設定です。
手打ちでやるようになると、
この小窓は使わなくなりますが、
今のうちに覚えておきましょう。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
今回の実習では文字周りのcssを
設定してみました。
実習で使ったところだけ説明します
文字周りの設定はタイプの項目から設定します。
フォントの項目は
フォントの指定をします。
htmlタグではfont-faceの設定になります。
サイズはフォントの大きさを設定します。
htmlタグではfont-sizeの設定になります。
単位は、pxで指定してしまうと、IEで文字サイズが
変更出来なくなちゃうので、emsか％で
指定しましょう。
ウエイトは文字の太さを設定します。
htmlタグではfont-weightの設定になります。
normal（通常）
bold（太字）
lighter（細字）
などの設定をします。
ライン高は行間の設定です。
htmlタグではline-heightの設定になります。
単位はemsか％で指定しましょう。
カラーは文字色です。
htmlタグではfont-colorの設定になります。
パレットから選ぶか、＃○○○○○○で
設定します。
飾りは文字の装飾の設定です。
htmlタグではtext-decorationの設定になります。
大体アンダーラインぐらいしか使いませんが、
タグの再定義において、
無し(none)を設定する事も重要です。
覚えておきましょう。
で、重要なポイントです。
単位を指定する項目において
単位は統一して使いましょう。
ブラウザでレタリングされない事があります。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
○cssの書き出し
今度は新規cssスタイルを
外部ファイルとして書き出します。
新規cssスタイルの小窓から、
新規スタイルシートファイルを選びます。
そうすると次ぎに、外部ファイルを
どこに保存するか聞いてきますので、
保存場所とファイル名を指定します。
ファイル名は○○.cssとしておきます。
必ず拡張子を.cssでつけてください。
そうすると、
<title>タグの下に
<link>というタグが生成されます。
例）
<link href="○○.css" rel="stylesheet" type="text/css">
ドリではこう記述されます。
ここにはファイルのパスと、ファイルの種類が
記述されます。
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
次はリンクタグを再定義です
リンクタグは記述順序が決まっています。
この順番を守らないとちゃんと機能しない場合が
ありますので、注意してください。
a:link（クリック前）
a:visited（訪問後）
a:hover（マウスオーバー時）
a:active（マウスボタンを押しっぱなしにしている状態の色）
です。
linkでは下線をつけず、hoverで下線をつける
パターンがはやっていると先生からのコメントがありました。
|
|
|
|
|
|
|
|
デジハリ７月生火金デザ 更新情報
-
最新のトピック
-
最新のイベント
-
まだ何もありません
-
-
最新のアンケート
-
まだ何もありません
-
