HTML基礎①

2023.06.07

ＷＥＢサイト制作について

ＷＥＢページとは、1ページで完成しているもの
ＷＥＢサイトとは、複数ページでできているもの

ＷＥＢサイトを制作するにあたり、たくさんの工程があります。

  1. 依頼・準備
  2. 面談・ヒアリング
  3. 見積もり・提案
  4. 定例ミーティング
  5. サイト設計　サイトマップやワイヤーフレーム
  6. デザイン
  7. コーディング
  8. テスト・チェック
  9. Webサイト公開

1つのサイトが納品して公開されるまでに２か月から３か月の期間が必要だとわかりました。

ＷＥＢサイトの構成要素について

  • HTML（ハイパーテキスト　マークアップ　ランゲージ）
    Web ページ内の各要素の意味や文書構造を定義します。
    • ハイパーテキスト：Web ページから別の Web ページへのリンクを作成したり画像、動画、音声などの埋め込みを行います。
    • マークアップ：文章の各要素が、どんな役割（見出し・段落・表・リストなど）を持っているかの目印を付けます。
  • CSS（カスケーディング・スタイル・シート）
    Web ページのレイアウトデザインや各要素の装飾（色・サイズ・レイアウトなど）を定義します。HTML に用意されている装飾タグを使用することである程度の装飾を行うこともできますが Web ページの装飾は、CSS を用いて装飾します。
  • JavaScript/jQuery
    Web ページに動きを付けたり計算などの処理を行います。JavaScript を容易に記述できるようにした JavaScript ライブラリィである jQuery や JavaScript 機能ライブラリィを使用することもあります。

サイト制作において、複数のフォルダを作成します。
ですので、各ファイルの管理がとても重要となります。

ＷＥＢページ開発ツールについて

Windows 環境の開発ツール

  • テキストエディタ（TeraPad）
  • テキストエディタ（サクラエディタ）
  • テキストエディタ（Visual Studio Code/VS Code）
  • ブラウザ（Chrome）
  • ブラウザ（Edge）
  • FTP ソフト（ffftp）
  • FTP ソフト（FileZilla）

Mac 環境の開発ツール

  • テキストエディタ（テキストエディット）
  • テキストエディタ（mi）
  • テキストエディタ（Visual Studio Code/VS Code）
  • ブラウザ（Chrome）
  • ブラウザ（Safari）
  • FTP ソフト（Cyberduck）
  • FTP ソフト（FileZilla）

本訓練では、TeraPadとChromeを使用してWebページ開発を行います。

文字コードについて

日本語を扱うための文字コードには、シフトJIS、EUC、UTF-8などがあります。

Webページを作成する時の文字コードは、UTF-8N（UTF-8 BOMなし）を使用します。

HTMLの基本構造について

タグの構造

<要素名 属性=”属性値”>

  • 要素名
    タグの種別を指定します。タグ名。
  • 属性
    要素名に対して設定する属性名を指定します。属性が複数ある場合は、属性と属性値の組合せを空白で区切って複数指定します。
  • 属性値
    属性に対する値を指定します。一般的には、ダブルクォーテーション（”）で囲んで指定しますが シングルクォーテーション（’）で囲むことも可能です。属性値がない時は、イコール（=）以降が省略されます。複数の属性を指定する時は、スペースで区切って指定します。

HTMLの基本構造

<!DOCTYPE html>　　　　ドキュメントタイプ宣言
<html lang=”ja”>　　　　 ja＝日本語
<head>
　　（文書の情報を記述）　　メタデータを記述
</head>
＜！–　(コメント)　–＞　 WEBには表示されない
<body>
　　（文書の本体を記述）　WEBに表示される内容
</body>
</html>　　　　　　　　＜HTML＞の終了タグ

文書情報

  • タイトル　　＜title＞タイトル名</title>
  • メタデータ
    • 文字コード指定/charset　　<meta charset=”UTF-8″>　HTML を記述している文字コードを指定
    • ページの説明文/description　　<meta name=”description” content=”サイトの説明文”>　ページの概要を示す説明文を指定。PC は 120 文字程度、スマホは 50 文字程度が表示文字数
    • ページのキーワード/keywords　　<meta name=”keywords” content=”キーワード”>　ページの検索キーワードをカンマ（,）で区切って指定
    • ビューポート/viewport　　<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>　Webページの表示領域を指定
  • リンク
    • 外部 CSS ファイルの紐付け　<link href=”スタイルシートファイルのパス名” rel=”stylesheet” type=”text/css”>　外部のスタイルシートファイルとの紐付けを指定
    • ファビコンファイルの紐付け　　<link href=”ファビコンファイルのパス名” rel=”icon”>　ファビコンファイル（Web ページのシンボルアイコンファイル）との紐付けを指定。一般的なファビコンファイル名は “favicon.ico”

CSSについて

  • リセットCSSの設定
  • セレクタ（selector）の記述を先にする
  • プロパティを書く（上から）
  • メディアクエリ
  • SNS や jQueryを埋め込む

ソフトはDreamweaverを使用。

※バックアップは必ず取っておくこと！

基本的な構造は理解できたので、何度も復習したり入力していくことで
言語を覚えていきます。

コメント

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