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

【カコの企画など】
帰ってきた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ブログランキング 

スポンサーサイト

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

 インターネッツ講座(HTML・CSS編) 序章・後編

カテゴリ: インターネッツ講座(HTML・CSS編)
ン年ぶりに風邪をひきました。一日中寝てました。今まであんまり風邪をひかないんで馬鹿なんじゃないかと思いましたが、風邪をひいたので馬鹿じゃなかったんだと実感しました。

 ◇ ◇ ◇ ◇ ◇

さて、今日は インターネッツ講座(HTML・CSS編)序章(後編)です。

前回は、サーバーがHTMLファイルを送ってくれることまでお話ししました。

実は HTML ファイルってのはそんなに難しいものじゃなくって、ただのテキストファイルです。だからメモ帳で見ることができるし、書くことができます。

試しに、このブログ上で右クリックすると「ソースを表示」っていうのが出てきますので、それをクリックするとソースが表示されます。これがHTMLの中身です。いっぱい英語っぽいのがでてきて「うぇぇぇ」って思うかもしれませんが、よく見るとわかるように基本は中身の文章を "<・・・>~</・・>" こんな感じでタグでくくってあるだけです。

で、なんでそのタグでくくられたテキストファイルがホームページとして見れるのかっていうと、ブラウザが、タグの種類を判別して文字に装飾を施していってくれるから、ホームページとして見ることができるのです。

超シンプルに話をまとめると、テキストで書いたHTMLファイルをサーバーに置いておいて、それをブラウザを通して見ると、ホームページとして見ることができるっていう仕組みで成り立ってます。

例:

普通のち○こ
<strong>強いち○こ</strong>


これを、メモ帳で書いて、保存して、できたファイルの拡張子(.txt)を .html に変えてブラウザで見てみてください。強いち○こだけ太い文字になるのが確認できるかと思います。

 ◇ ◇ ◇ ◇ ◇

それから、CSSですけれども、Cascading Style Sheet っていうんですが、難しい話は置いておいて、わかりやすく言うと、HTML に装飾をほどこすものをCSSといいます。

1.
<font color="blue">青いち○こ</font>
<font color="red">赤いち○こ</font>


(実際の表示)
青いち○こ
赤いち○こ

2.
<style>
.chinko1 {
color:blue;
}
.chinko2 {
color:red;
}
</style>
<div class="chinko1">青いち○こ</div>
<div class="chinko2">赤いち○こ</div>


(実際の表示)
青いち○こ
赤いち○こ



3.
<div style="color: blue">青いち○こ</div>
<div style="color: red">赤いち○こ</div>

(実際の表示)
青いち○こ
赤いち○こ


おんなじに見えますが、1番が昔風な書き方で HTML 内で <font> というデザイン変更のタグを使って直接指定してました。でも最近は、HTML 内 では例えば <b>(文字を太くする)、<i>(斜め文字にする)などのデザイン変更のためのタグを使用しないで、2番のように、本文中ではデザインの指定はしないで(<div>は段落を表すタグ)、他の場所(ここでは<style>~</style>内 ※ 別のファイルを使用する方法もあります。)でデザインを指定するやり方が主流です。このようなやり方を取ると、後で<style>~</style>内の指定を変えるだけで一度にデザインを変えることができるようになるんです。どうしてものときだけ 1番や 3番のように本文中で直接指定します。3番はCSSを本文中で使う書き方です。)

この講座では2番と3番のやり方を中心にお話ししていくつもりです。


(序章終わり・次回からいろいろなテクニックを紹介してく予定です。)

※ 本講座は、初心者の方でもわかりやすいように書いていきますので、細かいこというともうちょっと説明加えたいんだよなーみたいな部分を省略して書いてます。なので、詳しい方はその辺適当に聞き流して下さいますようお願いします。

【今日の心理テスト情報】

- ぬらりひょん? それとも ざしきわらし? - あなたのプライドを妖怪で判定
プライド判定心理テスト はこちら!




 ◇ ◇ ◇ ◇ ◇

人気ブログランキング いつもいつも
FC2ブログランキング ありがとうございます。

いやーん。今日はまじめー。熱のせいだ。

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

 インターネッツ講座(HTML・CSS編) 序章・前編

カテゴリ: インターネッツ講座(HTML・CSS編)
はい。世間はどうやら3連休らしいですね。三度(みたび)というか、ウチの子なんて都民の日(10月1日)があったから4連続3連休のようですけど。(←他人事?!)

 ◇ ◇ ◇ ◇ ◇

さて、世の中 World Wid Web です。 誰でも簡単にホームページが作れる世の中とか、言われたり言われなかったりする今日この頃ですが、実際、本当に誰でもホームページを作れるかっていと、まだ、ちょっと早いような気がします。

最近、ほんとにここ最近、ブログっていうツールが注目され始めて、ようやく一般の方々が背伸びして手を届くような段階になってきたころだと思います。そうは言っても、実際に、例えばそのブログを書こうと思ったら、まず、書く内容を見つけなければいけません。書く話の方はブログろんの方に譲るとして、で、いざ書き始めると、今度はブログの見栄えを良くしたくなります。もちろん最近のブログサービスはどんどん進化してきてて、あんまり知識がなくてもある程度できるようになってきてるんですけど、でも、まだ、人より少しデザインに凝ってみようとか、そういうやんちゃなことを考え出したときに突き当たる壁が HTML や CSS です。なので、今回は僕的インターネッツ講座として、ブログを始めたばかりの方から少し慣れてきた方ぐらいの方々を対象に HTML や CSS について、僕の知識をひけらかしてやろうと考えました。

始めます。

どーん。


ぽこ様的インターネッツ講座
(HTML・CSS編)



さてさて、今回は初回ということで。

ホームページが見ることができる仕組みについて、せっかくなので一応そんな話も軽くしておこうかと思います。今日はエロなしです。ちなみに本編は TIPS みたいな感じで、ブログで使えるテクニックを中心にやってこうと思ってます。例によってペースは決めてませんけど、普通の日記記事とかに織り交ぜてやってこうと思ってます。

はい、では、ホームページが見ることができる仕組みですけれども。

まず、世の中にはWEBサーバーというものがありまして、ホームページはその中に入ってます。
WEBサーバーって何かっていうと、ホームページを見せるために動くサーバーソフトウェアのことを指すこともありますし、そのソフトウェアが入ってるコンピュータそのものを指すこともあります。ちょっと扱いが難しいので、ここでは説明は省略します。そんな奴が世間にいると思って下さい。

で、みんながホームページを見るときは、ブラウザからインターネットを経由してそのサーバーにつないで、ホームページを見せてくれって頼むと、そこに置いてあるホームページが見らるような仕組みになってます。そのときにどのサーバーを呼び出すか決めなきゃいけないんですけど、それを示すのが URL です。 例えば、ブロろ~ぐであれば、ブロろ~ぐが入ってるサーバーには http://blologue.net/ っていう URL が割り当てられているので、それをブラウザに打ち込めば、そのブラウザに対して、ブロろ~ぐが入ってるサーバーは用意されたブロろ~ぐのファイルを送ってくれるのです。 (図1)


インターネッツの仕組み

(図1)待ちに待ったページが送られてくる瞬間の図

そして 、そのようにしてサーバーが送ってくれるファイル。
それが一般的に HTML ファイル と言われるものなんです。

(次回に続く)

※ 本講座は、初心者の方でもわかりやすいように書いていきますので、細かいこというともうちょっと説明加えたいんだよなーみたいな部分を省略して書いてます。なので、詳しい方はその辺適当に聞き流して下さいますようお願いします。

 ◇ ◇ ◇ ◇ ◇

【今日の心理テスト情報】

- ぬらりひょん? それとも ざしきわらし? - あなたのプライドを妖怪で判定
プライド判定心理テスト はこちら!



 ◇ ◇ ◇ ◇ ◇

人気ブログランキング いつもいつも
FC2ブログランキング ありがとうございます。

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

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