suzrinブログ
HTML,CSS,Javascript,Nikon D5000での撮影記録あとPCパーツ大人のゲームなどなど
[PR]
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
CSSでリストにネガティブマージンを使う
たまには真面目に
リスト項目を作りたいとき、横並びにするには
ul li {
float : left ;
}
として、liの親要素であるulにClearFixをかけてあげると綺麗に横一列に並びますが、
たとえば
<dl>
<dt>項目</dt>
<dd>子供1</dd>
<dd>子供2</dd>
</dl>
と書いて、dd部分をネガティブマージン(marginの値をマイナスにする事)で
上にめり込ませて使ってみます
この場合はddに
margin:-2em;
等のようにかけると一行文上にずらすことが出来ますよね
で更に見やすいように
border:1px #000000 solid;
のように線を引いてみます
この方法だと結構上手くいくのですが
li {
border : 1px #000000 solid ;
}
ul li ul li {
border : none ;
}
ul li ul {
margin-top : -1.2em ;
}
<ul>
<li>1
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>2
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>3</li>
</ul>
とulを使って入れ子で作るとでIEで見て線が変になったーなんじゃこりゃとなることがあります
どうやらIE7も含めてそれ以前はマージンにマイナスを指定するという事自体が想定されていないようで
一カ所でも使うと色々なところが変になります、ええまったくもう
これの対処法ですが
pee-ka-booバグといっしょでhaslayoutが悪さしているようなので
IE6なら
display:inline-block;
IE7ならバリデーターに怒られますが
zoom:1;
を指定してあげるのが簡単だと思います

リスト項目を作りたいとき、横並びにするには
ul li {
float : left ;
}
として、liの親要素であるulにClearFixをかけてあげると綺麗に横一列に並びますが、
たとえば
<dl>
<dt>項目</dt>
<dd>子供1</dd>
<dd>子供2</dd>
</dl>
と書いて、dd部分をネガティブマージン(marginの値をマイナスにする事)で
上にめり込ませて使ってみます
この場合はddに
margin:-2em;
等のようにかけると一行文上にずらすことが出来ますよね
で更に見やすいように
border:1px #000000 solid;
のように線を引いてみます
- 項目
- 子供1
- 子供2
この方法だと結構上手くいくのですが
li {
border : 1px #000000 solid ;
}
ul li ul li {
border : none ;
}
ul li ul {
margin-top : -1.2em ;
}
<ul>
<li>1
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>2
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</li>
<li>3</li>
</ul>
とulを使って入れ子で作るとでIEで見て線が変になったーなんじゃこりゃとなることがあります
どうやらIE7も含めてそれ以前はマージンにマイナスを指定するという事自体が想定されていないようで
一カ所でも使うと色々なところが変になります、ええまったくもう
これの対処法ですが
pee-ka-booバグといっしょでhaslayoutが悪さしているようなので
IE6なら
display:inline-block;
IE7ならバリデーターに怒られますが
zoom:1;
を指定してあげるのが簡単だと思います
C75冬込みのALCOTさんがちゃがちゃ景品
若干間が空いてしまいましたがC75レポート第二弾です
前回のC75レポートでも書きましたがALCOTさんのブースでは
キーホルダーが入ったがちゃがちゃ一回500円をやっていました
で、そのカプセルの中にいくつか、当たりくじが入っていて、
ポスターとかトリプチックセットとか貰えると言うことでした
一日目の会場後すぐにブースに入ったのですが結構混んでいたので
グッズだけ買ってから他のブースを回ってきてからがちゃがちゃをやったのですが
この写真が、ALCOTがちゃがちゃ特賞のあたり券です\(>ヮ<)/

普段こういうくじとか全然当たらない人なので思わず頭真っ白になって
意味もなく友達に電話してしまいましたよ・・・
それで、今日その特賞の色紙が到着しました
これががちゃがちゃ特賞の仁村有志さん書き下ろし色紙ですよ

ALCOTの名前で出したゲームの好きなキャラクターを書いていただけると言うことで
やっぱりsuzrin的原点クローバーハーツの玲亜にしました
週末にでも額縁を買いに行こうっと
あと、最新作Engage Linksのキャラクターヘレンの抱き枕カバー制作が決定したそうです
楽しみですね
ALcot OFFICIAL WEB SITE(X-Rated)
http://www.alcot.biz/
前回のC75レポートでも書きましたがALCOTさんのブースでは
キーホルダーが入ったがちゃがちゃ一回500円をやっていました
で、そのカプセルの中にいくつか、当たりくじが入っていて、
ポスターとかトリプチックセットとか貰えると言うことでした
一日目の会場後すぐにブースに入ったのですが結構混んでいたので
グッズだけ買ってから他のブースを回ってきてからがちゃがちゃをやったのですが
この写真が、ALCOTがちゃがちゃ特賞のあたり券です\(>ヮ<)/
普段こういうくじとか全然当たらない人なので思わず頭真っ白になって
意味もなく友達に電話してしまいましたよ・・・
それで、今日その特賞の色紙が到着しました
これががちゃがちゃ特賞の仁村有志さん書き下ろし色紙ですよ
ALCOTの名前で出したゲームの好きなキャラクターを書いていただけると言うことで
やっぱりsuzrin的原点クローバーハーツの玲亜にしました
週末にでも額縁を買いに行こうっと
あと、最新作Engage Linksのキャラクターヘレンの抱き枕カバー制作が決定したそうです
楽しみですね
ALcot OFFICIAL WEB SITE(X-Rated)
http://www.alcot.biz/
空白セルの枠線を表示させられない\(>ヮ<)/
<table>
<tr><td></td></tr>
</table>
のような中身のない空白のセルはIE6・IE7だとどうやっても
枠線を表示できないっぽいですね
しぶしぶ
いれてるのですが
IE8および他のブラウザだと
td {
empty-cells : show ;
}
とすると表示されるんですよー
<tr><td></td></tr>
</table>
のような中身のない空白のセルはIE6・IE7だとどうやっても
枠線を表示できないっぽいですね
しぶしぶ
いれてるのですが
IE8および他のブラウザだと
td {
empty-cells : show ;
}
とすると表示されるんですよー
通販でトラブルの経験有りますか?
皆さんネット通販でのトラブルって有りますか?
たった今注文した商品と違う物が送られてきて困っているsuzrinです
某業界は年に二回有る盛繁期なので単なる手違いなのでしょうが
某ショップのweb通販で翡翠亭泉つばすさんの新刊を注文したのですが
全然違う妊婦ものが入っていました(つд`)
しかも妹の前で
「泉つばすとミヤスリサの本ゲットだぜ!」
とか良いながら開けてしまって空気が凍り付きましたYO
鬱だ∧∥∧
たった今注文した商品と違う物が送られてきて困っているsuzrinです
某業界は年に二回有る盛繁期なので単なる手違いなのでしょうが
某ショップのweb通販で翡翠亭泉つばすさんの新刊を注文したのですが
全然違う妊婦ものが入っていました(つд`)
しかも妹の前で
「泉つばすとミヤスリサの本ゲットだぜ!」
とか良いながら開けてしまって空気が凍り付きましたYO
鬱だ∧∥∧
カレンダー
| 12 | 2026/01 | 02 |
| S | M | T | W | T | F | S |
|---|---|---|---|---|---|---|
| 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 |
ブログ内検索
ツイッター
フリーエリア
18歳未満には不適切な内容がある場合が有ります閲覧にはご注意ください。
詳しくはりーどみーをご覧くださいお願いします
blogに関する連絡はこちらまで"suzrinあっとまーくmail.goo.ne.jp"
blogに関する連絡はこちらまで"suzrinあっとまーくmail.goo.ne.jp"
カテゴリー
最新記事
(09/15)
(07/25)
(04/24)
(03/08)
(02/06)
(01/22)
(11/19)
(06/01)
(05/09)
(05/07)
最新トラックバック
カウンター










