こんにちは、HTMLとCSSを習い始めた人はまだまだわからないことが多いですよね。
始めたての時期は些細なことでもつまづいてしまいます。
・CSSって何？
・CSSで何ができるの？
・CSSは簡単って聞いたけどよくわからない
HTMLやCSSは初心者向きと言ってもつまづきやすいポイントはいくつかあります。
この記事ではCSSのつまずきやすいポイントをまとめました。
- CSSの読み込み方
- 横並びfloat
- 要素の範囲
- インライン要素
HTMLのつまずきやすいポイントはこちらをどうぞ！
では、詳しく見ていきましょう！
CSSとは
CSSとはカスケーディング・スタイル・シート（Cascading Style Sheets）の略称です。
簡単に言うとWebページの見た目を整えるための言語です。
CSSを使えばHTMLを書いた段階では味気ないWebページをお洒落に装飾することができます。
CSSでできること
先ほど書いたようにCSSはHTMLの要素を装飾をします。
割とデザイン関係ならなんでもできます。具体的にはこんなことができます。
- 文字の大きさの変更
- 文字色の変更
- 文字に影をつける
- 要素のサイズの変更
- 要素間の隙間の変更
- 画像の挿入（HTMLでも可能）
- アニメーション
- 配置変更（横並びとかセンター寄せとか）
ランサーズやクラウドワークスのようなサイトでHTMLとCSSだけでランディングページやホームページを作成して稼いでいる人もいます。
コーディングだけでなく、自分でWebデザインもできるようであれば自分の思い描くようなWebページを作ることもできますね。
CSSのつまずきやすいポイント
世間ではHTML/CSSは簡単で初心者向きと言われていますが、めちゃめちゃ簡単で誰でもすぐにできると言うわけではありません。
向き不向きもありますし、ある程度は習得に時間がかかります。
僕がつまずいたポイントをまとめました。
CSSの読み込み方は複数種類ある
CSSはHTMLを装飾するので、CSSを読み込むかHTMLに記載する必要があります。
- HTMLの<head>内に<style>タグを作り直接書く
- HTMLの要素タグに直接書く
- <head>タグの中に<link>タグを書き込みCSSファイルを読み込む
人によって書き方が違うことがあります。
模写コーディングや検証ツールで人の書いたコードを確認すると記載されている場所や書き方が違うので混乱します。
何が正解なの？
結論としてはどれも正解です。
それぞれメリット・デメリットがあるのですが、初心者の方はHTMLファイルとCSSファイルは別々に用意し、上記の「３」のように<head>タグの中に<link>タグを作りCSSファイルを読み込めばいいでしょう。
ちなみに@importを使用しCSSファイルにCSSを読み込むと言うこともできます。
横並びの書き方
横並びの書き方と言われれば何を思い浮かべますか？
僕は最初progateで横並びを「float: left」とかで学習しました。
floatは横並びはできますが、単純に横に並べるのではないので初心者はつまずきやすいです。
HTMLで書いたものは何もしなければ上から順に表示されていきます。
しかし、floatを指定された要素は浮き上がったことになります。舞空術的な。
浮き上がったら浮き上がった要素の下にはスペースができるので、浮き上がった下に次に並んでいた要素が潜り込みます。
平家建てが二階建てになったみたいな感じです。
説明されてもよくわかりませんよね。webページは２次元なので視覚的にもわかりにくいです。
これから勉強するのであれば横並びはflexboxで対応することをお勧めします。
floatよりも直感的で使いやすいです。
もしくはbootstrapなんかもおすすめです。bootstrapの学習はこちらの記事で紹介しています。
要素の範囲
要素の範囲とはどこまではその要素か確認するのはCSSを書く時にはとても重要です。
例えばある範囲に背景色を指定した時、自分の思っていた範囲に指定できず混乱することがよくあります。
paddingとmarginの範囲を理解することが大切です。
paddingとmarginの境目にはborderがあります。
混乱したり、わからなくなった時はborderを表示しましょう。
* {
border: 1px solid;
}これを記載すれば全要素のボーダーラインが表示されます。
ブロック要素とインライン要素
ブロック要素は<h1>タグや<p>タグ、<div>タグがわかりやすいものになります。
他にもたくさんありますが、使っていくうちに覚えていくといいと思います。
インライン要素は混乱してしまう原因の一つです。
インライン要素には<a>タグや<img>タグ、<span>タグなんかがあります。
インライン要素は以下の特徴があります。
- インライン要素どうしは横に並ぶ
- 要素の前後には改行が入らない
- margin、paddingが効かない
- 高さや幅を指定できない
displayプロパティに「inline」、「block」と指定することでタグのブロック要素とインライン要素を入れ替えることができます。
タグに思い通りの指定をしたい時はdisplayプロパティを変えてみましょう。
CSSの新旧verがある
CSSの最新バージョンはCSS3になります。
CSSには過去のバージョンがあります。
旧来の書き方をしているものもあるので見慣れない書き方があっても、こう言う書き方もあるんだなと思ってください。
書く時はCSS3の書き方で書けば問題ありません。
まとめ
CSSを勉強し初めてつまずきやすい部分はこちらです。
- CSSの読み込み方
- 横並びの書き方
- 要素の範囲
- インライン要素
- CSSの新旧バージョンの違い
CSSは慣れてくるとどんどん書けるようになっていきます。
多少つまづいても気にせずどんどんコードを書いていきましょう！
コメント