【初心者必見！】HTML/CSS入門｜基礎知識まとめ５０選

HTML/CSSの勉強を始めたけど、まだまだ知らないことがありそう。

独学では知り得ない基礎知識をまとめて教えて欲しい。

こういった要望に応える記事を用意しました！

本記事の内容

バンコクのノマドエンジニア育成講座「iSARA7期」のオンラインチューターとして添削をしていく中で、初心者がつまづきがちなポイントや知らない知識が見えてきました。

この記事を書いた人

ヘボ

ブロガー

• WEB制作で収益７桁達成
• プログラミングスクール『ISARA』チューター
• HTML/CSSの教材作成経験有
• ブログ５年目：執筆記事数300本以上
• ブログで月５桁＆33万PV達成
• YouTube開設、約３ヶ月で収益化

「#今さら聞けないWEB制作」としてツイートしてきたものを、ここにまとめました。

【初心者必見！】HTML/CSS入門｜基礎知識まとめ５０選

なるべく早く知ってほしい

見出しタグの使い方

見出しタグの使い方には上記のとおり「明確なルールがある」と言われていました。

h1タグはページ上で何度でも使用できます。上限も下限もありません。
ジョン・ミューラー

SEO的にはh1タグは何度使っても良いし、順番も気にしなくて良いそうです。Googleのウェブマスター・トレンド・アナリストが言うんだから間違いない。

しかし、ユーザビリティやアクセシビリティ（アクセスのしやすさ）の観点から見ると重要なので、順番は守った方が良さそうです。現実的にわざわざh4から使うのは気持ち悪いですよね。

<h1><a href="#"><img src="./img/logo.png" alt="ロゴ"></a></h1>

WEB制作においてはh1はロゴ画像であることが多いですよね。原則、h1だけは下記のように<img>を囲ってもオッケイです。

» 元ツイはこちら

デベロッパーツール（検証モード）の使い方

画像の赤枠の部分を押すと、PCで色んなデバイス幅での表示ができます。

レスポンシブ確認にChromeの「デベロッパーツール（検証モード）」は必須です。コーディングは必ず「DT」を開きながら行いましょう。

» 元ツイはこちら

さらに「Responsive」をクリックすると、フレームを表示したり、横にしたりできるので、より直感的に作業することができます。

» 元ツイはこちら

デベロッパーツール上でHTMLやCSSを編集する事もできますが、CSSの数値は矢印の「↑」「↓」で1pxずつ変えられます。

変更しても保存されるわけではないので、どんどん試してオッケイです。

» 元ツイはこちら

デベロッパーツール上で編集したHTMLやCSSはリロードでリセットされます。

変更したスタイルは都度コピペしましょう。「✓」が外れているコードはコメントアウトされてコピーされます。

» 元ツイはこちら

ちなみに、デベロッパーツールの変更は保存する事もできますよ。

chromeのデベロッパーツールでの変更を
そのまま保存できるの知ってましたか？

やり方は
1、変更する
2、sourceタブを開く
3、変更したファイルを右クリックし、「save as」

いい感じにレイアウト整えたのに
変更点忘れて反映させられなかったとかよくあるので
ぜひ使ってみてください pic.twitter.com/hrHAl3UNjI

— かずたか@Anycloud (@kazutaka_dev) December 29, 2018

今さら聞けない「デベロッパーツールの主な用途」

WEBデザイナーにとって「DT」は親友です😌

» 元ツイはこちら

デベロッパーツールはセルフチェック以外に「他人のサイトをパクる」時にも活躍します。

あなたが尊敬しているデザイナーのあの人も必ず誰かのサイトを参考にパクっています（引用とも言う）。

» 元ツイはこちら

今さら聞けない「WEBデザイン参考サイト一覧」

» 元ツイはこちら

ブレークポイントの決め方

PCとスマホの間（タブレット）が一番崩れやすいので、コーディングも難しいです。

※inner（インナー）については後述しています。

» 元ツイはこちら

PC：inner幅まで

ウインドウをどこまで広げても、要素はすべてinner幅に内包され、中央で維持されます。

ただし、background-colorやbackground-imageは均等に左右に広がります。

» 元ツイはこちら

タブレット：inner幅〜iPad（768px）まで

一番崩れやすく、カンプなどの指定がない場合が多いので迷いがちですが、ここまではPCに近い表現をします。

» 元ツイはこちら

スマホ：767px〜iPhone SE（320px）まで

767px以下を「スマホ」と定義します。

要素を縦並びにしていく作業なので比較的カンタンですが、320px（iPhone SE）で微調整が必要になります。

» 元ツイはこちら

インナーの使い方

独学で勉強していると現役コーダーのコーディングの型を知る機会がないので、そもそもinner（インナー）という概念すらない人も多いと思います。僕もそうでした！見えないですしね。

innerを実装するメリットは下記です。

インナーを実装するメリット

innerの実装方法は下記になります。

HTML

<section>
    <div class="inner">
        中身
    </div><!-- /.inner -->
</section>

CSS

.inner {
    max-width: 1080px;// inner幅
    margin: 0 auto;// 中央寄せ
} 
/* レスポンシブ */
@media screen and (max-width: 1079px) {
    .inner {
        padding: 0 15px;// inner幅以下で左右に余白
    }
}

» 元ツイはこちら

innerはbody全体を大きく囲うのではなく、何度かに分けて使いましょう。そうすることで、aboutとnewsを入れ替えるのがラクになり、保守性が高くなりますよね。

<section class="about">
    <div class="inner">
        aboutの中身
    </div>
</section>

<section class="news">
    <div class="inner">
        newsの中身
    </div>
</section>

実は、サイトはみな「見えない肌着」を着ているのです（innerの実装されていないサイトは存在しません）。

» 元ツイはこちら

フォントの使い方

font-familyを書いているのに適用されていない、そもそも書き忘れている。あるあるです。

今さら聞けない「font-familyの書き方」

body {
    font-family: 'Arial','Yu Gothic',sans-serif;
}

今さら聞けない「font-familyの基本」

font-familyに関しては「サルワカ」を読んでおけば間違いなしです。

» 元ツイはこちら

Font-familyメーカーの使い方

サルワカのWEBサービス「Font-familyメーカー」を使えば、コピペでfont-familyを実装できますよ。

» 元ツイはこちら

Google Fontsの使い方

今さら聞けない「Google Fontsとは？」

今さら聞けない「Google Fontsの注意事項」

Google Fontsの使い方も「サルワカ」にあります。

» 元ツイはこちら

今さら聞けない「Google Fontsの使い方」

Google Fontsは下記からアクセスできます。

» 元ツイはこちら

Font Awesomeの使い方

今さら聞けない「Font Awesome」とは？

今さら聞けない「Font Awesomeの使い方」

» 元ツイはこちら

今さら聞けない「アイコンサイズの変え方」

上記のとおり、Font Awesomeには予め用意されているclassを付与するだけでサイズを変更する事ができます。

任意のサイズに変更したいなら下記です。

iタグにclassを追加してfont-weightで変える方法

<i class="fa fa-check fa-big" aria-hidden="true"></i>

.fa-big {
    font-size: 6em
}

» 元ツイはこちら

あまり知られてないですが、アイコンサイズ以外にも下記のようなclassが用意されています。

今さら聞けない「Font Awesomeに用意されているclass」

「アイコンを重ねる」だけ少し複雑なので解説しますね。

アイコンを重ねる方法

<span class="fa-stack">
    <i class="fas fa-cloud fa-stack-2x"></i>
    <i class="fab fa-twitter fa-stack-1x"></i>
</span>

上記2つを<span class="fa-stack">の中に入れればオッケイです。

» 元ツイはこちら

タグの使い方

div地獄から抜け出そう！

いずれにも当てはまらなければdivを使う感じです。

タグにはそれぞれ意味がありますが、Googleのクローラーはdivの意味を理解できません。そもそも意味がないからです。

» 元ツイはこちら

4大セクショニングコンテンツの使い方

4大セクショニングコンテンツとは、上記を指します。

» 元ツイはこちら

今さら聞けない「nav」の使い方

例えばheaderとfooterなど2ヶ所にナビが存在する場合、いずれか1ヶ所（この場合はheader）にのみ使用します。

» 元ツイはこちら

今さら聞けない「nav」の囲い方

<nav>
    <ul>
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#news">NEWS</a></li>
        <li><a href="#entry">ENTRY</a></li>
    </ul>
</nav>

<li>で<a>を囲いましょう。逆になってるのをよく見かけます。

» 元ツイはこちら

今さら聞けない「div」以外の使い方

headerとfooter以外は心当たりある人も多いのではないでしょうか。

「実務経験1年の人も意外に抜けてる知識」は下記にもあります。

» 元ツイはこちら

ブロック要素とインライン要素

今さら聞けない「HTML5でのタグの入れ子ルール」

上記はあくまで「HTMLでタグの入れ子を考える上で」になります。詳しくは下記です。

» 元ツイはこちら

今さら聞けない「ブロック要素一覧」

基本的にブロック要素だと思ってオッケイです。

» 元ツイはこちら

ブロック要素の特徴

block要素はinline要素になる

div {
    display: inline;
}

» 元ツイはこちら

今さら聞けない「インライン要素一覧」

インライン要素は文章（ブロック要素）の一部としてよく使われます。

» 元ツイはこちら

インライン要素の特徴

inline要素はblock要素になる

a {
    display: block;
}

» 元ツイはこちら

ハイブリッドタグ

上記はinline要素なのにblock要素のように

そして、inline要素なので並べると

という良いとこ取りのハイブリッドタグです。

とはいえ、その他のタグもCSSで変更できます。

li {
    display: inline-block;
}

» 元ツイはこちら

今さら聞けない「display」の復習

※前述のとおり、HTML5以降ブロック／インライン要素とは呼ばないんですけどね。

» 元ツイはこちら

今さら聞けない「display: none;」

「display: none;」とは？

あくまで非表示になるだけで、ページが開かれる時には普通に読み込まれているので、読み込み速度が早くなるわけではありません。

br {
    display: none;
}

» 元ツイはこちら

flexboxの使い方

初心者にとって「要素の横並び」はつまずきがちなポイントの1つですよね。

親要素にdisplay:flex;を指定するだけで子要素は横並びになります。

HTML

<div class="parent">
    <div class="child">A</div>
    <div class="child">B</div>
    <div class="child">C</div>
</div>

CSS

.parent {
    display: flex;
}

» 元ツイはこちら

display:inline-flex;でインライン要素だって横並びになります。

.parent {
    display: inline-flex;
}

主なインライン要素

» 元ツイはこちら

今さら聞けない「justify-content」の使い方

.container {
    display: flex;
    justify-content: xxx;
}

※頻出です。

justify-contentで「子要素を横にどう並べるか」を決められます。

» 元ツイはこちら

今さら聞けない「align-items」の使い方

.container {
    display: flex;
    align-items: xxx;
}

※頻出です。

align-itemsで「子要素を縦にどう並べるか」を決められます。

» 元ツイはこちら

今さら聞けない「flex-direction」の使い方

.container {
    display: flex;
    flex-direction: xxx;
}

※頻出です。

flex-directionで「子要素の並ぶ方向」を決められます。

» 元ツイはこちら

今さら聞けない「flex-wrap」の使い方

.container {
    display: flex;
    flex-wrap: xxx;
}

※頻出です。

flex-wrapで「子要素の折り返し」を決められます。

» 元ツイはこちら

子要素の順番を変える方法

HTML

<div class="parent" style="display: flex;">
    <div class="child1">B</div>
    <div class="child2">A</div>
    <div class="child3">C</div>
</div>

CSS

.child1{ 
    order:2;
}
.child2{
    order:1;
}
.child3{
    order:3;
}

結果

※初期値は0で、マイナスも指定できます。

PCとスマホで表示する順番を変えたい時に使います。意外と頻出ですよ。

» 元ツイはこちら

今さら聞けない「align-self」の使い方

.child{ 
    align-self:xxx;
}

※上記を子要素に対して指定します。

親要素に指定するalign-itemsと全く同じ機能ですが、親要素のalign-itemsよりも「優先」されます。

» 元ツイはこちら

今さら聞けない「flexboxの解除の仕方」

HTML

<div class="parent">
    <div class="child">A</div>
    <div class="child">B</div>
    <div class="child">C</div>
</div>

CSS

.parent {
    display: block;
}

flexboxが解除されるので要素は「縦並び」になります。

flex-direction: column;と同じ結果が得られます。

» 元ツイはこちら

今さら聞けない「よく使うflexbox 5選」

flexboxの使い方はいっぱいありますが、頻出するのは上記のとおり、5つほどです。

» 元ツイはこちら

今さら聞けない「flexboxのチートシート」

flexboxには有名なチートシートがあります。

初心者の内はデスクに置くなり、壁に貼るなりして利用すると良いでしょう。

以下よりダウンロードできます。

» 元ツイはこちら

今さら聞けない「flexboxの当て方」

CSS

.flex-between-center {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

予め作っておいたclassを使いたいところ（横並びさせたいアイテムの親）に当てていく手法です。頻出が故ですね。

HTML

<section>
    <div class="inner">
        <div class="flex-between-center">
            <div class="child1">A</div>
            <div class="child2">B</div>
            <div class="child3">C</div>
        </div>
    </div>
</section>

» 元ツイはこちら

今さら聞けない「floatを使う時」

基本的に要素の横並びには「Flexbox」を使いましょう。例外は上記のとおりです。

テキストの回り込みって？🤔という方は以下を参照してください。

» 元ツイはこちら

おわり

今回は以上です。随時追加していきますね！

人気記事【３０代後半＋未経験】プログラミングで月１００万稼ぐロードマップ