投稿日: 投稿者: phg72974

リンク疑似クラス、background-repeat、background-positionプロパティについて

ここでは疑似クラス、背景画像を繰り返すbackground-repeatプロパティについて

background-positionプロパティ

background-positionは背景画像の表示位置を指定するプロパティです。プロパティ値の設定方法には「キーワードで指定」、「数値＋単位で指定」、「キーワード＋数値で指定」の3通りがあります。

#position {
width: 250px; height: 250px;
border:1px black solid;
background-image: url( 画像パス);
background-repeat:no-repeat;
background-position:center center;
}
CSSの一例
キーワードで指定。
background-position:横方向　縦方向;
<div id=”position”></div>HTMLの一例
#position2 {
width: 250px; height: 250px;
border:1px black solid;
background-image: url( 画像パス);
background-repeat:no-repeat;
background-position:90% 70%;
}
CSSの一例
「数値＋単位」で指定。
background-position:横方向の距離＋単位 縦方向の距離＋単位;
<div id=”position2″></div>HTMLの一例
#position3 {
width: 250px; height: 250px;
border:1px black solid;
background-image: url( 画像パス );
background-repeat:no-repeat;
background-position:right 30px bottom 80px;
}




CSSの一例
「キーワード＋数値」で指定。
background-position:横方向のキーワード　距離＋単位　縦方向のキーワード　距離＋単位;
<div id=”position3″></div>
HTMLの一例

この本を参考に、完成させることができました。しかし、プログラミング初心者の私が詳しく解説することは、おこがましく、難しく出来ません（ToT） その点、この本では丁寧な解説が載っています。解説とともにコードを書き、完成させれば資格取得に必要なHTMLやCSSについてより深く学ぶことができます(^.^) 身に付けて消えないスキルがこの値段。買っておいてよかったです。

短期間でレベルアップにはプロから学ぶのもあり。

キャリアアップに必要なスキルを取得しよう。

オンラインで受講ができるスクールですので、全国どこからでも。

就職・転職支援