FC2ブログ

Cafe*de*Peachy

photo is my lifework. I will love you always.

-- --

スポンサーサイト

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

Posted by モモ | --:-- | Comment [0] | TrackBack [0] | スポンサー広告

«prev | home | next»

13 2006

タグとソース♪CSSの入り口講座

ぇえーっと、1回書いたのに全消ししました
くそぅコレで2度目だっ

くやしいのでがんばって書いてたら
えらい長い導入になってしまいやした

お時間のある時にでも、ごゆるりと
モモ的【ソースとタグについて】の考察デス

--------ここからよん--------

WEBブラウザ(今ページを見ているヤツ=InternetExplorerなど)は機械です。
なので普通の言葉が通じません。
わんこに犬語猫にゃんに猫語、があるのかどうかは不明だけど
それと同じように、機械にわかる言葉で話しかけてあげる必要があります。

その言葉が【タグ】と言い、差し詰めタグで綴られたメッセージが
【HTMLソース】という事になりましょうか

ブラウザの一番上のメニューから【表示→ソース】とクリックすると
今見ているページのソースが見られます。
エライ量の英文な上、意味不明な半角カタカナとかが出てると思います。
Blogのソースはちっとデカスギなので
こんなん作ってみました

何にもないページ
クリックすると、何にもないページって書かれた白いページが出てきます。
これのソースを見てみましょ何にもないページなのでキレイに短い文章デス。

何にもないページのソース
開いてみてチョ
点線の枠で囲ってる部分が、何にもないページのソースです。

いくつかの規則性があるのですがー
先ずさっき書いた【タグ】というのが、カッコ→< >で挟まれている言葉のコト
【headタグ】【pタグ】とかって呼ばれています。

さてこれをふまえ~

HTMLの基本は
<head><body>で区切られて表示されている部分。
意味は人間と同じ、"頭"と"体"デス

"頭"の部分には、このページのタイトルだったり<title>っていう
ページ上に載らないモノがかかれます。
そして"体"の部分に、実際に表示されているモノが書かれるのですね。

で、見ての通り
<head>~</head>って
最初と最後が同じ< >で挟まれるような格好になります。
このカッコ、"ここから"~"/ここまで"という意味。

つまり、< >の間にはさまれてる言葉

例えば「こっちは段落=Pタグで囲ってます」って部分
"p"って英文字がカッコでくくられた中に書かれています。

つまり<p>から始まって</p>で区切られた中に上の文章があるということは
「この"p"っていうタグの中に、上の文章を表示してください」っていう意味になります。


さて、他のソースを解読しますか

最初の!DOCTYPE~はこのページのHTMLのバージョンはいくつですよん♪ていう、いわば選手宣誓みたいなモンなので無視です。
次のlang="ja"っていうのは
「このページは日本語ですよん」ていう意味なので、これも無視でオケです。

ちなみに<br>は【改行する】っていう意味デス。

んで、<title>の下のピンクで書かれたlink~
stylesheetって文字が見えます。
あい、これがスタイルシートです。

「このページにはsample.cssというスタイルシートがリンクされています」という意味デス。

ページっていうのは、最初に書いたとおり機械用の言葉を理解しています。
あの英文ソースを読み込んで、ページを表示するわけです。
んで<p></p>
"ここから""ここまで"を読んで、初めてカッコに囲まれた中身を表示してくれるので
英文が長ければ長いほど、ページは重たく表示されなくなっていきます。

なので別の紙っぺらとして用意して外部リンク=このページにこのスタイルシートを反映させてねってさせる事で
実際のページをスッキリさせています。

んで、もっかい最初の何にもないページを見ると
上下の文章で文字の大きさが違います。
ソースを見ると
上の文章はbodyにそのまま書かれているのに対し
下の文章がpタグで囲まれています。

スタイルシートで
pタグに書かれた文字の大きさを「12ピクセルに表示してねん」っていう指定を入れているからです。
(指定が入っていないと、15~6ピクセルくらいの大きさかな?)

こんな感じで、文字の大きさ、文字の種類・・・いろんな部分を指定していくと
今見てるBlogのようなページレイアウトも出来上がる、と
そんなお話デシタ。
ちなみに、ソース紹介のページの点線枠もスタイルシートですよん

てゆか・・・ぅわぁっ、長っ嫌っ(笑
タグとソースひとつ説明するのにどんだけかかっているのやら
読み終わる前に飽きるな、これは・・・

スポンサーサイト

Posted by モモ | 04:45 | Comment [4] | TrackBack [0] | etc/Study

«prev | home | next»

大変参考になりましたが、私たち素人にはむずかしいかも。
私もブログの文字の大きさを変更したくて「ブログカスタマイズ」を購入し、文字サイズの変更だけは理解しましたが、ほかはチンプンカンプンです。
今は、写真に文字を回り込みさせる方法が分からず悪戦苦闘中です。

Commented by 北の旅人 [URL] | 05/13 11:15| edit

スミマセンi-201
導入が長すぎて、まだスタイルについては説明に至っておりませんのでi-202
ソースが何で、タグってナンなんだってところから入っておかないと
いきなり専門用語飛び出させても、あとあと混乱を招くかなぁーって思ってのことなので。
ホントに、個人的な考察として書いてますから
他にもっとわかりやすくて理解しやすいページもあると思いますよi-229

ちなみに画像のテキストを回り込みさせたければ
その画像に"float"というスタイルを掛けてあげれば回り込みます。
"float: left"で画像が左側、文章は右に
"float: right"でその逆です。

Commented by モモ [URL] | 05/13 12:48| edit

頑張って続いてるぢゃなーい!
大丈夫!ちゃんと最後まで読んだわよん
フレームよりテーブルだったのが、テーブルよりcssって感ぢになって来たよね
アタチもモモちゃんの講座でシッカリ覚えるぞー!おー!!

Commented by 雛子 [URL] | 05/13 23:30| edit

雛しゃん≧▽≦)
地味に地味ぃ~に書いてるよ~
自分には身体に馴染んじゃってる情報だから、上手く説明するのがムズカシイね
やっぱ、最終的にはCSSレイアウトサイト構築まで行かなきゃダメかしら≧m≦)ぷっ
その前に自分が構築出来るようにならねばi-229

Commented by モモ [URL] | 05/14 00:27| edit

TrackBackURL: http://peachy37.blog27.fc2.com/tb.php/31-550d252b

Comment:

© FC2 BLOG / ooq:blog

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