はじめに

未来電子テクノロジー（https://www.miraidenshi-tech.jp/intern-content/program/）
でインターンをしている@imurutaです。
プログラミングを始めて間もないですが、学んだことをまとめてみようと思います。
＊プログラミング初心者であるため、内容に誤りがあるかもしれません。もし、誤りがあれば修正するのでどんどん指摘してください。

HTMLとCSSを使う際の注意点

今回はHTMLとCSSについて学んでいく中で「ちょっと複雑だな」あるいは「これは少し工夫がいるな」と感じた部分について、問題点とその解決策をご紹介します。

背景画像は表示範囲を埋め尽くすまで繰り返してしまう

・問題点
background-imageで指定された背景画像は表示範囲を埋め尽くすまで繰り返します。1枚の画像だけを表示したいのに、空いたスペースに背景画像の全体または一部が追加で入ってくるイメージです。

・解決策
background-size:cover;を指定すると、1枚の画像で表示範囲を埋め尽くすように画像の大きさが調整されます。これを使えば、いちいち画像の大きさを指定する必要はありません。

インライン要素はwidth・heightや上下のmarginを指定できない

・問題点
インライン要素はwidth/heightや上下のmarginを指定することができません。

・解決策
この問題はインラインブロック要素に変換することで解決できます。インラインブロック要素はインライン要素と同じように横に並びますが、幅や高さを調整できます。具体的には、displayプロパティを使うと要素の変換ができます。
例）ボタンをインラインブロック要素に変換する場合
.btn {
display: inline-block;
　　}

positionを使うと要素の重なりが生じてしまう

・問題点
position:fixed;を使うと要素を特定の位置に固定できます。しかし、他の部分を動かすと要素の重なりが生じてしまいます。結果、見せたい要素が隠れてしまうことがあります。

・解決策
z-indexプロパティを用いれば要素の重なりの順序を指定できます。z-indexは整数値で指定し、値が大きいほど上に表示されます。

おわりに

今回はHTMLとCSSを使う際の注意点についてご紹介しました。今回取り上げたもの以外にも注意点はまだまだあります。これからプログラミングを学んでいくと複雑で難しい内容がさらに増えていくと思います。そのため、複雑だなと感じた点を1つずつ着実に頭に入れていこうと思います。