プロフィール

ギル (レベル3)

Author:ギル (レベル3)

ゲームにはまるように勉強にのめり込むことができたら、自分なりの勉強法でスキルアップをはかるブログです

カレンダー
最新記事
最新コメント
最新トラックバック
月別アーカイブ
カテゴリ
リンク
ブロとも申請フォーム
検索フォーム
RSSリンクの表示
QRコード
QRコード
スポンサーサイト
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


スポンサー広告 | 【--------(--) --:--:--】 | Trackback(-) | Comments(-)
RPG的勉強法 3日目 ~冒険者は少しだけ成長しました~

RPG的勉強法でDreamWeaverの勉強をはじめて3日

相変わらず分からないことだらけで、頭が爆発しそうになる日々が続いています。
でも不思議とつらいという感じはあまりなく、むしろ楽しいくらいかも。
参考書を読みながら、DreamWeaverで勉強していると
ソフトの操作だけでなく、サイト制作に関する様々な知識が自然と増えて
いくの実感します。

今まで知ることのなかったサイトの仕組みを理解できた時は何というか
「またちょっとレベルアップしたぞ♪」というような気分になり
やる気がでてきます。なかなかいい傾向です。

ちなみにRPG的勉強でDreamWeaverをはじめて3日
これまでに経験値10ポイントとお金10ゴールドを獲得しました。
(※経験値とお金についてはこちらの記事を参照



RPG的勉強法  経験値とお金を10ポイント獲得
冒険者は少しだけレベルが上がった!!(・・・・ような気がします)
この3日でまだまだ未熟者ですが 
div要素を使ったレイアウトテクニックを身につけました。

Webページを記述するために必要な言語がHTMLなら
そのページの見栄えをよくするための言語はCSSです。
HTMLで記述された内容をdiv要素を使ってグループ分けすれば
CSSを用いたより細かいレイアウトが可能になります。

図を使って説明すると

div要素を使ってページをグループ分けする

上図↑のようにdiv要素を使ってページをグループ分けしました。
では次にそれぞれのdiv要素に下記のようなCSS(スタイルシート)を
適用させ、レイアウトを変更します。


#header {
background-color: #6699FF;
height: 150px;
width: 800px;
}
#sidebar {
background-color: #99FF99;
float: left;
width: 200px;
height: 850px;
}
#main {
background-color: #CCCCCC;
float: left;
width: 600px;
height: 850px;
}


上記のCSSでグループ分けした箇所の配置やサイズ、そして配色を設定。
CSSを適用させることでページの見栄えが ガラリと変わります。(↓下図参照)

それぞれのdiv要素にCSS(スタイルシート)を適用させました

例えなるならHTMLが地球。
div要素を使ってグループ分けされた場所は国です。
国にはそれぞれ違った文化があり法律があります。
この文化や法律にあたるものがCSSといったところでしょうか。

なんか新しいこと覚えると、得意げに人に語りたくなる時ありませんか?
今の私がまさにそんな気分だったりします。(笑)


この調子で明日も頑張って勉強続けていきます。
とりあえず4日目も勉強を続けられたら三日坊主の汚名は阻止できます(笑)




ではまた次回 >>

勉強の日々 | 【2009-06-18(Thu) 22:50:18】 | Trackback:(0) | Comments:(0)
コメントの投稿
管理者にだけ表示を許可する

ブログランキング
にほんブログ村 資格ブログ スキルアップへ
スポンサードリンク
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。