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

先日よりスタイルシートの解説を行っておりますが、
当ブログでは、
主に実践編での、
サイトに使う用のスタイルシートの書き方や、
特徴的なスタイルシートのサンプル等を紹介していますが、

もし英語力が強くて、
最新のスタイルシートの策定ルールが気になった場合

本家のW3C(WEB上のコード規格の国際的な統一を図る組織)の策定したルール付けが

http://www.w3.org/Style/CSS/

に載っております。

興味持った方は、ぜひご一読を

英語苦手な人は・・・
すいません。

ボチボチこのブログにて解き明かしてゆきますので。


燃えPaPa
PR
引き続きスタイルシート定義ルールについて解説します。

前回記事で、スタイルシートを
head内にまとめて記載、もしくは別ファイルで定義したい場合、
h1 { color: #ff0000; }
のように、書き方を説明しましたが、
その内容をファイル内に組み込む場合、


・head内指定の方法

<style type="text/css">
<!--
body {
font-size:14px;
color:#000000;}
-->
</style>

のように、<head> から </head> の間にスタイルを書いていくことになります。
この場合、記載するhtmlファイルのheadが量に応じて大きくなってしまうという欠点もあります。

その場合、下記方法がオススメです。


・別ファイル記載の方法

style.css
のように、css拡張子のファイルを作成し、
その中身に直接スタイル定義
body {
font-size:14px;
color:#000000;
}
などを書きます(ファイルの文頭文末に区切り文字等は必要なし)。

そして、そのファイルを保存し、
headの中に

<link href="style.css" rel="stylesheet" type="text/css">

として記載することで、そのスタイルが有効になります。
スタイルシートはWEB上の表現の制御として、
主に3箇所に記載することで評価され、効果があります。

・htmlタグに直接記載
・head内に記載
このふたつは効果を出したいページそのものの中に記載するものになります。

・外部ファイル(CSSファイル)に記載
この場合、別ファイルを作り、反映させたいページ内で、該当のスタイルを記載したファイルを読み込ませることとなります。

なお、スタイル表記の基本は

htmlタグ内に直接記載する場合は、
< h1 style="color: #ff0000;">
のように、タグの中に、style="" の表記で定義を記載し、

head内にまとめて記載、もしくは別ファイルで定義したい場合、
h1 { color: #ff0000; }
のように、
スタイルを指定したいタグ名を書き、その後に{}でスタイルの定義を書く
ということになります。
スタイルシートだけに問わず、

WEBで作業をしていると、色指定をすることが多々あります。

color: #ffffff;

などがそれにあたります。

この場合、color: プロパティのように、文字色指定の場合、背景色指定の場合、
場面は多々ありますが、
色の指定ルールは共通なので、今回ご説明します。


PC上での色は、

光の三原色、RGB、すなわち、レッド(赤)、グリーン(緑)、ブルー(青)の
3色の光の重ね合わせで全色を表現しています。

一昔前までは、
色数も16色や256色、という少ない種類しか表現できませんでしたが、
今は、High Color(16ビット)やTrue Color(24ビット)
といって、

65,536色
16,777,216色

までの色を表現できます。

この場合、スタイルシートやHTML等で色指定する場合、
通常、24ビットまでの表現域を前提として、
RGB各色256段階の指定により、色を表現します。

具体的には、
各値を0~255まで使い、それを16進法で、表現、00~ffとして、
#ffffff (先頭2文字赤、次2文字緑、最後2文字青)
として指定。

また、単純に、各値を16段階で表現して、
#fff (それぞれ赤、緑、青に対応)
として、指定することもできます。

この指定方法と、
色の割合の変化による、実際の色合いがわかれば、
サイトデザイン等で、色にひと工夫可能になります。

なお、
このようなRGBの数値では色のイメージがわかない方は

http://www.colordic.org/

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

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