- 「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日目は下記記事にまとめています。
»【Webデザイン職業訓練2日目】自己紹介ではなく他己紹介があった【パソコン基礎知識】
Contents
【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（配色テーマが増える）
開発者向けの他のテキストエディタ
・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> → フォームの入力コントロール
・<link> → スタイルシートなどの外部ファイルを読み込み
・<meta> → <head>要素内で定義などを記述する
meta
・meta description → 検索結果の説明文として表示される（全ページ記入が理想）
・meta keywords → 検索キーワードを指定（今はあまり意味がない）
文字コードとは
文字も数字（0、1）に置き換えてから管理している。
対応表が文字コード（変換のルール）。
例：ASCIIコード、JISコード、Shift-JISコード、EUCコードなど。
世界のほぼすべての文字を網羅した文字コードが「UNICODE」で、HTMLでは「UTF-8」がよく利用されている。
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 "... >
入力例は、以下のとおり。
<p> <input type="password" name="passcode"> </p>
<p> <button type="submit">登録する</button> </p>
✔︎ 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; /* 上下の余白 左右の余白 */
margin: 50px 50px 50px; /* 上の余白 左右の余白 下の余白*/
margin: 50px; /* 上下左右の余白 */
コメントアウトするコマンド
ドラッグして「command＋/」
同じ入力をすると元に戻る。
なぜ、コメントアウトするのか。
・何が書いてあるのか、わかりやすくするため
・開始タグ、終了タグが離れていても、わかりやすくするため
外部参照、内部参照、PATH
外部参照
CSSの記述だけを別ファイルにつくる。
HTMLはそのCSSファイルにhead内でリンクさせる。
例： <link rel="stylesheet" href="style.css">
CSSを1箇所、訂正すればすべてが訂正できるというメリットがある。
ちなみに内部参照は、同じファイル内で指定すること。
各ページごとに指定していくと煩雑だし大変。
内部参照
<head>要素内に記述する方法を「内部参照」と呼ぶ。
インライン
要素の開始タグの中に直接CSSのソースコードを書き込んでいくこと。
内部参照やインラインを使うのはどんなとき？
外部参照で解決できないとき。
PATH
パスとは特定のファイルの場所までの道筋を記述したもの。
» 参考：【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！
ファイルパス指定方法（上下）、style.cssファイル
ファイルパスの指定方法
リンクするファイルの場所を示す記述。
例：<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>内に以下のように記述。
<link rel="stylesheet" href="style.css">
スペルに注意すること（自分で書かない）。
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">
【まとめ】職業訓練Webデザインは6ヶ月コースで良かった
6ヶ月の職業訓練で良かったです。
なぜなら、3ヶ月の職業訓練コースだったらついていけない可能性があったから。
他校の3ヶ月コースは毎日の課題もあり、ついていくのが大変そうです。
短期間で集中的につめ込みたい方にはいいかもしれません。
自動車の合宿免許みたいに。
ゆっくり、じっくり学びたい方は6ヶ月が良いと感じました。
現状の私は日々の授業と復習で手いっぱいです。
ブログ更新もストップしてしまいました。
ただ、やはり先生から学べるのは貴重。
先生の知見をわかりやすく学べるから。
なお職業訓練5日目については、【3つの解決策】職業訓練のWebデザイン授業についていけない【5日目に学んだHTML、CSS】にまとめています。
-
【3つの解決策】職業訓練のWebデザイン授業についていけない【5日目に学んだHTML、CSS】
こーいちより
P.S. 3ヶ月と6ヶ月で検討してみよう。
関連記事【初心者向け11選】Webデザインギャラリー・参考サイトをまとめました
関連記事【初心者向け】Webデザインの基礎知識をまとめました【入門から色彩、配色まで】