FC2ブログ

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

ねこぎじです。

このブログはビジネス文書作成の小技紹介を目的で書いているのですが、HTMLとCSSのノウハウに着目しているこの頃でして(^o^)丿

なぜかと言いますと、昨今ブラウザでプレゼンテーション資料を作成するというテクニックがにわかに注目を浴びてきています。

実績のあるTOOLで言えば、Googleプレゼンテーションや、ZohoShowがオススメです。

どちらもブラウザでプレゼンテーション作成TOOLとしてそれなりの機能を備えています。ねこぎじは下書きにいつもZoho Showを利用させて頂いてます。

ところでこれらのTOOLでHTMLとCSSを利用してオブジェクトを正確に配置できたら嬉しいなと考えています。

長くなりましたが、今日は備忘録的に前回に続きChromeの要素の検証を使ってWebサイトのHTMLとCSSがどうなっているかを覗いて見たいと思います。

現在、ねこぎじのFC2ブログは下記の構成になっています。

3カラムの構成説明

1.フッタ
2.1カラム
3.2カラム
4.3カラム
5.フッタ

大きく言えばこの5つです(^o^)丿
前回の記事をちょっと参照ください。
http://hyuga16.blog46.fc2blog.net/blog-entry-191.html

Chromeの要素の検証機能でねこぎじのFC2ブログを見て下さい。

要素の検証01

FC2のねこぎじのブログ画面の下にHTMLが表示されています。
赤く囲った部分をマウスでクリックしてみてください。

image10_20120627002526.png

すると、ブログのヘッダ部分を赤く囲った中に青くなっている部分が分かると思います。

image13.png


これが先ほどのHTMLに該当するDIV要素部分なのです。
<div id="sh_fc2blogheadbar">...</DIV> というわけです。

さらに他のDIV要素を見てみましょう。

image14.png

同じようにクリックすると(^o^)丿

image15.png

<div id="headBlock1">...</DIV> このDIV要素に該当する訳です。

このように細かく見ていくのですが、さらに小技がChromeの要素の検証には準備されています。

<div id="headBlock1">...</DIV> このDIV要素をマウスで右クリックすると(^o^)丿

image16.png

このメニューの中に、「Copy as HTML」をクリックしてみてください。

そして、適当なエディターまたはメモ帳に貼り付けてみてみましょう。

<div id="headBlock1">
<div id="BlogName"><a href="http://hyuga16.blog46.fc2.com/" title="ブログタイトル" id="pagetop">ねこぎじ ビジネス資料作成のお手伝い (^o^)丿</a></div>
<div id="headIntroduction">コンピュータで作成するビジネス資料を作成するときにちょっとしたイラストや、小ネタをお伝えします。 ほんとにちょっとしたネタです。</div>
</div>

<DIV>~</DIV>というブロック要素と呼ばれる一つのまとまった単位として利用するDIV要素。

このDIV要素単位に、CSSで細かく指定することでデザイン的要素を加えていくことになります。

長くなりましたので本日はここまでと致します。

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



テーマ : Webサービス
ジャンル : コンピュータ

トラックバック


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

まとめtyaiました【Chromeの「要素の検証」でHTMLを研究・DIVの編 (^o^)丿】

ねこぎじです。このブログはビジネス文書作成の小技紹介を目的で書いているのですが、HTMLとCSSのノウハウに着目しているこの頃でして(^o^)丿なぜかと言いますと、昨今ブラウザでプレゼ...

コメントの投稿

非公開コメント

最新トラックバック

月別アーカイブ

カテゴリ

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

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

フリーエリア
カレンダー
09 | 2019/10 | 11
- - 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 31 - -
RSSリンクの表示
プロフィール

ねこぎじ

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

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

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

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