HTML作成方法について１

振り返り

たかだ

　HTMLよりもCSSの方が難しいと感じた。余白のサイズや位置の指定がうまくいかないときは、自分で考えることも大事だが効率が悪いので人に聞いて言おうと思う。検証サービスツールもきちんとこまめに活用していこうと思った。

学びまとめ

確認すること
教科書（見本）を見て制作
制作するにおいて
terapad準備
step１
step２
step３
step４

確認すること

全体のレイアウト
要素それぞれの大きさ
要素を構成する色（文字色、背景色、線の色など）
フォントの種類や太さ
要素同士の感覚

教科書（見本）を見て制作

ダウンロードしたzipファイルをすべて展開しておく
pdfデザインラフや素材画像ファイル、原稿ファイルを確認
今回はTeraPadとChromeを使用してWebページ開発
terapadをブラウザで表示して確認しつつ作成

制作するにおいて

全体の構造（ブロックごとに考える

ヘッダーエリア
メインエリア
フッターエリア

フォルダ

htmlファイルとcssファイルとresetcssが必要
画像ファイルはjpg/png/gif
管理しやすいよう常にフォルダ分けなどの整理をしておく
画像フォルダはimg image imagesがよく使用される

terapad準備

Terapadを入れるフォルダを作成する
ファイル→新規作成→文字/改行うコード指定保存→文字コードUTF-8N
デスクトップに名前を付けて保存（index.html
index.htmlを作成したフォルダに入れる
テキストは事前に書いておき、張り付ける

step１

空白はtab

<doctype html>

まず１行目に宣言する
意図しないrレイアウトを防ぐため

<html>～</html>

改行して２行目と最終行にhtmlを記述してテキスト全体を囲む
htmlを構成するすべての要素は、このタグの間に書く

<head>～</head>

全体をheadで囲む
文章のメタデータ等の紐づけする部分
文章のメタデータ等の紐づけする部分
ここで描かれた情報はブラウザ画面では表示されない
ブロック分けででるヘッダーエリアとは別

<body>～</body>

全体をbodyで囲む　bodyは最終行　htmlの直前
全体をbodyで囲む　bodyは最終行　htmlの直前
ここで描かれた情報はブラウザ画面では表示される
headとbodyはそれぞれ一つずつ（２つ以上はだめ）

headの内容記述

<meta charset=”UTF₋8”>

まず文字のエンコードを指定

必ずheadの次の行に記述

<meta name=”description” content=”～～～”>

ページの概要
～の部分が検索結果に表示される

<meta name=”keywords” content=”～～～”>]

ページの内容を記載して検索エンジンのクローラーンページの内容を伝える役割
記述する際は３～５個程度のキーワードを半角カンマで区切り記載
例：花屋,ブーケ,ギフト,ブライダル

<title>～</title>

ページのタイトル
～に〇〇公式サイトなどを記述
ブラウザのタブ、ブックマーク、検索結果として表示されるためはっきりとわかりやすいものがよい

step２

前のファイルをコピーしておく

画像の挿入(今回はimg)
＜img scr=”(画像のパス名)”　alt＝”(代替えテキスト。画像の内容を示す文言)”　width＝”(画像の幅)”　height=”(画像の高さ)”＞

scr属性とalt属性とwidth属性とheight属性

alt属性は画像のテキストによる説明入れる(html5では必須ではない)
ネットワークエラーなどで画像が読み取れなかった場合にテキストが表示される
〇〇株式会社など詳しく設定する
alt属性に空文字を設定(alt=””)すると、この画像が重要ではない装飾するものになる

width属性　画像の幅　height属性　画像の高さ

画像のサイズはpxをつけずに記述
ここでサイズを指定しても、cssで指定したサイズで表示される
htmlでも設定する理由としてwidthとheightを指定しておくとwebページが読み込まれる間に視覚的要素が予期しない動作をすることが防げる(スクロールしようとしたら、違うボタンを押すなど)

リンク設定する　<a>～</a>

<a href=(リンク先のパス)”>表示される文字列</a>
target=”_blank”と指定すれば新規タブに表示させることができる

改行 

テキストや画像をブラウザ場で改行させたいとき 使用
と改行を重ねるの禁止
レイアウトはcssで

強調する〜

テキストの一部にアクセントをつけたいとき(強調したい)時使用
斜体にはなるが、強調するために使用するため斜体にするために使用しない

著作権表示〜

免責・警告・法的規制・著作権・ライセンス要件などの注釈や細目に表す
このタグで囲むと少し小さい文字で表示されるが、強調や情勢を弱める意味はない。小さく表示するために使用するものでもない

cssファイルを作成し、htmlファイルと紐づけ

terapad起動後cssファイルを作成しファイルに保存
htmlのファイル内にひもづけするタグを記述

<link href=”(cssファイルのパス)” rel=”stylesheet” type=”text/css”>

id属性とclass属性

一つの要素にid属性とclass属性を同時に記述することも可能

id=”…”

一つのidはページ内で１度のみ
一つのタグに複数はつけられない
ページ内のリンクアンカーとする
優先順位＋１００点
一つしかない要素を指定
ページ内リンクのアンカー

class=”…”

一つのページ内で同じclassを何度でも使用可
１つのタグに複数のclassをつけること可
優先順位＋１０点
スタイルを適用するため

修正しやすいcssにするコツ

/===========header=======/など入れておく
省略をする（hedrもnav省略可　h1はできない

例

header>nav.globalnavi h1

gloubalNavi h1

step３

reset.cssとは

各ブラウザは独自のスタイルシートがある
他ブラウザで閲覧すると表示が違うのを防ぐもの
reset.cssは、何をリセットするかは個人のやり方によるので、正解や決まりはない

reset.cssの作成と紐づけ

terapad起動後ファイル作成しフォルダへ
今は作成されているreset.cssを使用する

htmlファイルに紐づけ

reset.cssはレイアウト用のcssの上に記述

リンクの扱いや装飾など cssフォルダの作成

cssファイルの場所を移動するとリンク切れを起こす
ファイルの場所やファイル名を変更した場合必ず、hemlの<link>タグや<img>タグなどの相対パス書き換える
cssと画像のファイルの相対パスも修正

step４

【css】疑似クラスについて(省略する)

疑似クラスを使えば、クラス名をつける手間が省ける

記述のやり方

奇数番目	右から左
偶数番目	左から右

奇数番目のかたまり

dairyとweddingはhtmlの記述と逆順(右から左)

main section.purpose div.daily{
flex direction: row reverse;
}

偶数番目のかたまり

流れ通り(左から右)の繰り返し（これは初期値なので記載する必要なし
main section.purpose div.wedding{
flex direction: row reverse;
}

position

要素の表示位置を決めるための配置方法を指定するcssプロパティ
maginとpaddingで多少位置を変更できるが、positionプロパティなら要素を重ねる
固定するなどできる

グローバルナビゲーション

最初から１番上にあるものをその位置で固定する方法→fixedを使用する
他の要素に潜らないように常に最前面に表示するよう、z-indexも同時に指定
数字に特に決まりはないが、大きい数字を入力すれば他の要素に干渉されない。

例　左上ピッタリにつける
position:fixed;

top: 0;
left: 0;

z-index: 9999:

複数のデバイスで一つのページを共有する方法【レスポンシブ】手順

1つのhtmlに記述　cssで画面幅〇〇ピクセル以上の場合はaそれ以下はbと条件分けする

１pcサイトの作成
viewport定義をhead要素内に指定
(スマホ画面で横スクロールしないと全体読めない
(スマホ、デヘロッパーツールで確認可)字が小さすぎて読めない)
横幅変動時のコンテンツ幅を設定
メディアクエリを使用しデザイン整える
画面サイズに合わせた表示(ハンバーガーメニューなど)導入