WEBコーダーへの道

未経験から稼げるエンジニアに？

この記事は、私自身の体験を振り返りつつ、プログラミング学習を始める際の不安や期待を共有したものです。これから挑戦しようとしている方の参考になれば嬉しいです。


ブロック要素とインライン要素に苦戦したお話

この記事を読んでいる皆さんはコーダーさんでしょうか？それとも、「プログラミングをやってみたい」「どんな世界なんだろう」と興味を持っている初学者の方でしょうか？

今回は、私が学習の中で最初に「難しい」と感じた箇所についてお話します。それは**「ブロック要素とインライン要素」**でした。

スクールの動画だけでは理解が追いつかず、YouTubeを見たり、Googleで検索したりして、ようやく少しずつ理解できるようになりました。この部分の理解が浅いと、レイアウトの作成時にとても苦労します。この記事では、学習中に気づいたポイントや、ついつい忘れがちなポイントを整理してお伝えします。

ブロック要素とは

ブロック要素には以下のような特徴があります：
1. 縦に並ぶ
• ブロック要素は積み木のように縦に積み重なります。
2. 横幅と縦幅を指定できる
• 横幅を指定しない場合は、親要素いっぱいに広がります。
3. パディングとマージンを指定できる
• 外側（マージン）や内側（パディング）の余白を設定できます。

特に覚えておいてほしいのは、「横幅を指定しない場合は親要素いっぱいに広がる」という点です。学習を進めると、特に意識しなくても使えるようになりますが、この特徴を知っているとレイアウトの理解が深まります。

インライン要素とは

インライン要素の特徴は以下の通りです：
1. 横に並ぶ
• 列車の車両のように、同じ行に並びます。
2. 横幅や高さを指定できない
• サイズは、内容（文字や画像など）の大きさに依存します。
3. パディングやマージンを上下には効かせにくい
• インライン要素の上下方向の余白には制限があります。

ブロック要素とインライン要素の簡単な見分け方

私がスクールで教わった簡単な方法をご紹介します。それは「背景色をつける」ことです。

例えば、<h1>はブロック要素です。背景色をつけると、文字の幅以上に背景色が広がるのがわかります。このように、背景色が文字の範囲を超えて親要素いっぱいに広がる場合、それはブロック要素と判断して問題ありません。

初心者がつまずきやすいポイント

学習を始めた頃は、ブロック要素ばかり使うので特に意識しなくても問題ないかもしれません。ただ、以下の点は忘れないようにしましょう：
• ブロック要素は「親要素いっぱいに広がる」性質がある。
• インライン要素は横に並ぶが、横幅や高さを自由に指定できない。

また、インライン要素は上下の余白に制限があるため、使いにくく感じるかもしれません。しかし、このインライン要素を使いやすく変換する方法もあります。

おわりに

最初は覚えるのが大変かもしれませんが、学習を進めるうちに自然と身につきます。普段使う要素ではインライン要素の方が少ないので、無理に覚えようとしなくても、気づいたら身についているはずです。

次回は、「インライン要素を使いやすく変換する方法」についてお話できたらいいなと思っています。学習中の皆さん、ぜひ自分のペースで進めていきましょう！

私のように一度諦めてしまうと、あとで必ず後悔します。焦らず、前向きに続けてくださいね！

ではまた次の投稿でお会いしましょう。