店長ボルの日記

Always Look on the Bright Side of Life.

マイナーチェンジ備忘録その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作のみの再結成だった様です。

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

ボ

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

物知り先生

兄ちゃん

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

ボル

「もうこれは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: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モードで開いてみる。」

兄

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

ボ

「何か判りましたか？」

兄

ボ

「先生を呼びますか？」

兄

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

ボ

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

今日の一曲

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

Matt Bianco

ボル

「して、その心は？」

兄ちゃん

ボ

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

Linktest

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

≪違和感 | Topページへ | 夢で見た話≫

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

こんにちは(^▽^)/
お久しぶりのコメになってしました。
４月にはいってから忙しいです＞＜

兄ちゃんさん、右手首の痛みその後どうですか？
一旦治っても再び同じ所が後々痛くなってくることも
あるらしいので気をつけてくださいねd(・・)

私は子供に叩かれて痛くなった左肘、
医者にはいってないけど時々痛くなります＾＾；

[ 2008/04/23 12:03 ] [ 書き直したいの ]

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

長っ！そして
やっぱり理解できない・・・凹
細々とした作業になるんでしょうけど
ベースさえ出来ればコッチのもんですもんね！

手首痛くなったら
すぐテーピングっす！
手首に２重巻ぐらいでも
全然違うのでお試しを～☆

あ、五右衛門だか何だかっていう
パスタ屋あるじゃないですか？
チェーン店のやつ。
あそこの店、箸でパスタ食べるんですけど
私はカルボが好きで、その日も
もちろんカルボ。
イントラやっていた時の大食いの時代で
特盛カルボを箸で食ったわけです。
そして・・・腱鞘炎になりました（汗）
人間ってモロイのね。

[ 2008/04/24 19:21 ] [ 書き直したいの ]

コメントの投稿

トラックバック

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

≪違和感 | 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