1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

HTML&CSS:Webページ作成で詰まったところと解決策

Posted at

未来電子テクノロジーでインターンをしている宮﨑です。

プログラミング初心者であるため、内容に誤りがあるかもしれません。
もし、誤りがあれば修正するのでどんどん指摘してください。

はじめに

一から自己紹介ページを作るという課題のもと、さっそく作成をしていたのですが中々うまくいかず試行錯誤を繰り返し…
ということで、今回その試行錯誤で得た問題と私が行った解決法についてまとめてみます。
(解決策はあくまでも一例に過ぎず、他にも方法はあります)

親要素のheightがヘン!

問題:要素が認識されずに高さが縮まってしまった
原因:floatしている要素は中身だと認識されない
解決策:floatした要素の親要素の最後に空のdiv要素を作り、そこにclearプロパティを使う

floatは文字通り要素を「浮かせる」プロパティです。
そのため親要素には中身として認識されず、背景とうまくかみ合わずにレイアウトが崩れることがあります。
clearを使うことでfloatが解除されます。

<a>タグで上下のwidthやheightが調節できない

原因:インライン要素のままになっている
解決策:インラインブロック要素に変える

インライン要素では、widthやheight、paddingの上下などを指定できません。

を書くことでそれらが指定できるようになります。

自分が撮った写真の貼り付け方がわからない!

解決策:①写真をhtmlやcssと同じ階層のファイルに移動させる
    ②htmlのimgタグでsrcの" "の間に画像の情報(~.jpegや~pngなど)を入れる

まとめ

自分で一から作ると、わかっていた気になっていただけのことがたくさん出てきました。
焦らずに基本的なことからしっかり理解していきたいです。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?