2012年10月23日火曜日

Freeway HTMLの記述を考える

今回はFreewayがどのようなHTMLの記述をしているかを調べてみたいと思います。
その前に、HTMLがどのような構造をしているのか知っておきましょう。

大きくは、html、head、bodyの3つのタグから構成されています。
html・・・・・HTML文書の最初に指定するドキュメント構造を表すタグです。このファイルの中身がHTML言語で記述されていることを表しています。
head・・・・・書類のタイトルや特徴等の文書情報を記述します。head部で記述される内容はブラウザ(閲覧ソフト)の本文へ表示されません。
body・・・・ブラウザ表示される部分を表わします。

それでは、FreewayのHTMLを見ていきましょう。先ずは、新規作成から何も無い状態でのHTMLを見てみました。(CotEditorでHTMLを見ています)、headタグに記述された緑文字の部分はスタイルシートですね。
それでは<body>タグ以下の変化に注目して行きましょう(bodyタグはブラウザで表示される部分を示す)

次にHTMLアイテムを配置してみました。

HTMLを見てみるとbodyタグ内にdivタグが追加されていました。




それでは、HTMLの意味についてもう少し調べていきましょう。
先ずはdivタグについてです。divの役割はたくさんの引き出しをまとめて一度に動かすことが出来るタンスに似ていることから、タンスモデルでよく説明され、引き出しにあたるpやhなどのタグを セットとして管理することが出来ます。


例_1
<div>
<h1>見出し</h1>
<p>段落</p>
</div>


また、divタグにclassやidを指定して、cssでスタイルを自在に変更することが出来ます。idとclassの役割は全く同じですが、使い方が異なります。idは1ページ内で1度しか使用できませんが、classは何度でも使用可能です。こういうと別の意味に取られるので、補足すると、id="a1"、id="a2"の二つを1回ずつ使用することはできますが、id="a1"だけを2回以上使用するのはだめということです。

一行目に
<div id="item1" style="position:absolute; left:32px; top:27px; width:244px; height:65px; z-index:1; overflow:visible">
とあります。これは絶対座標位置、HTMLアイテムの大きさ、レイヤーの階層を表しています。2行目には、
<p class="f-lp">HTMLでさらに文字を入力しました</p>とあります。この一行に、f-lpというクラスが適用されていますが、f-lpは.f-lp { margin-bottom:0px }とスタイルで定義されている事が分かります。
position:absolute・・・・・ボックス要素を絶対的な位置で配置する
z-index・・・・・重なりの順序を指定すします、値が大きいものほど上になります。
visible・・・・・指定された要素を表示します
p・・・・・Paragraphの略で、<P>~</P>で囲まれた部分がひとつの段落であることを表します。
class ・・・・・スタイルシートなどで定義したクラスに要素を関係つけるもので、複数の要素に利用することができます。




次に文字を赤色に変更してみました。
HTMLはこうなりました。<span class=>でstyle1が適用されています。スタイルを見てみると、style1にはcolor:#f00に、つまり赤色が定義されています。spanによって文字をグループ化し、style1適用されているという事になります。


さらに文字の大きさを20pxにしてみました。
そうすると、classがstyle3に変わっています。styke3の定義を見てみると、先ほどの赤色にfont-size:20pxが加わった、複合スタイルに変更されています。

改行してみました。
<br>を加える事で改行されています。

改行した文字を青色、14pxにしてみました。

<span>でグループ化され、style4のスタイルが適用されています。

何となくイメージできてきたでしょうか。文字の色や大きさなどの装飾的な部分はスタイルで定義されて、適用されているのが分かります。


今度は画像アイテムを配置してみました。

HTMLはこうなりました。ちなみに、画像アイテムで作成された文字はパブリッシュされた時点で画像へと変換されリソースフォルダに収納されます。


<img src="Resources/index1.gif" border=0 width=252 height=19 alt="画像アイテムで文字を入力しました" style="position:relative; left:1px; top:-1px; float:left">
img src・・・・・画像の収納フォルダと画像ファイル名
borde・・・・・アンダーライン。0数値なので、アンダーライン無し
width,heigh・・・・・画像アイテムの大きさ
alt・・・・・画像の代わりとなる代替文字列
position:relative・・・・・ボックス要素を相対的な位置で配置する


ちなみに絶対(absolute)と相対(relative)に関してはこちらの回答No.3がとても分かり易く解説されていましたのでリンクしておきます。
次回に続く.....


0 件のコメント:

コメントを投稿