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

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

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

スポンサーサイト



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