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

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

 スポンサーサイト

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

 インターネッツ講座(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ブログランキング ありがとうございます。

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

スポンサーサイト

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

Comment

ねーねーぽこたん。

なんで2番目のCSSから、赤色のちんこまで「青いちんこ」なの?


ま、それはいいんだけどさ。

ちょっとまじめな話
CSSっていつごろから頻繁に使われるようになった?
オイラCSS勉強しなかったんだけどさ、いつのまにか主流になってたよ。
ここ5・6年ぐらい?

あ、自分で調べろよって? あ、そ。

出すのを我慢してると『青いち○こ』になるってホントですか?

★ ばんちょっちょ

ほんまや!(青いち○この件)
つか、伏字ー!伏字ーー!!(あんまり伏字の意味なし)
早速直しました(笑)

CSS、できたのは10年以上前ですけど、普及してきたのはほんとにここ5~6年だねー。CSSを使うとかなりデザインの幅が広がるYO!

★ イタチさん

僕のはこげ茶色で、青くなったことはないですけど。
(↑我慢が足りない)
(↑参考にならない)

おおお~ためになるなあ。
でもって馬鹿じゃなくてお(・∀・)め(・∀・)で(・∀・)と(・∀・)う!。
クロとらも風邪を引かない子どもで、4歳でやっと風邪を引いたら
お母さんとお姉ちゃんが「馬鹿じゃなかった!」って
手を取り合って泣いたそうです。そんなんと結婚する奴があるか!←自分

この講座マジで期待してます。
うちのブログでも真っ白な心の若いママたちに宣伝しようと思ってる。
んだけど・・・教材は毎回チ○コですか?そうでしょうね。

10年前、HTMLのコードをチマチマと書いていたのを思い出しました。
懐かしいなぁ。
今じゃあ、ブログですから楽ですよね。
ブログ以外でも専用ソフト使っちゃいますし。
でもソースをいじれると色々と便利(パクったり、改造したり)ですよね。
是非この機会に復習しよぅっと。


★ はなっち

おおーやはりクロとらさんも(笑
はなっちは意外に病弱だよねー。なんで?(←失言)

はなっちが楽しみにしてくれてるならがんばるよっ!
わかりやすく、楽しめるように書けたらいいなと思ってます。
教材はね、お○ぱいもあるYO!(にこやか)


★ 寿寿純さん

僕は今でも手打ち(笑
プログラムと一緒にやるとどうしてもねー。
自分ではあんまり複雑なの書かないし。

ぶっちゃけ、HTMLは素人に毛が生えた程度ですけど、一緒に勉強しましょう(笑

Comment Form

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

Trackback


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

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