background-position
background-positionとは？
background-positionは、背景画像の表示開始位置を指定するCSSです。
色や画像、画像の表示開始位置、リピートなどをbackgroundでまとめて指定することもできます。
background-positionの使い方
top、right、bottom、left、centerなどのキーワードや%、px（ピクセル）で背景画像を指定します。
記述方法は水平方向・垂直方向の順番で、半角スペースで区切ります。
%・pxで指定する場合は、左・上それぞれどれくらいのスペースを空けてから表示するかを指定します。
一つだけ指定した場合は、水平方向のみになり、垂直方向は中央になります。
記述方法
background-positionは以下のように記述します。
キーワードで左上から表示する場合
background-position:left top;
%で左10%、上20%空けてから表示する場合
background-position:10% 20%;
pxで左10px、上20px空けてから表示する場合
background-position:10px 20px;
おすすめのホームページ作成ソフト
コーディングをする際に、ホームページ作成ソフトを使うと非常に便利です。
現在有名なのは、『ホームページビルダー』と『Dreamweaver』の2つです。
- ホームページビルダー
- 初心者～中級者の方向けで、HTMLタグやCSSが全くわからない方におすすめです。
- Dreamweaver
- 中級者～上級者・プロ向けで、HTMLタグやCSSをある程度理解していたり、自分で調べられる方におすすめです。
『Dreamweaver』は高価ですが、スキルが上がっても使えるため、長い目で見れば、こちらをおすすめします。
また、学生や教職員の方向けに割引されたものがありますので、該当する方なら迷わず学生・教職員向けのものをおすすめします。
