店長ボルの日記

Always Look on the Bright Side of Life.

カテゴリー [ HTML、CSSなど… ]

スポンサーサイト [2008/09/08]
マイナーチェンジ備忘録その1 [2008/04/08]
マイナーチェンジ備忘録その2 [2008/04/16]
マイナーチェンジ備忘録その3 [2008/04/23]
マイナーチェンジ備忘録その4 [2008/05/08]

マイナーチェンジ備忘録その1

兄ちゃん

「レイアウトテスト終わりました。
何とか思う様な感じに仕上がったかな。
見た目可笑しな表示になっていたら、
お手数ですが教えて頂けると有難いです。」

ボル

「お疲れ様でした。」

兄

「今まで気になる所をちょいちょいいじっては来ました。
あまりにも細かくいじり過ぎて、どこに何をしたのか思い出せないくらい。
テンプレートは、おそらく未来永劫変えられません。(苦笑)

んで今回。
今回は、ワシにとっては相当大規模なマイナーチェンジ。」

ボ

「見た目はあまり変わってませんが…。」

兄

「マイナーチェンジだからね。見た目を変えずに中身を変えた訳です。

んで、それに関連して、興味の無い人にはどうでもいい話…。
今回のマイナーチェンジについて。」

ボ

「ホントにどうでもいい話だ…。」

兄

「もしかしたら、困ってる方に何かヒントになるかも知れないでしょ。
ワシ自身の備忘録として、ちょっとメモ書きしておきます。
素人なんで、記述に間違いがあるかもしれませんが…。(汗)」

ボ

「はい。」

兄

「相当長い記事なるんで、ご興味のある方だけ、
『続きを見せて…』をクリッククリック。」

続きを見せて…

続きを閉じたいの…

今までのワタシ

兄ちゃん

「今回のリニューアルの本題は、
記事部分をTABLEタグでレイアウトをしていたのを止めて、
全てCSSでレイアウトし直す事です。
これは
『TABLEでのレイアウトは、本来のTABLEの使い方では無く好ましくない』
と言う、W3Cの方針に従ったもの。」

ボル

「はい。」

兄ちゃん

「随分前からそんな風には聞いてたんですけどねぇ。
正直、CSS ( リンク

Cascading Style Sheets ) って、
面倒臭そうで、勉強すんのが嫌だったんですよねぇ…。
TABLEのが慣れてる分、組むの楽だし…。
まぁ、そうも言ってらない事情もあったり無かったりするんで、
今回は思い切って取り組んでみた訳です。」

ボル

「ははは…。」

兄

「さて、こっからが本題。『今までのワタシ』です。

今まで『店長ボルの日記』では、
記事本文の段組はTABLEタグで組んでいました。
図にすると↓こんな感じ…。」

図1

ボ

「なるほど…。」

兄

「実際に書いていたソースに直すと…。↓」

図2

兄

「横幅の都合で、改行しまくってるんで縦長になってますが、
実際にはもっと横に長い記述です。
あ、今気が付いたけど、全部小文字だなぁ。
直すの面倒だから、このまんまで良いか…。
大文字、小文字が区別される場合を除き、
切替が面倒なんで、いつも小文字でソースは書いています。」

ボ

「何でわざわざこんな面倒臭い事をしてるんですか？」

兄

「実はこれが、面倒臭がりだからやってる事なんですよ。
ウチの記事が対話式と言うか、
掛け合い形式だって言うのも関係してるんですけど、
『さて、記事を書こう』となった時に、
いちいちレイアウトを気にしながら書くのが面倒なだけなんです。
だから、前もってテンプレートの様なモノを作っておいて、
書き込む時は"台詞を入れるだけ"と言う感じにしたかったんですよね。
ブログ自体が、書いた記事がテンプレート上に吐き出される訳で、
言わば『テンプレート・イン・テンプレート』って感じですかね。
だって、何か書こうと思った時に、
やれ『"兄ちゃん"と台詞の間隔は幾つ』だとか、
やれ『真ん中のカラムの幅は幾つだから、この辺で改行しよう』とか、
余計な事気にするの嫌でしょ？」

ボ

「まぁ、そうかも知れませんけど…。
でも、上のソースみたいな書き方してたら、余計面倒じゃないですか。」

兄

「『WYSIWYGエディタ』と言うモノがあるのだよ。ボル君。
FC2ブログの管理画面に設置してあるのもそうなんだけどね。

上で書いたソースの台詞部分を抜いて、
ワシが使っている『alphaEDIT』と言うWYSIWYGエディタで見てみると…。」

図3

兄

「こんな感じ。
実際には3行分だけじゃなく、
30行分くらい台詞が空のモノが用意してあります。
『WYSIWYGモード』で、書いておいたソースを開いて、
そのままここから書き込めますので、
この様に、枠さえ用意しておけば、記事の内容に集中して書ける訳です。」

ボ

「なるほど。
例えば、アンケート用紙の記入欄に、必要事項だけ書き込む感じですか？」

兄

「その通り。
書き込む側の人間が特に意識をしなくても、記入欄に書き込みさえすれば、
同じ書式のモノが簡単に出来るって寸法です。

さて、そうして慣れ親しんだ『TABLEちゃん』とオサラバして、
新しく『CSSちゃん』とのお付き合いが始まる訳ですが、
その悪戦苦闘っぷりを、次回からお話しようと思います。」

ボ

「全く無駄に焦らしつつ、続きは次回に…。」

今日の一曲

Tamacun

Rodrigo Y Gabriela

ボル

「して、その心は？」

兄ちゃん

「さぁて、心して見よ。そして聞け。
ロドリゴ・イ・ガブリエラの『Tamacun』。
メキシコ人の男女、
ロドリゴ・サンチェズとガブリエラ・クィンテロのギターデュオ。
相当言い古されたフレーズですが、『超絶技巧』です。
楽器は違えど、ジャコ・パストリアスを思い浮かべました。
いやぁ、聞いてて鳥肌が立って寒気がしたのは久し振りだぁ。
熱くて巧い。

二人のエピソード諸々は、
申し訳ないですけど時間の都合で今日は割愛します。ごめんなさい。
注目の二人なんで『Rodrigo Y Gabriela』で検索すれば、
スグに調べられます。

まぁ、何と言っても音楽は聴いてみないと話にならん。
騙されたと思って、お手隙の時にでも聴いてみて下さい。」

ボ

「なお、リンク切れの際は、ご容赦下さいね♪」

Linktest

『ご当地キューピーコレクション by 店長ボルの日記』
[ 2008/04/08 22:05 ] HTML、CSSなど… | TB(0) | CM(1)

マイナーチェンジ備忘録その2

兄ちゃん

「さて前回、
長年連れ添った『TABLEちゃん』とお別れした所で終わりました。」

ボル

「そうでした。」

兄

「今日から新しく『CSSちゃん』とのお付き合いが始まります。
CSSちゃん、お高い感じと聞いているので、ちょっと不安です。」

ボ

「ぐだぐだ言ってないで、行きましょうか。」

兄

「そうしましょう。」

続きを見せて…

続きを閉じたいの…

あの娘の名前は『CSS』

兄

「上の絵は、今までのTABLEタグで書いていた
『店長ボルの日記』のレイアウトの例です。

そして今回、むっか～しに買った古い本を引っ張り出して、
ワシなりに考えたCSSでのレイアウトが↓こちら…。」

兄

「そのCSSとソースコード。↓」

/********************************** ▼ 外枠 ▼ */
#table_outline {
width:500px ;                      /* 横幅     */
}
/********************************** ▲ 外枠 ▲ */

/************************** ▼ 兄ちゃん名前 ▼ */
.anit {
color:#006600 ;                    /* 文字色   */
width:50px ;                       /* 横幅     */
margin:2px 0 ;                     /* マージン */
float:left ;                       /* 左側指定 */
}
/************************** ▲ 兄ちゃん名前 ▲ */

/************************** ▼ 兄ちゃん台詞 ▼ */
.anie {
color:#006600 ;                    /* 文字色   */
width:440px ;                      /* 横幅     */
margin:2px 0 ;                     /* マージン */
float:right ;                      /* 右側指定 */
}
/************************** ▲ 兄ちゃん台詞 ▲ */

/****************************** ▼ ボル名前 ▼ */
.borut {
color:#003399 ;                    /* 文字色   */
width:50px ;                       /* 横幅 　  */
margin:2px 0 ;                     /* マージン */
float:left ;                       /* 左側指定 */
}
/****************************** ▲ ボル名前 ▲ */

/****************************** ▼ ボル台詞 ▼ */
.borue {
color:#003399 ;                    /* 文字色   */
width:440px ;                      /* 横幅 　  */
margin:2px 0 ;                     /* マージン */
float:right ;                      /* 右側指定 */
}
/****************************** ▲ ボル台詞 ▲ */

<div id="table_outline">
 <div class="anit">兄ちゃん</div>
 <div class="anie">「一行だと、イイ感じ。」</div>

 <div class="borut">ボル</div>
 <div class="borue">「"一行だと"?」</div>

 <div class="anit">兄ちゃん</div>
 <div class="anie">「その内、判ります。」</div>
</div>

兄

「そして、その表示結果。↓」

ボ

「ただ単純にタグを入れ替えただけの様な…。」

兄

「鋭いね。多少の修正はあったけど、ほぼタグの入れ替えだけ。
良く考えれば…、いや良く考えなくても、これで上手くいく訳が無い。
台詞の部分が1行の時はこれでも良かった。
が、2行以上になると↓こうなった。(泣)」

兄

「これがソースコードと実際の表示結果。↓」

<div id="table_outline">
 <div class="anit">兄ちゃん</div>
 <div class="anie">「それが素人の浅はかさ…。(泣)<br>これが二行以上になると、<br>なんとも予期せぬ事態が！」</div>

 <div class="borut">ボル</div>
 <div class="borue">「そんなオーバーな…。<br>！！！こっ、これは！」</div>

 <div class="anit">兄ちゃん</div>
 <div class="anie">「名前と台詞がずれてきてしまったのです。<br>これは予想GUY。<br>しかも、行を追う毎にズレは酷くなる。」</div>
</div>

ボ

「ありゃりゃ…。」

兄

「"兄ちゃん"、"ボル"の名前の部分と台詞の部分が、
ズレてきてしまったのです。
名前と台詞に何の関連性も無いので、ズレっちまうのも当然と言えば当然。
この状態のまま、双方の高さをリンクさせる方法が無いか、
色々調べてみた所、こんなページを発見。↓」

スタイルシート(CSS)で段組を構成する 1 (All About)

兄

「ここの4ページ目『段組の解除:clearプロパティ』の項で、
こんな記述を発見。」

段組の解除（回り込みの解除）には、clearプロパティを使います。

兄

「なるほど、これで問題解決か？
CSSに『clear:both ;』と書かれた要素の上で、段組が解除されるらしい。
ウチのCSSに当てはめて考えてみると、
各行の台詞の最後で段組を解除したいので、
"兄ちゃん"と"ボル"の名前の所に『clear:both ;』を記述すると言う事になる。
各台詞部分の『float:right ;』も必要ないようだ。

早速、記述してみる。↓」

/********************************** ▼ 外枠 ▼ */
#table_outline {
width:500px ;                      /* 横幅     */
}
/********************************** ▲ 外枠 ▲ */

/************************** ▼ 兄ちゃん名前 ▼ */
.anit {
color:#006600 ;                    /* 文字色   */
width:50px ;                       /* 横幅     */
margin:2px 0 ;                     /* マージン */
float:left ;                       /* 左側指定 */
clear:both ;                       /* 段組解除 */
}
/************************** ▲ 兄ちゃん名前 ▲ */

/************************** ▼ 兄ちゃん台詞 ▼ */
.anie {
color:#006600 ;                    /* 文字色   */
width:440px ;                      /* 横幅     */
margin:2px 0 ;                     /* マージン */
}
/************************** ▲ 兄ちゃん台詞 ▲ */

/****************************** ▼ ボル名前 ▼ */
.borut {
color:#003399 ;                    /* 文字色   */
width:50px ;                       /* 横幅 　  */
margin:2px 0 ;                     /* マージン */
float:left ;                       /* 左側指定 */
clear:both ;                       /* 段組解除 */
}
/****************************** ▲ ボル名前 ▲ */

/****************************** ▼ ボル台詞 ▼ */
.borue {
color:#003399 ;                    /* 文字色   */
width:440px ;                      /* 横幅 　  */
margin:2px 0 ;                     /* マージン */
}
/****************************** ▲ ボル台詞 ▲ */

兄

「結果、こうなった。↓」

ボ

「おっ！イイんじゃないですか？」

兄

「近づいて来たっぽいね。
念の為、Firefoxでも見てみようか。」

兄

「ぎゃぁー！"台詞"の部分が回りこんでしまっているぅ！
図にすると、今、↓こう言う状態になってしまっています。」

兄

「助けてぇ～。All About先生～。

って事で、次回は『物知り先生』です。」

ボ

「シリーズは、まだまだ続きます。(笑)」

今日の一曲

Can't Give You Anything ( But My Love ) 注意！このリンク先は音が出ます

The Stylistics

ボル

「して、その心は？」

兄ちゃん

「70年代、大人気を誇った黒人コーラス・グループ、
日本で一番有名であろうフィラデルフィア・ソウル・グループ。
スタイリスティックスの『愛がすべて』です。
もう、初っ端のトランペットの音でやられますね。この曲は。
ラッセル・トンプキンスJr.のファルセットが素敵過ぎる。(笑)
これまで何度も来日していて、メンバーチェンジを重ねながら、
今でも活動しています。
ラッセル・トンプキンスJr.は、
ニュー・スタイリスティックスと言うグループを組んで、
こちらも活動中です。

でも、今は何と言っても『♪ギャッツ・ビィ～♪』ですね。(笑)」

ボ

「なお、リンク切れの際は、ご容赦下さいね♪」

Linktest

『ご当地キューピーコレクション by 店長ボルの日記』
[ 2008/04/16 12:00 ] HTML、CSSなど… | TB(0) | CM(1)

マイナーチェンジ備忘録その3

兄

「こないだ仕事中にちょっと無理して捻った右手首が、
今、猛烈に痛いです。
どうやら自己診断によると、親指を動かす筋を痛めてるくさい。
親指を開く度に痛みが走るもんだから、どうにも鬱陶しい。
とっとと医者に診てもらうのが良いんだろうけどねぇ。
ついつい我慢してしまうんだなぁ、面倒臭がりだから…。」

ボ

「早めに病院行ってきた方が良いと思いますよ。」

兄

「面倒臭ぇなぁ…。でも、痛ぇなぁ…。」

ボ

「悩んでる暇があったら、とっととシリーズ3回目、行っちゃって下さい。」

兄

「は～い。」

続きを見せて…

続きを閉じたいの…

物知り先生

兄ちゃん

「さて前回は、↓こんな状態で終わってしまいました。」

ボル

「もうこれはGoogle先生ならぬ、All About先生にお力添え頂きましょう。」

兄

「前回紹介したAll Aboutのホームページ作成と言う特集の中に、
またしても答えはありました。」

スタイルシート(CSS)で段組を構成する 3 (All About)

兄

「こちらの記事を要約すると…。

『左側のボックス要素 (ウチの場合"名前") の幅と同じ分だけ、
右側のボックス要素 (ウチの場合"台詞") の左側にマージンを取る』

ややこしいですが、そう言う事らしいので早速記述。↓」

/********************************** ▼ 外枠 ▼ */
#table_outline {
width:500px ;                      /* 横幅     */
}
/********************************** ▲ 外枠 ▲ */

/************************** ▼ 兄ちゃん名前 ▼ */
.anit {
color:#006600 ;                    /* 文字色   */
width:50px ;                       /* 横幅     */
margin:2px 0 ;                     /* マージン */
float:left ;                       /* 左側指定 */
clear:both ;                       /* 段組解除 */
}
/************************** ▲ 兄ちゃん名前 ▲ */

/************************** ▼ 兄ちゃん台詞 ▼ */
.anie {
color:#006600 ;                    /* 文字色   */
width:440px ;                      /* 横幅     */
margin:2px 0 2px 50px;             /* マージン */
}
/************************** ▲ 兄ちゃん台詞 ▲ */

/****************************** ▼ ボル名前 ▼ */
.borut {
color:#003399 ;                    /* 文字色   */
width:50px ;                       /* 横幅 　  */
margin:2px 0 ;                     /* マージン */
float:left ;                       /* 左側指定 */
clear:both ;                       /* 段組解除 */
}
/****************************** ▲ ボル名前 ▲ */

/****************************** ▼ ボル台詞 ▼ */
.borue {
color:#003399 ;                    /* 文字色   */
width:440px ;                      /* 横幅 　  */
margin:2px 0 2px 50px;             /* マージン */
}
/****************************** ▲ ボル台詞 ▲ */

兄

「margin (マージン) は、色んな記述の仕方がありますが、
値が4つ並んでいる時は、左から指定されたボックス要素の上、右、下、左、と
時計回りに設定されます。
上の『ボル台詞』を例にすると、
上方向に2ピクセル、右方向はマージン無し、下方向に2ピクセル、
左方向は『ボル名前』の横幅と同じ50ピクセルに指定しています。

他には、こんな指定の仕方があります。」

margin:5px ;                上下左右5ピクセル
                                         マージンを取る

margin:5px 10px ;           上下5ピクセル、
                            左右10ピクセルマージンを取る

margin:5px 10px 3px ;       上5ピクセル、左右10ピクセル、
                            下3ピクセルマージンを取る

margin:5px 10px 3px 10px ;  上5ピクセル、右10ピクセル、
                            下3ピクセル、
                            左10ピクセルマージンを取る



margin-top:5px ;            上に5ピクセルマージンを取る

margin-bottom:5px ;         下に5ピクセルマージンを取る

margin-left:5px ;           左に5ピクセルマージンを取る

margin-right:5px ;          右に5ピクセルマージンを取る

兄

「などが記述方法としてあります。

さて、そんな訳で早速テストをして見ましょう。
まず、こいつは元々大丈夫。Internet Explorer。」

兄

「テストするまでも無く、当然大丈夫。
次に問題のFirefox。」

兄

「おぉ！上手くいったぜ、ボル君。
この調子で次々行くぜ。Safari、そしてOpera。」

ボ

「イイっスねぇ。バッチリじゃぁないですか。」

兄

「上手くいったクサイな。
それもこれも先生とワシのお陰じゃ。」

ボ

「ははは…。
さて、どうですか？いよいよ完成ですか？」

兄

「いや、ちょっと待て、ボル君。

ん？」

兄

「んんん？」

兄

「ここ、ちょっとズレてねぇか？ボル君。」

ボ

「ん？どこですか？」

兄

「ここだよ。ここ。」

兄

「"台詞"の部分より"名前"の部分の方が下がってませんか？
ってぇ事よ。」

ボ

「細けぇオヤジだな。全く…。」

兄

「ん？何か言ったか？」

ボ

「イイエ。ナンニモ…。ヨク見ルト、ズレテマスネ。」

兄

「何だ、その感情のこもってない言い方は。全く…。

さてさて、コイツはどうしたもんかな。
『水も漏らさぬ』仕事振りのワシにとって…、」

ボ

「はいはい判りました。
戯言は良いですから、対策を考えましょう。」

兄

「引っ掛かる言い方だなぁ…。まぁ、いいや。

原因を探るべく、ワシの愛用のWYSIWYGエディタ『alphaEDIT』の、
WYSIWYGモードで開いてみる。」

兄

「はっは～ん。なるほど…。」

ボ

「何か判りましたか？」

兄

「なんとな～く、原因と言うか現象は判ったぞ。
あくまで"恐らく"だけれども…。

一番上の『兄ちゃん』は、
更に外側のボックス要素である『DIV id= "table_outline"』から、
マージンを2ピクセル取っているから"台詞"と高さが合っている。
その下に続く"台詞"の部分が、
直上の"台詞"との間にマージンを取っているのに対して、
"名前"である『ボル』と二番目の『兄ちゃん』は、
それぞれ隣の"台詞"の上端に対してマージンを取っているくさい。

これでは、ズレる値は常に同じだから、
対になる"名前"と"台詞"は横に並んでいるけれども、
記事の最後までズレっぱなしだな。

どうしたら良かろう…。」

ボ

「先生を呼びますか？」

兄

「いや。ここは自力で解決しよう。
だが今日は、存外に長くなってしまった。
また、次回までの宿題としよう。」

ボ

「いつ終わるんだよ、コレ。」

今日の一曲

Cha Cha Cuba 注意！このリンク先は音が出ます

Matt Bianco

ボル

「して、その心は？」

兄ちゃん

「'84年のデビュー以来、
ず～っとファンカ・ラティーナを続けているイギリスのユニット、
マット・ビアンコの『チャ・チャ・クーバ』です。
この辺りの曲は、今のオシャレ系クラブミュージックにも繋がりますね。
オリジナルメンバーは、
リーダーのマーク・ライリー、ダニー・ホワイト、バーシアの3名。
『Get Out Your Lazy Bed』でシングル・デビューするや、大ヒットを記録。
が、デビューアルバム『Whose Side are You on』(邦題探偵物語)を
リリース後、ダニー・ホワイトとバーシアが脱退。
二人はユニット『バーシア』(Basia)を結成。
こちらも『Drunk on Love』などの大ヒットを飛ばします。
一方、本家マット・ビアンコは二人の脱退後、
マーク・ライリーが以前所属していたバンドのメンバー、
マーク・フィッシャーを引き入れ『Wマーク』で活動していましたが、
2004年、オリジナルメンバーで復活。アルバム『MATT'S MOOD』をリリース。
しかし、その後のアルバム『WAP BAM BOOGIE』からは、
また『Wマーク』で活動している様で、1作のみの再結成だった様です。

こういった、オシャレ系でジャジーな曲は大好きです。」

ボ

「なお、リンク切れの際は、ご容赦下さいね♪」

Linktest

『ご当地キューピーコレクション by 店長ボルの日記』
[ 2008/04/23 00:00 ] HTML、CSSなど… | TB(0) | CM(2)

マイナーチェンジ備忘録その4

兄ちゃん

「最近、一部で『プロフェッショナル』と『アマチュア』の違いを定義する事が、
流行っているらしい。
んなものは、幾つ項目を並べて御託を述べようが、
難しい言葉を使って能書きを垂れようが、
『プロ』と『アマ』の違いなど、とどのつまり一つしかない。」

ボル

「兄ちゃんの考える『プロ』と『アマ』の違いとは？」

兄

「それはこちら側が考える事ではない。お客様が判断する事。
お客様に『お願いして良かった。やっぱりプロは違うわね。』と、
心から思って頂く事が出来れば『プロ』。それ以外は、『アマ』。
提供する側は、
お客様に真に満足頂けるものを提供する事を考えていれば良い。
『プロだから…』などと余計な事を考える。それは自惚れだ。」

ボ

「なるほど…。ま、人それぞれ『プロ論』はあるでしょう。

さて、シリーズの4回目、行きますか。」

続きを見せて…

続きを閉じたいの…

中居君と稲垣君

兄ちゃん

「上の図の様な、もしかしたら気にしなくて良い様な所を何とかしたい。
という所で前回は終わっています。
アイディアと言えるほどのモノではないですが、
試してみたい閃きがあり、今回は自力でやってみようと思います。」

ボル

「大層な始まりですけど、大丈夫ですか？」

兄

「判りません。(笑)

手前味噌ながら申し上げると、ウチでは読み易さを考慮して、
"台詞"と"台詞"の間に若干の行間を設けています。
これを今まで、
前回の記事でもお話した様にマージン (margin) を使って指定していました。
ここでハタと気付きました。
読み易さが目的な訳で、読み易く見えれば手段は何でも良いって事に…。

『そうだ。paddingを使ってみよう』。」

ボ

「『そうだ。京都に行こう』みたいなノリですね。」

兄

「ここでマージン (margin) と、
パディング (padding) の違いを少し説明させて頂きます。
興味無いですかそうですか。しかし続けます。」

ボ

「そして誰もいなくなった…。(笑)」

兄

「え～っと…。
判り易い様に、ある画像を例にご説明致しましょうか。」

兄

「この二つの画像を使って、ご説明致します。

マージン (margin) 、パディング (padding) は、
小学校の教室の後ろの壁にあった掲示板を思い浮かべて頂くと、
理解しやすいかも知れませんね。

上の二つの絵は、生徒が描いた絵だと思って下さい。

さて早速、画用紙を一枚用意しましょう。」

兄

「この画用紙には黒 (#000000) で縁取りがしてあります。
この縁をボーダー (border) と言います。
この画用紙の様に、目に見える様に表示させる事もあれば、
上の絵 (例1、例2) の様に見えない様、設定する事もあります。
例1、例2とも、見えないだけで、ボーダーはあります。
このボーダーが、マージン、パディングを考える際に重要になります。

今回こちらでは、マージン、パディングの考え方・捉え方をご説明致します。
と言うのも、これまた同じソースコードでもブラウザによって見え方が異なるので、
同じく見える様にするには、結構複雑な記述になってしまうのです。
それをここで説明する事は趣旨ではないので、割愛させて頂いて、
概要の説明をさせて頂きます。
それもこれも、例によってInternet Explorerの規格の誤解釈に起因するもので、
その為に、皆さん無駄な労力を強いられる訳です。
ブログをやっている方なら、数ある『テンプレート』の中から、
ご自分のお好みの『テンプレート』を選んでいると思います。
この『テンプレート』も、どのブラウザでも同じく見える様にするには、
実は、色々なテクニックが必要になってくるのです。」

ボ

「『テンプレート』を作って下さる人達は、エライ人達なのですね」

兄

「そう言う事なんですね。

さて話を画用紙に戻しまして…。
この画用紙に一人の生徒が例1の絵を描いたとします。
当然、画用紙のどこに絵を描こうとその生徒の勝手です。
ど真ん中にポツンと描いても良いし、右の隅っこに描いても良い訳です。
この画用紙のどの位置に絵を描くかを指定するのがパディング (padding) です。

先ずは、ど真ん中に描いてみましょうか。」

兄

「例1、例2共に、大きさは100ピクセル四方、
画用紙の大きさは、ボーダーの内側で、幅198ピクセル、高さ142ピクセルです。

と言う事で、これは下の図の様にパディングを取っています。」

兄

「規格では、ボーダーの内側からパディングを取る事になっています。

これを描いた生徒の名前を、仮に中居君としましょう。
隣の席の稲垣君も絵を描き終わりました。これが↓その絵です。」

兄

「稲垣君は左上の隅に絵を描いた様です。
これを中居君の絵同様、図で表してみます。」

兄

「この様にパディングとは、画用紙側から見て描かれる内容(文章も同様)を、
自身のどの位置に表示するかを指定する為のものと考える事が出来ます。
言い換えれば、パディングはボーダーの内側を指定するものだとも言えます。」

ボ

「なるほど…。」

兄

「さて、二人の絵が掲示板に貼り出されます。
これが↓その掲示板です。」

ボ

「良くあるコルクの掲示板…。」

兄

「掲示板の大きさは、幅450ピクセル、高さ350ピクセル。
ボーダーを3ピクセルづつ取っていますので、
コルクの部分は、幅444ピクセル、高さ344ピクセルとなります。

この掲示板の真ん中辺りの高さに、中居君と稲垣君の絵を、
横に2枚並べてみましょう。」

兄

「こいつは、↓こんな感じにマージンを取っています。」

ボ

「ほぉほぉ…。」

兄

「この様にマージンとは、設定するコンテンツ (この場合、画用紙) と、
外を囲う要素 (この場合、掲示板) や、
隣り合う他の要素 (この場合、隣の画用紙) との、
間隔 (余白) を指定する為のものと考えられます。
言い換えれば、マージンはボーダーの外側を指定するものだとも言えます。」

ボ

「なるほど…。」

兄

「勘の良い方ならお気付きかと思いますが、
立場が変われば、マージンがパディングに、パディングがマージンに、
入れ替わる事があります。
例えば上の2枚の画用紙を貼った掲示板の場合、
今回、画用紙側から設定したのでマージンとなっていますが、
掲示板側から設定をした場合はパディングになると言う事です。

同じ見え方のものを二方向から設定する事が可能で、
その時々で、設定する側を決める事が出来る。
と、ワシは理解しています。
厳密には、この二つは違う性質のものなのかも知れませんけど…。(笑)」

ボ

「ははは…。」

兄

「さて、話をマイナーチェンジの件に戻しまして…。

どうやら、マージンで位置の指定をしている事が、
"名前"と"台詞"のズレを招いている様でしたので、
上下のマージンを0にし、ボックス要素同士をくっつけて、
高さ方向の余白はパディングで設定する事にしました。
ついでに、"台詞"と"台詞"の間隔が、まだ詰まり気味にも思えましたので、
もうちょっと広げる様に設定する事にします。

と言う事で、前回までのCSS↓。」

/********************************** ▼ 外枠 ▼ */
#table_outline {
width:500px ;                          /* 横幅 */
}
/********************************** ▲ 外枠 ▲ */

/************************** ▼ 兄ちゃん名前 ▼ */
.anit {
color:#006600 ;                    /* 文字色   */
width:50px ;                       /* 横幅     */
margin:2px 0 ;                     /* マージン */
float:left ;                       /* 左側指定 */
clear:both ;                       /* 段組解除 */
}
/************************** ▲ 兄ちゃん名前 ▲ */

/************************** ▼ 兄ちゃん台詞 ▼ */
.anie {
color:#006600 ;                    /* 文字色   */
width:440px ;                      /* 横幅     */
margin:2px 0 2px 50px;             /* マージン */
}
/************************** ▲ 兄ちゃん台詞 ▲ */

/****************************** ▼ ボル名前 ▼ */
.borut {
color:#003399 ;                    /* 文字色   */
width:50px ;                       /* 横幅 　  */
margin:2px 0 ;                     /* マージン */
float:left ;                       /* 左側指定 */
clear:both ;                       /* 段組解除 */
}
/****************************** ▲ ボル名前 ▲ */

/****************************** ▼ ボル台詞 ▼ */
.borue {
color:#003399 ;                    /* 文字色   */
width:440px ;                      /* 横幅 　  */
margin:2px 0 2px 50px;             /* マージン */
}
/****************************** ▲ ボル台詞 ▲ */

兄

「それをこの様に↓書き直してみました。」

/********************************** ▼ 外枠 ▼ */
#table_outline {
width:500px ;                          /* 横幅 */
}
/********************************** ▲ 外枠 ▲ */

/************************** ▼ 兄ちゃん名前 ▼ */
.anit {
color:#006600 ;                  /* 文字色     */
width:50px ;                     /* 横幅       */
padding:3px 0 ;                  /* パディング */
float:left ;                     /* 左側指定   */
clear:both ;                     /* 段組解除   */
}
/************************** ▲ 兄ちゃん名前 ▲ */

/************************** ▼ 兄ちゃん台詞 ▼ */
.anie {
color:#006600 ;                  /* 文字色     */
width:440px ;                    /* 横幅       */
padding:3px 0 ;                  /* パディング */
margin-left:50px ;               /* 左マージン */
}
/************************** ▲ 兄ちゃん台詞 ▲ */

/****************************** ▼ ボル名前 ▼ */
.borut {
color:#003399 ;                  /* 文字色     */
width:50px ;                     /* 横幅 　    */
padding:3px 0 ;                  /* パディング */
float:left ;                     /* 左側指定   */
clear:both ;                     /* 段組解除   */
}
/****************************** ▲ ボル名前 ▲ */

/****************************** ▼ ボル台詞 ▼ */
.borue {
color:#003399 ;                  /* 文字色     */
width:440px ;                    /* 横幅 　    */
padding:3px 0 ;                  /* パディング */
margin-left:50px ;               /* 左マージン */
}
/****************************** ▲ ボル台詞 ▲ */

兄

「前回のHTMLソースコードと同じコレ↓で試してみましょう。どうでしょうか。」

<div id="table_outline">
 <div class="anit">兄ちゃん</div>
 <div class="anie">「それが素人の浅はかさ…。(泣)<br>これが二行以上になると、<br>なんとも予期せぬ事態が！」</div>

 <div class="borut">ボル</div>
 <div class="borue">「そんなオーバーな…。<br>！！！こっ、これは！」</div>

 <div class="anit">兄ちゃん</div>
 <div class="anie">「名前と台詞がずれてきてしまったのです。<br>これは予想GUY。<br>しかも、行を追う毎にズレは酷くなる。」</div>
</div>

兄

「Internet Explorer、Firefox、Safari、Opera。
どれもズレは生じていないようです。」

ボ

「やっと完成ですか？」

兄

「後は、使っているテンプレートに合わせて微調整すれば終了。
…と、言いたい所なのだが、一つ気がかりな事が…。
ここまで来たら、今まで放置していたそいつもついでに解決してしまいたい。」

ボ

「またですか？」

兄

「長々と付き合わせて申し訳ないですが、乗りかかった船。
もう暫くお付き合い下さい。」

ボ

「…。では、その兄ちゃんの気がかりは、また次回。」

今日の一曲

Orange Express 注意！このリンク先は音が出ます

渡辺貞夫

ボル

「して、その心は？」

兄ちゃん

「『世界のナベサダ』です。
3の倍数と、3の付く数字の時だけアホっぽくなったりはしません。(笑)
ナベサダの『オレンジ・エクスプレス』です。
ナベサダの曲の中では、『カリフォルニア・シャワー』 (動画見つかんなかった)
と並んで、耳馴染みのある曲ではないでしょうか。
どちらも持ち味である軽快なリズムと明るいメロディーが楽しめます。

ナベサダと言えば、
東京・原宿の『オー・バカナル』(Aux Bacchanales)を思い出します。
『オー・バカナル』とは、
原宿・明治通り沿いにあったパレフランスというビルの1階のカフェ・レストランで、
残念ながら老朽化によるパレフランス自体の解体により、
原宿店は現在は存在しません。
今ではどこでも見られる様になったオープン・テラスの走りの様なお店で、
多くの外国人や先端を行く日本人で賑わっていました。

彼は、こちらの常連で、東京でライブのあった後などは、
サックスを持ってフラッと現れては数曲即興ライブなどを演ってました。
ワシはと言えば、そんな日を目掛けてお店に行って、
彼の"無料ライブ"を聴いたりしたもんです。懐かしいですな。」

ボ

「なお、リンク切れの際は、ご容赦下さいね♪」

Linktest

『ご当地キューピーコレクション by 店長ボルの日記』
[ 2008/05/08 00:00 ] HTML、CSSなど… | TB(0) | CM(4)

| Topページへ |

犬の十戒

1.
My life is likely to last ten to fifteen years. Any separation from you will be painful for me. Remember that before you buy me.
私の一生は１０～１５年くらいしかありません。
ほんのわずかな時間でも貴方と離れていることは辛いのです。
私のことを買う（飼う）前にどうかそのことを考えて下さい。

2.
Give me time to understand what you want of me.

私が「貴方が私に望んでいること」を理解できるようになるまで時間を与えてください。

3.
Place your trust in me-it's crucial to mywell-being.

私を信頼して下さい．．．それだけで私は幸せなのです。

4.
Don't be angry at me for long and don't lock me up as punishment. You have your work, your entertainment and your friends. I have only you.

私を長時間叱ったり、罰として閉じ込めたりしないで下さい。
貴方には仕事や楽しみがありますし、友達だっているでしょう。
でも．．．私には貴方だけしかいないのです。

5.
Talk to me sometimes. Even if I don't understand your words, I understand your voice when its speaking to me.

時には私に話しかけて下さい。
たとえ貴方の言葉を理解できなくても、私に話しかけている貴方の声で理解しています。

6.
Be aware that however you treat me, I'll never forget it.

貴方がどれほど私を扱っても私がそれを忘れないだろうということに気づいてください。

7.
Remember before you hit me that I have teeth that could easily crush the bones of your hand but that I choose not to bite you.

私を叩く前に思い出して下さい。
私には貴方の手の骨を簡単に噛み砕くことができる歯があるけれど、私は貴方を噛まないように決めている事を。

8.
Before you scold me for being uncooperative, obstinate or lazy, ask yourself if something might be bothering me. Perhaps I'm not getting the right food, or I've been out in the sun too long, or my heart is getting old and weak.

言うことをきかない、頑固だ、怠け者だとしかる前に私がそうなる原因が何かないかと貴方自身に問い掛けてみて下さい。
適切な食餌をあげなかったのでは？
日中太陽が照りつけている外に長時間放置していたのかも？
心臓が年をとるにつれて弱ってはいないだろうか？と．．．。

9.
Take care of me when I get old; you, too, willgrow old.

私が年をとってもどうか世話をして下さい。
貴方も同じように年をとるのです。

10.
Go with me on difficult journeys. Never say, "I can't bear to watch it."or, "Let it happen in my absence." Everything is easier for me if you arethere. Remember, I love you.

最期の旅立ちの時には、そばにいて私を見送って下さい。
「見ているのが辛いから」とか「私の居ないところで逝かせてあげて」なんて、言わないで欲しいのです。
貴方が側にいてくれるだけで、私にはどんなことでも安らかに受け入れられます。
そして．．．．．．どうか忘れないで下さい。
私が貴方を愛していることを。

作者：不明
和訳：Yorisun