2007'12.31.Mon
連続的なHTMLで終了箇所にのみ特殊な背景を表示させるサンプル。
テキストやリストに対してpadding-bottomを設定し、padding部分が背景となる。
その下に更にh2が続く場合は、h2の持っているmargin-top: -Xpx;によって殺される。
……あれ?一番上ってどうなってるの?
・html
<div id="RIGHT">
<h2>メニュー1</h2>
<div>
<ul>
<li>リスト1
<li>リスト2
<li>リスト3
<li>リスト4
</ul>
</div>
<h2>メニュー2</h2>
<div>
<ul>
<li>リスト1
<li>リスト2
<li>リスト3
<li>リスト4
</ul>
</div>
<!-- div id=RIGHT end --></div>
・css
div#RIGHT{
margin-top: 20px;}
div#RIGHT h2{
margin-top: -20px;}
div#RIGHT div{
background-image: url(image/right_bg.gif);
background-position: bottom;
background-repeat: no-repeat;}
あとはこれをベースに調整していけば、うまくできるはず、、、(まだ実行してない
_________
いや、ほんとごめんなさい。作業遅延出まくりデス。死にそう。
でもホントに辛い時は死にそう、なんて言えないよなあ。
つまりまだ加速できる、ぜー。
__________________
テスト用にHTML書いてみた。発想から10分でプロトタイプを作り上げるという早業! operaでチェックして動いたから問題ないでしょう。
HTMLにstyleでCSSを埋め込んでるので読みにくいのはかんべんな。
幅を指定しているのはtestを改行するため。
h1とh2の間に20pxの空間を持たせるために、一番外側のdivのmarginは40pxにセットしています。h2のネガティブは20px。
<body id="CONTENT">
<h1>h2 Negative-margin test</h1>
<div style="width: 200px; margin-top: 40px;">
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
</div>
</body>
________
あれ? 文字参照がうまくいってない?
ま、これ理解できる位の人なら文字参照の不具合なんて気にしないでしょう。気にしないで下さい。自分で置換とか使って直して下さい。
……なんて投げやり!
テキストやリストに対してpadding-bottomを設定し、padding部分が背景となる。
その下に更にh2が続く場合は、h2の持っているmargin-top: -Xpx;によって殺される。
……あれ?一番上ってどうなってるの?
・html
<div id="RIGHT">
<h2>メニュー1</h2>
<div>
<ul>
<li>リスト1
<li>リスト2
<li>リスト3
<li>リスト4
</ul>
</div>
<h2>メニュー2</h2>
<div>
<ul>
<li>リスト1
<li>リスト2
<li>リスト3
<li>リスト4
</ul>
</div>
<!-- div id=RIGHT end --></div>
・css
div#RIGHT{
margin-top: 20px;}
div#RIGHT h2{
margin-top: -20px;}
div#RIGHT div{
background-image: url(image/right_bg.gif);
background-position: bottom;
background-repeat: no-repeat;}
あとはこれをベースに調整していけば、うまくできるはず、、、(まだ実行してない
_________
いや、ほんとごめんなさい。作業遅延出まくりデス。死にそう。
でもホントに辛い時は死にそう、なんて言えないよなあ。
つまりまだ加速できる、ぜー。
__________________
テスト用にHTML書いてみた。発想から10分でプロトタイプを作り上げるという早業! operaでチェックして動いたから問題ないでしょう。
HTMLにstyleでCSSを埋め込んでるので読みにくいのはかんべんな。
幅を指定しているのはtestを改行するため。
h1とh2の間に20pxの空間を持たせるために、一番外側のdivのmarginは40pxにセットしています。h2のネガティブは20px。
<body id="CONTENT">
<h1>h2 Negative-margin test</h1>
<div style="width: 200px; margin-top: 40px;">
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
<h2 style="margin-top: -20px; background-color: #fff;">Major Headline [level2]</h2>
<div style="padding-bottom: 22px; background-color: #efefef;">test test test test test test test test test test test test test test test test test test test test test test test </div>
</div>
</body>
________
あれ? 文字参照がうまくいってない?
ま、これ理解できる位の人なら文字参照の不具合なんて気にしないでしょう。気にしないで下さい。自分で置換とか使って直して下さい。
……なんて投げやり!
PR
2007'12.29.Sat
むしろ頼子さんに手伝って欲しい。
やばいっす。ここへ来てまさかの修羅場。
なんとか敵の飛行隊を迎撃したのはいいけど燃料無し、みたいな?
全て母上が原因です。あの方冬期講座マックスで登録して下さいますモノですからさあ大変。
宿題やる時間無いっての。講座終わったらそのまま別の講座に直行ぶっつづけ数時間おつかれさまだっての。
だいたいそんな感じ。
__________
そろそろ潮時なのかもしれない。
と思うことが増えてきました。
このブログが消えることはないと思いますが、本家が消えたときは察して下さい(見てる人いないと思うけど)
あと、復活するときは同サイト名・同ハンドルでやるんで見かけたら生暖かく見守って下さい。
……とか書いているウチはまだ大丈夫らしい。知り合いのネトゲ廃人が言ってた。本当に怖いのはある日ぱったり消えるヤツだって。
そう言うヤツは復帰の可能性はほとんど無いし、戻ってきても名前を変えてるから分からないんだそうで。
やばいっす。ここへ来てまさかの修羅場。
なんとか敵の飛行隊を迎撃したのはいいけど燃料無し、みたいな?
全て母上が原因です。あの方冬期講座マックスで登録して下さいますモノですからさあ大変。
宿題やる時間無いっての。講座終わったらそのまま別の講座に直行ぶっつづけ数時間おつかれさまだっての。
だいたいそんな感じ。
__________
そろそろ潮時なのかもしれない。
と思うことが増えてきました。
このブログが消えることはないと思いますが、本家が消えたときは察して下さい(見てる人いないと思うけど)
あと、復活するときは同サイト名・同ハンドルでやるんで見かけたら生暖かく見守って下さい。
……とか書いているウチはまだ大丈夫らしい。知り合いのネトゲ廃人が言ってた。本当に怖いのはある日ぱったり消えるヤツだって。
そう言うヤツは復帰の可能性はほとんど無いし、戻ってきても名前を変えてるから分からないんだそうで。
2007'12.27.Thu
仕方あるめえと割り切って新しく注文した自転車が到着しましたー。
ジャイアント社製CR3200(08年モデル・シルバー)であります。
ちなみに前に乗ってたのは同社製CR3000(07年モデル・白)。主な違いは前サスの有無。
ちなみに07のCR3000はレバー式だったチェンジャーが、08のCR3200はグリップシフトに変わっていて少し残念。
なんか2nd GIGの最後にウチコマが出てきた時の気分。ほら、全体的な性能は上がっているんだろうけど、なんか、個性? ゴーストが無いんだって!
いま考えるとなぜCR3000シリーズにこだわったのか。いっそエスケープでも買えばよかったのに俺。
んで、走ってみると後ろブレーキに違和感。とりあえず年始まで回してワイヤーが伸びたら調整に出そう。
今回目玉の前サスは柔らかすぎな感じ。これも次回調整。
調整ついでにレバー式のチェンジャーに変えれるかどうか聞いてみようかなー。
前回CR3000で記事を書いたときに、意外と情報を探している人が多かったらしいのでさらにメモ。
07のCR3000と比べると08のCR3200はどうもフレームが微妙に変わった気がする。いや、セッティングの違いかも知れないけれど。
もし買いに行ったお店に07モデルと08モデルがあるならそれぞれ試乗してみるのもいいと思います。
ジャイアント社製CR3200(08年モデル・シルバー)であります。
ちなみに前に乗ってたのは同社製CR3000(07年モデル・白)。主な違いは前サスの有無。
ちなみに07のCR3000はレバー式だったチェンジャーが、08のCR3200はグリップシフトに変わっていて少し残念。
なんか2nd GIGの最後にウチコマが出てきた時の気分。ほら、全体的な性能は上がっているんだろうけど、なんか、個性? ゴーストが無いんだって!
いま考えるとなぜCR3000シリーズにこだわったのか。いっそエスケープでも買えばよかったのに俺。
んで、走ってみると後ろブレーキに違和感。とりあえず年始まで回してワイヤーが伸びたら調整に出そう。
今回目玉の前サスは柔らかすぎな感じ。これも次回調整。
調整ついでにレバー式のチェンジャーに変えれるかどうか聞いてみようかなー。
前回CR3000で記事を書いたときに、意外と情報を探している人が多かったらしいのでさらにメモ。
07のCR3000と比べると08のCR3200はどうもフレームが微妙に変わった気がする。いや、セッティングの違いかも知れないけれど。
もし買いに行ったお店に07モデルと08モデルがあるならそれぞれ試乗してみるのもいいと思います。
2007'12.26.Wed
なんか冬休み講座に出てったり『クリスマスを寂しく過ごす男の会』に巻き込まれたり、街頭献血に巻き込まれてたらもう2007年が終わろうとしているではないか!
そしてちゃっかり絵日記機能を試してみる、が言わなきゃわからんですな。
で、悔いを残さずに新年を迎えるべくさっさと課題を終わらせ頼子ルートを一周したい所存。
そういえば献血。高齢化で必要となる血液の増加が予想されるのに献血人口は毎年20%減少しているそうですよ。なんか休憩スポットにあった資料の受け売りですが。
そしてせっせと年賀状をつくる。
とりあえずレイヤーの便利さに感動。こいつはすげーや。
ただやっぱりレイヤーと色選択といくらかのプラグインじゃ限界があるなあ。。。
あとやっぱり絵が描けたら楽しそうなので大学が決まったらその練習をしたい。
最短でもあと9ヶ月か。決まっても遊んでる訳にはいかないし、なんだかんだ言って1年半は厳しそうだ。
髪は女の命と言いますが、PCは理系の命です。そしてウチのPCが死にそう≒俺が死にそう。こいつはピンチだZE☆
そしてちゃっかり絵日記機能を試してみる、が言わなきゃわからんですな。
で、悔いを残さずに新年を迎えるべくさっさと課題を終わらせ頼子ルートを一周したい所存。
そういえば献血。高齢化で必要となる血液の増加が予想されるのに献血人口は毎年20%減少しているそうですよ。なんか休憩スポットにあった資料の受け売りですが。
そしてせっせと年賀状をつくる。
とりあえずレイヤーの便利さに感動。こいつはすげーや。
ただやっぱりレイヤーと色選択といくらかのプラグインじゃ限界があるなあ。。。
あとやっぱり絵が描けたら楽しそうなので大学が決まったらその練習をしたい。
最短でもあと9ヶ月か。決まっても遊んでる訳にはいかないし、なんだかんだ言って1年半は厳しそうだ。
髪は女の命と言いますが、PCは理系の命です。そしてウチのPCが死にそう≒俺が死にそう。こいつはピンチだZE☆
2007'12.23.Sun
攻殻機動隊S.A.C. 2nd GIGを後輩に借りて見てた。
で、OPの曲がすごく気に入ったんで歌詞を見ていたら、OPの歌詞の中に、we rise or fallという一節があったのですよ。
訳すと「昇格するか降格するか」、という具合だと思うのですが、これってなんについても言えることですよね、とか。
現状維持は後退って言うし。事実、現状維持なんて後退です。なぜなら時間は有限であるから。
だからこそ、あれもこれもと手を伸ばしては破綻する。
なんて事を考えた日曜の夜。
で、OPの曲がすごく気に入ったんで歌詞を見ていたら、OPの歌詞の中に、we rise or fallという一節があったのですよ。
訳すと「昇格するか降格するか」、という具合だと思うのですが、これってなんについても言えることですよね、とか。
現状維持は後退って言うし。事実、現状維持なんて後退です。なぜなら時間は有限であるから。
だからこそ、あれもこれもと手を伸ばしては破綻する。
なんて事を考えた日曜の夜。
カレンダー
プロフィール
リンク
最新記事
最新トラックバック
ブログ内検索