CSS講座 第1回:ブログのHTMLを見る

「CSS講座 第1回:ブログのHTMLを見る」の有益情報をお届け!

アフィリエイト1年生のための パソコン・アフィリエイト講座

自由自在にパソコンを使えると、アフィリエイトが楽になります^^

2007年08月03日

CSS講座 第1回:ブログのHTMLを見る

大変お待たせいたしました。
今回からいよいよ、
アフィリエイト1年生のためのCSS講座 を始めますね^^


さて、第1回目は
ブログのHTMLをじっくり見ることから始まります。

CSS講座なのに、HTML

以前の記事 →CSSって何? にも書きましたが
HTMLで構造を書いて、CSSで修飾」をしていますので、

まずはブログの構造を理解して
さらにどの部分にどういう名前を付けられているのかを解析
しないと
CSSを、自分の思うようにはいじれないのですよ〜

長い道のりになりますが、興味のある方は是非お付き合いくださいませ^^


CSS講座 第1回:ブログのHTMLを見る

このブログは、縦に3つのパーツに分かれている3カラムのデザインです。

例えば、上のほうにはブログのタイトルがあって
左右に、色々なコンテンツを盛り込める場所があって
中央にブログ記事を書いていく場所がありますよね^^

先程も書きましたが…まずは
ブログの構造を理解して
さらにどのパーツにどういう名前を付けられているのかを解析する
必要があります。


ブログの各パーツに付けられている名前がわからないと
CSSの、どの部分を修正すればいいのかが
分からないですものね^^;


では、早速どこにどんな名前が付けられているのか、見てみましょう。

seesaaブログでは「デザイン」ー「HTML」で、
今適用されているHTMLを表示することが出来ます。

表示されたHTMLの全てを選択してコピーし、エディタなどに貼り付けてから
プリントして、紙の上でご覧になると分かりやすいですよ^^


sumireのお薦めの無料エディタは「TeraPad」です。
窓の杜からダウンロードできますよ〜
初心者さんにも使いやすいと思いますので、ぜひどうぞ^^


さて、印刷できたら、HTMLをじ〜っくり眺めてくださいね。


最初の方に <html …> という記述を見つけられましたか?
そして、最後の方に </html> と書いてありますか?^^

HTMLでは、タグを一対にして書き込むという決まりがあります。

例えば <div …> と書きはじめれば、
最後に </div> で閉じなければいけないのです。


この後、印刷したHTMLに線を引いていっていただきたいので、
赤ペンやマーカーをご用意ください^^

よろしいですか?^^
さあ、では、目を皿のようにして
「<div id="・・・">」や
「<div class="・・・">」という文字を見つけたら
色を付けていってください



この「<div id="・・・">」や
「<div class="・・・">」という部分が、ブログの各パーツの
名前になるのです

↑ここ、大事ですよ〜!


出来れば、印刷してマーカーを引いてみて下さいね!
手を動かすと、より理解できると思いますので^^


CSS講座 第2回:ブログの構造 に、続きます^^


↓あなたのお役に立てましたか?
 応援クリックおねがいします^^
banner_02.gif


★・・・★・・・★・・・★・・・★・・・★・・・★・・・★・・・★・・・★・・・★・・・★・・・★

HTMLCSSに不安があるかた、
難しそうで…と敬遠されている方は、残念ながら多いですね。

私の学校で、もしもHTML+CSSの基礎講座を学ぶと
2時間づつ、15日くらい通っていただいて約10万円になります。


さらに、大事な大事なSEO講座(検索エンジンの最適化)を学ぶと…
ここにはちょっと金額がかけません^^;

…でも、毎回大盛況です^^
大事さを解っていらっしゃる方が多いからでしょうね^^

HTMLもCSSもSEOも、テクニックではなく
基本の概念が大事なのですよ。


ブログでは、ポイントを簡単にしか説明できませんけれど…
どうぞここから学び取っていってくださいね^^





この記事へのコメント
こんにてゃ
HTMLいじりは本当に地獄です
応援
Posted by セールス分析のささ at 2007年08月03日 09:29
Sumireサン、おはようございますっ!
えあです★
いつも応援ありがとうございます(*^▽^*)


実は一歩先ばかりで、基本の基本は習ったコトがありません(;´▽`lllA``
今更ながら基礎に戻りたいので一緒に勉強させて下さい^^


またお邪魔します〜♪
元気になる魔法の応援ポチっ!ヾ(=^‥^=)ノ凸
Posted by えあ@ホームページ&ブログ作成tips at 2007年08月03日 09:30
こんにちは、ノウゼンです。

CSSには、興味があります。
このように解説してくださると、
とても助かります(*^_^*)

今日はちょっと都合が悪いので、
時間のあるときに、
じっくり見させていただきます。

応援&募金ポチ
Posted by ノウゼン at 2007年08月03日 10:39
sumireさん、こんにちは!
「ホームページ制作者によるSEO対策と副業のススメ」の富む・狂うsです。

cssとhtml、本当に難解です。
制作者の私が苦しんでいるのだから、間違いありません。笑

私も講座開こうかな。
初心者でも出来るバットの折り方。

( ̄□ ̄;)そっち!?

また、お邪魔させて頂きます。
応援クリックポチ!
Posted by 富む・狂う’s@本業が〜〜 at 2007年08月03日 14:49
sumireさん、こんにちは^^
まりあんです。
いつも、優しいコメント
ありがとうございます♪

こういった、基礎的なことを
初心者にもわかりやすく
丁寧に教えてくださるところって
少ないので、とてもお勉強になります。

なんといっても、現役PCインストラクターさんですものね♪
これからも、よろしくお願いいたします^^

また、お邪魔いたしますねぇ
応援(*'▽')σポチコ
Posted by まりあん@愛と幸せモリモリなブタさんの貯金箱 at 2007年08月03日 16:14
tomです。

いつもありがとうございます^^

idとclassの違いがよくわかってないので
この先、非常に助かります。

タダですよね?笑
楽しみにしています。

応援済み。
Posted by tom@日8フォーラムサポーター at 2007年08月03日 20:07
Hola! sumire-san.

南米コロンビア在住のコロ通です。

学校の生徒さんには、
ちょっと教えられないブログですね^^
(肝の部分は学校で という使い方もありかも)

お子さんの喘息、毎日の掃除が大変ですね。


MUCHO GUSTO〜POCHI☆
Posted by 南米コロ通@ただ今、同盟軍応援中 at 2007年08月03日 22:34
こんばんわぁヾ(*^▽^*)〃
ここまではなんとかわかります。
こっからがんばります。
(ノ*>□<)ノ{応援凸〕 またお邪魔します。
Posted by 美肌コスメ at 2007年08月03日 22:45
こんばんわ
あーちゃです
CSSはむずかしいです(;´▽`A``
量産ブログの色や大きさを変えるだけでも
一時間くらいかけてやってます
毎回大変ですよ〜〜
ポチッ
Posted by あーちゃの自然体ブログアフィリエイト at 2007年08月04日 00:17
sumireさんこんばんは。
ご無沙汰しておりすみません。
つくしです。

体調を気づかってくださりありがとうございます。
もう元気になり、すでにムリをしている状態です(笑

CSSはきちんと覚えないと、崩れたときに直せなくて大変ですね。

つくしも独学で覚えて楽しむ程度にいじっていますが、崩れたときに直せず、結局最初のものに戻して、終わりなんてことが多々あります。

こういう講座はとてもありがたいですね。

しかも、学校だと10万円もかかるんですか〜

それを無料で・・・すみません。。。

でもうれしいです。

これからの講座楽しみにしています。

一緒に基礎を覚えたいと思います。

それではまたお邪魔させていただきますね。

つんつく応援♪

お子さんが調子わるいのですか?
大丈夫ですか?
お大事にしてくださいね。

Posted by つくしの情報商材の村@つくし at 2007年08月04日 01:06
sumireさん、おはようございます。
マルチWin実践中@りばぁーです。

>長い道のりになりますが、
>興味のある方は是非お付き合い
>くださいませ^^

もちろんです。
りばぁーは最後までsumire先生に
ついていきますから^^。

これほどまでの情報を提供してくださる、
sumire先生に感謝です!!

応援ポチッ♪

Posted by 「しあわせをつかもう!!」りばぁーのブログアフィリエイト at 2007年08月04日 07:10
sumireさん、おはようございます。
ホームページ制作者によるSEO対策と副業のススメの富む・狂うsです。

やはり人が絡むと価格は上がりますね。
先程、メールをさせて頂きました。

御確認下さい。

またお邪魔させて頂きます。応援クリックぽちっ
Posted by 富む・狂うs@朝からコメント廻り at 2007年08月04日 07:41
はじめまして。
オーストラリアの日本人アフィリエイター
しゃろんです。

私のブログへ訪問いただきまして
ありがとうございました。

すごいですね〜
PCのプロ!!

CSSとか言葉がまず頭に入って
くるのに時間がかかります。。。
ちょっとでもなにか問題が
起こるとすぐに直せないのは不便ですよね。

sumireさんのブログで勉強したら
私でも上達するかな。

今後ともよろしくお願いします。

応援♪

Posted by オーストラリアでブログアフィリエイト! at 2007年08月04日 09:09
こんにちは

無理しすぎかもしれないです
頭が今こんがらがっていますからね

応援
Posted by セールス分析のささ at 2007年08月04日 09:25
コンニチワ〜
でんです。

どういう意味があるかはわかりませんが<div>があったら</div>で閉じるな〜とは思っていました。

重要だったのか。
それさえも知らなかった(汗)

応援クリーック!
Posted by 寝ながら稼ぐ男 でん at 2007年08月04日 10:35
こんにちは、ノウゼンです。

>同僚のインストラクター達は検索のテクニックがすごいですよ〜
>しかも10ページ目位まで普通に探します^^;

それは、凄いですね。

私も、趣味に関することだったら、
それぐらいはします。

応援&募金ポチ
Posted by ノウゼン at 2007年08月04日 11:35
こんにちはsumireさん
夢ゆりです♪

コメントありがとう
ございました !

今日の東京は半端じゃ
ない暑さです・・・

授業料払わなくては
いけないくらいの高度な

部分まで・・・凄いです
頭がいいんですね・・・

最近頭働かなくて困ります。

では感謝の応援ぽち♪
Posted by 夢ゆり at 2007年08月04日 16:21
こんにちはsumireさん
夢ゆりです♪

コメントありがとう
ございました !

今日の東京は半端じゃ
ない暑さです・・・

授業料払わなくては
いけないくらいの高度な

部分まで・・・凄いです
頭がいいんですね・・・

最近頭働かなくて・・・

では感謝の応援ぽち♪
Posted by 夢ゆり at 2007年08月04日 16:22
こんばんは。

サト愛です。

これは、わたしに、役立つ講座ですね
ありがとう〜
学びます〜

応援します!ぽち^^
Posted by サト愛☆愛でいっぱいのお金持ち at 2007年08月04日 19:14
こんばんわ
平凡おやじです。

CSSなどの横文字が
並ぶと、敬遠してしまうことありますね。

でも、1つずつでもいいから
覚えていくことが大切だと思います。

私も最近になって、CSS等の
意味を知りました。

では応援♪
Posted by 平凡おやじ at 2007年08月04日 23:24
Hola! sumire-san.

南米コロンビア在住のコロ通です。

やはりこういうのは、繰り返しですよね。
でも40過ぎたらかなり頭固くなってきてるのを確認できました。


MUCHO GUSTO〜POCHI☆
Posted by 南米コロ通@ただ今、同盟軍応援中 at 2007年08月05日 06:04
Sumireさん!こんにちはpoporoidです

前の記事もあわせて読ませて頂きました!
講座なんとか間に合いました(苦笑)

普段の料金きいてちょっとビックリしました。。。
SEO恐ろしい金額なんでしょうね

今後もご享受下さい!

では、応援させて下さい!
Posted by 私に出来て、あなたに出来ないわけがない!poporoidのアフィリエイトBlog at 2007年08月05日 09:57
sumireさん、おはようございます!
ホームページ制作者によるSEO対策と副業のススメの富む・狂うsです。

いつも温かいメールありがとうございます。
疲れた心が癒されます。

昨日は久しぶりに道場で身体を動かしてきました。全身筋肉痛です。

またお邪魔させて頂きます。応援クリックぽちっ
Posted by 富む・狂うs@朝からコメント廻り at 2007年08月05日 09:58
sumireさん、こんにちは!

やっぱり、sumireさんのブログはナイスです!!
リバーさん同様、ついていきます(笑)
プリントアウトして線を引く、なるほどです。
こんな難しい事も、sumireさんからだと
すんなり入ってきま〜す。

引き続き宜しくお願いします^^

暑い日が続きますが。お体を大切に!
モーレツ応援〜★
Posted by モーレツサラリーマン★GAKU at 2007年08月05日 11:19
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/50080440

この記事へのトラックバック

SEOに強いホームページ
Excerpt: 今日は久々に『コレは!』という商材を見つけて嬉しいので書いちゃいます(笑) 早速ですが、コレです。 ど素人がプロのSEOページを作れる、最終SEO超獣兵器 八岐大蛇(やまたのおろち) seo-oroc..
Weblog: アフィリエイト初心者から慣れた人までのためのSHOP THE 『info』
Tracked: 2007-08-03 17:53
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。