progate html&css道場は初心者にとってはなかなか難しいですよね。「このdivはいるのか?」「位置がずれて進まない」と悩んでいる方にぜひ読んでいただきたいです。

Table of Contents

◎進まない原因

〇無駄なdivを書きすぎる

ここのdivはcontentでこのdivはitemで、

  • ん?このdivはなんだ?
  • あれ、なんかdivが足りない気がする… 

こんな感じになった方も少なくないと思います。

この解決方法として、

「構成を一度紙に書いてみる」

ことを私はオススメしております。

実際に初級編について構成図を作りましたので、

参考にどうぞ。

こちらの図をご参考ください!

また、位置がずれてできない方は
displayについて理解すると、

ずれている理由がわかると思います。

 

◎display: block, inline, inline-blockの違い

htmlでdivタグを作ります。

ここはdivです。

cssで、

div {
width: 400px;
height: 200px;
background-color: blue;
border: 5px solid black;
}

分かりやすいようにに色を付けました。

displayのinline,inline-block,block要素の違いについて解説していきます。

  • inline

inlineはwidth,heightの指定ができません。そのため、中に書いた文字などに大きさは依存します。

  • inline-block

inline-blockはwidthとheightを指定することができます。そのため好きな大きさを指定できます。

  • block

block要素は一見inline-blockと同じように見えると思います。がただ、動画を見ると、divの後ろに色が変わったところがあります。

色が変わったところには、次の要素は入りません。だから、block要素を二つ続けて書くと、縦に並び、inline-blockで書くと横に並ぶ違いがあります。

◎どうしても進まない時は…

〇無理やり合わせる

marginは+の値だけでなく-の値をとることができます。例えば、margin: -20px; にしてみると

◎まとめ

  • 構成をコーディングする前に紙に書くなどして、まとめる
  • inline,inline-block,blockの違いを理解して使いこなす
  • それでも位置が合わない時は、marginを-にする。

◎こちらもおすすめ


shuho

フロントエンドエンジニアを目指して、html & CSS & javascriptを学習しています。初心者にもわかりやすいように、記事を作成していきます。私自身、独学で技術を身に付けました。progateから勉強し始め、フロントエンドエンジニアになるまでの橋渡しになるよう全力で記事を書いていきます。

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です