石田ジェイコの考えるブログ
  • 05Jul
    • background-color プロパティ(CSS3)

      「background-color プロパティ」は、「背景色」を指定するためのプロパティです。このプロパティは、「CSS Backgrounds and Borders Module Level 3」というモジュール※1で仕様が策定されていて、初期値(Initial)※2は「transparent(透明)」、スタイルの継承(Inherited)※3は「no(継承しない)」、HTML要素への適用(Applies to)は「すべての要素(all elements)」となっています。↓CSS Backgrounds and Borders Module Level 3(W3C)https://www.w3.org/TR/css3-background/***※1 …モジュールこれまでのCSSは規格文書がひとつのものであったのに対し、CSS3からは規格文書が分野別に設けられることとなりました。この分野別に設けられたひとつひとつの規格文書を「モジュール」と言います。CSS2.1(CSS1の改訂版)が標準化に9年(2002.8 草案 ~ 2011.6 勧告)を要した経緯から、CSS3からはモジュールごとに標準化のための策定が進めらることとなりました。標準化までは4段階で、①草稿(初稿)、②勧告候補(校正中)、③勧告案(最終校正)、④勧告(校了)の流れを汲みます。※2 … 初期値(Initial)そのプロパティが最初から持つ値のことです。具体的には、HTMLのみで記述した要素(CSSでのデザイン設定はなし)を表示したときに、ブラウザに映し出される要素の見た目のデザインが、そのプロパティが持つ初期値ということになります。※3 … スタイルの継承(Inherited)親要素に指定のプロパティが子要素に影響するかどうかで、「yes(継承する)」か「no(継承しない)」のどちらかです。例えば、color(文字の色)プロパティは継承するので、HTMLで「<div><p>こんにちは</p></div>」について、CSSで「div { color: red;}」と指定すると、親要素「div(ブロックボックス)」に包含された子要素「p(段落)」のコンテンツ領域のテキスト「こんにちは」が影響を受け、赤色の文字で「こんにちは」と表示されます。これが、borderプロパティだと継承しないので、CSSに「div { border: 1px solid red;}」を指定すると、親要素「div(ブロックボックス)」のみのボーダー領域に罫線(幅1px・実線・赤色)が表示され、子要素「p(段落)」のボーダー領域は影響を受けないので、そのままでは何も表示されません。ちなみに、何も表示されない理由は、「枠線の太さ・種類・色」のうち、「枠線の種類」の初期値が「none(線なし)」で、「枠線の太さ・色」の初期値が実質無効となるからです。「枠線の太さ」の初期値は「medium(標準の太さ)」、「枠線の色」の初期値は「currentColor(現在その要素に適用されているcolor(文字の色)プロパティの値。color(文字の色)プロパティの初期値はUA-defined(ブラウザの定義をを踏襲。UAはUser Agentの略でWebサイトへのアクセスに必要なプログラム、転じてブラウザ))」ですが、「枠線の種類」の初期値の「none(線なし)」によりこれらが打ち消されています。***算出値(Computed value)は「the computed color(算出色)」ですから、background-color プロパティの値には「カラーコード」を用いて任意の色を指定することができます。***《background-color プロパティの値》カラーコード《カラーコード》⓪ transparent … 透明① red … カラーネーム② #ff0000 … 16進数6桁のRGB値③ #f00 … 16進3桁のRGB値④ rgb(255,0,0) … 10進数のRGB値⑤ rgb(100%,0,0) … %表記のRGB値⑥ rgba(255,0,0,0.5) … 10進数のRGB値+アルファ値※「赤色」を例に各カラーコードを記載。アルファ値は透明度。0.0(透明)~1.0(不透明)の実数が指定でき、例示の「0.5」では50%の透明度の赤色で表示される。***《背景関連のプロパティ》⓪ background … 背景関連(ショートハンド)① background-color … 背景色② background-image … 背景画像③ background-repeat … 背景画像の反復方法④ background-attachment … 背景画像の表示方法⑤ background-position … 背景画像の表示位置⑥ background-clip … 背景画像の表示領域⑦ background-origin … 背景画像の基準位置⑧ background-size … 背景画像の表示寸法***関連リンクbackground プロパティ(CSS3)(June 30, 2017)http://ameblo.jp/beans-studio/entry-12288397730.htmlbackground-color プロパティ(CSS3)(July 05, 2017)http://ameblo.jp/beans-studio/entry-12289882860.html

      4
      テーマ:
  • 30Jun
    • background プロパティ(CSS3)

      「background プロパティ」は、「背景関連プロパティ」の値を一括指定するためのショートハンド※1 です。W3C(HTMLやCSSの仕様の標準化を策定している団体)のCSSページ(ひとつめのリンク)に公開されている、backgroundプロパティなどのモジュールの草案(ふたつめのリンク)から、「3.10. Backgrounds Shorthand: the ‘background’ property」の項に掲載されている例文で解説します。↓Cascading Style Sheets home page(W3C)https://www.w3.org/Style/CSS/Overview.en.html↓CSS Backgrounds and Borders Module Level 3(W3C)https://www.w3.org/TR/css3-background/※1 … ショートハンド「本来は一行ずつ書く宣言(プロパティ名: プロパティ値;)を簡略化して、一行の宣言に同系統のプロパティ値をまとめて指定(ショートハンドとしてのプロパティ名: プロパティ値1 プロパティ値2 プロパティ値3 … プロパティ値n;)できるプロパティ」のことです。background(背景関連)プロパティ、font(書体関連)プロパティなどがあります。***body { background-color: red; background-position: 0% 0%; background-size: auto; background-repeat: repeat; background-clip: border-box; background-origin: padding-box; background-attachment: scroll; background-image: none;}上から順に、「背景色(background-color)を赤色(red = カラーネームによるカラーコード)に」「背景画像の表示位置(background-position)を水平位置0%・垂直位置0%の位置=左上(0% 0%)に」「背景画像の表示寸法(background-size)を自動調整(auto)に」「背景画像の反復方法(background-repeat)を繰り返す(repeat)に」「背景画像の表示領域(background-clip)を要素ボックスのコンテンツ+パディング+ボーダー領域(border-box)に」「背景画像の基準位置(background-origin)をパディング領域(padding-box)に」「背景画像の表示方法(background-attachment)をスクロールバーと連動(scroll)に」「背景画像(background-image)を表示しない(none)に」となります。***これを、ショートハンドで記述すると・・・body { background: red;}プロパティの値は、「背景色(background-color)を赤色(red = カラーネームによるカラーコード)に」のみとなります。なぜなら、background-colorプロパティの値を除く、7プロパティの値がそれぞれに初期値※2 だからです。※2 … 初期値(Initial)そのプロパティが最初から持つ値のことです。具体的には、HTMLのみで記述した要素(CSSでのデザイン設定はなし)を表示したときに、ブラウザに映し出される要素の見た目のデザインが、そのプロパティが持つ初期値ということになります。CSSソースコードの記述は、個別指定より一括指定(ショートハンド使用)の方が一目瞭然に簡潔です。***もうひとつの例文を見てみます。p { background-color: gray; background-position: 40% 50%; background-size: 10em 10em; background-repeat: round; background-clip: border-box; background-origin: border-box; background-attachment: fixed; background-image: url(chess.png);}上から順に、「背景色(background-color)を灰色(gray = カラーネームによるカラーコード)に」「背景画像の表示位置(background-position)を水平位置 左から40%・垂直位置 上から50%の位置(40% 50%)に」「背景画像の表示寸法(background-size)を幅10em・高さ10em(10em 10em = emは長さの単位。その要素が持つfont-sizeで大文字Mの横幅分が1em)に」「背景画像の反復方法(background-repeat)を繰り返し+領域にあわせた拡大・縮小を含む自動調整(round)に」「背景画像の表示領域(background-clip)を要素ボックスのコンテンツ+パディング+ボーダー領域(border-box)に」「背景画像の基準位置(background-origin)をボーダー領域(border-box)に」「背景画像の表示方法(background-attachment)を固定(fixed)に」「背景画像(background-image)をchess.pngのアドレス(url(chess.png))に」となります。***これを、ショートハンドで記述すると・・・p { background: url("chess.png") 40% / 10em gray round fixed border-box;}前から順に、「背景画像(background-image)をchess.pngのアドレス(url(chess.png))に」「背景画像の表示位置(background-position)を水平位置・垂直位置 左上から40%(40% = 値が1つの場合は左上からの一括指定)に」「背景画像の表示寸法(background-size)を幅10em(10em = 値が1つの場合は高さはauto)に」「背景色(background-color)を灰色(gray = カラーネームによるカラーコード)に」「背景画像の反復方法(background-repeat)を繰り返し+領域にあわせた拡大・縮小を含む自動調整(round)に」「背景画像の表示方法(background-attachment)を固定(fixed)に」「背景画像の表示領域(background-clip)を要素ボックスのコンテンツ+パディング+ボーダー領域(border-box)に」「背景画像の基準位置(background-origin)をボーダー領域(border-box)に」となります。背景関連の全8プロパティの値を、ひとつのショートハンドで指定するときのポイントは次の通り。① プロパティの値の指定順序は任意。② プロパティの値の間の区切り子は半角スペース。③ 但し、「background-size(背景画像の表示位置)プロパティ」と「background-position(背景画像の表示寸法)」はこの順で。その間の区切り子は「/(スラッシュ)」。例文では、「40% / 10em」と記された、「背景画像の表示位置(background-position)を水平位置・垂直位置 左上から40%(40% = 値が1つの場合は左上からの一括指定)に」「背景画像の表示寸法(background-size)を幅10em(10em = 値が1つの場合は高さはauto)に」の指定部分。④「background-clip(背景画像の表示領域)プロパティ」と「background-origin(背景画像の基準位置)プロパティ」もこの順で。プロパティの値が2つのときは、値1が「background-clip(背景画像の表示領域)プロパティ」、値2が「background-origin(背景画像の基準位置)プロパティ」となる。プロパティの値が1つのときは、その値が共通して「background-clip(背景画像の表示領域)プロパティ」と「background-origin(背景画像の基準位置)プロパティ」の値に適用される。例文では、「border-box」となっているので、この値が共通して適用されるため、「背景画像の表示領域(background-clip)を要素ボックスのコンテンツ+パディング+ボーダー領域(border-box)に」「背景画像の基準位置(background-origin)をボーダー領域(border-box)に」となっている。***これらのことから、一括指定(ショートハンド使用)は、CSSソースコードの記述という面では簡潔で扱いやすいのですが、プロパティの値だけでのスタイルを区別する必要性も伴う面では熟練者向けであることがわかります。***《背景関連プロパティ》⓪ background … 背景関連(ショートハンド)① background-color … 背景色② background-image … 背景画像③ background-repeat … 背景画像の反復方法④ background-attachment … 背景画像の表示方法⑤ background-position … 背景画像の表示位置⑥ background-clip … 背景画像の表示領域⑦ background-origin … 背景画像の基準位置⑧ background-size … 背景画像の表示寸法***関連リンクbackground プロパティ(CSS3)(June 30, 2017)http://ameblo.jp/beans-studio/entry-12288397730.htmlbackground-color プロパティ(CSS3)(July 05, 2017)http://ameblo.jp/beans-studio/entry-12289882860.html

      テーマ:
  • 28Jun
    • アメブロ・ヘッダカスタム(新タイプ対応)

      久々のアメブロカスタム。これを機に、プロフ画像も新調!ブログ管理→デザインの変更→カスタム可能デザインから、「CSS編集用デザイン」「2カラム・メニュー右」をベースにカスタム。制作した画像は、こちら。この画像の制作のポイントは、アメブロ自体のレイアウト幅にあわせて、主要なデザイン領域を横幅1024pxとしたところ。画像自体の横幅は、1920pxで制作しました。現在、シェアトップのモニタ解像度が1920×1080px(HD1080)だからです。余談ですが、1024×768px(XGA)は少数派のシェアトップ。つまり、デザイン全体は横幅1920pxを意識しつつ、読ませるコンテンツは1024~1280pxあたりで調整するのがベターです。***スタイルシートのカスタムは、ブログ管理→デザインの変更→CSSの編集 から。ヘッダ部への画像表示は、「skin-bgHeaderクラス(ヘッダー背景)」の宣言ブロックに、「background: no-repeat scroll center top;」「background-image: url(画像のアドレス);」「height: 制作した画像の高さ;」の各宣言を加筆して設定しました。画像のアドレスは、同ページに画像をアップロード後に示される、「この画像のパス」をコピペで入力します。併せて、ヘッダ部にデフォルトで表示される「タイトル」と「説明」とを非表示に。「skin-blogMainTitleクラス(ブログタイトル)」「skin-blogSubTitleクラス(ブログ説明文)」の各宣言ブロックに、「display: none;」の宣言を加筆すればOKです。***backgroundプロパティは、背景関連のbackground系プロパティ(background-color、background-image、background-repeat、background-attachment 、background-position、background-clip、background-origin、background-sizeの計8プロパティ(2017年6月現在))を一括指定できるショートハンドで、詳しくはまた。ちなみに、ショートハンドとは、「本来は一行ずつ書く宣言(プロパティ名: プロパティ値;)を簡略化して、一行の宣言に同系統のプロパティ値をまとめて指定(ショートハンドとしてのプロパティ名: プロパティ値1 プロパティ値2 プロパティ値3 … プロパティ値n;)できるプロパティ」のことです。background(背景関連)プロパティ、font(書体関連)プロパティなどがあります。今回のカスタマイズで設定した、「background: no-repeat scroll center top;」では、次の3プロパティを扱いました。前から順に、「背景画像の反復方法(background-repeat)を繰り返さない(no-repeat)に」「背景画像の表示方法(background-attachment)を背景画像と連動(scroll)に」「背景画像の表示位置(background-position)を水平位置 左から50%・垂直位置 上から0%の位置(center top)に」です。***関連リンクbackground プロパティ(CSS3)(June 30, 2017)http://ameblo.jp/beans-studio/entry-12288397730.htmlbackground-color プロパティ(CSS3)(July 05, 2017)http://ameblo.jp/beans-studio/entry-12289882860.html

      テーマ: