186(css)

2006-04-22

[][]

はてなブックマークの構造をちょっと直した.

ヘッダの検索フォームはいつのまに消えたのだろうか.

トラックバック - http://css.g.hatena.ne.jp/smoking186/20060422

2006-03-01

[] font-familyの打ち消し

d:id:Hamachiya2:20060301:1141176962

font-familyのinheritの実装具合にもよるのでアレですが, body {font-family:inherit;}でなんとかなるかと.

ということなので, WinIE6では無理. Firefox1.5.0.1とOpera8.0では大丈夫. Safariは多分大丈夫じゃないかと予想.

サンプル用html → Sample 20060301.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
 <head>
  <title>hatena - 20060301 -test</title>
  <meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
  <meta http-equiv="content-style-type" content="text/css; charset=Shift_JIS">
  <style>
/* sample */
html {}
body {
   margin: 20px;
   font-family: "Georgia","MS明朝",serif;}
body {
   font-family: inherit;
   }
  </style>
 </head>
 <body>
  <h1>はてな 20060301 test</h1>
  <p>テストテストテスト</p>
 </body>
</html>

Hamachiya2Hamachiya22006/03/02 01:23わーい!ありがとうございました!

トラックバック - http://css.g.hatena.ne.jp/smoking186/20060301

2005-12-21

[] contentで生成された疑似要素とtext-decorationの関係.

なぜdel:afterで追加した文字列のline-throughを切れないのかについて考える.

  1. contentで生成される要素はどこに入るのか
  2. tetx-decorationはどこまで指定できるのか
  3. 組み合わせるとどういうことになるのか

の3部構成. 参考文献はW3CのCSS2.1勧告から. 12と16辺りだった筈.

contentで生成される要素

:beforeや:afterでcontentを使って色々表示する際に, 実際どうなっているかを考えてみる.

p {border: 1px solid black;}
p:before {content: "Note: " ;}
<p>quick brown fox...</p>

この場合,

<p><span class="generated_text">Note: </span>quick brown fox...</p>

という風に生成されている. (実際にspanが入る訳じゃないんだが)

生成された要素は子になる.

なので, first-letterとか指定している場合, "N"に利いてくる (そうだ).

text-decoration

親がinlineの場合, その子要素でtext-decorationを上書き出来ない.

p {text-decoration: underline;}
p span {text-decoration: none;}
<p><span>quick</span> brown fox...</p>

この場合, p要素全体に下線が引かれる. quickだけ下線が無いということはない.

この二つをあわせると?

ins要素やdel要素に対してcontentでdatetime属性の値を表示することがある. というかins要素の中で"追記"と毎回書くのも面倒だしcssでやろうよ. ついでに時間も表示しようとという話なんだが. それはさておき.

ins {text-decoration: underline;}
ins:after {content: "(追記:" attr(datetime) ")";}
<p>元のテキスト<ins>追加されたテキスト</ins></p>

この場合生成された後には,

<p>元のテキスト<ins>追加されたテキスト<span class="generated_text">(追記:2005-12-21T23:17:08+09:00)</span></ins></p>

となる.

pの中ではinsはデフォルトではinline要素扱いなので(確か), 生成された文字列の下線を消すことは出来ない.

トラックバック - http://css.g.hatena.ne.jp/smoking186/20051221

2005-09-30

[] Ver.3 Ring 完成版

タグリストには対応した。カレンダー他は全無視。

IEでのバグを避ける為に色々とやってみたが、まぁ重たくなってしまって見栄えが悪い。結局のところ、dl.bookmarklistでborderを設定するのが一番良い、と思う。下のCSSだとそんなことしてないけど。

ヘッダ

<div class="expl">
<h2>title</h2>
<p>概説</p>
</div>

CSS

/* kill all */
body {
 margin: 0px; padding: 0px;
 background-color: white;
}

 * {
 box-sizing: content-box; /* CSS3, Opera */
 margin: 0px; padding: 0px;
 font-size: 100%;
 font-family: verdana, monospace;
 color: black;
 background-color: transparent;
 border: none;
 line-height: 1.3;
}

a:link {
 color: black;
}
a:visited {
 color: #600060;
}
a:active {
 color: red;
}
a:hover {
 color: red;
}

/* header */
div#banner {
  background: #ffffff;
  padding: 0px;
  margin: 0px;
  border-bottom: 1px solid #999999;
}

div#banner h1 {
  margin: 0;
  padding: 0;
  font-size: 100%;
}

div#bannersub {
  color: #999999;
  background: #ffffff;
  border-bottom: 1px solid #999999;
}

div#bannersub td {
  font-size: 76%;
  color: #999999;
  text-align: center;
}

div#bannersub td a {
  color: #999999;
  text-decoration: none;
}

div#bannersub table {
  width: 100%;
}

form.searchform {
	position: absolute;
	text-align: left;
	top: 14px;
	left: 300px;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}

form.searchform input {
	vertical-align: bottom;
}

form.searchform input.searchword {
	font-size: 90%;
	width: 120px;
	padding: 0;
	border: 1px solid #999999;
}

form.searchform input.searchbutton {
	padding: 0;
	margin: 0;
	border: none;
}

img.logo {
  position: absolute;
  text-align: right;
  top: 0;
  right: 0;
}

div.body {
 margin: 10px 5% 0px 15%;
}

/* header */
div.header {
 text-align: right;
 margin: 30px 0px;
}

h2 {
  text-align: left;
  font-size: 20pt;
  font-weight: bold;
  padding: 0px;
}

div.header h2,
div.header ul,
div.header ul li {
 display: inline;
}

div.pager {
 margin: 10px 0px;
 font-size: 90%;
 text-align: right;
}

/* main */
div.main {
 margin: 5px 0px;
 position: relative;
 top: 0px; left: 0px;
}

div.breadcrumbs {
 font-size: 80%;
}

/* taglist */

dl.bookmarklist {
 margin: 0px;
 padding: 5px 0px 10px;
 border-left: 1px solid black;
 _border-bottom: 1px solid #fcfcfc; /* IE bug see http://cssbug.at.infoseek.co.jp/detail/winie/b009.html */
}


dl.bookmarklist:before {
 content: attr(id);
 display: block;
 width: 10.5em;
 margin-left: 10px;
 margin-bottom: -5px;
 padding: 3px;
 border: 1px solid black;
 border-bottom: none;
 color: black;
 background-color: white;
 text-align: center;
 font-size: 80%;
/* 
 position: relative;
 top: 0px; left: 0px;
*/
}

dt.bookmark {
 margin: 5px 0px 0px 10px;
 padding: 10px 5px 5px 5px;
 border-top: 1px solid black;
 border-left: 1px solid black;
 border-right: 1px solid black;
 _border-bottom: 1px solid #fcfcfc; /* IE Bug see http://cssbug.at.infoseek.co.jp/detail/winie/b009.html */
}

dt.bookmark a.bookmark {
 display: block;
 margin-left: -22px;
 padding-left: 32px;
 background: transparent url("http://f.hatena.ne.jp/images/fotolife/s/smoking186/20050810/20050810161027.png") top left no-repeat;
}

dd {
 margin: 0px 0px 0px 10px;
 padding: 2px 5px 2px 15px;
 border-left: 1px solid black;
 border-right: 1px solid black;
 _border-bottom: 1px solid #fcfcfc; /* IE bug see http://cssbug.at.infoseek.co.jp/detail/winie/b009.html */
}

dd a {
 text-decoration: none;
}

dd dl {
 margin: 0px;
 padding: 0px;
 border: none;
}

dd.comment {
 padding: 3px 5px 5px 15px;
 font-size: 84%;
 border-bottom: 1px solid black;
}

dd.content {
 margin: 10px 0px 0px 30px;
 padding: 5px 5px 5px 10px;
 border: 1px solid black;
 font-size: 90%;
}

dd.ctv-user-comments {
 border: 0px;
}

dd.domain, dd.timestamp, dd.edit, dd.delete, dd.delete *,
dd.bookmarker, dd.add,
dt.bookmarker, dt.domain, dt.timestamp, dt.category, dd.category,
dt.keyword, dd.keyword, dt.users, dd.users {
 display: inline;
 margin: 0px; padding: 0px;
 background-color: transparent;
 font-size: 84%;
 border: none;
}

dd.domain a {
 
}

dd.users strong {}
dd.users em {}

span.label {
 display: none;
}

/* for asin */
div.asinlist {}

dl.asinlist {
 width: 170px;
 height: 250px;
 text-align: center;
 float: left;
}

dl.asinlist dt, dl.asinlist dd {
 border: none;
}

/* dl.asinlist */
img.asin:after {
 content: "\A" attr(title);
 font-size: 80%;
 text-align: center;
}

/* for asin detail */
dl.asindetail {
 border-left: 1px solid black;
}

dl.asindetail dd dl dd {
 border: none;
}

dd.image, dd.publisher, dd.author {
 border: none;
}

/* hatena-module */
/* taglist and favoritelist */
div.taglist,
div.favoritelist {
 width: 27%;
 position: relative;
 z-index: 5;
 float: right;
 margin-left: 10px;
 margin-bottom: 10px;
 background-color: white;
 border: 1px solid black;
}

div.taglist h3,
div.favoritelist h3 {
 margin: 5px;
}

ul.taglist {margin: 5px 5px 5px 10px;}
ul.taglist li {display: inline;}
ul.taglist a {color: #808080;}
ul.taglist a.tag-latest {color: #000000;} /* new */
ul.taglist a.tag-later {color: #606060;}
ul.taglist a.tag-earlier {color: #a0a0a0;}
ul.taglist a.tag-earliest {color: #c0c0c0;} /* old */
ul.taglist a.currenttag {color: red;}

div.favoritelist ul {
 margin: 5px 5px 5px 10px;
 list-style-type: none;
}

/* adsense */
/* div.adか */

/* antenna */
/* p.recentitemtitle + div.recentsubtitles */

/* template=hatena-module */
/* div.hatena-modulebody内にul.hatena-antenna */


/* calendar */
div.calendar {
 text-align: right;
}
/* template=hatena-module */
/* そのまんまdiv.hatena-modulebodyにベタ書き */

/* calendar2 */
table.calendar {
 padding: 5px;
 border: solid 1px black;
}

table.calendar td,
table.calendar th {
 text-align: center;
}
/* template=hatena-module */
/* div.hatena-modulebody内にtable.calendar */

/* taglist */
/* div.taglist */

/* template=hatena-module */
/* div.hatena-modulebody内にul.taglist */

/* for me */
div.hatena-module {
 margin: 5px 0px;
 text-align:right;
}

div.hatena-module div.hatena-moduletitle {
 display: none;
}

div.hatena-module div.hatena-modulebody {
 margin: 3px;
}

div.hatena-module input {
 border: 1px solid black;
}

/* for me */
div.expl {
 margin: 5px 0px;
 text-align: left;
}

div.expl h2 {
 font-size: 100%;
}

div.expl p {
 font-size: 90%;
}

div.main, div.pager {
 clear: both;
}
トラックバック - http://css.g.hatena.ne.jp/smoking186/20050930

2005-09-17

[] お勧めはしないが、どうしようもなく便利な

* {
 box-sizing: content-box;
}

はてなダイアリーやグループだと、Operaがquirkモードで動きやがるので、box-sizingだけでも直して、後はIE向けにアンダースコアハックを使うという手段。

いや、まぁこれ指定した場合は、

div.hatena-body {
 padding: 2%;
 width: 100%; /* for IE */
}

body > div.hatena-body {
 width: 96%; /* for Mozilla, Opera, Safari */
}

とかした方が楽じゃない? という話もありますが。

あ、あとこれを使わないと、Operaでnegative marginが使えませんでした、そういえば(過去の経験)。

[] display: marker;のテスト

そういえばこんな属性値あったなと思って確かめてみる。

『詳解HTML&XHTML&CSS辞典』 p. 433

marker
この値は、ブロックレベル要素の疑似要素(要素before・要素after)にのみ適用され、その生成内容がリストのマーカーであることを宣言します。

同書 p.468

適用要素

before疑似要素・after疑似要素・displayプロパティの値が「marker」の要素

p.marker

ってことは、

p.marker:before {
 content: "A";
 display: marker;
}

とかして使うの?

けどそれって、

p.marker {
 display: list-item;
}

で良い気がする。これによりリストのマーカーとして文字を使うという目的なのだろうか。仕様書を調べてみよう。

ぎゃぁ(;´Д`)

marker

あるボックスの前もしくは後に生成内容としてマーカーを宣言します。この値は,ブロックレベル要素にとり付けた:before,:after疑似要素にのみ用いるべきであるとされています。その他の要素に適用された場合,この値は 'inline' として扱われます。

【注】:この値は,CSS2.1(CSS2 の改定版)において削除される予定です。この display: marker; の役割は,CSS3 module: Lists で新しく考案されている The ::marker pseudo-elementによって置き換えられることになっているため,事実上 obsolete です。

視覚整形モデル - CSS2 リファレンス

[] insの実験

如何に格好良くinsを実現するか。

昔これでテーマ書いた覚えがあるので検索してみよう。

pタグの挿入を止めてinsを書く方法。

長文を挿入する際はこちらを利用。

まとめて削除。

長文を削除する際はこちらを利用。

挿入前←ここから追記・ここまで追記→とp中に挿入。

削除前←ここから削除・ここまで削除→とp中で削除。

from 06 Pict

.section ins {
	display: block;
	border: 2px solid #cccccc;
	margin: 1em;
	padding: 5px;
	text-decoration: none;
}

.section ins:before {
 	display: block;
	margin: 0px -5px 0px -5px;
	padding: 0px 5px 0px 5px;
	content: "ins at " attr(datetime);
	text-align: right;
	border-bottom: 1px dashed #cccccc;
}

.section * ins {
	display: inline;
	border: 0px;
	text-decoration: underline;
}

.section * ins:before {
	display: none;
}

.section * ins:after {
	display: inline;
	content: "(ins at " attr(datetime) ")";
}

.section del:after {
	display: inline;
	content: "(del at " attr(datetime) ")";
}

あー、あるやん。

トラックバック - http://css.g.hatena.ne.jp/smoking186/20050917