店長ボルの日記

Always Look on the Bright Side of Life.

マイナーチェンジ備忘録その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階のカフェ・レストランで、
残念ながら老朽化によるパレフランス自体の解体により、
原宿店は現在は存在しません。
今ではどこでも見られる様になったオープン・テラスの走りの様なお店で、
多くの外国人や先端を行く日本人で賑わっていました。

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

ボ

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

中居君と稲垣君

兄ちゃん

ボル

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

兄

ボ

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

兄

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

ボ

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

兄

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

兄

ボ

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

兄

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

兄

ボ

「なるほど…。」

兄

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

ボ

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

兄

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

ボ

「ほぉほぉ…。」

兄

ボ

「なるほど…。」

兄

ボ

「ははは…。」

兄

/********************************** ▼ 外枠 ▼ */
#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 注意！このリンク先は音が出ます

渡辺貞夫

ボル

「して、その心は？」

兄ちゃん

ボ

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

Linktest

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

≪車中の貴女 | Topページへ | Ten Thousand≫

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

兄ちゃん、コメント欄おかしいよ
文字はいらない

[ 2008/05/09 15:55 ] [ 書き直したいの ]

>姐さん
ご指摘ありがと。
今、PC前にいないので、帰ったら確認します。

ご迷惑をお掛け致します。

[ 2008/05/09 16:14 ] [ 書き直したいの ]

せいぜい2行までなら大丈夫

エンターキー使うと
打ち込んだ文字が消えちゃうんです。

[ 2008/05/09 16:47 ] [ 書き直したいの ]

ふ～む…

ワシが書き込んでいる分には、
問題は無さそうなのだが…。

何が原因なんだろうか…。
モヤモヤした気分だけが残るなぁ。

再度、調べてみるとしますか。

[ 2008/05/11 16:40 ] [ 書き直したいの ]

コメントの投稿

トラックバック

この記事のトラックバックURI
http://hiptosquare.blog60.fc2.com/tb.php/280-2fb06388

≪車中の貴女 | Topページへ | Ten Thousand≫

犬の十戒

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