「margin」を含む日記 RSS

はてなキーワード: marginとは

2019-01-10

会社webデザイナー無能すぎてヤバいwwww

去年の冬に転職したweb系のプログラマー

今の会社webデザイナー無能すぎてしんどい

以下愚痴

1. photoshopwebデザインすんな!

photoshopで作ったpsdのwebデザインを渡されて、フロントエンド担当HTML/CSSコーディングしてるんだけどどうなのこれ?

なんでphotoshop使うの?webページ作るんでしょ?最初からHTMLで書けよ?

いや分かるよ

ラフの段階でphotoshopでササっと書いた方が客と調整しやすいもんな

でも最終的にはHTMLで出すんだからデザイナーHTML/CSS書いて来いよ

それをなんか知らないけど、普段使わねーphotoshop開いてルーラー出して、

「ここと、ここのボックスは10pxだからmarginを...」

「ここは、webフォントの〇〇を使おう」

とかフロントエンド担当相談してんのw

バカなの?死ぬの?

最初からデザイナーHTMLで書けよ

UIライブラリフレームワークも充実してんだからphotoshopで大枠を調整したら、ササっと書けよ自分でよ

photoshopで書かれた夢いっぱいキラキラデザインの実現可能性をなんでこっちで検証しなきゃいけねーんだよボケ

今の会社含めて2社しか経験してないので、一般的かどうかは判断できないが、前職ではHTML/CSSまでデザイナーの人が書いてたぞ

(zeplinが吐く糞みたいなコードじゃなくて、ちゃん構造化された綺麗なHTMLね)

本来はこうでしょ?

「このボックス内の文字が溢れたらどうなりますか?」

「このボタンマウスオーバーしたとき画像下さいとか」

レイヤーマウスオーバー時の画像保存してあります」(←ふざけんなww

かいう下らんやり取りを止めろカスども

photoshop画像編集ソフトであって、webページ作成ソフトじゃねーんだよ!そんな事も分かんねーのか?

2. webデザイナーphotoshop職人HTML/CSS全然理解してない

webデザイナーだよね?あんたらは?

webが頭についてるならwebの事ちっとは理解すべきなんじゃねーの?

「いやCSSよく分かんないんでじゃねーよ!」

Reactを書けとは言わない

でもせめて、CSSフレームワーク, flexbox, grid layoutとかは知ってるべきでしょ?

photoshop簡単に作れてもwebページだと大変なことだってあるんだバー

psd渡してあとは頑張ってね!でよくwebデザイナー名乗ってるなw

webのこと分からないwebデザイナーなんてマジで笑いごとで済まねーぞw

建築デザイナーの人が大工までやりなさいと言ってるんじゃない

でも建築基準くらいは知っておくべきでしょ?

webデザイナーならHTML/CSSを最低限知っておくべきなんじゃねーの?

である程度分かるなら、photoshopで頑張って画像作る手間でHTMLを書けよと言いたいんだよ

いい加減目を覚ませ!!!

HTML/CSS分かんねーなら今すぐudemy勉強してこいハゲ

3. そもそもデザイン要るの?

そもそも何でもかんでもwebページをポスターみたいに着飾るんじゃねーよ

巷に溢れてるキラキラデザインwebページ糞使いにくいぞ

ランディングページならともかく、よく使うwebアプリを着飾るんじゃねーよ、開発もしにくい、使いにくいしでまったく良いこと無い

パララックスもモーダルウィンドウもうぜーとしか思わんww

大抵Craigslist, Hacker News くらいのデザインで十分なんだよ

それを何でもかんでもデザイン所為にして、下らん工数使って何がしたいんだか

UI/UXを考えたデザイン変更じゃなくて、糞webデザイナーのオシャレ(笑)に付き合うくらいだったら、もっと他に開発すべきことが無いか考えろ

そのwebサイトが当たらない理由デザイン所為にするんじゃねーボケカス

まとめ

webデザイナーカスだったけど、前職に比べて給与は上がったから、しばらくは居る

でもいつかこいつらを首にしたい

あとこいつらの肩書Webコラ画像職人に変えたい

2017-11-17

anond:20171116210216

そのbyby more thanっていうセットフレーズの一部

https://eow.alc.co.jp/search?q=by+more+than

もっと詳しく言うなら

https://en.oxforddictionaries.com/definition/by

3 Indicating the amount or size of a margin.

‘the raising of VAT by 2.5%’

2015-09-06

Vim不思議なインデント

int
main()
{
printf("Hello Masuda!\n");
return 0;
}

コピペしたらインデント消えたわ…gg=Gでインデントなおさんと。

	int
main()
{
	printf("Hello Masuda!\n");
	return 0;
}

そうじゃない…そうじゃないんだ…。

BSDスタイルでは戻り値の型の前にインデント入れたら駄目なので困った。

" tN    Indent a function return type declaration N characters from the
"       margin.  (default 'shiftwidth').
" 
" 	cino=		    cino=t0		cino=t7 >
" 	      int	      int			 int
" 	  func()	      func()		  func()

cinoptionsでこれを設定すれば解決できるのは知ってる。

だけどデフォルトでインデント入れるのはどういう事情があってのことなんだろう。

2014-09-25

http://anond.hatelabo.jp/20140925164738

#pics>div {
display: inline-block;
float: none!important;
margin: auto;
}

↑の定義入れてから出直しこいやタンナス

(大なり記号増田仕様エスケープされるだろうから適当解釈しろよ!)

2014-06-07

増田広告向けCSS

Stylish」用にちまちまと「要素を検証」してこうした

div.afc,
div#afc_footer,
div.google_afc_blocklink
    {
        background:#e9e9e9;
        font-size:100%;
        padding:0;
        border:solid 1px #e9e9e9;
    }
div.afc div.google_ads_by,
div.afc div.google_afc_blocklink li
    {
        margin:0;padding:0;
    }

自分しか効かないCSSなんだから自分は絶対に広告クリックしないのだから

div.afc,
div#afc_footer,
div.google_afc_blocklink
    {
        display:none;
    }

これでいいや

参考

はてなダイアリー無料版の広告に向くスタイルシート - Imamuraの日記

http://d.hatena.ne.jp/Imamura/20140528/hatenaad

2013-01-09

まりに使いにくいかFirefoxアドオンStylishユーザーCSS

http://anond.hatelabo.jp/20130108203837

まりに使いにくいかFirefoxアドオンStylishユーザーCSS

@-moz-document url-prefix("http://b.hatena.ne.jp/"){

.ad-head-text{display:none!important;}

.ad-unit{display:none!important;}

.thumbnail{display:none!important;}

.entry-data{display:none!important;}

.entry-contents blockquote{display:none!important;}

.shim-elem-for-height{display:none!important;}

.entry-meta{display:none!important;}

.entry-comment{display:none!important;}

.entry-unit{width:100%!important;margin:0!important;}

.entry-vertical-3,.entry-vertical-4{background:none!important;}

.entry-contents{padding:0!important;}

ul.users{height:22px!important;border-top:1px solid!important;}

.users span{font-size:12px!important;font-weight:bold!important;}

}

他のブラウザのは誰か書いてくれるだろう

はてなブックマークユーザースタイルシート

http://b.hatena.ne.jp/entrylist

のページ限定でsafariしか確認してません。

以下をテキストファイルコピペしてhatena.cssとかで保存。

safariだと環境設定の詳細のスタイルシートで選択すればマシになります

ちょっと更新

/*********************************************************************************/

#container #main .box-wrap div ul.entry-vertical-4,

#container #main .box-wrap div ul.entry-vertical-3 {

background: none !important;

}

#container #main .box-wrap div ul.entry-vertical-3 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-4 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-3 li.ad-unit,

#container #main .box-wrap div ul.entry-vertical-4 li.ad-unit {

display: block !important;

}

#container #main .box-wrap div ul.entry-vertical-4 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-4 li.ad-unit,

#container #main .box-wrap div ul.entry-vertical-3 li.entry-unit,

#container #main .box-wrap div ul.entry-vertical-3 li.ad-unit {

width: auto !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents {

border: none !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents a.thumbnail,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents a.thumbnail {

float: right !important;

padding: 0 0 0 20px !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents a.thumbnail img,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents a.thumbnail img {

max-width: 180px !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents h3,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents h3 {

clear: none !important;

}

#container #main .box-wrap div ul.entry-vertical-4 div.entry-contents h3,

#container #main .box-wrap div ul.entry-vertical-3 div.entry-contents h3 {

font-size: 20px !important;

}

#container #main .box-wrap div ul.entry-vertical-4 ul.entry-meta,

#container #main .box-wrap div ul.entry-vertical-3 ul.entry-meta {

border: none !important;

border-top: 1px dotted #ECECEC !important;

clear: both !important;

}

#container #main .box-wrap div ul.entry-vertical-4 ul.entry-meta li.tag,

#container #main .box-wrap div ul.entry-vertical-3 ul.entry-meta li.tag {

clear: none !important;

margin: 0 0 0 15px !important;

}

/*********************************************************************************/

http://anond.hatelabo.jp/20130108203837

2012-05-12

[]音ゲー情報サイト管理人によるゲーム解析音源掲載事件 【総合まとめ】

【お知らせ】

事件当事者(TA2)への愚痴を掲載をしてしまいました。申し訳ございませんでした。また、一行掲示板におけるTA2氏の発言をまとめる予定です。

纏めwikiができたのでリンクを貼っておきます

以降、書くべきことは全て↓のwikiにまとめています

http://wikiwiki.jp/wanapa/

なお、これ以外にも特定サークルへの中傷を行なっていた模様です。私が過去にまとめた記事が証拠となり嬉しい限りです。

http://henkaya.blog.fc2.com/blog-entry-15.html

(WEB魚拓http://megalodon.jp/2012-0602-1456-56/henkaya.blog.fc2.com/blog-entry-15.html )

追記:6月4日午後一時ごろの記事主は私じゃないです。

簡潔な経緯

音楽ゲーム情報サイト「ぷろとらどっとこむ」(http://purotora.com)の管理人:森野聖樹(←ハンドルネーム。以降TA2)氏が、

初心者向けに、音楽ゲームBeatmaniaIIDXシリーズ譜面攻略法を掲載した。

譜面画像と音パターンを用意していたが、その音パターン内に、

PS2ゲームソフトbeatmaniaIIDXシリーズ(DJTROOPERS もしくは EMPRESS)」内の"Wanna Party?"という曲のデータを解析し抜き出し、音源を使用している疑惑5/12(土)夜中に発覚。一行掲示板による追求後、

TA2氏がこれを認め、合法な音源差し替えたが、返答の遅れ、口調、言い訳掲示板の頻繁なログ消失が不満を買い、TA2氏への抗議が続いたが、

更新停止二日後にサイト更新再開(アフィリエイト継続)。開いた広告スペースに小さくお詫び文を載せ、同月30日にレイアウト変更と言いつつ謝罪文こっそり削除。
投稿IPの表示+批判意見発言者IP制限 (NGワード設定は不明)にて批判の意見を抑えこみつつサイト運営を続けている。

なお、この解析事件によるIP表示の書き込みでTA2氏のIPが判明。同人サークル「状態変家」に対し、ネット上の掲示板誹謗中傷を行なっていたIPと一致。

http://henkaya.blog.fc2.com/blog-entry-15.html

これを問い詰めると、TA2氏は誹謗中傷したことを認めた(謝罪しておらず態度が問題)。今回の解析事件以外にも、同人界隈でトラブルを起こしていたことが明らかになった。

「ぷろとらどっとこむ」とは何か。

ネタ集め・まとめサイト/創作サイト 兼 beatmaniaIIDX情報まとめサイト

初期の頃は音楽ゲームニュースを少し紹介するサイトだったが、IIDX新作稼働初期に一行掲示板情報を集めていたところ、ゲーセン店員やプレイヤーサイト訪問が増え、規模が拡大し音ゲー情報サイトとして有名になった。ガラケーでも見やす携帯用まとめページがあるのが特徴。

この管理人TA2氏主催同人サークル参加者も増え、同人イベントでも有名になっていった。

TA2氏の存在IIDXスタッフも知っており、

作曲担当のDJYOSHITAKA氏に自分同人CDを持たせ写真を撮ることに成功していた。

スタッフからは体調を気遣われることもあった。

また、ポップンミュージック新作ロケテアンケートの「よく使用するサイト」の質問
はちま起稿、オレ的ゲーム速報@刃 とともに、「ぷろとらどっとこむ」の項目が設けられていた。そのくらい有名な音ゲー情報サイトになっていた。

今回の事件、何が問題か?

  1. TA2の言動は目に余るものが多く、音ゲー情報まとめ役として、同人音楽同人絵のクリエイターを束ねている同人サークルTOPとしてふさわしくない。
  2. 自分立場を把握した謝罪文を出しておらず、信頼を損ねたことについて把握していない
  3. 一日程度の更新停止のみで、サイト運営を再開することにより、アフィリエイトによる広告収入を得ており、反省の意思が見られない
  4. サイト掲示板にて、批判的な意見を書き込んだIP規制していることから、今後の改善が見込めないのではないか。なお、この批判意見は、1~3が原因であるものが多い。
  5. 十分な反省の態度が見られないこの状態で同人イベントに参加し続けることで同人界隈に更なる悪影響を及ぼす恐れがある。

ログ

1:http://anond.hatelabo.jp/20120519032040

2:http://anond.hatelabo.jp/20120512131058

3:http://anond.hatelabo.jp/20120512130433

4:http://anond.hatelabo.jp/20120512230254

隔離用1行掲示板設置後 http://anond.hatelabo.jp/20120512223315

↑の魚拓 http://megalodon.jp/2012-0513-0229-30/purotora.com/cgi-bin/4-bbs/view.cgi?st=1&to=800

発覚直後の魚拓、生ログHTML

http://t.co/sPcPDkWo

http://www1.axfc.net/uploader/He/so/363116

一行掲示板の問題

ログ復元不可レベル消失が数回発生

意図的に消したのであれば、掲示板炎上を抑えこんでいること

うっかり消去したのであれば、バックアップ設置の怠り

CGIエラーで消えるのであれば、このCGIプログラマーミス

責任として問われる。頻繁に消える為、2chネットwatch板住人によりWEB魚拓が頻繁に取られていたようだ。

投稿IPの表示

TOPページからは書き込みIDが見えない、投稿件数を見るか投稿して中に入らないとIPが見れない。

契約者固有ID表示

携帯電話使用者契約者固有IDが見える状態にあった。

395 爆音名前が聞こえません sage New! 2012/05/18(金) 22:20:03.84 ID:jKX6qZ860

対処法書きに言ったらNGされたんだけど。洒落にならんぞ

 

以下書き込みたかった全文

端末固有IDをそのまま表示してしまったことは、冗談にならないほど深刻なセキュリティ事故です。既に悪意を持った第三者が端末固有情報を利用している可能性が否定できません。

セキュリティ事故被害者に、問題が起こったことを周知し、対処してもらう必要があります

また運悪く被害者となってしまった方が、あまりこちらのサイトに来訪されない方であった場合、伝わらない可能性があるので、最低半年程度、事故が起こった事実を掲示する必要があるかと存じます

被害者の方に対して、対処策を伝えることも重要です。SNSや各種WEBサイトにて、かんたんログインに類する機能を使っていた場合、即刻それを取りやめるよう要請機種変更をし、固有IDを手放すことの奨励

同等機能のをもった機種に変更の必要があるなら、その資金援助やサポートなど、即刻やるべきことがあります。重ね重ね申し上げますが、これはセキュリティ事故です。真摯対応をお願いいたします。

また、TA2氏はこの抗議に対し、

携帯固有ID漏洩したのではないかという指摘について、このIDは、インターネットサービスを利用する際に、常にやりとりされる情報であり、

適切な認証システムを利用される限りはセキュリティ上問題になるという認識はございません。

しかしながら、個人情報漏洩であるという考え方も可能であるため、利用者の方にご不安を与えてしまったことをお詫び申し上げます

と言及しているが・・・

↓証拠のURLです。URL欄に貼り付けてみましょう。

view-source:http://purotora.com/cgi-bin/1-bbs/view.cgi?st=1&to=10

<font size="2">
<form action="/cgi-bin/1-bbs/write.cgi?guid=ON" method="POST" style="margin:0em;">

http://d.hatena.ne.jp/maru_cc/20080331/1206938154

guid=ON という文字をソースに入れることで、ケータイ同意なしに個体識別番号を取得している。

常にやり取りされる情報ではなく、意図的に取得しているようだ。

2011-12-29

Portable electronic equipment battery technology

1, about the trickle charge, rapid charging and stable battery charging algorithm

According to the energy requirements of the final application, a battery may contain up to 4 lithium ion or lithium polymer battery core, its configuration will have a variety of change, at the same time with a mainstream power adapter: direct adapter, USB interface or car charger. Remove the core quantity, core configuration or power adapter type difference, the battery has the same charge characteristics. So they charge algorithm. Lithium ion and li-ion polymer battery best charging algorithm can divided into three phases: trickle charge, rapid charging and stable charge.

trickle charge. For depth discharge core to charge. When core voltage in less than about 2.8 V, use a constant 0.1 C of the current charging for it.

fast charging. Core voltage trickle charge more than the threshold, improve the charging current rapid charging. Fast charging current should be lower than 1.0 C.

stable voltage. In the fast charging process, once the core 4.2 V voltage, stable voltage phase began. This is through the minimum charge current or timer or of the two joint to interrupt charge. When the minimum current below about 0.07 C, can interrupt charge. The timer is to rely on a default to trigger the timer interrupt.

Advanced battery charger with additional security function normally. For example, if the core temperature exceeds the given window, usually 0 ℃-45 ℃, charge will be suspended.

Remove some very low-end equipment, now on the market/li-ion polymer lithium ion battery solutions are integrated with the outer components or, in accordance with the characteristics of the charging to charge, this is not just to get better effect charge, but also for safety.

lithium ion/polymer battery charge is an example of applications-double input 1.2 A lithium battery charger LTC4097

LTC4097 can be used to exchange adapter or USB power supply for single quarter/polymer lithium ion battery. Figure 1 for double input 1.2 A lithium battery charger LTC4097 schemes. It USES constant current/constant voltage algorithm charging, from exchange adapter power charge, programmable filling up to 1.2 electric current A, and with USB power can be as high as 1 A, at the same time, automatic detection in each input voltage whether there. This device also provide USB the current limit. Applications include PDA, MP3 players, digital camera, light portable medical and test equipment and big color cellular phone. The performance characteristics: no external micro controller charging termination; The input power automatic detection and choice; Through the resistance from the exchange of charging adapter input can be as high as 1.2 A programming charge current; The resistance of programmable USB charging current is up to 1 A; 100% or 20% USB charging current set; The input power output and existing bias NTC (VNTC) pin as a 120 mA drive ability; NTC thermistors input (NTC) pin for temperature qualified charged; Pre-settings battery voltage with floating plus or minus 0.6% accuracy; Thermal regulation maximize charge rate and free hot air LTC4097 can be used to exchange adapter or USB power supply for single quarter/polymer lithium ion battery. The use of constant current/constant voltage algorithm charging, from exchange adapter power charge, programmable filling up to 1.2 electric current A, and with USB power can be as high as 1 A, at the same time, automatic detection in each input voltage whether there. This device also provide USB the current limit. Applications include PDA, MP3 players, digital camera, light portable medical and test equipment and big color cellular phone.

2, lithium ion/polymer battery scheme

Lithium ion/polymer battery charge scheme for different number of core, core configuration, and power types are different. At present mainly have three main charging scheme: linear, Buck (step-down) switch and SEPIC (booster and step-down) switch.

2.1 linear scheme

When the input voltage in big with the charger with sufficient clearance of core after opening voltage, it is linear scheme, especially 1.0 C fast charging current than 1 A big too much. For example, MP3 players usually only one core, capacity from 700 to 1500 mAh differ, full charge voltage is open 4.2 V. MP3 player power is usually the AC/DC adapter or USB interface, the output is the rule of 5 V; At this time, the linear scheme is the most simple, most charger of the efficiency of the scheme. Figure 2 shows for lithium ion/polymer battery solution linear scheme, basic structure and linear voltage neat device.

linear scheme charger application examples-double input Li + charger and intelligent power source selector MAX8677A

MAX8677A is double input USB/AC adapter linear charger, built-in Smart Power Selector, used for rechargeable single quarter by Li + batteries portable devices. The charger integration of the battery and the external power source and load switch charging all the power switch, so that no external MOSFET. MAX8677A ideal used in portable devices, such as smart phones, PDA, portable media players, GPS navigation equipment, digital camera, and digital cameras.

MAX8677A can work in independent USB and the power input AC adapter or two input either one of the input. When connecting external power supply, intelligent power source selector allows the system not connect battery or can and depth discharge battery connection. Intelligent power source selector will automatically switch to the battery system load, use the system did not use the input power supply parts for battery, make full use of limited USB and adapter power supply input. All the needed electric current detection circuit, including the integration of the power switch, all integration in the piece. DC input current highest limit can be adjusted to 2 A and DC and USB input all can support 100 mA, 500 mA, and USB hung mode. Charge current can be adjusted to as high as 1.5 A, thus support wide range of battery capacitive. Other features include MAX8677A thermal regulation, over-voltage protection, charging status and fault output, power supply good surveillance, battery thermistors surveillance, and charging timer. MAX8677A using save a space, hot enhanced, 4 mm x 4 mm, 24 of the pins TQFN encapsulation, regulations, work in exceptional temperature range (40 ~ + 85 ℃).

2.2 Buck (step-down) switch scheme

When A 1.0 C of the charging current more than 1 A, or the input voltage of the core than with high voltage open many, Buck or step-down plan is A better choice. For example, based on the hard drive in the PMP, often use single core lithium ion battery, the full of open is 4.2 V voltage, capacity from 1200 to 2400 mAh range. And now PMP is usually use the car kit to charge, its output voltage in a 9 V to 16 between V. In the input voltage and battery voltage is the voltage difference between high (minimum 4.8 V) will make linear scheme lowers efficiency. This kind of low efficiency, plus more than 1.2 A 1 C fast charging electric current, have serious heat dissipation problems. To avoid this kind of situation, will the Buck scheme. Figure 3 for lithium ion/polymer battery charger scheme Buck diagram, basic structure with Buck (step-down) switching voltage regulators completely the same.

2.3 SEPIC (booster and step-down) switch scheme

In some use of three or four lithium ion/polymer core series equipments, charger of the input voltage is not always greater than the battery voltage. For example, laptop computers use 3 core lithium ion battery, full charge voltage is open 12.6 V (4.2 V x3), capacity is 1800 mAh to 3600 mAh from. Power supply input or output voltage is 1 6 V AC/DC adapter, or is car kit, the output voltage in a 9 V to 16 between V. Apparently, the linear and Buck solutions are not for this group of batteries. This is about to use SEPIC scheme, it can in the output voltage is higher than when the battery voltage, can be in the output voltage less than when the battery.

3, and power detection algorithm is proposed

Many portable products use voltage measurements to estimate the remaining battery power, but the battery voltage and surplus power relationship but will with the discharge rate, temperature and battery aging degree of change, make this kind of method can top 50% margin of error. The market for longer to use product demand unceasingly strengthens, so the system design personnel need more accurate solution. Use capacity check plan come to measure battery or consumption of electricity, will be in a wide range of application power to provide more accurate estimate of the battery power.

3.1 power detection algorithm is one of the examples of application, function complete list, double the battery portable battery application design

power detection principle. Good capacity check plan at least to have battery voltage, temperature and battery electric current, measuring method; A micro 9 a; And a set of and the verification of the punishment power detection algorithm is proposed. Bq2650x and bq27x00 is full capacity check program function, with a measuring voltage and temperature of the digital converter (ADC) and a measuring electric current and charging sensor the asp. These capacity check plan also has a microprocessor, is responsible for the implementation of the Texas instruments power detection algorithm is proposed. The algorithm can compensate the lithium ion battery life.low self-discharge, aging, the temperature and discharge rate, and other factors. Chip embedded microprocessor as host system processor save these calculation burden. Capacity check program can provide remaining power state information, bq27x00 series products also offer surplus can Run Time (Run Time to Empty) host may at any Time to capacity check plan these information query, then LED indicator light through or displays will inform the user battery. Capacity check meter is very easy to use, the system processor need only configuration 12 C or HDQ communication drive can.

The battery circuit description. Figure 4 (a) can be used for identification of IC functions with typical application circuit batteries. According to the use of IC testing program is different, the battery needs to have at least three to four outside the terminal.

VCC and BAT pins will even to the battery voltage, so that for, C power and the battery voltage measurement. The battery is connected a grounding resistance smaller detection resistors, let capacity check meter high impedance SRP and SRN input can monitor sensor resistance on both ends of the voltage. Through testing the current flows through a resistor can be used to judge the battery or release the amount of electricity. Designers choose detection resistance value must be considered when resistance on both ends of the voltage can't more than 100 mV, low resistance may be more hours in current errors. Circuit board layout must ensure that SRP and SRN to testing from as close as possible to the connection of the resistor sensor resistance end; In other words, they should be the Kelvin attachment.

HDQ pin need external and resistors, this resistance should be located the host or the main application, such capacity check plan to the battery and portable devices when sleep function enable connection broken. Advice and resistance choose 10 k Ω.

battery identification. A low cost WeiMao batteries are getting more and more serious, these cells may not contain OEM requirements of security protection circuit. So, genuine battery may contain figure 4 (a) shows the appraisal circuit. When to identify the battery, the host to contain IC (bq26150, the function is cyclic redundancy check (CRC)) issued the battery packs a ask value (challenge), the CRC will contain battery according to this inquiry value and, in the building of the IC in CRC polynomial calculation the CRC value. CRC is based on the host of command and IC secret in the query of the definition of the CRC polynomial completed, the host in CRC values calculated with the calculation result of well battery comparison to identify the appraisal success.

Once the battery through the appraisal, bq26150 will issue commands to ensure that the host and quantity test plan of material lines between normal communication. When the battery connection interruption or to connect, the whole the identification process will be repeated again.

double the battery application. Figure 4 (b) for use bq26500 support double the typical application of lithium ion battery circuit. In order to support more battery, and this circuit is adding a adjustable regulators. Capacity check millions of BAT pin and the bottom of a battery anode linked to complete the variable voltage measurement of the battery.

Host to be able to read capacity check plan of variable voltage measurement battery, to make sure the end of discharging threshold and charging terminate threshold. As for the remaining state power (RemainingStateofCapacity), do not need to read can use directly.

The above bq2650x and bq27x00 etc capacity check plan provides the battery manufacturer a simple to use options, this scheme L [just measuring battery voltage to be precise, so these capacity check plan can be applied to various battery framework, and can support the battery identification and double the battery application '

3.2 power detection algorithm is an example of applications another, can apply to all kinds of general voltmeter new IC.

Today's many manufacturers can provide a variety of voltmeter IC,, the user can choose the suitable function device, to optimize the product price. Use voltmeter measurement of storage battery parameters, the separate architecture allows users in the host custom power measurement algorithm within. Eliminating embedded processor battery cost. On this to Dallase semicconductor company called cases of DS2762 chip for typical analysis. A new separate voltmeter IC, its structure see chart 5 (a) below.

DS2762 application characteristics

DS2762 is a single quarter of lithium battery voltmeter and protection circuit, integrated into a tiny 2.46 mm x 2.74 mm inversion of packaging. Due to internal integration for power detection of high precise resistance, this device is very save a space. It is the small size and incomparable high level of integration, for mobile phone battery and other similar handheld products, such as PDA, etc, are all very ideal. Integrated protection circuit continuously monitoring the battery voltage, over voltage and flow fault (charging or discharge period). Different from the independent protection IC, DS2762 allow main processor surveillance/control protection FET conduction state, such, can DS2762 through the protection of the power system and the control circuit implementation. DS2762 can also charge a battery consumption has depth, when the battery voltage within three V, provide a limit of the charging current recovery path.

DS2762 accurate monitoring battery current, voltage and temperature, the dynamic range and resolution of common satisfy any mobile communication product testing standards. The measurement of current for internally generated when the integral, realize the power measurement. Through the real-time, continuous automatic disorders correct, the precision of power measurement can be increased. The built-in measuring resistance due to eliminate manufacturing process and temperature and cause resistance change, further improve the precision of the voltmeter. Important data stored in 32 bytes, can add the lock EEPROM; 16 bytes of SRAM are used to keep dynamic data. And DS2762 all communication all through the 1-Wire, more communication interface node, minimize the battery and the connection to the host. Its main features for; Single quarter of lithium battery protector; High precision current (power measurement), voltage and temperature measurement; Optional integrated 25 m Ω measuring resistance, each DS2762 after fine-tuning alone; 0 V battery restore charge; 32 bytes can lock EEPROM, 16 bytes SRAM, 64 a ROM;

1-Wire, node, digital communication interface; Support more battery power management, and through the protection system control FET power; Dormancy mode power supply current only 2 µ A (most); Work mode power supply current for 90 µ A (most); 2.46 mm x 2.74 mm inversion of packaging or 16 feet SSOP package led, and both are can choose with or without detection resistance; After has with e

2011-04-05

stylishで新UIはてブエントリーページのサイドバーを下に持ってくる

http://b.hatena.ne.jp/entry/hatena.g.hatena.ne.jp/hatenabookmark/20110405/1301981564

https://addons.mozilla.org/ja/firefox/addon/stylish/

見た目だけ変えてみたぞ。

あんまりいいもんじゃないと思うけど、サイドバーがなくなったらどんな感じになるか体験してみるといいんじゃないかな。

まあどんなもんかやってみて。叩き台、印象の変化の確認。

あとおまけでスター順の部分は消しておいた。#scored-bookmarksってあるだろ、そこじゃ。

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://b.hatena.ne.jp/entry/") {

#container .curvebox-body {
  padding-right:20px !important;
}
#main, #sidebar {
  width:100% !important;
  float:none !important;
}
#sidebar {
  margin-left:0 !important;
}

#scored-bookmarks{
  display:none !important;
}

}

じゃあの。

二版

http://b.hatena.ne.jp/entry/lifehack2ch.livedoor.biz/archives/51229298.html

うりゃ!

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("http://b.hatena.ne.jp/entry/") {

#container .curvebox-body {
  padding-right:20px !important;
}
#main, #sidebar {
  width:100% !important;
  float:none !important;
}
#sidebar {
  margin-left:0 !important;
}

#scored-bookmarks{
  display:none !important;
}


.comment {
  display:inline !important;
}
.bookmark-list .profile-image {
  width:16px!important;
  height:16px!important;
  margin-left:-24px!important;
}
.user-navigator.user-navigator-large {
  width:34px!important;
  height:20px!important;
}
.bookmark-list li {padding-left:32px!important;}


}

2009-11-09

http://anond.hatelabo.jp/20091109174350

あとリフレ派なんてものはありませんよ。リフレ政策をバカにする人たちがつけたレッテルだと思っています。

私が言ってるのは、http://wiki.livedoor.jp/reflation/ にリンクしてるバナーです。リフレ派というのは、バカにする用語なんですか?いちご等で自称していたのでそうは思いませんでした。申し訳ない。

それでは本題。

Q1. デフレはよくないのではないか?

A1. デフレインフレもよくない。

まず最初からおかしい。マイルドインフレが一番望ましいというのは世界経済学者のほとんどが賛成する。たしか、そういう統計がどこかにあった。

 デフレインフレもよくない、これは、共通認識です。ただし、どちらかといえば低いインフレのほうがいいと考えている学者が多い。君の指摘は、揚げ足をとってるだけ。「Q1.1緩やかなインフレは悪いことですか? A1.ゼロインフレが好ましいので金融政策でゼロに近づけるべき」 という記述があって、「池田は主流の学者意見が違う」と言える。それでも、1+1=3のような間違えではなく、主流の学者と違う意見を持っているというだけだ。

 また、その場合にも、「たしか、そういう統計がどこかにあった。」いうような指摘は、学者を非難するのにはよろしくない。たとえば、「JEFFREY ROGERS HUMMEL (2007) Econ Journal Watch, 4, 46-59 にMost macroeconomists now favor a low but still positive rate of inflation. という表記がある。だから、池田意見は主要なマクロ経済学者の意見とは異なる」というように、ちゃんと文献をあげるべきだ。

 加えて次のECBHPを見てほしい(これは、Q2にも関係する)。普通中央銀行がかなりゼロインフレに近いインフレ値が好ましいと考えているのがわかる。

Reasons for aiming at below, but close to, 2%

Inflation rates of below, but close to, 2% are low enough for the economy to fully reap the benefits of price stability.

It also underlines the ECB’s commitment to

中略

# take into account the possibility of HICP inflation slightly overstating true inflation as a result of a small but positive bias in the measurement of price level changes using the HICP

http://www.ecb.europa.eu/mopo/strategy/pricestab/html/index.en.html

 以上のように、ヨーロッパ中央銀行は、HICP(Harmonised Index of Consumer Prices )で2%以下かつ2%に近いHICPを誘導目標としている。しかもHICPは、少量のポジティブバイアス(実際のインフレ値より少し多めにでる)性質がある。だから、ECB目標としているマイルドインフレは、かなりゼロインフレに近い。

Q2. 日銀はいくらでも紙幣印刷できるのだから、インフレにできるのでは?

A2. ゼロ金利状態では貨幣需要が飽和しているので、中央銀行マネタリーベースを増やしても銀行の貸し出しが増えず、市中に流通するマネーストックは増えない。

はい。これもおかしい。いわゆるバーナンキ背理法を理解していない。

 まず、バーナンキ背理法は、日本ネット社会に広がったスラングである。普通の「(経済)学部生が習うような」教科書に載ってるようなものではないし、(世界)標準の経済学者が使う用語ではない。バーナンキは、彼の師匠であるフリードマン敬愛をこめて、お金を刷ってヘリコプターで撒けばインフレになると言っただけである。それを日本人が変な名前を付けた。これは、無限お金を刷って(金融政策)撒けば(財政政策)、いつか・どこかで・なんらかの規模の物価上昇が高確率でおきるであろうとしか言えない。ヘリコプターマネーをすれば、適正な物価が保てるというものではない。

 それは、上記したECBHPにも見られる

provide an adequate margin to avoid the risks of deflation. Having such a safety margin against deflation is important because nominal interest rates cannot fall below zero. In a deflationary environment monetary policy may thus not be able to sufficiently stimulate aggregate demand by using its interest rate instrument. This makes it more difficult for monetary policy to fight deflation than to fight inflation.

 ヨーロッパ中央銀行ですら、「デフレ時には、金融政策で総需要の刺激ができなくなり、デフレに立ち向かえなくなる」と言っている。デフレ時に、金融政策(マネタリーベースを増や)しても、デフレ克服は難しいというのは、池田日銀だけじゃなく少なくてもヨーロッパ中央銀行意見でもある。

 また、「ゼロ金利状態では貨幣需要が飽和しているので、中央銀行マネタリーベースを増やしても銀行の貸し出しが増えず、市中に流通するマネーストックは増えない。」というのは、おそらく池田が嫌いなケインズ学派の流動性の罠という考え方であり、教科書に載っている。

2009-05-18

http://anond.hatelabo.jp/20090518113828

改行を行区切り(BR要素)じゃなくて段落区切り(P要素)として認識するから。ユーザスタイルシートでP{margin: 0 !important}にすれば空かなくなるよ。

2008-09-05

Google chromeブロックレベル要素の高さを揃える話

自分用にメモ

padding-bottom: 32768px;
margin-bottom: -32768px;

これで高さ揃えるってのが去年の10月頃に出てたと思うんだけど、これやるとGoogle Chrome で背景画像が正しく出ない。

下のページ見てもらうと分かるんだけど、サイドバーの背景が出てないんだよね。

http://www.linkthink.co.jp/contact/

試してみたら、色なら出ることがわかった。

背景「画像」がダメなんだ。背景「色」なら敷ける。

仕事で使ったこと無くて良かった。

2008-08-10

Firefoxテキストブラウザ化するcss作った【黒画面】【コンソール】

2008.9.28 12:53 追記



★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★


★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★☆★





_________________ここから下は古い情報▼__________________________________________________




今、自分のブログスクラッチしているので、こちらで。→2008/9/28 スクラッチ完了!BLACK-OUT.CSS公式ページ

作りました

【black-out.css

2008.9.13 23:30 追記

2008.8.10 22:29 追記

エントリは、下記の方におすすめ情報でございます。

  1. Firefoxユーザーである(※他ブラウザでもいけます。が、当エントリでは導入方法を紹介していません。追記したbookmarkletだとoperasafariなどのブラウザでもすぐにお試しできます)
  2. Firefoxのアドオン「stylish」を入れている。もしくは必要なら入れてもいいって人。
  3. mixiPCで使っている場合)右に出てくる鬱陶しいバナーうんざりしていたり、日記コミュにしか興味がない人。
  4. お気に入りのブログが、情報源の質には満足しているが左右のアフィリが鬱陶しい点を残念に思ってる人
  5. コンソール(CUI)が好きな人、シンプルなのが好きな人、ぶっちゃけ文字以外用がないのに飾りの画像とかWEBにいらねーよと思ってる人
  6. カラム、2カラムレイアウトのせいで、目線が左右に移動しないといけないのがイラっとくる人、コードは上から下だけでいいだろって思っている人
  7. リンクテキスト探しがきらいな人、どこがリンクがすぐに知りたい人
  8. 背景色が明るいのが目が疲れる人、壁紙も黒にしちゃってるような人、長時間ネットまくりなんで目が疲れにくいのがいい人
  9. サイトによって極端に読みにくいサイズや色のテキストがあることに普段からイラっときている人

要は、LynxのようなシンプルWeb世界がなればいいのになと思っている方。

そして、どんなサイトでも目線は左右に動かしたくない!スクロールは上下だけで済ませたい!

と、強く考えておられる方むけの情報です。

何を作ったの?

私はテキストブラウザLynxを時々使っているのですが、これでサイトを見るとシンプルに見れるのですごく良いんですよね。

ただ、LynxFlashとか画像が見れないし、マウスが使えないのはいざって時にちょっと不便。

で、Firefoxテキストブラウザ化できないかなあと、ふと思いまして、思いつきで作ってしまいました。

私めもwebデザイナーやっとるんですが、上記のように、昨今のwebデザインなんて普段はなくていいって思っている奴でして。

仕事じゃ3カラムサイトとか作りますが自分はそんなん好きじゃないです。色がサイトごとに違うってのも理解できない。

必要なのは情報であってデザイナーデザインなんてどうでもいいんですよ。

だから2chシンプル画面とか大好きです。

そんな訳で、どんなサイトでもテキストブラウザ状態で閲覧できるFirefox用の拡張cssを作りました(やっつけだけど)。

ただ、ニュースサイト画像が見れないと困る時もあるので、普段は小さなサムネイルで、カーソルを合わせた時だけ大きく表示されるようにしています。

@このcssはコンセプト実証モデルです。思いつきで作ってるのでちょっと問題もあります。フィードバックとか意見など頂けると嬉しいかも。

@将来的には、グリモンjsも組み合わせてもっとコンソールのような感覚ブラウジングできるようにしたい

@(参考用)私のよく見るサイト・・・ニコ動wikipediaスラッシュドットジャパン、2nn.jp2ch)、mixiはてなホッテントリに上がっているブログ各種

ちなみに、こんなん使うな、既にこんないいのあるわいってのをご存知の方は教えてくれると嬉しいです。

それなりに探したのだけど、見当たらなくて・・・だから自作したので。


導入方法について

  1. Firefoxのアドオン「stylish」をインストールします。→ https://addons.mozilla.org/ja/firefox/addon/2108
  2. インストール後、stylishの管理画面を開きます。(Firefoxウィンドウの右下にあるメモ帳っぽいアイコン右クリックスタイルの管理)
  3. スタイルの管理」で「書く」を選択、タイトルはblack-outとかテキトーに入れてください。で、下記のコードを貼付けて保存してください。
  4. どんなサイトでも同じデザイン(コンソールのような画面)になります。なお、いつでもstylishdのメニューでcssの有効/無効は切り替えられますのでご安心を。
  5. テストとして、wikipediaを見てみられると雰囲気が掴めると思います。


/*
 * ----------------------------
 * black-out.css
 * author zamamin.com
 * build 2008.8.09 15:03
 * version 0.0.31
 *  fix @namespaceを書いてなかったので追加
 * ----------------------------
 *
 */

@namespace url(http://www.w3.org/1999/xhtml);

/* 全てのエレメントをリセット */
body,body * {
background-image:none !important;
background-color:#000 !important;
border-color:#333 !important;
text-decoration:none !important;
color:#aaa !important;              /*<- テキスト色 */
font-size:16px !important;          /*<- 文字サイズ */
font-weight:normal !important;
padding:0.15em !important;
margin:0 !important;
line-height:1.25em !important;
text-align:left !important;
text-indent:0 !important;
font-family:Arial,Helvetica,Verdana,'ヒラギノ角ゴPro W3','Hiragino Kaku Gothic Pro',Osaka,'メイリオ',Meiryo,'MS Pゴシック',sans-serif !important; 
float:none !important;
clear:both !important;
position:relative !important;
width:auto  !important;
height:auto  !important;

}

body {
background-color:#000 !important;
padding:0.5em !important;
}

body * p, body * div,
body * h1, body * h2, body * h3, body * h4, body * h5, body * h6{
margin-bottom:0.3em !important;
float:left !important;
clear:both !important;
}


/* リンク色 */
body * a,
body * a *{
color:#a50 !important;
}

/* アクセスみのリンク色 */
body * a:visited{
color:#a50 !important;
}

/* カーソルを合わせた時のリンク色 */
body * a:hover,
body * a:hover *{
color:#0aa !important;
background-color:#609 !important;
}


/* 画像は普段は小さくサムネイル表示。鬱陶しいので薄く表示 */
body * img{
opacity:0.3 !important;
height:15px !important;
width:15px !important;
}

/* 画像マウスカーソルもっていけば原寸サイズになる */
body * img:hover{
opacity:0.9 !important;
height:auto !important;
width:auto !important;
}


button,
input,
select,
option,
textarea{
 color:#f00 !important;
 padding:0.05em !important;
 height:auto !important;
}

/* テーブルのスタイル */
table{
border:none;
}

table td,
table th{
border:none;
border-right:1px dashed #999 !important;
border-bottom:1px dashed #999 !important;
}



/* for 2ch(暫定) */
body * dt{
font-weight:bold !important;
}


/* 二コ動 */
embed#flvplayer{
height:540px !important;
width:952px !important;
}




既知の問題点というか仕様



update

2008-07-07

もん毛スター for firefox

動作未確認。すんげー冗談半分。

// Hatena Monge Star user script
// 2008-07-07
// by masda. (http://anond.hatelabo.jp/20080707043247)

// ==UserScript==
// @name           Hatena Monge Star
// @namespace      http://anond.hatelabo.jp/20080707043247
// @description    Hatena Monge Star
// @include        http://b.hatena.ne.jp/entry/*
// @version        0.3.1
// ==/UserScript==

// deriving from [http://d.hatena.ne.jp/Hamachiya2/20080707/HatenaBlackStar2] ver Firefox
//               [http://f.hatena.ne.jp/hatenacinnamon/20070109001332]
// Thx! and CUTE!


location.href = 'javascript:(' + function() { (function (w) {

	if (typeof(w.Ten) == 'undefined') {
		return;
	}

	HatenaBookmarkMongeStar = new Ten.Class({
		initialize: function(li, entryTitle) {
			var comment = '';
			var tags    = '';
			var commentSpans = Ten.DOM.getElementsByTagAndClassName('span', 'comment', li);
			if (commentSpans.length > 0) {
				comment = Ten.DOM.scrapeText(commentSpans[0]);
			}

	        var tagsSpans = Ten.DOM.getElementsByTagAndClassName('span', 'user-tag', li);
			if (tagsSpans.length > 0) {
				$A(tagsSpans[0].getElementsByTagName('a')).each(function(a) {
					tags += '[' + Ten.DOM.scrapeText(a)+ ']';
				});
			}

			var title = tags + comment;
			if (title.length == 0) {
				var name = Ten.DOM.scrapeText(li.getElementsByTagName('a')[1]);
				title = name + 'のブックマーク';
	        }

			// this.uri   = 'http://b.hatena.ne.jp/keyword/' + li.getElementsByTagName('a')[1].href;
			var u = li.getElementsByTagName('a')[1].href;

			if (u.indexOf('#') == -1) {
				this.uri = u + '#_HatenaMongeStar';
			} else {
				this.uri = u + '_HatenaMongeStar';
			}

			this.title = title + ' - ' + entryTitle;

			this.comment_container = Hatena.Star.EntryLoader.createCommentContainer();
			var target = commentSpans[0] || li;
			target.appendChild(this.comment_container);

			this.star_container = Hatena.Star.EntryLoader.createStarContainer();
			this.star_container.className = 'hatena-star-star-container MongeStarContainer';
			target.appendChild(this.star_container);
		}
	});


	var tryCount = 0;
	var tryMax = 300;
	function waitForHatenaStar() {
//		if (Hatena.Star.EntryLoader.loaded) {
//			Hatena.Star.EntryLoader.loaded = false;
		var s = document.getElementsByClassName('hatena-star-add-button');
		if (s.length) {

			Hatena.Star.EntryLoader.loaded = false;

			Hatena.Star.EntryLoader.loadEntries = function() {
				var entries = [];
				var title = Ten.DOM.scrapeText(Ten.DOM.getElementsByTagAndClassName('span', 'title', document.body)[0]);
				var ul = document.getElementById('bookmarked_user');
				if (ul) {
					$A(ul.getElementsByTagName('li')).each(function(li) {
						if (li.className != 'more') {
							entries.push(new HatenaBookmarkMongeStar(li, title));
						}
					});
				}
				return entries;
			}
			new Hatena.Star.EntryLoader();

		} else {
			if (++tryCount > tryMax) {
				setTimeout(waitForHatenaStar, 400);
			}
		}
	}

	setTimeout(waitForHatenaStar, 500);

})(window); }.toString() + ')()';



GM_addStyle(<><![CDATA[

	.MongeStarContainer {
		margin-left: 4px;
	}

	.MongeStarContainer .hatena-star-add-button {
		background-color: #fc6 ! important;
	}

	.MongeStarContainer a {
		text-decoration: none ! important;
		color: #f80 ! important;
		font-size: 10px;
		position: relative;
	}

	.MongeStarContainer a:before {
		content: '毛';
		font-size:small;
	}

	.MongeStarContainer a .hatena-star-star {
		filter: alpha(opacity=00);
		-moz-opacity:0.00;
		opacity:0.00;

		position: absolute;
		top: 0;
		left: 0;
	}

	.MongeStarContainer .hatena-star-inner-count {
		color: #f90 ! important;
	}

]]></>);

動いたらいいな-

2008-06-06

ちょとsYレならんしょこれは・・?

<ul id="menu">
	<li><a href="#">だらだら</a></li>
	<li><a href="#">だらだら</a></li>
	<li><a href="#">だらだら</a><ul><li>だらだら</li><li>だらだらだらだらだらだら</ul></li>
	<li><a href="#">ゆっくり</a><ul><li>していってね!</li></ul></li>
</ul>

こんな感じのリスト

#menu li{
	display:block;
	float:left;
	margin-left:0;
	padding-left:0;
	margin-right:1em;
	border:1px dashed red;
}
#menu li ul{
	position:absolute;
	display:block;
	margin-left:0;
	padding-left:0;
	border:1px dashed black;
}
#menu li li{
	list-style:none;
	border:0 none;
	float:none;
	width:auto;
}

こんな感じのスタイル書いて

window.onload=function(){
	var li=document.getElementById("menu").childNodes;
	for(var i=0;i<li.length;i++){
		if(li[i].childNodes[1]){
			var submenu=li[i].childNodes[1];
			li[i].onmouseover=function(){
				this.childNodes[1].style.display="block";
			}
			li[i].onmouseout=function(){
				this.childNodes[1].style.display="none";
			}
		}
	}
};

みたいなスクリプト書いたときのIEの挙動がおかしい!助けて!

2008-02-19

はてなブックマーク2ちゃんねるっぽくするユーザースタイルシート

インスパイヤ元 - http://anond.hatelabo.jp/20080219145538

@-moz-document domain("b.hatena.ne.jp") {
  ul#bookmarked_user{
    font-size: 105%;
  }
  #bookmarked_user li{
    list-style-type: decimal;
  }
  #bookmarked_user li:before{
    content: '\FF1A';
  }
  #bookmarked_user .timestamp:before{
    content: '\756A\7D44\306E\9014\4E2D\3067\3059\304C\306F\3066\306A\3067\3059\FF1A ';
    font-size: 110%;
    font-weight: bold;
    color: #008000;
  }
  #bookmarked_user img.hatena-id-icon,
  #bookmarked_user .user-tag,
  #bookmarked_user .hatena-star-comment-container,
  #bookmarked_user .hatena-star-star-container{
    display: none;
  }
  #bookmarked_user a[href*='bookmark-']:before{
    content: 'ID:';
  }
  #bookmarked_user a[href*='bookmark-']:link,
  #bookmarked_user a[href*='bookmark-']:hover{
    color: black;
    text-decoration: none;
  }
  #bookmarked_user a[href*='bookmark-']:hover{
    color: blue;
    text-decoration: underline;
  }
  #bookmarked_user span.comment{
   display: block;
   padding: 8px 1em;
   margin-left: 1.5em;
  }
}

曜日の表記と「2008年02月19日」を「2008/02/19」にしたかったが、方法が分からなかった。あ、あと投稿時間も。Greasemonkey じゃないと無理か?

追記

転載・改変は自由なので、再利用したいとかここを変えた方がより良い、という方は好きに使って結構です。

追記2

はてブちゃんねる

はてなブックマーク2ちゃんねる風に見せるサービスktkr

「はてブちゃんねる」を作った - mayokara memo

2007-12-10

プローチが腐ってるのかもしれないなあ

なんかデーターが見つからない危険性を感じるというか。ファイルがでかいからreadlinesとか使いたくないんだけれども無理かな。

class Id_sorted_data
  def initialize path, avarage_bytes_by_one_data, search_margin
    @f = File.open(path);
    @v = avarage_bytes_by_one_data;
    @cash = {};
    @margin = search_margin;
    return self
  end
  def read number
    if @cash.member?(number)
      return @cash[number];
    end
    @f.seek([(number - @margin) * @v, 0].max);
    for i in 1..20
      @f.readline;
      temp = @f.readline;
      @cash[temp.to_i] = temp;
      if temp.to_i == number
        return @cash[number];
      elsif (number - @margin .. number).include?(temp.to_i)
        return near(number);
      end
      @f.seek((number - temp.to_i - @margin) * (@v * (20 - i) / 20), IO::SEEK_CUR);
    end
  end
  def near number
    for i in 1..@margin
      temp = @f.readline;
      @cash[temp.to_i] = temp;
      if temp.to_i == number
        return @cash[number];
      end
    end
  end
end

2007-10-07

mixiユーザースタイルシート書いてみた

ミクシィデザインにむかついた。

素敵さんが公開されているユーザースタイルシートをつかいたかった

でもニュース日記ランキングは表示したかった

→自分でなんとかするしかないみたいだ・・・

っちゅーことでつくったcss

人様のコードを土台にしてるしブログなんてもってないし

コードは整理されてないしもうやる気は残ってないし

でココで公開してしまえ

ミクシィの表示を横幅720pxの2ペインにします。

主な改造点は

・全体的に行間を狭めた。

・全体的に余白を狭めた。

ニュース天気ランキングを一番下に表示。

・ついでに一番上のmixiロゴも控えめな大きさに。

・一部の背景をうっすーい灰色にした。

・さよならmikly

・絶対位置指定divを排除(全部は無理なので目立つ部分を適当に。)

・グローバルナビとかローカルナビとかのメニュー画像幅調整

広告をほどほどけした。

etc...

使い方は「mixi ユーザースタイルシート」あたりで検索してくれ…

/* mixi User Style Sheet by anon */
/*  based mixi 2pain User StyleSheet (by Shao)  thank you ! */

.emoji{display:none !important}

/* 広告*/
p.adBanner, div#diaryComment div.diaryBottomAd, div.prContents, div.sponsorList01{display:none !important} 
div#adBanner{display:none !important}

/*ローカルナビ*/
#localNavigation ul li{position:static;}
#localNavigation ul.localNaviHome img{width:80px !important;}
#localNavigation ul.localNaviFriend img{width:102px !important;}
a#diaryPullDownButton,a#photoPullDownButton,a#videoPullDownButton, a#reviewPullDownButton{display:none !important}
li.mikly, li.review, li.movie{display:none !important}
li.home img {width:73px !important}

/* infomation */
div.information {line-height:1.1 !important; font-size:12px !important;}
div.information h2{padding-top:10px !important; position:static !important; float:left !important; background-position: 10px 10px !important; }
div.information ul{ line-height:1.1 !important;}
div.information div.contents{ padding-bottom:0px !important; position:static; width: 98%;}
div.information div.contents ul { padding-bottom:0px !important;}

/* delete intro */
#intro{display:none !important}

#bodyContents #newFriendDiary,
#bodyContents #newComment,
#bodyContents #newBbs,
#bodyContents #newVideo,
#bodyContents #newAlbum,
#bodyContents #newPlaylist,
#bodyContents #newReview,
#bodyContents #myUpdate{
padding-bottom:5px !important;
}

div div.contents {line-height:1.1 !important; background:#fcfcfc;}
#newMyDiary div.contents dl.contentsList02{ padding-bottom:1px;}

dl.contentsList01{ line-height:1.5 !important;}
dl.contentsList02{ line-height:1.5 !important;}
ul.entryList01{ line-height: 1.2 !important;}
dl.contentsList01 dd{padding-left:16px; background-position: 0% 0.5em;}

/* 3rd column */
#bodySub{float:left !important;width:100% !important; margin:0;padding:0;}
div#help{display:none !important}
div.prContents, div.adBanner, p.greenpower{display:none !important}
div#miklyContents{display:none !important}
div#prSepecial{display:none !important}
div.bodySubSection {width:224px !important; float:left !important; margin:3px !important;}
div.bodySubSection div.heading01{position:static !important;}
div.bodySubSection a.sectionSize{ position:static !important; margin: -20px 0 0 200px !important; }


/* header*/
#headerArea{ background: none !important; height:91px !important;}
#headerArea h1 a{ padding:5px 0 5px !important;text-align:left !important;width:720px !important;}
#headerArea h1 img {width:93px !important;height:23px !important;}

/* footer */
div#headerArea{width:720px !important}
div#headerArea,div#bodyArea,div#footerArea, div#footerArea p,div#footerArea ul{width:720px !important; }
div#footerArea, div#footerArea p,div#footerArea ul{width:720px !important; overflow:hidden  !important; }
div#footerArea ul.footerNavigation01 li { margin:0 2px !important }

2007-09-28

http://anond.hatelabo.jp/20070928140929

たまにLLでページをつくったりするのだけどデザインがものすごくめんどくさい。

というよりたぶん性にあわないのだとおもう。

一応外部よみこみのcssは読み込む。

が、別にそのサイトのために書いたものではないので、いらないものもゴソっとついている。

レイアウトは、まずまっさきにテーブルで書く。

colspan,rowspanなんてあたりまえだ。

思った位置になんとか表示されているのを確認する。

ちょっと見てくれ悪いなーとおもったら、タグに直接スタイルシートを書き込む。

主にmargin,padding

修正も大変かもしれないが、0から書くのもめんどくさい。

だれかデザインだけやってくれる人いないかな…。

デザイン外注っていくらぐらいするんだろう。

2007-09-19

CSSについてしつもんしつもん

<div id="header"></>
<div id="content">
 <div class="side"></>
 <div id="main"></>
 <div class="side"></>
</>
<div id="footer"></>

こんな感じなんですが、#contentにmargin-bottomをつけたり、#footerにmargin-topをつけたのでは、コンテンツ部とフッター部の間にマージンが空きません。

ですが、#contentの内包するそれぞれのカラムmargin-bottomを設定すると、ちゃんと余白が形成されます。

#contentなしでそれぞれのカラムに設定しても、反映されません。

これなんで?

2007-09-14

初めてのJavaScript - HTMLファイル

<html><head&gt;<title>Hello JavaScript World!</title><style type="text/css">
<!--
  .select {
    margin-left: 30px;
    padding: 0 2px;
    width: 6em;
    border: dotted 1px;
  }
  .select p {
    margin: 2px;
  }
-->
</style></head&gt;<body><script type="text/javascript">
<!--
  // step 1 : output text
  document.write("Hello world!");

  // step 2 : output html
  document.write("<br/><b>Hello javascript world!</b>");

  // step 3 : manipulate DOM
  var p1 = document.createElement("p");
  p1.appendChild(document.createTextNode("Hello DOM world!"));
  document.body.appendChild(p1);

  // step 3 : interactive, using function, event handler
  function solid() {
    this.style.borderStyle="solid";
  }
  var p2 = document.createElement("p");
  p2.appendChild(document.createTextNode("Hello interactive world!"));
  document.body.appendChild(p2);
  p2.addEventListener("click", solid, false); // not solid()

  // step 4 : using object, prototype, closure
  function P(str) {
    this.str = str;
  }
  P.prototype.regist = function(parent){
    this.elem = document.createElement("p");
    this.elem.appendChild(document.createTextNode(this.str));
    parent.appendChild(this.elem);
    var self = this;
    this.elem.addEventListener("click", function(){self.act()}, false);
    // otherwise
    //  this.elem.helloworld = this;
    //  this.elem.addEventListener("click", function(){this.helloworld.act()}, false);
    // bad way
    //  this.elem.addEventListener("click", this.act, false);
    //  this.elem.addEventListener("click", function(){this.act()}, false);
  };
  P.prototype.act = function(){};

  var p3 = new P("Hello prototype world!");
  p3.act = function(){
    if (this.elem.style.borderStyle == ""){
      this.elem.style.borderStyle = "solid";
    } else {
      this.elem.style.borderStyle = "";
    }
  };
  p3.regist(document.body);

  // step 5 : inheritance
  function SELECT(parent, str) {
    this.str = str;
    this.regist(parent);
  }
  SELECT.prototype = new P();
  SELECT.prototype.act = function(){
    p4.elem.style.borderStyle = this.str;
    p4.div.style.display = "none";
  }

  var p4 = new P("Hello world!");
  p4.div = document.createElement("div");
  p4.div.className = "select";
  p4.div.style.display = "none";
  p4.select = [
    new SELECT(p4.div, "none"),
    new SELECT(p4.div, "dotted"),
    new SELECT(p4.div, "solid")
  ];
  p4.act = function(){
    p4.div.style.display = "block";
  };
  p4.regist(document.body);
  document.body.appendChild(p4.div);

//-->
</script></body></html>

2007-07-19

/* Ten */
if (typeof(Ten) == 'undefined') {
    Ten = {};
}
Ten.NAME = 'Ten';
Ten.VERSION = 0.06;

/* Ten.Class */
Ten.Class = function(klass, prototype) {
    if (klass && klass.initialize) {
	var c = klass.initialize;
    } else if(klass && klass.base) {
        var c = function() { return klass.base[0].apply(this, arguments) };
    } else {
	var c = function() {};
    }
    c.prototype = prototype || {};
    c.prototype.constructor = c;
    Ten.Class.inherit(c, klass);
    if (klass && klass.base) {
        for (var i = 0;  i < klass.base.length; i++) {
	    var parent = klass.base[i];
            if (i == 0) {
                c.SUPER = parent;
                c.prototype.SUPER = parent.prototype;
            }
            Ten.Class.inherit(c, parent);
            Ten.Class.inherit(c.prototype, parent.prototype);
        }
    }
    return c;
}
Ten.Class.inherit = function(child,parent) {
    for (var prop in parent) {
        if (typeof(child[prop]) != 'undefined' || prop == 'initialize') continue;
        child[prop] = parent[prop];
    }
}

/*
// Basic Ten Classes
**/

/* Ten.JSONP */
Ten.JSONP = new Ten.Class({
    initialize: function(uri,obj,method) {
        if (Ten.JSONP.Callbacks.length) {
            setTimeout(function() {new Ten.JSONP(uri,obj,method)}, 500);
            return;
        }
        var del = uri.match(/\?/) ? '&' : '?';
        uri += del + 'callback=Ten.JSONP.callback';
        if (!uri.match(/timestamp=/)) {
            uri += '&' + encodeURI(new Date());
        }
        if (obj && method) Ten.JSONP.addCallback(obj,method);
        this.script = document.createElement('script');
        this.script.src = uri;
        this.script.type = 'text/javascript';
        document.getElementsByTagName('head')[0].appendChild(this.script);
    },
    addCallback: function(obj,method) {
        Ten.JSONP.Callbacks.push({object: obj, method: method});
    },
    callback: function(args) {
        // alert('callback called');
        var cbs = Ten.JSONP.Callbacks;
        for (var i = 0; i < cbs.length; i++) {
            var cb = cbs[i];
            cb.object[cb.method].call(cb.object, args);
        }
        Ten.JSONP.Callbacks = [];
    },
    MaxBytes: 8000,
    Callbacks: []
});

/* Ten.XHR */
Ten.XHR = new Ten.Class({
    initialize: function(uri,opts,obj,method) {
        if (!uri) return;
        this.request = Ten.XHR.getXMLHttpRequest();
        this.callback = {object: obj, method: method};
        var xhr = this;
        var prc = this.processReqChange;
        this.request.onreadystatechange = function() {
            prc.apply(xhr, arguments);
        }
        var method = opts.method || 'GET';
        this.request.open(method, uri, true);
        if (method == 'POST') {
            this.request.setRequestHeader('Content-Type',
                                          'application/x-www-form-urlencoded');
        }
        var data = opts.data ? Ten.XHR.makePostData(opts.data) : null;
        this.request.send(data);
    },
    getXMLHttpRequest: function() {
        var xhr;
        var tryThese = [
            function () { return new XMLHttpRequest(); },
            function () { return new ActiveXObject('Msxml2.XMLHTTP'); },
            function () { return new ActiveXObject('Microsoft.XMLHTTP'); },
            function () { return new ActiveXObject('Msxml2.XMLHTTP.4.0'); },
        ];
        for (var i = 0; i < tryThese.length; i++) {
            var func = tryThese[i];
            try {
                xhr = func;
                return func();
            } catch (e) {
                //alert(e);
            }
        }
        return xhr;
    },
    makePostData: function(data) {
        var pairs = [];
        var regexp = /%20/g;
        for (var k in data) {
            var v = data[k].toString();
            var pair = encodeURIComponent(k).replace(regexp,'+') + '=' +
                encodeURIComponent(v).replace(regexp,'+');
            pairs.push(pair);
        }
        return pairs.join('&');
    }
},{
    processReqChange: function() {
        var req = this.request;
        if (req.readyState == 4) {
            if (req.status == 200) {
                var cb = this.callback;
                cb.object[cb.method].call(cb.object, req);
            } else {
                alert("There was a problem retrieving the XML data:\n" +
                      req.statusText);
            }
        }
    }
});

/* Ten.Observer */
Ten.Observer = new Ten.Class({
    initialize: function(element,event,obj,method) {
        var func = obj;
        if (typeof(method) == 'string') {
            func = obj[method];
        }
        this.element = element;
        this.event = event;
        this.listener = function(event) {
            return func.call(obj, new Ten.Event(event || window.event));
        }
        if (this.element.addEventListener) {
            if (this.event.match(/^on(.+)$/)) {
                this.event = RegExp.$1;
            }
            this.element.addEventListener(this.event, this.listener, false);
        } else if (this.element.attachEvent) {
            this.element.attachEvent(this.event, this.listener);
        }
    }
},{
    stop: function() {
        if (this.element.removeEventListener) {
            this.element.removeEventListener(this.event,this.listener,false);
        } else if (this.element.detachEvent) {
            this.element.detachEvent(this.event,this.listener);
        }
    }
});

/* Ten.Event */
Ten.Event = new Ten.Class({
    initialize: function(event) {
        this.event = event;
    },
    keyMap: {
        8:"backspace", 9:"tab", 13:"enter", 19:"pause", 27:"escape", 32:"space",
        33:"pageup", 34:"pagedown", 35:"end", 36:"home", 37:"left", 38:"up",
        39:"right", 40:"down", 44:"printscreen", 45:"insert", 46:"delete",
        112:"f1", 113:"f2", 114:"f3", 115:"f4", 116:"f5", 117:"f6", 118:"f7",
        119:"f8", 120:"f9", 121:"f10", 122:"f11", 123:"f12",
        144:"numlock", 145:"scrolllock"
    }
},{
    mousePosition: function() {
        if (!this.event.clientX) return;
        return Ten.Geometry.getMousePosition(this.event);
    },
    isKey: function(name) {
        var ecode = this.event.keyCode;
        if (!ecode) return;
        var ename = Ten.Event.keyMap[ecode];
        if (!ename) return;
        return (ename == name);
    },
    targetIsFormElements: function() {
        var target = this.event.target;
        if (!target) return;
        var T = (target.tagName || '').toUpperCase();
        return (T == 'INPUT' || T == 'SELECT' || T == 'OPTION' ||
                T == 'BUTTON' || T == 'TEXTAREA');
    },
    stop: function() {
        var e = this.event;
        if (e.stopPropagation) {
            e.stopPropagation();
            e.preventDefault();
        } else {
            e.cancelBubble = true;
            e.returnValue = false;
        }
    }
});

/* Ten.DOM */
Ten.DOM = new Ten.Class({
    getElementsByTagAndClassName: function(tagName, className, parent) {
        if (typeof(parent) == 'undefined') {
            parent = document;
        }
        var children = parent.getElementsByTagName(tagName);
        if (className) { 
            var elements = [];
            for (var i = 0; i < children.length; i++) {
                var child = children[i];
                var cls = child.className;
                if (!cls) {
                    continue;
                }
                var classNames = cls.split(' ');
                for (var j = 0; j < classNames.length; j++) {
                    if (classNames[j] == className) {
                        elements.push(child);
                        break;
                    }
                }
            }
            return elements;
        } else {
            return children;
        }
    },
    removeEmptyTextNodes: function(element) {
        var nodes = element.childNodes;
        for (var i = 0; i < nodes.length; i++) {
            var node = nodes[i];
            if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
                node.parentNode.removeChild(node);
            }
        }
    },
    nextElement: function(elem) {
        do {
            elem = elem.nextSibling;
        } while (elem && elem.nodeType != 1);
        return elem;
    },
    prevElement: function(elem) {
        do {
            elem = elem.previousSibling;
        } while (elem && elem.nodeType != 1);
        return elem;
    },
    scrapeText: function(node) {
        var rval = [];
        (function (node) {
            var cn = node.childNodes;
            if (cn) {
                for (var i = 0; i < cn.length; i++) {
                    arguments.callee.call(this, cn[i]);
                }
            }
            var nodeValue = node.nodeValue;
            if (typeof(nodeValue) == 'string') {
                rval.push(nodeValue);
            }
        })(node);
        return rval.join('');
    },
    onLoadFunctions: [],
    loaded: false,
    timer: null,
    addEventListener: function(event,func) {
        if (event != 'load') return;
        Ten.DOM.onLoadFunctions.push(func);
        Ten.DOM.checkLoaded();
    },
    checkLoaded: function() {
        var c = Ten.DOM;
        if (c.loaded) return true;
        if (document && document.getElementsByTagName &&
            document.getElementById && document.body) {
            if (c.timer) {
                clearInterval(c.timer);
                c.timer = null;
            }
            for (var i = 0; i < c.onLoadFunctions.length; i++) {
                    c.onLoadFunctions[i]();
            }
            c.onLoadFunctions = [];
            c.loaded = true;
        } else {
            c.timer = setInterval(c.checkLoaded, 13);
        }
    }
});

/* Ten.Style */
Ten.Style = new Ten.Class({
    applyStyle: function(elem, style) {
        for (prop in style) {
            elem.style[prop] = style[prop];
        }
    }
});

/* Ten.Geometry */
Ten.Geometry = new Ten.Class({
    initialize: function() {
        if (Ten.Geometry._initialized) return;
        var func = Ten.Geometry._functions;
        var de = document.documentElement;
        if (window.innerWidth) {
            func.getWindowWidth = function() { return window.innerWidth; }
            func.getWindowHeight = function() { return window.innerHeight; }
            func.getXScroll = function() { return window.pageXOffset; }
            func.getYScroll = function() { return window.pageYOffset; }
        } else if (de && de.clientWidth) {
            func.getWindowWidth = function() { return de.clientWidth; }
            func.getWindowHeight = function() { return de.clientHeight; }
            func.getXScroll = function() { return de.scrollLeft; }
            func.getYScroll = function() { return de.scrollTop; }
        } else if (document.body.clientWidth) {
            func.getWindowWidth = function() { return document.body.clientWidth; }
            func.getWindowHeight = function() { return document.body.clientHeight; }
            func.getXScroll = function() { return document.body.scrollLeft; }
            func.getYScroll = function() { return document.body.scrollTop; }
        }
        Ten.Geometry._initialized = true;
    },
    _initialized: false,
    _functions: {},
    getScroll: function() {
        if (!Ten.Geometry._initialized) new Ten.Geometry;
        return {
            x: Ten.Geometry._functions.getXScroll(),
            y: Ten.Geometry._functions.getYScroll()
        };
    },
    getMousePosition: function(pos) {
        // pos should have clientX, clientY same as mouse event
        if ((navigator.userAgent.indexOf('Safari') > -1) &&
            (navigator.userAgent.indexOf('Version/') < 0)) {
            return {
                x: pos.clientX,
                y: pos.clientY
            };
        } else {
            var scroll = Ten.Geometry.getScroll();
            return {
                x: pos.clientX + scroll.x,
                y: pos.clientY + scroll.y
            };
        }
    },
    getElementPosition: function(e) {
        return {
            x: e.offsetLeft,
            y: e.offsetTop
        };
    },
    getWindowSize: function() {
        if (!Ten.Geometry._initialized) new Ten.Geometry;
        return {
            w: Ten.Geometry._functions.getWindowWidth(),
            h: Ten.Geometry._functions.getWindowHeight()
        };
    }
});

/* Ten.Position */
Ten.Position = new Ten.Class({
    initialize: function(x,y) {
        this.x = x;
        this.y = y;
    },
    subtract: function(a,b) {
        return new Ten.Position(a.x - b.x, a.y - b.y);
    }
});

/*
// require Ten.js
**/

/* Ten.SubWindow */
Ten.SubWindow = new Ten.Class({
    initialize: function() {
        var c = this.constructor;
        if (c.singleton && c._cache) {
            return c._cache;
        }
        var div = document.createElement('div');
        Ten.Style.applyStyle(div, Ten.SubWindow._baseStyle);
        Ten.Style.applyStyle(div, c.style);
        this.window = div;
        this.addContainerAndCloseButton();
        document.body.appendChild(div);
        if (c.draggable) {
            this._draggable = new Ten.Draggable(div, this.handle);
        }
        if (c.singleton) c._cache = this;
        return this;
    },
    _baseStyle: {
        color: '#000',
        position: 'absolute',
        display: 'none',
        zIndex: 2,
        left: 0,
        top: 0,
        backgroundColor: '#fff',
        border: '1px solid #bbb'
    },
    style: {
        padding: '2px',
        textAlign: 'center',
        borderRadius: '6px',
        MozBorderRadius: '6px',
        width: '100px',
        height: '100px'
    },
    handleStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        backgroundColor: '#f3f3f3',
        borderBottom: '1px solid #bbb',
        width: '100%',
        height: '30px'
    },
    containerStyle: {
        margin: '32px 0 0 0',
        padding: '0 10px'
    },
    // closeButton: 'close.gif',
    closeButton: 'http://s.hatena.com/images/close.gif',
    closeButtonStyle: {
        position: 'absolute',
        top: '8px',
        right: '10px',
        cursor: 'pointer'
    },
    _baseScreenStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        display: 'none',
        zIndex: 1,
        overflow: 'hidden',
        width: '100%',
        height: '100%'
    },
    screenStyle: {},
    showScreen: true,
    singleton: true,
    draggable: true,
    _cache: null
},{
    screen: null,
    windowObserver: null,
    visible: false,
    addContainerAndCloseButton: function() {
        var win = this.window;
        var c = this.constructor;
        var div = document.createElement('div');
        win.appendChild(div);
        Ten.Style.applyStyle(div, c.containerStyle);
        this.container = div;
        if (c.handleStyle) {
            var handle = document.createElement('div');
            Ten.Style.applyStyle(handle, c.handleStyle);
            win.appendChild(handle);
            this.handle = handle;
        }
        if (c.closeButton) {
	    var btn = document.createElement('img');
            btn.src = c.closeButton;
            btn.alt = 'close';
            Ten.Style.applyStyle(btn, c.closeButtonStyle);
            win.appendChild(btn);
            new Ten.Observer(btn, 'onclick', this, 'hide');
            this.closeButton = btn;
        }
        if (c.showScreen) {
            var screen = document.createElement('div');
            Ten.Style.applyStyle(screen, Ten.SubWindow._baseScreenStyle);
            Ten.Style.applyStyle(screen, c.screenStyle);
            document.body.appendChild(screen);
            this.screen = screen;
            new Ten.Observer(screen, 'onclick', this, 'hide');
        }
    },
    show: function(pos) {
        pos = (pos.x && pos.y) ? pos : {x:0, y:0};
        with (this.window.style) {
            display = 'block';
            left = pos.x + 'px';
            top = pos.y + 'px';
        }
        if (this.screen) {
            with (this.screen.style) {
                display = 'block';
                left = Ten.Geometry.getScroll().x + 'px';
                top = Ten.Geometry.getScroll().y + 'px';
            }
        }
        this.windowObserver = new Ten.Observer(document.body, 'onkeypress', this, 'handleEscape');
        this.visible = true;
    },
    handleEscape: function(e) {
        if (!e.isKey('escape')) return;
        this.hide();
    },
    hide: function() {
        if (this._draggable) this._draggable.endDrag();
        this.window.style.display = 'none';
        if (this.screen) this.screen.style.display = 'none';
        if (this.windowObserver) this.windowObserver.stop();
        this.visible = false;
    }
});

/* Ten.Draggable */
Ten.Draggable = new Ten.Class({
    initialize: function(element,handle) {
        this.element = element;
        this.handle = handle || element;
        this.startObserver = new Ten.Observer(this.handle, 'onmousedown', this, 'startDrag');
        this.handlers = [];
    }
},{
    startDrag: function(e) {
        if (e.targetIsFormElements()) return;
        this.delta = Ten.Position.subtract(
            e.mousePosition(),
            Ten.Geometry.getElementPosition(this.element)
        );
        this.handlers = [
            new Ten.Observer(document, 'onmousemove', this, 'drag'),
            new Ten.Observer(document, 'onmouseup', this, 'endDrag'),
            new Ten.Observer(this.element, 'onlosecapture', this, 'endDrag')
        ];
        e.stop();
    },
    drag: function(e) {
        var pos = Ten.Position.subtract(e.mousePosition(), this.delta);
        Ten.Style.applyStyle(this.element, {
            left: pos.x + 'px',
            top: pos.y + 'px'
        });
        e.stop();
    },
    endDrag: function(e) {
        for (var i = 0; i < this.handlers.length; i++) {
            this.handlers[i].stop();
        }
        if(e) e.stop();
    }
});

/* Hatena */
if (typeof(Hatena) == 'undefined') {
    Hatena = {};
}

/* Hatena.User */
Hatena.User = new Ten.Class({
    initialize: function(name) {
        this.name = name;
    },
    getProfileIcon: function(name) {
        if (!name) name = 'user';
        var pre = name.match(/^[\w-]{2}/)[0];
        var img = document.createElement('img');
        img.src = 'http://www.hatena.ne.jp/users/' + pre + '/' + name + '/profile_s.gif';
        img.alt = name;
        img.setAttribute('class', 'profile-icon');
        img.setAttribute('width','16px');
        img.setAttribute('height','16px');
        with (img.style) {
            margin = '0 3px';
            border = 'none';
            verticalAlign = 'middle';
        }
        return img;
    }
}, {
    profileIcon: function() {
        return Hatena.User.getProfileIcon(this.name);
    }
});

/* Hatena.Star */
if (typeof(Hatena.Star) == 'undefined') {
    Hatena.Star = {};
}

/*
// Hatena.Star.* classes //
**/
if (window.location && window.location.host.match(/hatena\.com/)) {
    Hatena.Star.BaseURL = 'http://s.hatena.com/';
} else {
    Hatena.Star.BaseURL = 'http://s.hatena.ne.jp/';
}
Hatena.Star.Token = null;

/* Hatena.Star.User */
Hatena.Star.User = new Ten.Class({
    base: [Hatena.User],
    initialize: function(name) {
        if (Hatena.Star.User._cache[name]) {
            return Hatena.Star.User._cache[name];
        } else {
            this.name = name;
            Hatena.Star.User._cache[name] = this;
            return this;
        }
    },
    _cache: {}
},{
    userPage: function() {
        return Hatena.Star.BaseURL + this.name + '/';
    }
});

/* Hatena.Star.Entry */
Hatena.Star.Entry = new Ten.Class({
    initialize: function(e) {
        this.entry = e;
        this.uri = e.uri;
        this.title = e.title;
        this.star_container = e.star_container;
        this.comment_container = e.comment_container;
        this.stars = [];
        this.comments = [];
    },
    maxStarCount: 11
},{
    flushStars: function() {
        this.stars = [];
        this.star_container.innerHTML = '';
    },
    bindStarEntry: function(se) {
        this.starEntry = se;
        for (var i = 0; i < se.stars.length; i++) {
            if (typeof(se.stars[i]) == 'number') {
                this.stars.push(new Hatena.Star.InnerCount(se.stars[i],this));
            } else {
                this.stars.push(new Hatena.Star.Star(se.stars[i]));
            }
        }
        if (se.comments && !this.comments.length) {
            for (var i = 0; i < se.comments.length; i++) {
                this.comments.push(new Hatena.Star.Comment(se.comments[i]));
            }
        }
        this.can_comment = se.can_comment;
    },
    setCanComment: function(v) {
        this.can_comment = v;
    },
    showButtons: function() {
        this.addAddButton();
        this.addCommentButton();
    },
    addAddButton: function() {
        if (this.star_container) {
            this.addButton = new Hatena.Star.AddButton(this);
            this.star_container.appendChild(this.addButton);
        }
    },
    addCommentButton: function() {
        if (this.comment_container) {
            this.commentButton = new Hatena.Star.CommentButton(this);
            this.comment_container.appendChild(this.commentButton.img);
        }
    },
    showStars: function() {
        var klass = this.constructor;
        // if (this.stars.length > klass.maxStarCount) {
        //     var ic = new Hatena.Star.InnerCount(this.stars.slice(1,this.stars.length));
        //     this.star_container.appendChild(this.stars[0]);
        //     this.star_container.appendChild(ic);
        //     this.star_container.appendChild(this.stars[this.stars.length - 1]);
        // } else {
        for (var i = 0; i < this.stars.length; i++) {
            this.star_container.appendChild(this.stars[i]);
        }
    },
    showCommentButton: function() {
        if (this.can_comment) {
            this.commentButton.show();
            if (this.comments.length) this.commentButton.activate();
        } else {
            // this.commentButton.hide();
        }
    },
    addStar: function(star) {
        this.stars.push(star);
        this.star_container.appendChild(star);
    },
    addComment: function(com) {
        if (!this.comments) this.comments = [];
        if (this.comments.length == 0) {
            this.commentButton.activate();
        }
        this.comments.push(com);
    },
    showCommentCount: function() {
        this.comment_container.innerHTML += this.comments.length;
    }
});

/* Hatena.Star.Button */
Hatena.Star.Button = new Ten.Class({
    createButton: function(args) {
        var img = document.createElement('img');
        img.src = args.src;
        img.alt = img.title = args.alt;
        with (img.style) {
	    cursor = 'pointer';
	    margin = '0 3px';
            padding = '0';
            border = 'none';
            verticalAlign = 'middle';
        }
        return img;
    }
});

/* Hatena.Star.AddButton */
Hatena.Star.AddButton = new Ten.Class({
    base: ['Hatena.Star.Button'],
    initialize: function(entry) {
        this.entry = entry;
        this.lastPosition = null;
        var img = Hatena.Star.Button.createButton({
            src: Hatena.Star.AddButton.ImgSrc,
            alt: 'Add Star'
        });
        this.observer = new Ten.Observer(img,'onclick',this,'addStar');
        this.img = img;
        return img;
    },
    ImgSrc: Hatena.Star.BaseURL + 'images/add.gif'
},{
    addStar: function(e) {
        this.lastPosition = e.mousePosition();
        var uri = Hatena.Star.BaseURL + 'star.add.json?uri=' + encodeURIComponent(this.entry.uri) +
            '&title=' + encodeURIComponent(this.entry.title);
        if (Hatena.Star.Token) {
            uri += '&token=' + Hatena.Star.Token;
        }
        new Ten.JSONP(uri, this, 'receiveResult');
    },
    receiveResult: function(args) {
        var name = args ? args.name : null;
        if (name) {
            this.entry.addStar(new Hatena.Star.Star({name: name}));
            //alert('Succeeded in Adding Star ' + args);
        } else if (args.errors) {
            var pos = this.lastPosition;
            pos.x -= 10;
            pos.y += 25;
            var scroll = Ten.Geometry.getScroll();
            var scr = new Hatena.Star.AlertScreen();
            var alert = args.errors[0];
            scr.showAlert(alert, pos);
        }
    }
});

/* Hatena.Star.CommentButton */
Hatena.Star.CommentButton = new Ten.Class({
    base: ['Hatena.Star.Button'],
    initialize: function(entry) {
        this.entry = entry;
        this.lastPosition = null;
        var img = Hatena.Star.Button.createButton({
            src: Hatena.Star.CommentButton.ImgSrc,
            alt: 'Comments'
        });
        img.style.display = 'none';
        this.observer = new Ten.Observer(img,'onclick',this,'showComments');
        this.img = img;
    },
    ImgSrc: Hatena.Star.BaseURL + 'images/comment.gif',
    ImgSrcActive: Hatena.Star.BaseURL + 'images/comment_active.gif'
},{
    showComments: function(e) {
        if (!this.screen) this.screen = new Hatena.Star.CommentScreen();
        this.screen.bindEntry(this.entry);
        var pos = e.mousePosition();
        pos.y += 25;
        this.screen.showComments(this.entry, pos);
    },
    hide: function() {
        this.img.style.display = 'none';
    },
    show: function() {
        this.img.style.display = 'inline';
    },
    activate: function() {
        this.show();
        this.img.src = Hatena.Star.CommentButton.ImgSrcActive;
    }
});

/* Hatena.Star.Star */
Hatena.Star.Star = new Ten.Class({
    initialize: function(args) {
        if (args.img) {
            this.img = args.img;
            this.name = this.img.getAttribute('alt');
        } else {
            this.name = args.name;
            var img = document.createElement('img');
            img.src = Hatena.Star.Star.ImgSrc;
            img.alt = this.name;
            with (img.style) {
                padding = '0';
                border = 'none';
            }
            this.img = img;
        }
	new Ten.Observer(this.img,'onmouseover',this,'showName');
	new Ten.Observer(this.img,'onmouseout',this,'hideName');
	if (this.name) {
            this.user = new Hatena.Star.User(this.name);
            this.img.style.cursor = 'pointer';
            new Ten.Observer(this.img,'onclick',this,'goToUserPage');
        }
        if (args.count && args.count > 1) {
            var c = document.createElement('span');
            c.setAttribute('class', 'hatena-star-inner-count');
            Ten.Style.applyStyle(c, Hatena.Star.InnerCount.style);
            c.innerHTML = args.count;
            var s = document.createElement('span');
            s.appendChild(img);
            s.appendChild(c);
            return s;
        } else {
            return this.img;
        }
    },
    ImgSrc: Hatena.Star.BaseURL + 'images/star.gif'
},{
    showName: function(e) {
        if (!this.screen) this.screen = new Hatena.Star.NameScreen();
        var pos = e.mousePosition();
        pos.x += 10;
        pos.y += 25;
        this.screen.showName(this.name, pos);
    },
    hideName: function() {
        if (!this.screen) return;
        this.screen.hide();
    },
    goToUserPage: function() {
        window.location = this.user.userPage();
    }
});

/* Hatena.Star.InnerCount */
Hatena.Star.InnerCount = new Ten.Class({
    initialize: function(count, e) {
        this.count = count;
        this.entry = e;
        var c = document.createElement('span');
        c.setAttribute('class', 'hatena-star-inner-count');
        Ten.Style.applyStyle(c, Hatena.Star.InnerCount.style);
        c.style.cursor = 'pointer';
        c.innerHTML = count;
        new Ten.Observer(c,'onclick',this,'showInnerStars');
        this.container = c;
        return c;
    },
    style: {
        color: '#f4b128',
        fontWeight: 'bold',
        fontSize: '80%',
        fontFamily: '"arial", sans-serif',
        margin: '0 2px'
    }
},{
    showInnerStars: function() {
        var url = Hatena.Star.BaseURL + 'entry.json?uri=' +
        encodeURIComponent(this.entry.uri);
        new Ten.JSONP(url, this, 'receiveStarEntry');
    },
    receiveStarEntry: function(res) {
        var se = res.entries[0];
        var e = this.entry;
        if (encodeURIComponent(se.uri) != encodeURIComponent(e.uri)) return;
        e.flushStars();
        e.bindStarEntry(se);
        e.addAddButton();
        e.showStars();
    }
});

/* Hatena.Star.Comment */
Hatena.Star.Comment = new Ten.Class({
    initialize: function(args) {
        this.name = args.name;
        this.body = args.body;
    }
},{
    asElement: function() {
        var div = document.createElement('div');
        with (div.style) {
            margin = '0px 0';
            padding = '5px 0';
            borderBottom = '1px solid #ddd';
        }
        var ico = Hatena.User.getProfileIcon(this.name);
        div.appendChild(ico);
        var span = document.createElement('span');
        with(span.style) {
            fontSize = '90%';
        }
        span.innerHTML = this.body;
        div.appendChild(span);
        return div;
    }
});

/* Hatena.Star.NameScreen */
Hatena.Star.NameScreen = new Ten.Class({
    base: [Ten.SubWindow],
    style: {
        padding: '2px',
        textAlign: 'center'
    },
    containerStyle: {
        margin: 0,
        padding: 0
    },
    handleStyle: null,
    showScreen: false,
    closeButton: null,
    draggable: false
},{
    showName: function(name, pos) {
        this.container.innerHTML = '';
        this.container.appendChild(Hatena.User.getProfileIcon(name));
        this.container.appendChild(document.createTextNode(name));
        this.show(pos);
    }
});

/* Hatena.Star.AlertScreen */
Hatena.Star.AlertScreen = new Ten.Class({
    base: [Ten.SubWindow],
    style: {
        padding: '2px',
        textAlign: 'center',
        borderRadius: '6px',
        MozBorderRadius: '6px',
        width: '240px',
        height: '120px'
    },
    handleStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        backgroundColor: '#f3f3f3',
        borderBottom: '1px solid #bbb',
        width: '100%',
        height: '30px',
        borderRadius: '6px 6px 0 0',
        MozBorderRadius: '6px 6px 0 0'
    }
},{
    showAlert: function(msg, pos) {
        this.container.innerHTML = msg;
        var win = Ten.Geometry.getWindowSize();
        var scr = Ten.Geometry.getScroll();
        var w = parseInt(this.constructor.style.width) + 20;
        if (pos.x + w > scr.x + win.w) pos.x = win.w + scr.x - w;
        this.show(pos);
    }
});

/* Hatena.Star.CommentScreen */
Hatena.Star.CommentScreen = new Ten.Class({
    base: [Ten.SubWindow],
    initialize: function() {
        var self = this.constructor.SUPER.call(this);
        if (!self.commentsContainer) self.addCommentsContainer();
        return self;
    },
    style: {
        width: '280px',
        height: '280px',
        overflowY: 'auto',
        padding: '2px',
        textAlign: 'center',
        borderRadius: '6px',
        MozBorderRadius: '6px'
    },
    handleStyle: {
        position: 'absolute',
        top: '0px',
        left: '0px',
        backgroundColor: '#f3f3f3',
        borderBottom: '1px solid #bbb',
        width: '100%',
        height: '30px',
        borderRadius: '6px 6px 0 0',
        MozBorderRadius: '6px 6px 0 0'
    },
    containerStyle: {
        margin: '32px 0 0 0',
        textAlign: 'left',
        padding: '0 10px'
    },
    getLoadImage: function() {
        var img = document.createElement('img');
        img.src = Hatena.Star.BaseURL + 'images/load.gif';
        img.setAttribute('alt', 'Loading');
        with (img.style) {
            verticalAlign = 'middle';
            margin = '0 2px';
        }
        return img;
    }
},{
    addCommentsContainer: function() {
        var div = document.createElement('div');
        with (div.style) {
            marginTop = '-3px';
        }
        this.container.appendChild(div);
        this.commentsContainer = div;
    },
    showComments: function(e, pos) {
        var comments = e.comments;
        if (!comments) comments = [];
        this.commentsContainer.innerHTML = '';
        for (var i=0; i<comments.length; i++) {
            this.commentsContainer.appendChild(comments[i].asElement());
        }
        if (e.starEntry && !e.can_comment) {
            this.hideCommentForm();
        } else {
            this.addCommentForm();
        }
        var win = Ten.Geometry.getWindowSize();
        var scr = Ten.Geometry.getScroll();
        var w = parseInt(this.constructor.style.width) + 20;
        if (pos.x + w > scr.x + win.w) pos.x = win.w + scr.x - w;
        this.show(pos);
    },
    bindEntry: function(e) {
        this.entry = e;
    },
    sendComment: function(e) {
        if (!e.isKey('enter')) return;
        var body = this.commentInput.value;
        if (!body) return;
        this.commentInput.disabled = 'true';
        this.showLoadImage();
        var url = Hatena.Star.BaseURL + 'comment.add.json?body=' + encodeURIComponent(body) +
            '&uri=' + encodeURIComponent(this.entry.uri) +
            '&title=' + encodeURIComponent(this.entry.title);
        new Ten.JSONP(url, this, 'receiveResult');
    },
    receiveResult: function(args) {
        if (!args.name || !args.body) return;
        this.commentInput.value = ''; 
        this.commentInput.disabled = '';
        this.hideLoadImage();
        var com = new Hatena.Star.Comment(args);
        this.entry.addComment(com);
        this.commentsContainer.appendChild(com.asElement());
    },
    showLoadImage: function() {
        if (!this.loadImage) return; 
        this.loadImage.style.display = 'inline';
    },
    hideLoadImage: function() {
        if (!this.loadImage) return; 
        this.loadImage.style.display = 'none';
    },
    hideCommentForm: function() {
        if (!this.commentForm) return;
        this.commentForm.style.display = 'none';
    },
    addCommentForm: function() {
        if (this.commentForm) {
            this.commentForm.style.display = 'block';
            return;
        }
        var form = document.createElement('div');
        this.container.appendChild(form);
        this.commentForm = form;
        with (form.style) {
            margin = '0px 0';
            padding = '5px 0';
            // borderTop = '1px solid #ddd';
        }
        //if (Hatena.Visitor) {
        //    form.appendChild(Hatena.Visitor.profileIcon());
        //} else {
        //    form.appendChild(Hatena.User.getProfileIcon());
        //}
        var input = document.createElement('input');
        input.type = 'text';
        with (input.style) {
            width = '215px';
	    border = '1px solid #bbb';
            padding = '3px';
        }
        form.appendChild(input);
        this.commentInput = input;
        var img = this.constructor.getLoadImage();
        this.loadImage = img;
        this.hideLoadImage();
        form.appendChild(img);
        new Ten.Observer(input,'onkeypress',this,'sendComment');
    }
});

/* Hatena.Star.EntryLoader */
Hatena.Star.EntryLoader = new Ten.Class({
    initialize: function() {
        var entries = Hatena.Star.EntryLoader.loadEntries();
        this.entries = [];
        for (var i = 0; i < entries.length; i++) {
            var e = new Hatena.Star.Entry(entries[i]);
            e.showButtons();
            this.entries.push(e);
        }
        this.getStarEntries();
    },
    createStarContainer: function() {
        var sc = document.createElement('span');
        sc.setAttribute('class', 'hatena-star-star-container');
        sc.style.marginLeft = '1px';
        return sc;
    },
    createCommentContainer: function() {
        var cc = document.createElement('span');
        cc.setAttribute('class', 'hatena-star-comment-container');
        cc.style.marginLeft = '1px';
        return cc;
    },
    scrapeTitle: function(node) {
        var rval = [];
        (function (node) {
            if (node.tagName == 'SPAN' &&
                (node.className == 'sanchor' ||
                 node.className == 'timestamp')) {
                     return;
            } else if (node.nodeType == 3 && !/\S/.test(node.nodeValue)) {
                return;
            }
            var cn = node.childNodes;
            if (cn) {
                for (var i = 0; i < cn.length; i++) {
                    arguments.callee.call(this, cn[i]);
                }
            }
            var nodeValue = node.nodeValue;
            if (typeof(nodeValue) == 'string') {
                rval.push(nodeValue);
            }
        })(node);
        return rval.join('');
    },
    headerTagAndClassName: ['h3',null],
    getHeaders: function() {
        var t = Hatena.Star.EntryLoader.headerTagAndClassName;
        return Ten.DOM.getElementsByTagAndClassName(t[0],t[1],document);
    },
    loadEntries: function() {
        var entries = [];
        //var headers = document.getElementsByTagName('h3');
        var c = Hatena.Star.EntryLoader;
        var headers = c.getHeaders();
        for (var i = 0; i < headers.length; i++) {
            var header = headers[i];
            var a = header.getElementsByTagName('a')[0];
            if (!a) continue;
            var uri = a.href;
            var title = '';
            // Ten.DOM.removeEmptyTextNodes(header);
            var cns = header.childNodes;
            title = c.scrapeTitle(header);
            var cc = c.createCommentContainer();
            header.appendChild(cc);
            var sc = c.createStarContainer();
            header.appendChild(sc);
            entries.push({
                uri: uri,
                title: title,
                star_container: sc,
                comment_container: cc
            });
        }
        return entries;
    }
},{
    getStarEntries: function() {
        var url = Hatena.Star.BaseURL + 'entries.json?';
        for (var i = 0; i < this.entries.length; i++) {
            if (url.length > Ten.JSONP.MaxBytes) {
                new Ten.JSONP(url, this, 'receiveStarEntries');
                url = Hatena.Star.BaseURL + 'entries.json?';
            }
            url += 'uri=' + encodeURIComponent(this.entries[i].uri) + '&';
        }
        new Ten.JSONP(url, this, 'receiveStarEntries');
    },
    receiveStarEntries: function(res) {
        var entries = res.entries;
        if (!entries) entries = [];
        for (var i = 0; i < this.entries.length; i++) {
            var e = this.entries[i];
            for (var j = 0; j < entries.length; j++) {
                var se = entries[j];
                if (!se.uri) continue;
                if (encodeURIComponent(se.uri) == encodeURIComponent(e.uri)) {
                    e.bindStarEntry(se);
                    entries.splice(j,1);
                    break;
                }
            }
            if (typeof(e.can_comment) == 'undefined') {
                e.setCanComment(res.can_comment);
            }
            e.showStars();
            e.showCommentButton();
        }
    }
});

/* Hatena.Star.WindowObserver */
Hatena.Star.WindowObserver = new Ten.Class({
    initialize: funct


  
  

2007-02-22

実装ではなく趣旨を理解しよう

*{ margin : 0 }はもう古い!? | Emotional Web

はてなブックマーク - *{ margin : 0 }はもう古い!? | Emotional Web

はてなが酷い。

はじめに

base.cssとかcommon.cssとかを書いて読み込ませるのは、何のためだったか考えてみよう。古い新しいの問題じゃないと気づくだろうか。少なくとも、レンダリング時間なんて完全に後付けだと洞察できるはずだ(あなたたちはjs大好きだよね)。

さて、真っ新なとこからCSS書いてくとき、どんなデザインにしろほぼ毎回指定する要素が出てくる。a img{border:none;}とかhtml,body{margin:0; padding:0;}とかだ。それなら始めにa img{border:none;}とかを羅列したファイルを用意しておけば、余計な手間が省けるじゃないか。たぶん根本の動機はこんなとこだろう。

それがいつの間にかデフォルトで適用されるスタイルキャンセルするっていう方向へ迷走し、*{margin:0; padding:0;}なんて表現が生まれた。この指定は言うまでもなく有害で、著名なのはフォームのボタンが縮こまったり、liのネストが判別できないなどの副作用が生まれる。あまりにもすべてがキャンセルされるため、わざわざひとつずつ要素のスタイルを定義しなければならなくなって、ファイルサイズは増え可読性は下がり、冒頭で言うようにレンダリングにも時間が掛かるようになる。FireBugがない時代、この要素のスタイルはどのファイルのどの部分で指定されてるのか調べるのは本当に大変だった。*.cssgrepしたとしても、単にul li{}とか書かれてるのがカスケーディングしてたらお手上げ。

これらのデメリット認識したとき、はて*{margin:0; padding:0;}のメリットはなんだろうと考える。あ、特にないよね。じゃあやめよ。←いまここ

こんなのは実際にCSSを書いてたら気づくことだ。海外とか時代とか関係ない。元記事の趣旨は「*{margin:0;}は古い」じゃなくて「どんなCSSが効率的か Part2」だ。レンダリング重いから*{margin:0;}やめようなんてコピペ脳丸出しじゃ、いつまで経っても効率的なCSSなんぞ書けんよ。

 

原理主義者が「(例えば数十年後にリリースされた)UAがどんなスタイルを適用するかわからないので、最初にリセットするのは永続性完全性の観点から意味がある」と言うけども、未知のUA(というかデフォルトスタイル)まで考えてCSSを書くのはあまりに大変だ。それに、そんなことになれば、たぶん、compat.user.cssみたいなのが流行るはず。デフォルトスタイルに頼った表現がしょせん実装依存なのは認めるけど、ちょっと非現実的すぎるので、考慮から外させてもらう。俺はいま実務の話をしたいんだ。

 

じゃあどんなのがいいんだよ

で、元記事では、じゃあどんなCSSがいいのかって点がついで程度にしか触れられていないので、俺なりに考えてみた。

a img{border:none;}

これは外せない。aの中のimgにborder付けたいってほうがイレギュラーなので、わざわざa.logo img{border:1px solid #333;}なんて書き直すのも苦にならない。例外には手作業でもって対応すべき。

html,body{margin:0; padding:0;}

ほとんどの場合、隙間を空けたいよりも隙間を空けたくない。キャンパスはフルに使いたい。

印刷時にはそうでもないので、@media print {body{padding:1cm;}}なんてのがあってもいいけど、それはまた別の話。あとそういうのは印刷するユーザー側で指定すべきだとも思う。理想論だけど。

*{font-style:normal;}

lang="ja"な文章において斜体は不要。どうせあなたはemとかaddressとかにfont-style:normal;付けるんだから。

pre,code{font-family:monospace; white-space:pre;}

preやcodeがsans-serifだとイラっと来ますよね。

これは絶対やるな

やられるとイラっとくるもの。個人的。

body{font-family: "MS Pゴシック";}など

俺はページをメイリオヒラギノやM+ FONTやVLゴシックで見たいんだよ! お前の趣味押しつけんな! あと最後に一般名(sans-serifとか)くらい書け!

でもpre.2ch-ascii-art{font-family: "MS Pゴシック";}なんてのはやさしさが溢れていてとても好ましいと思う。部分的にfont-family指定するのは別にいいけど、全体のデフォルトフォントをいじられるのは不愉快でしかない。

pre{overflow:auto;/* or scroll */}

まあ仕方ないのはわかる。解決法も知らない。けどホイールスクロールしてるとき興味のないサンプルコードで引っかかるのはとてもムカつくんだ。俺は君のサイトが崩れてるかどうかより、いつも通りのスクロールに関心がある。

pre以外にグラフィック目的overflow:auto;を指定するのは論外。

まとめ。そうねえ。

CSSは個々人のスタイルを反映してるということでしかないんじゃないの」

「そうですね」

アーカイブ ヘルプ
ログイン ユーザー登録
ようこそ ゲスト さん