アメブロの構成
前回、HTMLの「親」と「子」について紹介しました。
じゃあ実際にアメブロは？
ってことで全体の大まかな構成が
いくつかの<div>構成は省略してますが
<body id="mainIndex">
<div id="frame">
<div id="werHeader">
</div>
<div id="wrap">
<div id="sub_a">
</div>
<div id="main">
</div>
<div id="sub_b">
</div>
</div>
</div>
<div id="footerArea">
</div>
</body>
こんな感じ。
これから各部分ごとに構成とデザイン指定の仕方を細かくご紹介して行きます。
画像に書かれている意味ですが・・・
たとえば
div#main
これは、<div>タグに id で main という名前が付いてるということ。
cssで div を識別するために使ってます。
ほかに class というものがありますがこれは「 # 」ではなく「 . 」を使います。
<div id="main">
は、div#main
<div class="main">
は、div.main
この表し方は css でそのまま使えますので覚えておいてください。
HTMLとCSS
さて、アメブロをカスタマイズする上ではずせないのが
「HTML」
と
「CSS」。
アメブロデザインは基本的にこの二つの組み合わせて成り立っています。
「HTML」ってなに？
「CSS」ってなに？
という方も少なくないと思います。
それぞれについて説明するともの凄～く長くなってしまうので簡単に。
HTML
ブログを表示している状態で、画面を右クリックしてみましょう
ブラウザによって異なりますが
・ソースの表示
・ページのソースを表示
などのようなメニューを選択してみましょう。
ずら～っと眩暈がしそうなほど英単語の羅列のようなものが表示されると思います。
これが「HTML」です。
読むのも嫌になってしまいますが、ちょっとだけ見てみましょう。
なんとな～く眺めていると、 「＜」 や 「＞」 がたくさん出ていると思います。
これがHTMLの特徴、「タグ」です。
「＜＞」で囲まれたタグの集りなんですね。
なにを表示するかを表しています。
例えば、これ。
<div id="profile" class="mainMenu"> <h4 class="menu_title">プロフィール</h4> <div class="menu_frame"> ： ： </div> </div>
これはプロフィールの部分(抜粋)です。
先ほどご紹介したタグは、基本的に始まりを表すものと終わりを表すものがあります。
「/」が付いているものとそうでないものがありますね。
「/」がついていないものが始まり
「/」がついているものが終わり
です。
上記例だと、1行目
<div id="profile" class="mainMenu"> が始まり
最終行
</div> が1行目に対応する終わりです。
例を簡単に表すと・・・
<div>
<h4>・・・・</h4>
<div>
：
：
</div>
</div>
こんな感じ。
同じ色が始まりと終わりを表しています。
ここで、？？？と思う方もいるかもしれません。
そう。
赤い <div> のほうが先に始まっているのに・・・・
後から始まった青い <div> のほうが先に終わってますね。
これがタグの最大の特徴。「親」と「子供」です。
さて、さらにわけがわからなくなってきました。
親？子供？どゆこと？
例を見ると赤い <div> に<h4></h4> と <div></div> が挟まれている状態になってます。
この場合、
挟んでいる <div> は「親」、
挟まれている<h4></h4> と <div></div> は <div> の「子供」になります。
div さん家の h4 ちゃん と div くんって感じでしょうか。
今はそんな感じで覚えてもらえればOKです。
「挟んでいるタグは”親”。タグで挟まれていたら”子供”」
これだけでOKです。
タグはいくらでも挟むことができます。
もの凄い子沢山なdivさんがいたり・・・
<div> --- 親
<div></div> --- 子供
<div></div> --- 子供
<div></div> --- 子供
<div></div> --- 子供
<div></div> --- 子供
<h4></h4> --- 子供
</div>
何世代なんだって感じのdivさんがいたり・・・
<div>
<div>
<div>
<div>
<h4></h4>
<div>
<div></div>
</div>
</div>
</div>
</div>
</div>
これをHTMLから読み取るのは慣れていないと途方もない時間がかかります。
どんな構成でできているのかは違う記事でご紹介します。
細かなデザイン設定を行うためには重要ですので是非覚えてくださいね。
ごめんなさい。簡単にとか言いながらやたらと長くなってしまいました。
頑張って読んでくださった方ありがとうございます。
文章で説明するのは得意でないので読みづらい部分が多かったでしょう・・・
CSSの説明は今度にします。。。。