CSSはインライン要素とブロック要素だけ覚えれば、あとはなんとかなる

現在、「HTMLやCSSがわからない」という方は、とりあえずインライン要素とブロック要素だけ覚えましょう。
ホームページ上に表示されている情報は、そのほとんどがインライン要素かブロック要素です。
これさえわかっていれば、ある程度自分の思い通りにスタイルをキメることが出来ます。

Contents

タグで覚える必要はない

「divタグはブロック要素だ」とか「pタグやspanタグはインライン要素だ」とか、そんなことを覚える必要はありません。
それはあくまでもブラウザのデフォルト表示が『インライン要素なのか』『ブロック要素なのか』だけで、以下のように記述するだけでpタグをブロック要素にすることも出来ますし、divタグをインライン要素にすることも出来ます。

// インライン要素
display: inline;
// ブロック要素
display: block;

つまり、上記の指定さえわかっていれば、タグを自在にインライン要素にもブロック要素にも切り替えることが出来るわけです。
そのため、どれがインライン要素で、どれがブロック要素なのかなんて、宣言次第でコロコロ変わるので、覚えておかなくても良いのです。

画像とリンク以外は全部divタグでも良い

『もうタグを覚えるのは無理だ！わけがわからん！』ってなったら、究極は画像とリンク以外全部divタグでも良いです。
そしたら、あなたが覚えなきゃいけないのはdivタグ、imgタグ、aタグの３つだけになります。
divタグはかたまりを定義するただのブロック要素ですが、前述のようにブロック要素のままでも使えるし、インライン要素にも変えられます。
覚えられなければ、pタグもspanタグも忘れて全部divタグで作ってしまっても良いです。（かなり暴論なので最終手段ですよ？）

大切なことはインライン要素とブロック要素の特徴を理解すること

どのタグでも自由にインライン要素にもブロック要素にも出来るとしたら、何を覚える必要があるのか？
それはインライン要素とブロック要素の特徴・違いを理解しておくことです。

どこでインライン要素を使えば良いのか、どこがブロック要素向きなのかをしっかり理解しておきましょう。

インライン要素の特徴

さて、インライン要素の特徴ですが、インライン要素は一言で言ってしまえば『文章』です。

インライン要素は幅・高さの指定が出来ない
インライン要素は中のコンテンツに合わせたサイズになる
インライン要素は横並び配置になる（改行が発生しない）

ブロック要素の特徴

ブロック要素は『箱』です。要素を囲む箱としても使いますし、スペースを空けるための箱としても使います。

ブロック要素は親要素のサイズに合わせたサイズになる（自動的にWidth: 100%;状態になる）
ブロック要素は幅・高さの指定が出来る（指定しない場合はWidth: 100%になる）
ブロック要素は縦並び配置になる（改行が発生する）

慣れてきたら、タグの意味を覚えよう

前述で「タグなんてdivだけでも良い」と記述しましたが、これは『ただホームページを作る』という目的だけの場合です。
検索エンジンに評価してもらうような『SEO』を意識する場合はちゃんとHTMLタグの意味を意識して記述する必要があります。

HTMLタグにはそれぞれ意味があります。
h1タグやh2タグは見出し、pタグは文章、asideは補足情報など、これを『セマンティックマークアップ』と言います。
検索エンジンはこれを頼りにホームページの内容を解読していきますから、ある程度思い通りのページが作れるようになったら、セマンティックマークアップを意識するようにしましょう。

でも、まずは形を作ることがスタートかなと思います。