【Webデザイン職業訓練】3〜4日目に学んだHTML、CSSの内容

「Webデザインの職業訓練で3日目以降に学んだことを知りたい」

この記事はそんな方へ向けて書いています。

この記事でわかること

・Webデザインの職業訓練で3〜4日目に学んだHTML、CSSの内容

本記事の信頼性

・2019年1月からWordPressで当ブログを開設（最高で月間62,000PV）
・2021年6月からWebデザインの職業訓練に通っています（6ヶ月間）。
・使用テキスト：『HTML&CSS、JavaScriptのきほんのきほん』

本記事では、アウトプットメモとして3〜4日目に学んだことを書いています。

この記事を読むことで、Webデザインの職業訓練初期に学んだHTML、CSSがわかります。

ちなみに、職業訓練2日目は下記記事にまとめています。
»職業訓練2日目に自己紹介はなく他己紹介【パソコン基本知識を学ぶ】

3日目、4日目で本格的にHTML、CSSのコードを学び始めました。

Contents

【Webデザイン職業訓練】3日目に学んだHTMLの内容
【Webデザイン職業訓練】4日目に学んだHTML、CSSの内容
まとめ：職業訓練Webデザインは6ヶ月コースで良かった

【Webデザイン職業訓練】3日目に学んだHTMLの内容

3日目はWeb環境を整えました。

Visual Studio Code（VSCode）をインストール

Webブラウザを用意する

HTMLやCSSは「Webブラウザ」で表示して確認します。
授業ではWebブラウザはGoogle Chromeを使用。

【参考】その他のWebブラウザ

・Windows標準のEdge
・Microsoft Internet Explorer（IE）
・MacOS Safari

エディターを用意する

HTML、CSSを書くためにVisual Studio Code（VSCode）をインストールしました。

今まで「プログラミングのコードはどこに書いているんだろう」という疑問を持っていましたが、解けた瞬間でした。

インストール後は「ダウンロードフォルダから解凍前のファイルは捨ててOK」とのこと（初めて知りました）。

次に、拡張機能をインストール。

・japanese language pack（日本語にする機能）
・Doracura Official（配色テーマが増える）

配色は「Tomorrow Night Blue」にしました。
配色の変更方法は「Code → 基本設定 → 配色テーマ」です（Mac）。

開発者向けの他のテキストエディタ

・Atom
・Sublime Text：有料
・Brackets：今後、消えていく感じらしい
・Cloud 9：クラウド上に保存できる（無料版でもクレカが必要）

HTMLとは、タグとは

HTMLとは

Webブラウザに文字を表示させる言語。
文書がどのように書かれているか伝える役割。

メモ

Hyper Text Markup Language（ハイパーテキストマークアップランゲージ）
ハイパーテキストとは「意味を持っている言葉」、マークアップは「印をつける」
たとえば、見出しタグ<h1>は「見出し」という意味を持たせる。
タイトルタグ<title>は「タイトル」という意味を持たせる。

コードを書くうえで大事なことは、以下のとおり。

・コードは自分で書かない
・機械に任せられるものは任せる

タグとは

文字に指示を出すこと、意味を与えること、印をつけること。

Live Serverをインストール

VSCodeでLive Serverをインストールしておく。
メリットはファイルを保存するだけで、現時点でのWebブラウザ表示が見れる。

HTMLのタグ例【文字コード、文字化け】

タグは2個セットで使われる。
「開始タグ」と「終了タグ」

たとえば、<h1>入会申し込み</h1>。

タグで挟むことを「マークアップする」といいます。

タグの一例

・<DOCTYPE> → HTMLのバージョンを示す（!を入力するだけで補完する）
・<html> → HTML文書であることを示す
・<head> → 表示されない内容を示す（Webページの設定内容など。<meta>要素など → 必ず属性を伴う）
・<body> → Webブラウザに表示させる内容を示す（一番大きく、HPで見ているものすべて）
・<p> → paragraphの略「段落」を意味する
・<title> → 画面上のタブ部分に表示（検索結果一覧にも表示されるのでクリックさせるタイトルを考えることが重要）
・<input> → 入力フォーム（入力フォームを表示するだけだから閉じタグ不要＝空要素）

よくある空要素の種類は、以下のとおり。

・<br> → 改行
・<img > → 画像挿入
・<input> → フォームの入力コントロール
・<meta> → <head>要素内で定義などを記述
・<link> → スタイルシートなどの外部ファイルを読み込み

HTMLの補完機能【各種ショートカットコマンド】

hを入力すると、h1〜h6などの見出しタグが出てくる。
出てきたタグから、Enter または Tabキーで選ぶ。

できるだけ自分で書かないこと。
なぜなら、間違うから。

ファイルの保存は「ファイル名．html」とする。

ショートカットコマンド

✔︎ ウィンドウの切り替え
・Windows → ALT＋Tab
・Mac → command＋Tab

✔︎ ドラッグ
・どこでもいいからカーソルを置いてダブルクリック

✔︎ 移動
・Windows → ALT＋↑↓
・Mac → option＋↑↓

✔︎ コピー
・Windows → ALT＋shift＋↑↓
・Mac → option＋shift＋↑↓

VSCodeの各種設定

VSCodeの設定をしました。

・Color Decorators → チェックなし
・Render Whitespace → allにする（空白に・を表示）
・Hover: Enabled → チェックなし
・Mouse Wheel Zoom → 不要
・Render Control Characters → チェック要
・Format On Save → チェック要
・Minimap → 非表示（好みで）
・Files: Encoding → UTF-8
・Files:Eol → \n

※ 青の縦線は「デフォルトに戻せる」という意味です。

【Webデザイン職業訓練】4日目に学んだHTML、CSSの内容

HTMLの属性と、CSSの勉強をしました。
CSS＝Cascading Style Sheets（見た目を整える）

要素に追加情報を示す属性

たくさん出てきますが「一覧で覚えるのはおすすめしない」と学びました。

属性の書き方

< タグ名属性名1＝" 属性値1 " 属性名2＝" 属性値2 "... >

入力例は、以下のとおり。

【type属性】
入力フォームの形状や、入力内容を指定する。
一例は、以下のとおり。

・email　メールアドレスの入力のみ許可
・password　パスワードの入力欄（入力内容を隠す）

【name属性】
入力フォームに名前をつける。

【value属性】
入力フォームに表示される内容を示す。
ただ、わざわざ消してから入力するので面倒。

代わりにplaceholderを使う。

入力すると消えるから。

button設置

< button type="ボタンタイプ" >ラベル< /button >

type属性には次のいずれかを設定。

・submit　送信ボタン
・reset　リセットボタン
・button　JavaScriptと組み合わせて利用するときに使用

補足

< form action="kiroku.php" method="POST" >

HTMLは記録できないので、サーバーにデータを持っていく。

上記"kiroku.php"は、保存先のファイル名。
POSTはデータの送り方のこと（隠して持っていく）。

コラム

W3X（World Wide Web Consortium＝W3C）という団体が、HTML/XHTMLの規格を定めている。
ルールが厳格なためバージョンが更新されない。
↓
WHATWG（Web Hypertext Application Technology Working Group）という団体が、それまでのHTMLを元に独自の企画を定める。
普及してHTML5となる。

メモ：追加プラグイン

zenkaku → 全角スペースを表示してくれるプラグイン（全角スペースはあまり使わないため）

グローバル属性、CSS単位、margin

グローバル属性

すべてのタグに利用できる属性のことをグローバル属性と呼ぶ。

よく使われるグローバル属性は、以下のとおり。

・id → idを指定する
・class → クラスを指定する
・style → スタイルートを記述する

CSSで利用できる単位

【絶対単位】
指定した数字がそのままの大きさとして反映。

・px → 表示スクリーンの「画素」が基準（これだけ覚えればOK）
・mm、cm、in、pt、pxなどは使わない

【相対単位】
親要素などの設定を基準に相対的に決められる単位。

・em → 親要素の文字サイズを1emとした、相対的な大きさ（例：1.5emは1.5倍の大きさ）
・rem →「ルート要素」の文字サイズを1remとした相対的な大きさ
・vh → ビューポートの高さ1/100
・%

一般的には相対単位を使う。
なぜなら、モニターの環境は人それぞれだから。

marginとは

余白を指定するプロパティです。
プロパティとは何を変更するのか示すもの。

margin: 50px

上記（ショートハンドプロパティ）は以下の意味と同じ。

style="margin-top: 50px; margin-left: 50px; margin-bottom: 50px; margin-right: 50px"

なお、以下のように数字の羅列で指定できます。

margin: 50px 50px 50px 50px; /*上の余白　右の余白　下の余白　左の余白 ※ 時計回り */

margin: 50px 50px 50px; /*上の余白　左右の余白　下の余白*/

margin: 50px 50px; /*上下の余白　左右の余白*/

margin: 50px; /*上下左右の余白*/

コメントアウトするコマンド

ドラッグして「command＋/」でコメントアウト（同じ入力で元に戻る）。

なぜ、コメントアウトするのか。
・何が書いてあるのか、わかりやすくするため
・開始タグ、終了タグが離れていても、わかりやすくするため

外部参照、内部参照、インライン

CSSを書く場所は3つです。

・外部参照
・内部参照
・インライン

順番に解説します。

外部参照

CSSの記述だけを別ファイルにつくる。
HTMLはCSSファイルにhead内でリンクさせる。

例： <link rel="stylesheet" href="style.css">

メリットは、CSSを1箇所だけ訂正すればすべてが訂正できること。

ちなみに内部参照は、同じファイル内で指定すること。
各ページごとに指定していくと煩雑だし大変。

内部参照

<head>要素内に記述する方法を「内部参照」と呼ぶ。
以下、一例です。

<head>
　<meta charset="UTF-8">
　<title>内部参照の書き方</title>
　<style>
　　h2 {color: blue; }
　</style>
</head>

インライン

要素の開始タグの中に直接CSSのソースコードを書き込んでいくこと。
たとえば、以下のとおり。

< p style="color: blue;">インラインの書き方</p>

内部参照やインラインを使うのはどんなとき？

外部参照で解決できないとき。

ファイルパス指定方法（上下）、style.cssファイル

PATH

パスとは特定のファイルの場所までの道筋を記述したもの。
» 参考：【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！

ファイルパスの指定方法

リンクするファイルの場所を示す記述。

例：<link rel="stylesheet" href="css/style.css">

上記は「cssフォルダ内のstyle.cssファイルにリンクする」。

HTMLファイルから見て、フォルダがどこにいるか考えることが重要。
掘り下げる場合は、「/」で区切って書いていく。

上位のフォルダに入っている場合は「../」と書く。

imgタグは、<img src="" alt="">
altには「犬」などの文字を入れる（文字なしでもOKだが、altは必要）

ちなみに、フォルダ内の画像を移動してしまうと画像が見れなくなります。
「パスが切れる」と言う。
画像が見れないのはパスが間違っているから。

ゆえに、フォルダを最初にどこに置くかが重要。

style.cssファイルを作成

ファイル名「style.css」にして、HTMLと同じ場所に保管。
HTMLファイルの<head>内に以下のように記述。

スペルに注意すること（自分で書かない）。

IT・Web業界で仕事をするには「何かを読み込むに慣れておく」と学びました。

CSSリセット、sanitize.css、divタグ、classタグ

CSSをリセットする

Webブラウザに搭載されているデフォルトCSSを取り除く。
なぜなら、Webブラウザによって見え方に違いがあるから。

ゆえに、デフォルトCSSをすべて相殺する（更地にするように）。

sanitize.cssでリセットする

デフォルトCSSを取り除く便利なツール（先人たちが作ったもの）。
» sanitize.css

<div>タグ

HTMLの複数の要素をまとめるタグ。
divisionの略で「分割」の意味。

<div>タグで囲めば、<div>要素に対してスタイルを当てられる。

ただし、divタグはタグ自身に意味を持たせられないため、id属性かclass属性を使い「しるし」をつける必要がある。

<class>タグ

「あだ名をつけてあげる」という感じ。
あだ名はなんでもOKで、短くても長くてもかまわない。

例：<div class="header"> </div>

4日目に学んだことは以上です。

まとめ：職業訓練Webデザインは6ヶ月コースで良かった

6ヶ月の職業訓練で良かったです。
なぜなら、3ヶ月の職業訓練コースだったらついていけない可能性があったから。

他校の3ヶ月コースは毎日の課題もあり、ついていくのが大変そうです。
短期間で集中的につめ込みたい方にはいいかもしれません。
自動車の合宿免許みたいに。

ゆっくり、じっくり学びたい方は6ヶ月が良いと感じました。

現状の私は日々の授業と復習で手いっぱいです。
ブログ更新もストップしてしまいました。

ただ、やはり先生から学べるのは貴重。
先生の知見をわかりやすく学べるから。

まだ迷っている方は後悔のないよう比較してみるのが吉ですね。

なお職業訓練5日目については、職業訓練校のWebデザイン授業についていけない【3つの解決策】にまとめています。

: 職業訓練校のWebデザイン授業についていけない【3つの解決策】

こういちより

P.S. 3ヶ月と6ヶ月で検討してみよう。