ウェブデザイン職業訓練【3週目】

3周目の授業は2日だけでした

1日目

受講生の質問に回答
資格について
訓練校で受けれる資格はサーチファイ
HTML&CSSは最低2週間
Photoshopとillustratorは1か月程度
制作会社への就職に関する年齢について
購入したPCのサポートをしてくれるか

<ul>…箇条書きの内容
Unorderd List
順序が関係ないもの
文字量が多くないもの
左側に余白=字下げ
ul要素の子要素はli要素のみ(liにulや見出しなどを入れる)

<li>…箇条書きの1項目
List Item
除法として優劣がなく長すぎなければ箇条書き(リスト)になる
ブロックレベル要素
行頭に「・」がつく

<ul><li>などの記述は親子で表す

<ol>…順序付きリスト
Orderd List
項目は<li>
ol要素の場合行頭は数字になる
olに使えるもの<li>だけ

定義リスト
<dl>定義リスト全体
Definition List
<dt>定義(見出し)
Definition Term
<dd>定義(本文)
Definition Details

Q&A…質問dt回答dd
新着情報…日付dt内容dd
おすすめ…タイトルdt内容dd
予習する人は、翌日は<ul><li>を使ったナビゲーションをやる予定

2日目

ナビゲーションとは
各ページやページ内の目的の場所へのリンクをまとめたもの

■グローバルナビゲーション…すべてのページで共通のナビ
■ローカルナビゲーション…各ページで内容が変わるナビ
■フッターナビゲーション…すべてのページへのリンク
■パンくずリスト…今いる階層を明確にしたナビ

<nav>…ナビタグ 主要なナビゲーションに使う、リンクにハッシュだけ入れるとページが更新される

<a href=”#”></a>
何も入れなくても同じ動きをする

パンくずリストはolで作ることによって順番をつけるがCSSで見えないようにする

CSS(Cascading Style Sheets)カスケーディング・スタイル・シートとは
サイトの見た目のデザインを記述していく言語
CSSの書き方
例)
p{color: red;}
セレクタ+プロパティ+値

CSSを書く場所は3通り

1.開始タグに直接書く(インライン方式)
<p style=”color: red;”>〇〇</p>

2.<head>に書くエンペット(埋め込み)方式
<head>
<style>
p{color: red;}
</style>
</head>

3.<head>に<link>で読み込む外部ファイル方式
<link rel=”stylesheet”href=”パス”>
CSSを別ファイルで作成する

<rel>…リレーション属性

colorプロパティ…文字の色を指定する
色の指定(値)の書き方
・カラーネーム:red赤、blue青、など
・カラーコード:#で始まる16進数
・rgb指定
など
リンクのaにCSSを指定すると青から任意の色に指定できる

コメント

タイトルとURLをコピーしました