【職業訓練Webデザイン】6〜7日目に学んだHTML・CSSの基礎

「職業訓練のWebデザイン科で学んだHTML、CSSの基礎を知りたい」
「職業訓練のサイト作成は、どんなレベルだろう？難しいのかな」

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

この記事でわかること

職業訓練のWebデザイン科のサイト作成で学んだHTML・CSSの基礎
記事前半：職業訓練6日目の学習内容
記事後半：職業訓練7日目の学習内容

本記事の信頼性

2019年1月からWordPressで当ブログ開設（最高で月間62,000PV）
2021年6月からWebデザインの職業訓練校に通い、修了（6ヶ月間）
使用テキスト：「HTML&CSS、JavaScriptのきほんのきほん」

本記事を書いている私は、職業訓練校のWebデザイン科に通い始めて6日目です。
6日目、7日目の授業でサイトが1つ完成しました。

本記事では、職業訓練Webデザイン科でのサイト作成で使用したHTML・CSSについて解説しています。
この記事を読むことで、サイト作成で習得したHTML・CSSの基礎がわかります。

なお職業訓練3〜5日目については、【職業訓練Webデザイン】3〜5日目に学んだHTML、CSSの初級にまとめています。

難易度は難しいものではなく、基礎的なものです。
基礎とはいえ重要な考え方が学べました。

Contents

【職業訓練Webデザイン】6日目に学んだHTML・CSSの基礎
【職業訓練Webデザイン】7日目に学んだHTML・CSSの基礎
Webデザインの職業訓練校に1週間通ってみた感想【良い点、不安な点】
- 3つの良かった点
- 3つの不安な点

【職業訓練Webデザイン】6日目に学んだHTML・CSSの基礎

職業訓練6日目からは実際に手を動かして、サイトを作っていきます。

なし園のサイト作成【参考になるサイト一覧】

完成サイト（なし農園の販売サイト）を見ながら、コードを書いていく授業が始まりました。

index.html

先日の授業で習った<img/gra_top.jpg>のファイルパスをすでに忘れていました。
※ちなみにファイルパスは「/」から始まることはありません。

「横並びになっているものは、何かでくくる」と学びました。
3つでも4つでも横並びはくくるのが大事です。

メモ

CTL + / ：コメントアウト
Desc：ディスクプリションの略
<figure>：図形を示す
<figcaption>：説明文
<br>：改行（break）→ 閉じタグは不要（空要素）で「ここからここまで改行」という意味がないから

参考になるサイトデザイン一覧

その他の参考サイトは、下記記事にまとめました。
»【初心者向け11選＋α】Webデザインギャラリー・参考サイトまとめ

「コードも文章も論理の積み重ね」と感じました。

reset.css、style.css、font-family

CSSフォルダをつくり、reset.css、style.cssのファイルをつくります。

reset.cssファイルを作成

style.css

html,body,h1,h2,h3,h4,h5,h6,p,div,
figure,figcaption,section,ul,li,header,footer,
table,tr,th,td,nav,small,aside,article{
　margin: 0;
　padding: 0;
} /*CSSに書くものは（半角のカンマで区切る、改行してもOK）*/

h1,h2,h3,h4,h5,h6{
　font-size: 100%;
　font-weight: normal;
}

img{
　vertical-align: bottom; /*画像（インライン要素）の余白を消す */
}

li{
　list-style: none; /*リストの・のマークを消す*/
}

table{
　border-collapse: collapse;
}

reset.cssファイルを作ったら動作確認します。
たとえば、bodyに対してback-groundcolorで色を見てみます。

HTMLの<head>タグ内で、<link>タグでreset.cssファイル、style.cssファイルを読み込みます。
※パスの考え方はHTML、CSSでも変わりません。

go live、liveshareをいったん消すと反映されます。

メモ

section：区分
aside：主ではないタグ
ui：順番が関係ないリスト
li：箇条書きリストの1つ1つ

style.cssファイルを作成

全体的な設定からドカっと作っていくのが望ましいです（合理的）。

style.css

body{
　font-size: 16px;
　color: #333;　/*少し色を抑える（白背景が多いのに真っ黒は見づらい、疲れる、目立つが）*/
　line-height: 2;　/*2文字分あける*/
　font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "ＭＳＰゴシック", "MS PGothic", sans-serif;
}

font-familyについて

font-familyプロパティで、フォントの種類を指定できます。

「 font-family: フォント名; 」とすることで、要素にフォントを適用できます。
フォント名にスペースがある場合は、ダブルクォーテーションで囲みます。

フォントは端末次第で、入っていないと反映されません。
基本はベーシックなフォントしか指定しません。
おすすめでググり、検索から持ってくることです。

font-familyは先頭に書いてあるものが優先されます。

遊ゴシック：比較的新しい（嫌いなデザイナーは下記の選択が多い）
ヒラギノ角ゴシック：mac専用フォント
メイリオ：windows専用のフォント

font-familyの指定方法が以下です（CSSにコピペでOK）。

【游ゴシックを優先するfont-family】

font-family: "游ゴシック体", "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "ＭＳＰゴシック", "MS PGothic", sans-serif;

【Windowsはメイリオ、Macはヒラギノ系を優先するfont-family】

font-family: "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "Osaka", "ＭＳＰゴシック", "MS PGothic", sans-serif;

【明朝を優先するfont-family】

font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳＰ明朝", "ＭＳ明朝", serif;

中央揃え、黄金比1.6

なしの画像サイズを確認します（横：1000px、縦：353px）。

中央揃えにするために必要な3つのこと

width
margin-left
margin-right

中央寄せにするためには、marginの左右にautoを指定します。
marginにautoを指定するときは、widthをあわせて指定します。
※marginの上下にautoは指定できません。

画像を中央に揃えるCSS

style.css

.inner{
　width: 1000px;
　margin-left: auto;
　margin-right: auto;
}

※別解：marginの上下を0、左右をauto

✔︎ ヘッダー画像の下に50pxの余白を作ります。

style.css

.header{
　margin-bottom: 50px;
}

別解：padding-bottom: 50px;

✔︎ 見出しの大きさ（font-size）を変えます。

style.css

.title{
　font-size: 41px;
　border-bottom: 4px dotted #d69411;
　margin-bottom: 30px;
}

フォントサイズは黄金比1.6倍を2回かけて、41pxにしています。
たとえば、フォントサイズ16px → 25px → 41pxのようにです。

デザインセンスのない人は計算することです。
「感覚」と「理論」を組み合わせていくのが王道です。

✔︎ 横並びにする方法

display: flexを使います。

style.css

.desc{
　display: flex; /* 内側のものが横になる */
}

figure、figcaption、text-align

✔︎ 画像の右側に余白が欲しいとき

style.cssに以下のコードを書きます。

style.css

.desc figure{
　margin-right: 40px;
}

意味は、クラスdescの中のfigureタグ（図表を表す）の右の外側に対して40pxを空けます。
こうしておけば他のコードに干渉しません。

✔︎ 画像下の文字をセンタリングする方法

style.cssに以下コードを書きます。

style.css

.desc figure figcaption{
　text-align: center;
}

意味はクラスdescの中のfigureの中のfigcaptionに対して、テキストを真ん中にします。
「align」は整列の意味です。

text-alignプロパティで「テキスト、インライン要素、インラインブロック要素」の配置を指定できます。
leftで左寄せ、centerで中央揃え、rightで右寄せにできます。

✔︎ 色を透明にする

色を透明にしたいときは、色をrgbaで指定します。
rgbaは4つの値をコンマ（ , ）区切ります。
4つ目の値が透明にする度合いで、0〜1の数値で指定します（0：透明〜 1：不透明）。

style.css

.about{
　background-color: rgba(0, 148, 17, 0.3);
}

.nashi{
　background-color: rgba(214, 148, 17, 0.3);
}

.kind{
　background-color: rgba(0, 148, 17, 0.3);
}

opacityは要素全体を透明にさせます。
rgbaはその色だけを透明にできます。

class、ボタン、リンク

✔︎ 文字の余白を50px → 80pxにしたい

それぞれのdivのpaddingを直すと時間と手間がかかるとします。
改善策 → 直したいdivのクラスすべてにclass="row"をつけます（以下のように）。

index.html

<div id="about" class="row">
　<div class="inner">
　　<h2 class="title">なしのすばらしさを広めたい</h2>
　　<div class="desc">
　　　<figure>
　　　　<img src="画像jpg" alt="なしの画像">
　　　　<figcaption>なしの実</figcaption>
　　　</figure>
　　　<p>
　　　　テキストが入ります。テキストが入ります。テキストが入ります。
　　</p>
　　</div>
　</div>
</div>

<div id="kind" class="row">
　<div class="inner">
　　<h2 class="title">なしの種類について</h2>
　　<div class="desc">
　　　<figure>
　　　　<img src="画像jpg" alt="なしの画像">
　　　　<figcaption>なしの実</figcaption>
　　　</figure>
　　　<p>
　　　　テキストが入ります。テキストが入ります。テキストが入ります。
　　</p>
　　</div>
　</div>
</div>

<div id="nashi" class="row">
　<div class="inner">
　　<h2 class="title">なしについて</h2>
　　<div class="desc">
　　　<figure>
　　　　<img src="画像jpg" alt="なしの画像">
　　　　<figcaption>なしの実</figcaption>
　　　</figure>
　　　<p>
　　　　テキストが入ります。テキストが入ります。テキストが入ります。
　　</p>
　　</div>
　</div>
</div>

次に、style.cssに以下を記述すればOKです。

style.css

.row{
　padding-top: 50px;
　padding-bottom: 50px;
}

✔︎ ボタンをつくる

index.html

<div class="btn">
　<div class="inner">
　　<p class="order">
　　　<a href="#">ご注文はこちら<br>
　　　　<span>2,000円（税込み）</span>
　　　</a>
　　</p>
　</div>
</div>

リンクの飛び先は <a href="#"> </a>でつくります。
仮のリンクは「#」を置いておきます。

aとはアンカー（いかり）のことです（#でトップに戻ります）。

✔︎ ボタンのCSSの一例

style.css

.order a{
　background-color: #cc3227;
　display: block; /*aタグ＝インライン要素なので横幅を指定できない → 横幅をつけるためにブロック要素にする*/
　width: 700px;
　margin-left: auto;
　margin-right: auto;
　color: #fff;
　text-decoration: none; /*下線が消える*/
　text-align: center; /*テキストを中央よせ*/
　line-height: 1; /*テキストの行間*/
　padding-top: 15px;
　padding-bottom: 15px;
　font-size: 41px;
　border-radius: 10px;
　transition: 0.3s; /*ホバーの前後で0.3秒かけてフワッとする、transitionとは遷移*/
}

2,000円税込のフォントサイズを24pxにします。

style.css

.order a span{
　font-size: 24px;
}

カーソルをボタンにホバーするとやや透明になるようにします。

style.css

.order a:hover{　　/*ホバーする*/
　opacity: 0.6; /*opacityは不透明度 → 0.1は超薄い、1はクッキリ不透明）*/
}

職業訓練6日目に学んだ大事なこと

修正しやすいデータをつくる
marginとpaddingの考え方、違いを理解しておく
更新性、汎用性を考えたうえでの最適解を考える

修正しやすいデータをつくるのは重要です。
修正やアップデートはよくあるからです。

難しいですが、慣れてくれば少しずつ改善できます。

後日談ですが、卒業制作でCSSファイルを整理して作っていなかったので、すべてのCSSを見直すことになりました。
「修正しやすいデータをつくる」の言葉が刺さったものです。

marginとpaddingは必須知識です。
サイト制作では基礎にして重要事項です。

【職業訓練Webデザイン】7日目に学んだHTML・CSSの基礎

職業訓練校7日目の学習内容をまとめていきます。

ナビゲーションの作り方、スムーススクロール、line-heightの考え方

ナビゲーションの作り方

HTMLの一例です。

index.html

<div class="nav">
　<div class="inner">
　　<ul>
　　　<li><a href="#about">なし農園の思い</a> </li>　
　　　<li><a href="#nashi">なし農園について</a></li>
　　　<li><a href="#kind">なし農園の梨の種類について</a></li>
　　</ul>
　</div>
</div>

ulタグ（Unordered List＝順序のないリスト）の内側には、liタグ（List Iitem）しか入りません。
aアンカータグで#で飛ばす → idの名前に飛びます。

resets.cssに追記します。

reset.css

li{　
　list-style: none;
}
/*ulでもliでもOK、・中黒点を消せる*/

ちなみに<ol>タグで囲むと数字が連番でつきます（Ordered List）。

クリックしたらスムーズにスクロールしたい

style.cssに記述します。

style.css

html{
　scroll-behavior: smooth;
}

line-heightの考え方

line-height（行間）→ 1行の文字に限り使えます。
値が大きいほど行間が大きくなります。

bodyのCSSで書いた「line-height: 2;」の意味は以下です。

たとえば、フォントサイズが16pxでline-height:1の場合、行の高さは16pxです。
line-height:2の場合、行の高さは32px（16pxで文字、上に8px 下に8px）になります。

line-heightで、要素の縦方向の中央に文字を配置するのにも使えます。
line-heightの「高さの中心」に文字が配置されるため、要素の高さとline-heightを同じ値にすると、文字がちょうど中央に配置されます。

なお文字が2行のボタンには、line-heightは使えません。
補足：letter-spacingプロパティで文字間隔を指定できます。

ボタンの装飾

ボタンの幅、センタリング、高さ

style.css

.nav ul li{
　width: 300px;
　text-align: center;
　line-height: 70px;
}

ボタンの色、文字色、下線を消す、文字以外でも押せる、枠線を見えなくする、ボタンに触れると0.3秒で変化

style.css

.nav ul li a{
　background-color: #d69411;
　color: #fff;
　text-decoration: none; /*下線を消す*/
　display: block; /*文字以外でも押せるように*/
　border: 1px solid transparent; /*枠線を見えなくする*/
　transition: 0.3s; /*0.3秒かけて前後で変化*/
}

transitionでアニメーションがつけられます。
「変化の対象」や「変化にかかる時間」などを指定できます。
「変化の対象」にはプロパティを指定しますが「all」ですべてのプロパティに適用できます。

transition: all 0.3s;

transitionは多くの場合、hoverと組み合わせて使います。

ボタンにカーソルを乗せると、下のボタンがずれる（実際2px分）ときの解決策は、ボタンにborderをつけることです。

メモ

transparent：透明な、透き通る
transition：遷移（指定した時間をかけて変化する）

ボタンをクリックしているときだけ変化させる

セレクタに「active」を使うことで、クリックしているときだけCSSを適用できます。
下記はクリックしているときだけ、青色に変化するCSSです。

style.css

.nav ul li:active{
　background-color:blue;
}

下記はクリックしているときだけ、ボタンの影を消すCSSです。

style.css

.nav ul li:active{
　box-shadow:none;
}

ボタン横並びのCSS

style.css

.nav ul{
　display: flex;　/*いろんなことができて、1番使う*/
　justify-content: space-between;　/*左右の隙間なし、真ん中が等間隔で空く*/
}

メモ

space-evenly：端、真ん中、ともに等間隔
space-around：端に小さい隙間&真ん中は大きめの等間隔

表の作り方（tableタグ）

テーブルは行単位（row）でつくります。
まず、1行分をつくるのが大事です。

tr＝table row
th＝table header
td＝table date

tableのHTMLの一例

index.html

<!DOCTYPE html>
<html lang="en">
<head>
　<meta charset="UTF-8">
　<meta http-equiv="X-UA-Compatible" content="IE=edge">
　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　<title>表（table）の練習</title>
　<style>
　　td,
　　th {
　　　　border: 1px solid #999;
　　　　padding: 20px;
　　　}

　　table {
　　　border-collapse: collapse; /*崩壊*/
　　}
　</style>
</head>

<body>
　<h1>表の作り方</h1>
　<table>
　　<tr>
　　　<th>A-1</th>
　　　<th>A-2</th>
　　　<th>A-3</th>
　　</tr>
　　<tr>
　　　<td>B-1</td>
　　　<td>B-2</td>
　　　<td>B-3</td>
　　</tr>
　　<tr>
　　　<td>C-1</td>
　　　<td>C-2</td>
　　　<td>C-3</td>
　　</tr>
　　<tr>
　　　<td>D-1</td>
　　　<td>D-2</td>
　　　<td>D-3</td>
　　</tr>
　</table>
</body>
</html>

tableタグの隙間をなくしたい → <style>内部参照でtdに指示を出します

border-collapse:collapse　/*崩壊*/

paddingで整えます。
見出しを作るのはth（table header）を使います。

メモ

marginがかち合うと無効になる → 1pxでも大きいほうが勝つ

✔︎ h3見出しのCSS例

style.css

.sub_title{
　font-size: 26px;
　border-left: 10px solid #d69411;
　padding-left: 15px;
　line-height: 1.5;
　margin-bottom: 30px;
}

tableタグのCSSの一例

style.css

.shopping table{
　width: 800px;
　margin-left: auto;
　margin-right: auto;
　margin-bottom: 30px;
}

.shopping table td, /*半角カンマの意味はAND*/
.shopping table th{
　border: 1px solid #333;
　padding: 10px;
}

.shopping table th{
　width: 250px;
　font-weight: normal; /*デフォルトで太字だから*/
　background-color: #d69411;
　color: #fff;
}

reset.cssに下記追記。

style.css

table{
　border-collapse: collapse;
}

/*tableの境界線を共有させる。
隣接するボーダーラインを重ねあわせて表示するよう指定。
初期値はseparateで隙間がある*/

フッターのHTML、CSSの一例

index.html

&copyでcマークが出てきます。

style.css

.footer{
　background-color: #d69411;
　color: #fff;
　line-height: 50px;
　text-align: center;
}

以上で「なし園のサイト」が完成しました。

7日目の疑問点

【質問】
「CSSでclass名を指定するとき、多重構造でも書いていないclass名がありますが、すべて書く必要はないのですか？」

【先生の回答】
「書く必要はない。ちゃんと論理がつながっていて、CSSに指示ができていれば省略しても問題なし。CSSは案外、適当でも大丈夫」とのことです。

先生に聞くだけで解決できました。

Webデザインの職業訓練校に1週間通ってみた感想【良い点、不安な点】

Webデザインの職業訓練校に通って、1週間が経ちました。
良かったところ、不安なところをありのままお伝えします。

3つの良かった点

環境が変わった
視野が広がった
新しいスキルが身についた

環境が変わった

「2年間の休職＋5ヶ月の無職」の状況でした。
カフェやファミレスでひたすらブログの日々でした。

職業訓練で外の世界とつながれた感じがします。

メンタルを病んでから、いきなり転職するのはハードルが高いものです。
人間関係がうまくいくかどうか不安だからです。

そんな方は職業訓練で徐々に慣らしていくのもありです。
社会復帰へのウォーミングアップです。

視野が広がった

Webデザイン（HTML、CSS）を学ぶと、ふだん見ているWebサイトが違って見えてきます。

今まででは気づけなかったサイト構成が少しわかるようになりました。
コードも勉強することでブログデザインの助けになります。

勉強は世界に広げます。
40代で先生から学べる環境に感謝です。

視野が広がった具体例は、職業訓練校のWebデザイン授業についていけない【3つの解決策】で解説しています。

新しいスキルが身についた

Webデザインのスキルが身につきます。
6ヶ月コースでWebデザインの基礎スキルが習得できます。

就職できるかどうかはわかりません。
ただ勉強したことを自分の中に残ります。

勉強でスキルを身につける。
スキルを身につけて人生を変える。

職業訓練に通ってから「一生勉強しよう」と決めました。
1週間でもとが取れた気持ちです。

3つの不安な点

就職できるのか
給付金はもらえるのか
人間関係はうまくやっていけるか

就職できるのか

40代で新しいスキルを身につけて、新しい業界へ飛び込むわけですから不安です。

就職できるのか
キャリア形成は合っているか
就職できたとしても、うまくやっていけるか
就職できずにハズレくじを引くことにならないか

先のことを考えると不安です。

ブログだけで生活したいと思っていました。

ただ職業訓練に通うようになり、Web業界の現場や仕事内容、仕事の流れを見ておきたいです。

とりあえず今は勉強しつつ、当ブログを育てることに注力します。

給付金はもらえるのか

求職者支援制度（毎月10万円給付）に申請しています。
まだ返事が来ません。

10万円がもらえないと、途中で貯金がなくなります。
審査に通らない場合は、アルバイトを始めなくてはなりません。

お金の悩みは切実です。
求職者支援制度に通れば、6ヶ月間はお金の心配をしなくてすみます。

※更新情報：月10万円＋交通費がもらえました
審査に通りました。あとで知ったのですが、審査に通過しても1ヶ月ごとの申請が必要でした。私の場合は、毎回の提出書類として3点のコピーが必要です（自身の通帳、奥さんの通帳と給与明細）。ブログ収益が若干記帳されていますが、家族含めて月25万円以内であれば問題ありません（ハローワークに確認済み）。

人間関係はうまくやっていけるか

職業訓練校でも人間関係があります。
もちろん6ヶ月だけの環境なので、周りとのコミュニケーションを遮断しても問題なしです。

ただせっかく出会えた縁もあります。

就職してからも、どこに行っても人間関係はついてまわります。

少しでも気持ちよく、プラスに成長しあえる人間関係を築きたいです。

職業訓練7日目で、人間関係の進展はありません。
進展がなくても、特に不快なこともありません。

このまま時間が過ぎて、何もなかったかのように元の生活に戻る。
ちょっともったいないです。

そんなことを1週間通って、考えました。

なお職業訓練8日目以降については「【職業訓練Webデザイン】8〜12日目に学んだHTML・CSS応用」で解説しています。

以上です。

P.S. 職業訓練校に通おうかどうか迷っている方の参考になれば幸いです。