忍者ブログ
特質系肉体派システムエンジニア燃えPaPaの運営する、1からサイト作成をするとなると必須なスタイルシートの各プロパティに関してのリファレンスブログです。スタイルシートの必要なプロパティの、詳しい使い方を辞書的に利用可能なようにつくります。
[1]  [2]  [3]  [4]  [5]  [6
こんばんは、
燃えPaPaです。

今回も、背景操作の代表的プロパティ、
background
の利用法で、サイトをきれいに見せる最新のすご技で、
背景色のグラデーションの指定方法の解説です。

要素の中で、

background: linear-gradient(#ffffff, #000000);

という指定を入れます。
linear-gradient()という要素指定の中で、
前の色番号が上部の色、後ろの色番号が下部の色を指し、
要素内で、上下できれいなグラデーション表示になります。

CSS2の時代などは、背景色のグラデーションは画像で一生懸命作ってから
背景画像に指定して作ったりしたものですが、
今やこんなに簡単に美しく実現できます。

画像での指定と違い、色味が違うと思えば色番号を変えるだけで、簡単に変更できるのも強みです。

ブロック要素でも、インライン要素でも、
画面に表示される要素すべてで指定できます。

美しいサイトを作るには必須の技術ですね。


燃えPaPa
PR
こんばんは、
燃えPaPaです。

今回も、背景操作の代表的プロパティ、
background
の利用法で、背景画像の指定方法の解説です。

要素の中で、

background-image: url("img/bk.jpg")

という指定を入れます。
前半、background-imageが背景画像を決めるプロパティで、
後半のurl("")の中で、背景画像を指定します。
ファイルを参照できるURLを指定する必要があり、
URLは絶対パスでも相対パスでも大丈夫です。
ただし、注意点として画像ファイルを相対パスで指定する場合は、
スタイルシートファイルからの相対パスになります。
※外部スタイルシートにしている場合

ブロック要素でも、インライン要素でも、
画面に表示される要素すべてで指定できます。

背景には色をつける場合と同じくらい画像を表示させることは多いため、
非常に多用されるプロパティです。


燃えPaPa
こんばんは、
燃えPaPaです。

今回は、背景操作の代表的プロパティ、
background
の内で、色を決める場合の解説です。
指定方法は、
要素の中で、

background-color: #ffffff;

という指定を入れます。
前半、background-colorが背景色を決めるプロパティで、
後半の#ffffffで色を指定します。
※この場合は、色番号で、白です

ブロック要素でも、インライン要素でも、
画面に表示される要素すべてで指定できます。

例えば、
h1{
    background-color: #000000;
}
などとしたらh1の背景が黒になります。

画面内で色を変えることは多いため、
非常に多用されるプロパティです。


燃えPaPa
こんばんは、
燃えPaPaです。

ほとんど当ブログの日記カテゴリと変わらないところもありますが、

私自身の近況でなく、
スタイルシートに関する昨今の世間の流れ等の報告は、
このカテゴリでやろうと思いまして、
カテゴリ作りました。

ちょいと世間で新しい情報出ましたら、
ここで方向しようかと思います。


燃えPaPa
HOME  → NEXT
プロフィール
HN:
燃えPaPa
性別:
男性
スポンサーリンク
最新記事
スポンサーリンク
アーカイブ
リンク集
世界中が熱狂の渦に!!ベビーメタル(BABY METAL)
google隠しコマンド
かわいいキツネのモフモフ天国☆蔵王キツネ村
ペンギンのいるBAR 池袋
中野富士見町駅周辺のおいしいラーメン屋さん
横浜家系ラーメンとは
渋谷のおいしいラーメン
稲荷町駅周辺の人気のおいしいラーメン
駒込にあるおいしいラーメン屋情報
上野広小路駅周辺のおいしいラーメン屋さん
巣鴨駅周辺にあるおいしいカレー
各種ブラウザ比較
Windows7高速化
仕事で役立つ資格
近年流行の台湾料理屋さん
彼岸島おもしろ画像特集
【テニスの王子様】おもしろ画像まとめ
デスノートおもしろコラ画像大集合
ショートカット美少女天使本田翼
世界中が熱狂の渦に!!ベビーメタル(BABY METAL)
黒髪童顔の超絶美少女アイドル長澤茉里奈
かわい過ぎる女子アスリート木村沙織
岡山の奇跡☆桜井日奈子がかわい過ぎ
滝口ひかりちゃんがかわい過ぎる!!
バキ(刃牙)の笑える画像大集合
【テラフォーマーズ】最強テラフォーマー
【テラフォーマーズ】マーズランキング
デート向けに個室のある新宿の居酒屋
渋谷の回転寿司情報 JKの作業を観察☆アキバ観光
全国猫島情報
純愛ババア学園がすごい
部活少女バトル
家電少女とは
ドラマティックアクションRPG消滅都市
βテスト公開中のしんけん!!
しんけん!!解説
顎クイの魅力
口内炎対策
Copyright (C) 2017 スタイルシートリファレンス All Rights Reserved.

Photo by (c)Tomo.Yun   TemplateDesign by kaie
忍者ブログ [PR]