【お知らせ】 (通常記事はこの下です。)
ぷちろ~ぐ始めました。
ちっちゃいブログサービスです。
ぷちろ~ぐ

【カコの企画など】
帰ってきた24Hブログ - Saint Night はフィーバーしナイト! -
12月22日~23日 ⇒ 24Hブログ会場
24Hブログ - 愛はブログを救う? -
2007年9月1日~2日 ⇒ 最後の記事 ⇒ 総合案内所
心理テスト作りました。
ブロガーコラボですごい心理テストを作りました。
プライド判定心理テスト - あなたはぬらりひょん? それとも ざしきわらし?
【ペースト版ぷちろ~ぐ】
人気ブログランキングFC2ブログランキング
※ ご褒美をあげると悦びます。

 スポンサーサイト

カテゴリ: スポンサー広告
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 四十八手の一(色をつけてみよう)

カテゴリ: インターネッツ講座(HTML・CSS編)
今日は、インターネッツ講座(HTML・CSS編その1です)

まず、色の話からいってみたいと思います。

色モノの話ではありません。色の話です。

四十八手でいうと「松葉崩し」くらいメジャーな雰囲気です。


まずは簡単に色指定をしてみましょう。

<div style="color:red">赤いちんこ</div>


※ こうなります。
赤いちんこ


「color: 」に続いて色の名前を記述してます。
アルファベットで指定できる色はこんなのがあります。

Black (#000000)
Gray (#808080)
Silver (#C0C0C0)
White (#FFFFFF)
Red (#FF0000)
Yellow (#FFFF00)
Lime (#00FF00)
Aqua (#00FFFF)
Blue (#0000FF)
Fuchsia (#FF00FF)
Maroon (#800000)
Olive (#808000)
Green (#008000)
Teal (#008080)
Navy (#000080)
Purple (#800080)

それから、もっと微妙な色合いを出したいときは、こんなやり方で指定します。

<div style="color:#df8888">微妙に赤いちんこ</div>


※ こうなります。
微妙に赤いちんこ


この#うにゃうにゃっていうのは、RGB値っていって、光の三原色である R(赤) G(グリーン) B(青) を 16進数であらわしたりするんです。(上の色のRGB値はカッコの中の数値です。)

難しい話はおいておいて、そのRGB値は、フリーソフトを使っても簡単に取ることができます。

簡単に使えるツールです。
 ⇒ すぽいと君

多機能なツールです。(僕はこっちを使ってます。)
 ⇒ 色取鳥i

例えば、上のツールだったら

ツール上で右クリックして色を選ぶか、



画面上にマウスを当てるとその色のRGB値を調べることもできます。



※ 2段目の#うにゃうにゃがRGB値です。
※ スペースで、今調べてる色を固定したり、またマウスで調べたりするモードを切り替えられます。


ちなみに、この div というタグ自身には意味がないので、それだけ指定しても無色透明で中の文字は変化しません。同じように意味がないタグに span っていうのがあるんですけど、違いは、div で書くと必ず次の文字は改行されて見えます。(厳密には改行とは違うんですけど)

span だと続けて書くことができます。
文章の途中の文字色を変えるときは span の方が使いやすいですね。

<span style="color:red">赤いちんこ</span><span style="color:blue">青いちんこ</span&t;


※ こうなります。
赤いちんこ青いちんこ


ブログの場合は、ブログの標準機能で簡単に文字色は変えられますよね。
なので、背景色をつけてみました。

<div style="color:white; background-color: red">赤いちんこ</div>
<div style="color:white; background-color: blue ">青いちんこ</div>


※ こうなります。
赤いちんこ
青いちんこ


width(幅)や padding (内側の余白)、margin(外側の余白)なんてのも指定できます。
※ この項目は span だときちんと指定できない場合があります。

<div style="color:white; background-color: red; width: 200px; padding: 5px; margin: 10px">赤いちんこ</div>
<div style="color:white; background-color: blue; width: 200px; padding: 5px; margin: 10px">青いちんこ</div>


※ こうなります。
赤いちんこ
青いちんこ


今日はおしまい!

おさらい
■ 今日のHTML
 <○○○>~</○○○>
 タグはこのようにくくります。

■ 今日のstylesheet
 <○○○ style="△△△: △△△">~</○○○>
 タグの中にスタイルシートを直接指定します。

 <○○○ style="△△△: △△△; □□□: □□□">~</○○○>
 ";"で区切るといくつもスタイルシートを組み合わせて指定できます。

【文字色の指定】
color :文字色

【背景色の指定】
background-color :文字色

【幅の指定】
width: ○pxとか

【内側の余白】
padding: ○px(全体の余白を一括)

※ こんな指定もできます
padding: ○px(上の余白) ○px(右の余白) ○px(下の余白) ○px(左の余白)
padding: ○px(上下の余白) ○px(左右の余白)


【外側の余白】
margin: ○px(全体の余白を一括)

※ こんな指定もできます
margin: ○px(上の余白) ○px(右の余白) ○px(下の余白) ○px(左の余白)
margin: ○px(上下の余白) ○px(左右の余白)

 ◇ ◇ ◇ ◇ ◇

人気ブログランキング FC2ブログランキング 

スポンサーサイト

テーマ : 今日のブログ - ジャンル : ブログ

Comment

もう、伏字つかうのやめたんだ・・・。ぷぷぷ


<こそこそ>
っていうか赤いちんこって元気そうだけど
青いちんこってよわそうね。
</こそこそ>


青いちんこも赤ちんこも食いたくないな~。

あ、食べ物じゃないか。

<!--乳ーー>まっ平ら<!--/乳ーー>

ふん・・・( ̄ヘ ̄)

★ ばんちょっちょ

あらん!!!うっかり!!!
伏字にしとかなきゃまずいよねぇ。しまった(←今さら)

<こそこそ>
一番強いのは黒かしらね
</こそこそ>

★ ひなたさん

食べ物じゃないような、食べ物のような。
舐め物?


★ ぷふさん

ど、どんまい!!

( ̄ー ̄)クスッ





Comment Form

管理者にだけ表示を許可する

Trackback


この記事にトラックバックする(FC2ブログユーザー)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。