初学者さん向けに、プログラミング学習サービス「プロゲート」の「html/css 初級 学習コース」の全23レッスンを1から解説する記事です。
なるべく専門用語は事前説明を付与しつつ進めていきます。
目次で各レッスンの解説に飛べるので、詰まっているところ中心に読んでみてください。
趣味レベルの知識で書いてます
現役バリバリな方は温かい目で読んでやってください
html/css 初級編 学習コース 攻略チャート
1. HTMLに触れてみよう！
【効果】見出しとしての意味を付与する。文字が大きくなったり強調されたりする。
流石にここでつまづく方はいないと思います汗
いわゆる見出しタグですね。h1 で Hello World を囲うだけです。
これ以降使いまくるめっちゃ便利な補完機能をひとつご紹介します。
【効果】<h1></h1> が入力される
他のタグでも応用できるショートカット技なので、ぜひ覚えておきましょう。
2. 見出しと段落
【効果】h6まである。数字が小さいほど重要な見出し扱い。
【効果】段落の意味を付与する。paragraph（パラグラフ）の意味。
h1 h2 p でそれぞれの文章を囲うだけです。
タグ名入力＋Tabキー でさくっと終わらせましょう。
3. リンク
【効果】テキストや画像をクリックするとURLに飛ぶ
ブロガーであれば一度は見たことのあるHTMLですね。
例のごとくTabキー補完が便利です。
画面左の手順内の必要な情報は、リンクテキスト左クリックでコピーすることができます。
長い文章やURLをタイピングするメリットは皆無です。
極力コピペで行きましょう。
4. 画像
【効果】URL先にある画像が表示される
これも超有名なやつですね。
URLは手順内からコピペでOKです。
5. リスト
ul li という新タグが2つ出てきます。
ul は unorderd list 、li はそのまんまlist です。
ulはオーダーされてないリストーーーつまり順番が決まってないリストで、li は決まったリストというニュアンスです。
基本的にul が大枠で、その中にli が入る感じで書きます。
<ul>
<li>文章など</li>
<li>文章など</li>
<li>文章など</li>
<ul>
【効果】
これでくくっておくと後々メニューとかが作りやすくなる
左に黒い点がついて、縦に並ぶ形で表示されればOKです。
（Tabキー補完TUEEEEE）
6. 文字の色
CSSのド基礎が出てきます。
何を:どうする;
}
禿げるほど書くことになるのでここで慣れましょう
なおCSS記述時には自動入力が適応されます。基本仕様に慣れておきましょう。慣れるととても便利ですぞ。
【効果】”}” が自動入力
【効果】”;” が自動入力 (“何を”の部分が存在しないと表示されない)
これ以降は index.html というhtmlファイルと stylesheet.css というCSSファイルを行ったり来たりしつつ進めていきます。
最初は丁寧に stylessheet.css というファイルへ誘導してくれています。
【効果】文字の色が決まる
文字色はコピペでOK。
7. 文字の大きさと種類
【効果】文字の大きさが決まる
【効果】文字の種類が決まる
Lucida Grande は2語なので “” で囲う必要になります。
今回は手順内のコピペ範囲に””まで含んでくれていますが、実際は自力で書くことになるので注意しましょう。
8. 高さと幅と背景の色
【効果】背景色が決まる
【効果】幅が決まる
【効果】高さが決まる
要素の設定を決めていきましょう。背景色はコピペでOK。
9. 高さと幅と背景の色
【効果】クラス名をつける
【効果】クラス名のCSSが書けるようになる 頭に .が必要
クラスの概念が登場します。
htmlの<>内にクラスを指定して、指定したクラスのCSSを記述します。
これで「そのクラスの範囲の何をどうする」という意味が付与されます。
クラスを命名する際は””にお世話になりますが、こちらも自動入力仕様になっており便利です。
【効果】” が自動入力
10. HTMLの全体構造
<!DOCTYPE html>
<head></head>
<body></body>
</html>
【効果】
こういうもんです（爆
HTMLのひな型を作ります。ぱっと見ややこしいですが、以降お世話になるのは真ん中あたりのbodyタグ内がほとんどです。
手順に沿って書いていけば間違えることはないと思います。Tabキー補完で時短しましょう。
なお、headタグをショートカット入力するとやたら長いタグもセットでついて来ますが、気にしなくてOKです。
こんなの↓
11. HTMLの全体構造（2）
<meta charset=”文字コード”>
<title>ページのタイトル名</title>
<link rel=”stylesheet” href=””>
【効果】
こういうもんです（2回目
headタグの中にこれらを記載しておかないと、いろいろ不都合が起きるので書いておきましょう。
手順からひな型をコピペするとコメントも一緒にコピペされますが、このコメントもコピペが使えます。
文字コード、ページタイトル、cssファイル名をコピペすれば時間短縮できます。
12. 全体のレイアウト
【効果】「ここまででクラス化します」の意味が付与される。超頻出。
divを使って全体のレイアウトを作っていきます。
「この辺までがヘッダーでこの辺までメインで…」的な情報をコンピュータに教えておくことで、色を付けたり配置を整えるときに楽になるわけですね。
13. ヘッダーの構造
li{
list-style: none;
}
【効果】
リストの黒点が消える
リストの黒点消し以外は、これまでの復習です。
14. ヘッダーのレイアウト
【効果】要素を横並びにする
横に並べたいときはとりあえずこれ。
ただし後で習うFlexboxの方が、一般的に多用されているので本格的に書く際はFlexboxを推奨します。
coming soon：Flexboxについて
15. ヘッダーの余白
padding-top:~px;
padding-right:~px;
padding-bottom:~px;
padding-left:~px;
【効果】
内側に余白を作る。
topは上方向、rightは右方向、bottomは下方向、leftは左方向を示す。
①padding:Apx;
②padding:Apx Bpx;
③padding:Apx Bpx Cpx Dpx;
【効果】
内側余白の別の書き方。書いた値の個数で意味が変わる。
① 上下左右にApx余白を作る
② 上下にApx、左右にBpx余白を作る
③上にApx、右にBpx、下にCpx、左にDpx余白を作る（時計回り）
急に長い解説になりましたが「余白の書き方は沢山あるよ～」くらいの認識でOKです。
まずは１つ書き方を覚えましょう。
padding :Apx Bpx Cpx Dpx; が個人的に好きです。
わかりやすくて修正しやすいんですよね。
16. フッターの構造
.親 子{
}
【効果】
親（要素）内の子（要素）にCSSを適用させる。
親要素は広い範囲でくくったclass名、子要素は親要素内にある別のclassやタグ名のこと。
「header内のliは赤色、footer内のliは青色」みたいな指定が欲しい時に使う。超頻出。
header-list 内のliにのみ横並びにして余白を作ってもらうように指定しましょう。
先ほど書いた li すべてに適用されているCSSを消さないと判定されないので注意しましょう。
stylesheet.css 内にコメントがあるので安心です。
フッターはページ下の部分にあるので、プレビューと見本を見比べつつ記述する際は下にスクロールしておきましょう。
17. フッターのレイアウト
【効果】要素が右寄りで横並びになる
floatを使ってロゴとリストを左右の端に配置します。
進めない場合は、大体は既存のCSSの書換えを忘れているパターンです。
footer の height や background-color の値変更が済んでいるか確認してみましょう。
18. メインのレイアウト
改行されない要素 width height 指定不可 左右余白のみ指定可 ex)img,a,span
【ブロック要素】
改行される要素 ex)h1~h6,p,div,ul
【インライン・ブロック要素】
インラインのように横並びだが、width height指定可、全余白設定可
インラインかブロックかは最初から決まっているが、displayを用いることで変更できる
display:inline-block;
dosplay:inline;
display:block;
【効果】
インラインブロック要素、インライン要素、ブロック要素に変更する
初級学習コースで記述することがなく、見落としがちですがウルトラ重要です。
道場コースでむちゃくちゃ書くことになりますので、その際また復習しましょう。
【効果】CSSで指定すると文字が変化する。文章を一部装飾したいときに使う。
またdivはspanの中に記述されることはありません。spanはインライン要素、divはブロック要素だからです。
span以外はこれまでの復習です。丁寧に記述していきましょう。
container contents といった class名は自分で設定できるので覚える必然性はないですが、この程度は覚えてしまった方が楽です。
賛否あるかもしれませんが「一般的にはこう書くことが多い」は知っておくべきかと。
19. コンテンツの構造
新規の記述は特になし。とりあえず縦に画像と文字を並べていきましょう。
ちなみに2周目以降であれば、以下のような塊をひとつ作ったら後はコピペだけで書けます。
手順を上からやっていくとちょっと遠回りなので、これで時短しましょう。
<img src=””>
<p></p>
</div>
20. ボーダー
border : ~px solid 色;
【効果】
太さ・種類・色を指定することで枠線が付く。
デフォルドたと4方向に枠線がつくので、長方形で要素を囲むようになる。
padding同様、border-top border-right とつければ1方向のみに枠線がつくようになる。
種類のsolidですが、プロゲートではぼぼsolidしか出て来ません。セットで覚えてしまいましょう。
余談ですが #dee7ec という色は道場コースでもよく出てきます。
21. paddingとmargin
margin:~px;
【効果】
余白を作る。paddingは内側の余白を作り、marginは外側の余白を作る。
その他書き方の仕様はpaddingと同じ。
22. お問い合わせフォームのレイアウト
contact-formのCSSを指定して、フォーム内のhtmlを記述するだけです。
17. フッターのレイアウト
【効果】入力フォームが生成される。終了タグ（</input>)不要
【効果】入力フォームが生成される。2行以上ならこっち
【効果】送信・保存といったボタンが生成される
A,B{
}
【効果】
A,Bに対して同じCSSを指定する
上３つは入力フォームを作るときには必須知識です。
inputとtextareaにはborderで4方向に薄い枠線をつけて良い感じに仕上げています。
以上で初級 学習コース クリアです。お疲れさまでした！
学習コースとの向き合い方
学習コースは手順通りにやればほぼ間違えることはありません。
プレビューを観てきちんと記述が反映されていることを確認しつつ進めることができれば十分です。
逆に言うと手順がある以上は自発的に考えてコードを書いたことにならないので実践力はつきません。
今回TIPSやHINTでくくられたコードをある程度覚えてたら道場コースで磨きをかけましょう。
