
スキルアップ
2021.01.08
社会人の勉強は何をするべき?勉強のメリットと勉強方法も紹介!
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
ITコラム
2017.04.26
background-colorプロパティやbackground-sizeプロパティなど、背景に関するプロパティは数多くありますが、backgroundプロパティで、それらの指定をまとめて行うことができます。
今回は、backgroundプロパティについてまとめたいと思います。
背景に関するプロパティについては、以下のページもご参照下さい。
CSS【 background 】1 ~ 背景プロパティの種類とbackground-color
CSS【 background 】2 ~ background-imageでレイヤーやグラデーションも
CSS【 background 】3 ~ background-repeat、background-attachment
CSS【 background 】4 ~ background-position
CSS【 background 】5 ~ background-size
CSS【 background 】6 ~ background-clip、background-origin
CSS【 background 】7 ~ 背景に関するショートハンドプロパティ(本ページ)
1.backgroundプロパティ
2.sizeとposition、originとclip
3.背景画像を複数指定
backgroundプロパティは、背景に関する各プロパティの指定をまとめて行うことができるショートハンドプロパティです。
backgroundプロパティで指定できるプロパティは、次の通りです。
background-color 背景の色を指定するプロパティ
値:CSSの色指定(カラーネーム、RGB、HSL)、transparent(透明)、currentColor(文字色)
デフォルト値:transparent(透明)background-image 背景画像を指定するプロパティ
値:url(“画像のURL”)
デフォルト値:none(背景画像なし)background-repeat 画像の繰り返し方法を指定するプロパティ
値:repeat-x、repeat-y、repeat、no-repeat、space、round
デフォルト値:repeatbackground-attachment スクロール時の背景画像の挙動を指定するプロパティ
値:fixed、scroll、local
デフォルト値:scrollbackground-position 画像表示位置を指定するプロパティ
値:数値(pxやemなどの単位を付ける)、%、top、right、bottom、left、center
デフォルト値:0 0background-size 画像表示サイズを指定するプロパティ
値:数値(pxやemなどの単位を付ける)、%、auto、contain、cover
デフォルト値:autobackground-clip 背景の範囲を指定するプロパティ
値:border-box、padding-box、content-box
デフォルト値:border-boxbackground-origin 画像配置の基準位置を指定するプロパティ
値:border-box、padding-box、content-box
デフォルト値:padding-boxbackground ショートハンドプロパティ
指定したい値を半角スペースで区切って指定する
sizeはpositionとセットでposition/sizeという順番でスラッシュで区切って指定する
originはclipの前に指定する
上記以外の指定は順不同
backgroundプロパティは、ほとんどの内容については、指定したい値を、順番を気にせずに、半角スペースで区切って指定すればOKですが、次の2点だけ、特別なルールがあります。
●sizeを指定する場合は、必ずpositionとセットで、「position/size」という形で指定します。
(positionは、単独で指定できます。)●originとclipを両方指定する場合は、「origin clip」の順番に指定します。
(どちらか1つのみ指定する場合は、両方が同じ値となります。)
sizeとpositionは、他のプロパティと違って複数の値を半角スペース区切りで指定できるため、このルールがないと、何の値かをブラウザが認識できなくなるので、上記のルール(position/size)が存在します。
originとclipは、値がどちらも3つのキーワード(border-box、padding-box、content-box)のみのため、このルールがないと、どのプロパティに対する値かをブラウザが認識できなくなるので、上記のルール(origin clip の順に指定)が存在します。
各プロパティで指定した背景は、レイヤー構造となります。
画像やグラデーションを複数指定する場合は、上から順に画像が重なり、background-colorプロパティで指定した背景色は一番下のレイヤーとなります。
backgroundプロパティで画像等を複数指定する場合は、レイヤーごとにカンマ(,)で区切って指定し、最後のレイヤーだけbackground-colorを指定します。
次の3つの画像を、上から順に、上(img1.jpg)、中(img2.jpg)、下(img3.jpg)の順に重ねてみます。
ソースは次の通りです。
(CSS)
div#sample {
margin:0;
padding:2em;
color:#FFF;
font-weight:bold;
height:15em;
border-top: solid 25px rgba(255,255,255,.5);
background:
url(img/img1.jpg) no-repeat right 5px top 5px/auto padding-box border-box,
url(img/img2.jpg) repeat-x -20px 5px/40px 40px border-box,
url(img/img3.jpg) 0 0/15px border-box #FFD9D9;}(HTML)
<div id=”sample”>
上:ヨット(img1.jpg)
中:カモメ(img2.jpg)
下:模様(img3.jpg)
</div>
スキルアップ
2021.01.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
スキルアップ
2021.01.08
独学でフリーランスエンジニアを目指す方へ向けて、未経験からフリーランスエンジニアになるための手順や独学でのプログラミング学習法、必要なスキルなどをご紹介します。 独学とスクールどちらで勉強すればいいか迷っている、そもそも […]
スキルアップ
2021.01.05
高卒女子の就職内定率は大卒女子とほぼ同じ。でも知恵袋には「高卒女性が応募できる正社員求人って少ないのでは…?」と心配する人たちもいるようですが、資格なしでも高収入が期待できる仕事はたくさんあります。そこで今回は現役女子高 […]
スキルアップ
2020.12.30
プログラマの仕事に興味はあるものの「プログラマの仕事はきつい」というのを耳にして不安に思ったりしていませんか?なぜプログラマの仕事はきついといわれるのか?そもそも未経験からでもプログラマになれるのか?本記事では、プログラ […]
スキルアップ
2020.12.21
技術の進歩に伴い、IT業界も人気の業界のひとつとなりましたが、「IT業界はブラック企業が多いからエンジニアを目指すのはやめとけ」という声も聞こえてきます。これは本当なのでしょうか?この記事では、実際の疑問の声に対する理由 […]
スキルアップ
2020.12.18
仕事にやりがいを感じられず悩んではいませんか?本記事では、仕事で満足感を得るにはどうすればいいのか、やりがいの感じやすいお仕事7選、仕事にやりがいを見つけるポイント、転職しなくても仕事の満足度をあげる方法などをご紹介しま […]
INTERNOUS,inc. All rights reserved.