Progate html/css 初級編 学習コース攻略【初心者向けに解説】

初学者さん向けに、プログラミング学習サービス「プロゲート」の「html/css 初級 学習コース」の全23レッスンを1から解説する記事です。

なるべく専門用語は事前説明を付与しつつ進めていきます。

目次で各レッスンの解説に飛べるので、詰まっているところ中心に読んでみてください。

GEN
GEN

趣味レベルの知識で書いてます
現役バリバリな方は温かい目で読んでやってください

html/css 初級編 学習コース 攻略チャート

1. HTMLに触れてみよう!

【記述】<h1>文字</h1>
【効果】見出しとしての意味を付与する。文字が大きくなったり強調されたりする。

流石にここでつまづく方はいないと思います汗

いわゆる見出しタグですね。h1 で Hello World を囲うだけです。

これ以降使いまくるめっちゃ便利な補完機能をひとつご紹介します。

【方法】h1 とだけ打ってTabキーを押す
【効果】<h1></h1> が入力される

他のタグでも応用できるショートカット技なので、ぜひ覚えておきましょう。

2. 見出しと段落

【記述】<h2>文字</h2>
【効果】h6まである。数字が小さいほど重要な見出し扱い。
【記述】<p>文章</p>
【効果】段落の意味を付与する。paragraph(パラグラフ)の意味。

h1 h2  p でそれぞれの文章を囲うだけです。

タグ名入力+Tabキー でさくっと終わらせましょう。

ちなみにブログサービスでは記事タイトルに h1 が付与されています。

記事内はh2 h3 h4あたりまでが良く使われます。

検索エンジンは見出しタグに囲まれた部分でその記事を評価します。

タイトルと見出しが如何に重要かわかりますね!

3. リンク

【記述】<a href =”URL”>テキストや画像</a>
【効果】テキストや画像をクリックするとURLに飛ぶ

ブロガーであれば一度は見たことのあるHTMLですね。

例のごとくTabキー補完が便利です。

画面左の手順内の必要な情報は、リンクテキスト左クリックでコピーすることができます。

長い文章やURLをタイピングするメリットは皆無です。

・コードを書くわけではないのでスキルアップにつながりにくい
・ミスってもプログラミングと別次元の失敗なので、解決しても成長できない

極力コピペで行きましょう。

4. 画像

【記述】<img src= “画像のURL “>
【効果】URL先にある画像が表示される

これも超有名なやつですね。

URLは手順内からコピペでOKです。

ちなみにTabキーの補完機能だと <img src=”” alt=”” /> と出てきますが、特別いじらなくても素直に該当箇所に画像URLを入れれば正解です。

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のド基礎が出てきます。

 場所 {
何を:どうする;
}
GEN
GEN

禿げるほど書くことになるのでここで慣れましょう

なおCSS記述時には自動入力が適応されます。基本仕様に慣れておきましょう。慣れるととても便利ですぞ。

【方法】 “{ ” 入力後にエンター
【効果】”}” が自動入力
【方法】”何を:どうする”  まで入力
【効果】”;” が自動入力 (“何を”の部分が存在しないと表示されない)

これ以降は index.html というhtmlファイルと stylesheet.css というCSSファイルを行ったり来たりしつつ進めていきます。

最初は丁寧に stylessheet.css というファイルへ誘導してくれています。

【記述】color: 色;
【効果】文字の色が決まる

文字色はコピペでOK。

7. 文字の大きさと種類

【記述】font-size: ~px;
【効果】文字の大きさが決まる
【記述】font-family:種類;
【効果】文字の種類が決まる

Lucida Grande は2語なので “” で囲う必要になります。

今回は手順内のコピペ範囲に””まで含んでくれていますが、実際は自力で書くことになるので注意しましょう。

8. 高さと幅と背景の色

【記述】background-color: 色;
【効果】背景色が決まる
【記述】width:~px;
【効果】幅が決まる
【記述】height:~px;
【効果】高さが決まる

要素の設定を決めていきましょう。背景色はコピペでOK。

9. 高さと幅と背景の色

【記述】 class=”クラス名”
【効果】クラス名をつける
【記述】.クラス名{}
【効果】クラス名のCSSが書けるようになる 頭に .が必要

クラスの概念が登場します。

htmlの<>内にクラスを指定して、指定したクラスのCSSを記述します。

これで「そのクラスの範囲の何をどうする」という意味が付与されます。

クラスを命名する際は””にお世話になりますが、こちらも自動入力仕様になっており便利です。

【記述】class=” まで入力
【効果】” が自動入力
文字色はコピペで(ry
 
 

10. HTMLの全体構造

【記述】
<!DOCTYPE html>
<head></head>
<body></body>
</html>

【効果】
こういうもんです(爆

HTMLのひな型を作ります。ぱっと見ややこしいですが、以降お世話になるのは真ん中あたりのbodyタグ内がほとんどです。

手順に沿って書いていけば間違えることはないと思います。Tabキー補完で時短しましょう。

なお、headタグをショートカット入力するとやたら長いタグもセットでついて来ますが、気にしなくてOKです。

こんなの↓

<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ /><title>`substitute(Filename(”, ‘Page Title’), ‘^.’, ‘\u&’, ”)`</title>

11. HTMLの全体構造(2)

【記述】
<meta charset=”文字コード”>
<title>ページのタイトル名</title>
<link rel=”stylesheet” href=””>

【効果】
こういうもんです(2回目

headタグの中にこれらを記載しておかないと、いろいろ不都合が起きるので書いておきましょう。

手順からひな型をコピペするとコメントも一緒にコピペされますが、このコメントもコピペが使えます。

文字コード、ページタイトル、cssファイル名をコピペすれば時間短縮できます。

12. 全体のレイアウト

 
【記述】 <div class=”クラス名”></div>
【効果】「ここまででクラス化します」の意味が付与される。超頻出

divを使って全体のレイアウトを作っていきます。

「この辺までがヘッダーでこの辺までメインで…」的な情報をコンピュータに教えておくことで、色を付けたり配置を整えるときに楽になるわけですね。

ちなみにここのスライドではじめてTabキーでの補完機能が出てきたりします

13. ヘッダーの構造

【記述】
li{
  list-style: none;
}

【効果】
リストの黒点が消える

リストの黒点消し以外は、これまでの復習です。

14. ヘッダーのレイアウト

【記述】float:left
【効果】要素を横並びにする

横に並べたいときはとりあえずこれ。

ただし後で習う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です。

まずは1つ書き方を覚えましょう。

GEN
GEN

padding :Apx Bpx Cpx Dpx; が個人的に好きです。
わかりやすくて修正しやすいんですよね。

16. フッターの構造

【記述】
.親 子{

}

【効果】
親(要素)内の子(要素)にCSSを適用させる。

親要素は広い範囲でくくったclass名、子要素は親要素内にある別のclassやタグ名のこと。

「header内のliは赤色、footer内のliは青色」みたいな指定が欲しい時に使う。超頻出

header-list 内のliにのみ横並びにして余白を作ってもらうように指定しましょう。

先ほど書いた li すべてに適用されているCSSを消さないと判定されないので注意しましょう。

stylesheet.css 内にコメントがあるので安心です。

フッターはページ下の部分にあるので、プレビューと見本を見比べつつ記述する際は下にスクロールしておきましょう。

17. フッターのレイアウト

【記述】float:right
【効果】要素が右寄りで横並びになる
float:left;と対をなす記述です。後で習うFlexboxの方が現在は主流なのでそこそこでOKです。

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;

【効果】
インラインブロック要素、インライン要素、ブロック要素に変更する

初級学習コースで記述することがなく、見落としがちですがウルトラ重要です。

道場コースでむちゃくちゃ書くことになりますので、その際また復習しましょう。

【記述】<span>文字</span>
【効果】CSSで指定すると文字が変化する。文章を一部装飾したいときに使う。
divタグで囲まれたものには改行が入りますがspanタグは入りません。

またdivはspanの中に記述されることはありません。spanはインライン要素、divはブロック要素だからです。

<div>私は<span>ハゲ</span>です</div>
<span>私は<div>ハゲ</div>です</span>
spanは「長いスパン(span)で考えましょう」のときのspanです。「ちょっとの間」みたいな意味になります。

span以外はこれまでの復習です。丁寧に記述していきましょう。

container contents といった class名は自分で設定できるので覚える必然性はないですが、この程度は覚えてしまった方が楽です。

賛否あるかもしれませんが「一般的にはこう書くことが多い」は知っておくべきかと。

この辺りからタグやクラスが増えて複雑になってきます。

「何書いとるかわからん状態」になったら、入力画面左下のリセットを押してやり直してOK。とりあえず1週目完走を目指してください。

1週すれば何を作っているのかの外観がわかるので、一度ルーズリーフなどの紙に仕様書を書いてみましょう。

「メモをとると後に検索しにくくなる」と言われますが、アナログで書く図は別です。

最初のうちは「どのコードがどの部分を記述しているか」が不明瞭なので図で可視化しておくことで理解が早まります。

数学の授業で「文章題はまず図を描け」と言われましたが、それと近いニュアンスですね。

19. コンテンツの構造

新規の記述は特になし。とりあえず縦に画像と文字を並べていきましょう。

ちなみに2周目以降であれば、以下のような塊をひとつ作ったら後はコピペだけで書けます。

手順を上からやっていくとちょっと遠回りなので、これで時短しましょう。

<div class=”contents-item”>
<img src=””>
<p></p>
</div>

20. ボーダー

【記述】
border : ~px solid 色;

【効果】
太さ・種類・色を指定することで枠線が付く。

デフォルドたと4方向に枠線がつくので、長方形で要素を囲むようになる。

padding同様、border-top border-right とつければ1方向のみに枠線がつくようになる。

borderも良く使われます。

種類のsolidですが、プロゲートではぼぼsolidしか出て来ません。セットで覚えてしまいましょう。

余談ですが #dee7ec という色は道場コースでもよく出てきます。

21. paddingとmargin

【記述】
margin:~px;

【効果】
余白を作る。paddingは内側の余白を作り、marginは外側の余白を作る。

その他書き方の仕様はpaddingと同じ。

marginが登場します。
 
borderで作られた枠線ははpaddingとmarginの間に入ることがわかればOKです。

22. お問い合わせフォームのレイアウト

新たな内容はありません。

contact-formのCSSを指定して、フォーム内のhtmlを記述するだけです。

17. フッターのレイアウト

【記述】<input>
【効果】入力フォームが生成される。終了タグ(</input>)不要
【記述】<textarea></textarea>
【効果】入力フォームが生成される。2行以上ならこっち
【記述】<input type =”submit” value=”テキスト” >
【効果】送信・保存といったボタンが生成される
【記述】
A,B{

}

【効果】
A,Bに対して同じCSSを指定する

最後に畳みかけるように覚えることが増えますが頑張りましょう。

上3つは入力フォームを作るときには必須知識です。

inputとtextareaにはborderで4方向に薄い枠線をつけて良い感じに仕上げています。

以上で初級 学習コース クリアです。お疲れさまでした!

学習コースとの向き合い方

学習コースは手順通りにやればほぼ間違えることはありません。

プレビューを観てきちんと記述が反映されていることを確認しつつ進めることができれば十分です。

逆に言うと手順がある以上は自発的に考えてコードを書いたことにならないので実践力はつきません。

今回TIPSやHINTでくくられたコードをある程度覚えてたら道場コースで磨きをかけましょう。

道場コースは難しいですが、まぁまぁなアウトプットになります
 
今回の記事が初学者の方の一助となれば幸いです。ありがとうございました。
 
次回記事
Progate html/css 初級編 道場コース攻略【仕様書だけでは厳しい人向け】
3・4が鬼門です
プログラミング

GENのプロフィール

(Youtubeにて毎週生放送中)

意識の低いIT自営業7年目。ネットを用いた物販・広告・金融業が得意。2020年はかねてより準備していたプログラミング(マークアップ・コーディング)の発信を開始。 twitterはこちら

禿げてもええやないか!スキンヘッド男道