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

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

本記事の内容

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

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

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

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

見出しタグの使い方

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

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

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

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

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

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

【HTML】見出しタグの使い方：h1〜h6はどう使い分ける？

h1やh2などの見出しタグの「意味」と「正しい使い方」を分かりやすくまとめました。

» 元ツイはこちら

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

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

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

» 元ツイはこちら

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

» 元ツイはこちら

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

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

» 元ツイはこちら

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

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

新米Webデザイナーがこれだけは抑えておきたいデベロッパーツールの使い方

皆さん、使っていますか？Chrome DevTools。日本語ではデベロッパーツールと呼ばれていますね。Webサイトの構成やCSSの検証が手軽にできちゃう、制作者の必須アイテム！Chromeにデフォルトでついている機能な […]

» 元ツイはこちら

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

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

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

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

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

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

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

» 元ツイはこちら

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

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

» 元ツイはこちら

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

【iSara5期/Day 10】WEBデザイン知識／実践編 〜XD講座〜

バンコクにてノマドエンジニア育成講座のiSara5期に参加中の（@HEBOCHANS）です。 Day 10は2コマを使っての「WEBデザイン知識／実践編 〜XD講座〜」です。 担当講師：ちづみ（@09

» 元ツイはこちら

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

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

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

レスポンシブのブレークポイントの決め方！PCデザインカンプから再現する際のベスト

「ブレークポイントをどうしよう...」、レスポンシブデザインでは常に悩みの種かもしれません。日頃コーダーとして…

» 元ツイはこちら

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の実装されていないサイトは存在しません）。

レイアウトの基本である.innerの中央寄せを覚えよう！

中央揃えってサイト制作し始めた初心者にとっては最初の難題かと思います。 この中央揃えですが、実はレイアウトの肝…

» 元ツイはこちら

フォントの使い方

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

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

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

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

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

font-familyの書き方まとめ：CSSでフォント種類を指定しよう

HTML&CSS初心者の方でも分かるように「font-familyの書き方の基本」と「Font-familyメーカーの使い方」を解説します。

» 元ツイはこちら

Font-familyメーカーの使い方

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

Font-familyメーカー：フォント種類一覧からサクッと指定

Windows・Mac・iOSの標準フォント一覧からドラッグするだけで簡単にfont-familyを作成できます。

» 元ツイはこちら

Google Fontsの使い方

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

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

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

【2019年版】Google Fontsの使い方：初心者向けに解説！

最も有名なWebフォント「Google Fonts」の使い方と導入方法を、初心者の方でも分かるように解説します。

» 元ツイはこちら

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

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

Google Fonts

Making the web more beautiful, fast, and open through great typography

» 元ツイはこちら

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">の中に入れればオッケイです。

【保存版】Font Awesomeの使い方：Webアイコンフォントを使おう

導入方法から基本的な使い方、「Font Awesome Animation」でさまざまなアニメーション効果を加える方法まで丁寧に解説します。

» 元ツイはこちら

タグの使い方

div地獄から抜け出そう！

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

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

» 元ツイはこちら

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

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

» 元ツイはこちら

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

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

あなたのコード、一面divになってません？🥺【セクショニングコンテンツを攻略せよ】 - Qiita

googleはdivの意味を理解できない（そもそもdivに意味はない）クローラーに正しくコンテンツを認識してもらうため、きちんとセクショニングコンテンツを利用せよ今回の趣旨は簡単に言うと、上記の通りです。例えば、下記のコード...

» 元ツイはこちら

今さら聞けない「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年の人も意外に抜けてる知識」は下記にもあります。

CSS設計と保守性を考えたコーディング【iSARA6期/Day 8】

バンコクのノマドエンジニア育成講座『iSARA』5期生で、フリーランスWEBエンジニアのへぼちゃんずです。 5期の講座にはなかった6期の現地講座をまとめます。 » プログラミングスクール「iSara」

» 元ツイはこちら

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

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

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

【一覧表あり】HTML5でのタグの入れ子のルールを徹底まとめ

html5のタグの入れ子のルールの保存版まとめです。「〇〇タグに〇〇タグって入れてもいいんだっけ？」という悩みを全部解決します！すべてw3cのコンテンツモデルの仕様に基づいた内容になっていますので安心して読んでくださいね。

» 元ツイはこちら

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

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

» 元ツイはこちら

ブロック要素の特徴

block要素はinline要素になる

div {
    display: inline;
}

【CSS】displayの使い方を総まとめ！inlineやblockの違いは？

CSSの難関「display」プロパティについて初心者でも分かるように丁寧に解説します。inline、block、inline-block、noneとは？違いは？

» 元ツイはこちら

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

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

» 元ツイはこちら

インライン要素の特徴

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つほどです。

【コピペOKのサンプル付き】Flexboxはこの5パターン覚えておけば大丈夫！

Flexboxのプロパティってめっちゃ多いですが、全部を覚えなくても実務レベルで使うことはできます。わたしも最…

» 元ツイはこちら

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

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

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

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

日本語対応！CSS Flexboxのチートシートを作ったので配布します

FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。現在ほとんどすべての最新ブラウザーで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」を使いましょう。例外は上記のとおりです。

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

これからのレイアウトはGrid Layoutで決まり？特徴で使い分けたいCSSレイアウト手法

新しいCSSのGrid Layoutはウェブページのレイアウト構築に役立ちます。従来FloatやFlexboxでつくっていたようなレイアウトは、Grid Layoutで置き換えられるでしょう。しかし、すべてをGrid Layoutで置き換えるのが良いとはいえません。

» 元ツイはこちら

おわり

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

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