FC2ブログ

ビジネスマンでも知っておいて損はないHTMLとCSSの指定方法!

ねこぎじです。

前回に続き、Chroem上でマウスを右クリック→「要素の検証」を利用して、HTMLとCSSについて解析していく小技を紹介します。> 


前回の記事
Chromeの「要素の検証」でHTMLを研究・DIVの編 (^o^)丿

要素の検証では、ブラウザ上で表示されているサイトのHTMLとCSSを細かく解析する手助けとなるTOOLです。

では早速下記の画像を確認ください。
FC2ブログ→0629 Fc2 CSS研究
HTMLが表示されている部分に、赤枠にて囲われた"headblock1"というDIV要素があります。

DIV要素とは、ブロック要素の一つで、レイアウト要素でいえば一つのまとまったブロックを構成しています。

このID名=headblock1にデザイン的要素を指示しているのがCSS(スタイルシート)と呼ばれているモノです。

画像の左下に、赤枠にてDIV要素要素ID=headblock1のCSSと書いた部分がります。

内容は下記の画像をご覧下さい。

FC1 CSS01
と、このようになっています。

このCSS(スタイルシート)は、下記の1.の各DIV要素headBlock1に対してデザイン的要素の指示をしているのです。

DIV要素要素ID=headblock1のHTMLは、
1.div id="headBlock1要素 <div id="headBlock1">
2.div id="BlogName"要素  <div id="BlogName">ねこぎじ ビジネス資料作成のお手伝い (^o^)丿</div>
3.div id="headIntroduction"  <div id="headIntroduction">コンピュータで作成するビジネス資料を作成するときにちょっとしたイラストや、小ネタをお伝えします。 ほんとにちょっとしたネタです.</div>
4.</div>
このような構成になっています。

HTMLは、例<DIV>で始まり、</DIV>で終ることになっています。
DIV~/DVIがひとつのブロックとなっています。そして、ブロックは入れ子方式が可能です。

入れ子とは、親要素の下に子要素を持つ形式のことです。
ですので、親は、
1.div id="headBlock1要素 となり、その下に入れ子として
  2.div id="BlogName"要素
  3.div id="headIntroduction"
という構成になっています。

よって、headblock1という要素に対してのデザイン要素を指定しているCSSの記述ということになります。

よって、2.div id="BlogName"要素や3.div id="headIntroduction"に対しては、BlogNameならBlogNameに対して、個別にCSSを指定するということになります。

この様にCSSを見て行くと、HTMLにおいてCSSが果たすデザイン要素の醍醐味が理解できるようになります。
今日はここまでと致します。

それでは皆様のお仕事が捗りますようにお祈りしています。
ではでは。
スポンサーサイト



テーマ : ホームページ作成
ジャンル : コンピュータ

最新トラックバック

月別アーカイブ

カテゴリ

PDF (2)
広告
くろック ALL STARS
リンク
全記事表示リンク

全ての記事を表示する⇒ここをクリック頂くと記事リストが表示されます。

フリーエリア
カレンダー
05 | 2012/06 | 07
- - - - - 1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
RSSリンクの表示
プロフィール

ねこぎじ

Author:ねこぎじ
FC2ブログへようこそ!

最新記事
最新コメント
メールフォーム

名前:
メール:
件名:
本文:

ねこぎじと申します。Twitterやっています。宜しければフォローください