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

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

1日目

<img>画像を表示するタグ
<img src=”パス”> alt=”代替文字”>
属性の順番は不問、altに記述する内容は簡潔に(読み上げに適応するため)

絶対パスと相対パスについて
絶対パス・・・主に外部にある
相対パス・・・内部にある、ファイルとファイルの位置関係を記述

同じ階層にある別のフォルダ
 src=”フォルダ名/ファイル名”
同じフォルダ内にあるファイル
 src=”ファイル名”
1つ上にある階層
 src=”../ファイル名”

width属性・・・幅を指定

height属性・・・高さを指定

HTMLはpx(ピクセル)を書かない

就職支援
・自己分析について

2日目

<h1>・・・タグ
<h1>大見出し</h1>・・・この全体を要素という

<img>は空要素
終了タグがないので内容を持たない

HTMLやCSSの記述は小文字で記述する(大文字でも認識はする)
JavaScriptは大文字と小文字を判別するので注意
半角と全角に注意

<a>要素の使い方
anchorの略、リンクを設定する
ターゲット属性の使い方
href属性・・・リンク先へのパスを記述する
エイチレフ(Hyper reference)
相対パス・・・同じサイト内の別ページ
絶対パス・・・別サイト
読み方
<小(しょう)なり
>大(だい)なり

TOPページはindex.htmlというファイル名にする

target属性・・・値を_blankと記述すると別タブで開く
        _selfだと同じタブ、何も書かないとブラウザの設定による
使用例)
<a>
<p><img ~></p>
<p></p>
</a>
全てに同じリンクを張りたいときは1つの<a>で囲う

ファイルの管理について
・ページ数
・素材
・拡張性やメンテナンス
などを考慮してディレクトリ構成を考える必要がある

index.htmlは1番上の階層に置く
comonファイルを作り共通した素材を入れると良い

ファイル名の付け方
・半角英数字
・スペースは空けない
・「/」(スラッシュ)は使えない
・「-」(ハイフン)、「_」(アンダースコア)、キャメルケースなどチームで命名ルールを統一する

サイトマップとはページのつながり

セクショニング要素
リスト要素
ブロックレベル要素
インライン要素
・header
・footer
・section
・article
・nav
・div
・span
・ul
・li

属性
・class
・id

3日目

Webサイトはボックスで構成されている
各コンテンツを四角く区切って作っていく
基本ボックスが重なることはない

各ボックスを人間とコンピューターにわかるように書いていく
コンピューターに対して、文書構造上の意味を明確にする

<header>
ページの中で1番初めに見てほしい内容で、上にあることが多い
ロゴやナビゲーションなど

<footer>
一番最後に見るコンテンツ
シンプルなものも見かけるが、ページ全体がわかるものが望ましい
コピーライトはあまり意味がない
全体のリンクなど量が多い

先生は<header>と<footer>を最初に作り、凝ったデザインにしてほしい

<main>
ページ内で主要なコンテンツ
一度だけ使える
ボックスが多くなる場合細分化する

<nav>
ページ内の主要なナビゲーションに使う
グローバルナビゲーションに使う場合が多い

<aside>
なくしてもページの内容に差し支えないコンテンツ
広告や更新情報のようなものなど

<section>
文書のまとまりを表す章や節など、必ず見出しを含む

<article>
独立した文章のまとまり
他のページに移動しても成り立つ

<div>
一つのグループ一つの要素などどこにでも使える
文書構造上の意味はない

<span>
文章の中の一部を囲う<div>と同じで意味はない

ブロックレベル要素・・・1つのボックスとなる要素を閉じたところで改行される
CSS-幅や高さの指定ができるなど<h1~h6><p><header><footer><main><aside><nav><section><article><div>

インライン要素・・・文章の一部に意味を持たせる
「強調」や「リンク」など<a><img><br><span>

HTML5でもなくなっていない
文章をすべてブロックレベル要素で囲っていく
ルール的には不要になったがインライン要素はブロックレベル要素の中に入れる
<img>は<div>で囲って置くほうがCSSを書くときに楽になる
<herd>
<style>
</style>
</head>

ページ内リンク・・・ページ内の目的の場所へのリンク
ジャンプ先ID属性を使って名前を付けておく
<p id=”news”>〇〇</a>

リンクを張る・・・<a>href属性にID名を利用した記述をする
<a href=”#news”>リンク</a>
#=idの意味

ID名を付けるときの注意
・同じID名はHTML内で1度だけ
・数字を頭に使ってはいけない
・全角も使えるが使っている人はいない
できるだけ「どこ」なのかを想像しやすい名前にする
中身や役割で名前を付ける

グローバルナビ・・・全ページ共通
ローカルナビ・・・ページごとに違う

class属性・・・idと同じく名前を付けるための属性
HTTP
<p class=”text”>〇〇</p>
CSS
.text{}

ピリオドがclassの意味

名前を付けるというのは同じだが、idはページ内リンクやjavascriptでclassはCSSで使うと分けている
classは同一HTML内で何度でも使える

コメント

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