店長 ボルの日記

Always Look on the Bright Side of Life.

スポンサーサイト 

上記の広告は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先生~。

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

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



今日の一曲


by


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

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

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

スポンサーサイト
ん~、目がチカチカしそう(笑)
手っ取り早く、書けるのが魅力の
ブログですが、詳細部分にこだわると
地道な作業になるんですな~。
CSSか・・・・
一緒にPC前に座ってくれて
手取り足取り教えてくれねぇ~と
まったく頭に入りま千円(死語?)
これをもしガイドブックのみでやれと
言われたら無理です凹



前回記事ですが
兄ちゃんの言うこと解ります。

あんまり関係ねぇ~かもですが
以前、うちの旦那が若い時に
1ヶ月だけ【産業廃棄物処分業者の"置き場"】で
バイトをしていたんですが
そこはインド人とか色々な人種がいたそうで
休憩中に仲良くなって話をしたら
彼等は、日本人でこの年齢だとしたら
こんなに知識はないし、また、それについて
絶対深くは考えないだろうって発言をしていたそうです。
計算1つにしろ、かなり優れているらしく
「日本人はダメだよ~。
ダメなくせに偉くはなりたい気持ちばかりでさ。
俺達は自分のためだけじゃなく、親や兄弟のために
働く気持ちがあるからね」
なんて失笑していたようです。
それを思い出しました。



[ 2008/04/16 16:03 ] [ 書き直したいの ]
コメントの投稿












「ボル君にだけ…」の方は、チェックを入れて下さい。
犬の十戒

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.

私の一生は10~15年くらいしかありません。
ほんのわずかな時間でも貴方と離れていることは辛いのです。
私のことを買う(飼う)前にどうかそのことを考えて下さい。


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
訳者:Yorisunさんのページへ
しゃべっている人

ボル君近影

店長:ボル君

兄ちゃん近影

代表:兄ちゃん

時々、お姉ちゃん(兄ちゃんの奥様)

店長のボル君(トイプードル)と、
兄ちゃん(代表)の
掛け合い日記です。
近くネットショップ開店予定(?)
※只今、絶賛延期中。(泣)

リンク 簡単なプロフィールなど…

カレンダーと月別アーカイブ
07 ≪│2017/08│≫ 09
- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -
『今日の一曲』
アーティストリスト
『今日の一曲』でご紹介した
アーティストの一覧です
全ての掛け合いを表示
ご訪問頂き有難う御座います
ご批判・ご要望なぞ…

あなたのお名前:
あなたのメールアドレス:
件名:
本文:

ブログ内の検索です
Powered by Google

Webを検索
『店長 ボルの日記』内を検索
戯れに…


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。