コンピューターおねえちゃん

マークアップエンジニアリング

今日やったこと, HTML/CSS

「どうも少ーしばかりHTMLとか習得したっぽいです（　´∀｀）」

そうバイト先で上司に報告したら、早速それっぽいお仕事が振ってもらえた。

お仕事！お仕事！マークアップエンジニアっ！

　 　∩
(　ﾟ∀ﾟ)彡
　 ⊂彡

私が手がけるんは「イケブロインタビュー」なるページで、ライターさんからあがってきた原稿をHTMLで整えて更新するお仕事を引き継いだん。月に３回。

連載モノやから、CSSはもう出来ててHTMLもイチから書く必要ナシ。前回の記事のHTML部分をコピペして、新しい記事がキレイに表示されるように調節するねん。

あれ、私、マークアップエンジニアじゃ全然なかった。「コピー＆ペーストするだけの簡単なお仕事」やった。そんなで vol.27 と vol.28 を更新。（もし見てもらえるなら Firefox で見てほしいです、理由は最後に説明です）

とはいえ初心者には、これだけでも一苦労。昨日に２回目の更新をしたんやけど、あろうことか１回目にどうやって更新したかをうっかり結構忘れてたので、更新の仕方をメモしておこうかと思います。

....φ(・ω・｀ )

基本的には前回のソースからコピペして見よう見真似でページを作ればいいから、そのページのHTML構造が理解出来ればおｋ。

私がこのお仕事をするにおいて新しく知ったのは、HTMLにおける定義リスト＜dl＞の使い方とかCSSのセレクタを呼び出す方法とかやった。

そんなでこの部分

がどうやって出来てるかを、忘れっぽい自分のために自分でやさしく説明してあげてみる。

この部分のソースを見ると、以下のようになってます。

<div id="interview">

<dl>
<div class="icon1_i">スガオ！</div>
<dt class="t16">
<strong>　〜『能力全開スポーツ道!!』を作っているのはどんな人?〜</strong>
</dt>
<div><img src="/cmn_img/spacer.gif" alt="" width="1" height="10"></div>
</dl>

<dl class="t14a">
<dd class="editorial">　</dd>
<div class="IR_E">編集部:</div>
<dd class="editorial">
＊＊＊＊＊＊＊＊
</dd>
<div class="IR_B">ブロガー：</div>
<dd class="bloger">
＊＊＊＊＊＊＊＊
</dd>
</dl>
・
・
・
・
</div>

ここでは見出し部分で一つの定義リスト<dl>、編集部の質問とブロガーの答えで
もう一つの定義リスト<dl>にくくられていて、インタビュー全体が<div>でくくられている。

<dl>とは定義リスト（Definition List)を意味してます。

そして<dl>〜</dl>の間に
<dt></dt>(Definition Term)で定義する用語を、
<dd></dd>(Definition Description)で用語の説明をしているらしい。

んで、アイコンとか文字の種類や色に関する指定はあらかじめCSSファイルで準備して
もらえているので、適した場所に適したものを呼び出します。それが class="＊＊" とか
id="＊＊"とかで、 "＊＊"がクラスタ名。class とか id だとかはそのクラスタの属性を
表してる模様。

<div>や<span>は、囲まれた部分をグループ化するそうです。

そのグループをうっかり閉じ忘れたりするとぐちゃぐちゃなレイアウトになって泣きたくなるケド、どこがどういうかたまりかが分かるようになったら、もうあとはコピー＆ペーストするだけの簡単なお仕事。

ちなみに htmlタグが少しばかり分かるようになったので、冒頭のＡＡをはてダで表示出来るようになった。

<dl>
　   　∩<br>
(　ﾟ∀ﾟ)彡<br>　
⊂彡<br>
</dl>

あの部分、実際はこうやって書いてます。
可愛げ半減ｗｗ

さて、ここらで駆け出しのくせにちょっと物足りなさを感じ、こっそり更なるパフォーマンスを発揮してみた。これまでこのページ、写真の大きさとか位置とか、写真の説明文の位置が微妙やなぁと内心思ってて。写真の大きさを調整するのは簡単、やけど問題は位置を調節すること。なんとかしてみる。

<dd class="bloger">
＊＊＊＊＊＊＊＊
<img style="float:none;margin-top:20px;" src="http://＊＊.jpg" 
alt="全開Ｔシャツ" width="180" height="240">                             
＊＊＊＊＊＊＊＊
</dd>
</dl>

まず、これまでは写真の前で定義リストを終えて写真を＜div＞でくくってたんやけど、それをやめてリストの中に写真ファイルを含めてみた。これによって文章と写真の左ラインが揃うようになった。やけどこれによって文字と写真がひっつきすぎたから margin-top:20px で上マージンを 20px あけた。それから float:none で文字の回りこみを解除、これで写真の下に写真の説明がくるようになった、ウフフ（　´∀｀）

あとは alt= で、その写真が表示出来ない場合に表示するテキストが指定出来るってことも初めて知った。

・・・とかなんとか浮かれてたけど、つい今しがた重大なことに気がついた。どうもこのページ、過去ログからずーっと、IEやとデザインがずれてる。今の今気付いた、気付いて悲しくなった。どうも最初っから CSS の class="IR_E"や class="IR_B" の部分が firefox で見て綺麗なかんじにしか作られてなかったらしい。

これぞCSS、「滝が上から下へと流れ落ちるように引き継がれていくスタイルのシート」。イマイチなかんじがバッチリ引き継がれてる(-ω-`о)

とりあえず上の人に報告せなあかんし、更新を引き継いだからにはなんとかして私がなおさないと＞＜

これが直せたら今度こそ私、マークアップエンジニアかも！

Permalink | コメント(0) | トラックバック(0) | 04:33