<?xml version="1.0" encoding="Shift_JIS"?>
<feed xmlns="http://www.w3.org/2005/Atom">
   <title>をぶろぐ - Netsket Inc.</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/" />
   <link rel="self" type="application/atom+xml" href="http://blog.netsket.com/ooishi/atom.xml" />
   <id>tag:blog.netsket.com,2009:/ooishi//4</id>
   <updated>2009-07-30T10:18:35Z</updated>
   <subtitle>大石のブログ</subtitle>
   <generator uri="http://www.sixapart.com/movabletype/">Movable Type 3.31-ja</generator>

<entry>
   <title>CSS3とXHTMLだけで綺麗なボタンを作る</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/07/css3xhtml.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.685</id>
   
   <published>2009-07-30T09:57:42Z</published>
   <updated>2009-07-30T10:18:35Z</updated>
   
   <summary> 最初に言っておきます。 〜IE8では動きません。 以前書いたCSS3系の記事 ...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
         <category term="HTML/XHTML" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="176" label="button" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="103" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="108" label="css3" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="104" label="xhtml" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="173" label="てかてか" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="175" label="ボタン" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<p>
最初に言っておきます。<br />
<b>〜IE8では動きません。</b>
</p>


<p>
以前書いたCSS3系の記事<br />
・<a href="http://blog.netsket.com/ooishi/2009/03/css3.html">CSS3の機能を試してみる…</a><br />
・<a href="http://blog.netsket.com/ooishi/2009/03/_css3.html">CSSだけで角丸を実装してみる(汎用クラス版)</a><br />
もっと早くアップしたかったのですが、体のために自制していたので…。
</p>


<p>
FirefoxとSafariはborder-radiusが綺麗に表示できます。<br />
GoogleChromeはゴツゴツ？ギザギザ？しているので汚くみえます。<br />
Operaはborder-radiusに対応してませんが、まあテキストにしては見栄えがいいです。<br />
<br />
Meiryoだと相当綺麗なんですけどね…。
</p>]]>
      <![CDATA[<style type="text/css">

a.btn-TEKATEKA {
	display:block;
	width:200px;
	height:40px;
	position:relative;
	background-color:#fff;
	color:#fff;
	border:1px solid #666;
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	text-decoration:none;
	margin:0 auto;
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-family:'Meiryo';
}

a.btn-TEKATEKA:hover strong {
	background-color:#f50;
}

a.btn-TEKATEKA strong {
	display:block;
	margin:1px;
	width:198px;
	height:38px;
	background-color:#d00;
	border-radius:9px;
	-moz-border-radius:9px;
	-webkit-border-radius:9px;
	font-size:18px;
	line-height:2.3;
	letter-spacing:2px;
	font-weight:bold;
}

a.btn-TEKATEKA span {
	width:196px;
	height:19px;
	position:absolute;
	top:2px;
	left:2px;
	background-color:#fff;
	border-radius:7px;
	-moz-border-radius:7px;
	-webkit-border-radius:7px;
	filter:alpha(opacity=50);
	-moz-opacity:0.50;
	opacity:0.50;
}



a.btn-KAKUTEKA {
	display:block;
	width:200px;
	height:40px;
	position:relative;
	background-color:#fff;
	color:#fff;
	border:1px solid #666;
	text-decoration:none;
	margin:0 auto;
	text-align:center;
	color:#fff;
	font-weight:bold;
	font-family:'Meiryo';
}

a.btn-KAKUTEKA:hover strong {
	background-color:#3d65b3;
}

a.btn-KAKUTEKA strong {
	display:block;
	margin:1px;
	width:198px;
	height:38px;
	background-color:#1e90ff;
	font-size:18px;
	line-height:2.3;
	letter-spacing:2px;
	font-weight:bold;
}

a.btn-KAKUTEKA span {
	width:196px;
	height:19px;
	position:absolute;
	top:2px;
	left:2px;
	background-color:#fff;
	filter:alpha(opacity=50);
	-moz-opacity:0.50;
	opacity:0.50;
}

</style>



角丸ボタン
<div style="margin-bottom:10px;">
<a href="#" class="btn-TEKATEKA"><strong>お問い合わせ</strong><span></span></a>
</div>

<div style="margin-bottom:10px;">
<a href="#" class="btn-TEKATEKA"><strong>お申し込み</strong><span></span></a>
</div>

<div style="margin-bottom:30px;">
<a href="#" class="btn-TEKATEKA"><strong>ユーザー登録</strong><span></span></a>
</div>



角が角いボタン
<div style="margin-bottom:10px;">
<a href="#" class="btn-KAKUTEKA"><strong>お問い合わせ</strong><span></span></a>
</div>

<div style="margin-bottom:10px;">
<a href="#" class="btn-KAKUTEKA"><strong>お申し込み</strong><span></span></a>
</div>

<div style="margin-bottom:30px;">
<a href="#" class="btn-KAKUTEKA"><strong>ユーザー登録</strong><span></span></a>
</div>
]]>
   </content>
</entry>
<entry>
   <title>「お疲れ様でした」と「ご苦労様でした」</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/07/post_16.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.639</id>
   
   <published>2009-07-29T05:10:34Z</published>
   <updated>2009-07-29T05:24:33Z</updated>
   
   <summary> お久しぶりです。 長らくブログをサボってました（汗 前回のタイトルのまま放置す...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="その他" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="147" label="言葉" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="148" label="社会" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="36" label="生活" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<p>
お久しぶりです。<br />
長らくブログをサボってました（汗
</p>

<p>
前回のタイトルのまま放置するのはマズイと気付き、ちょっと気になってたことをツラツラと書きます！<br />
っと、その前に体調は頗る快調です！1〜２週間、徹底したら完全回復しました。
</p>

<p>
それでは今回の本題へ…。<br />
昔、父に「お疲れ様でした」と「ご苦労様でした」の違いを聞いたことがあります。<br />
そのときは「お疲れ様でした」は目上の人、「ご苦労様でした」はそれ以外、といわれました。
</p>

<p>
私は先輩に対しては「お疲れ様です」とかで、後輩や年下には「お疲れーっす」という感じで使い分けています。<br />
新聞配達や宅急便などには「ご苦労様でーす」と言いますよね。
</p>

『相手が「苦労する」と表現すること自体が失礼だ』という考えもあるようです。<br />
<div class="right"><a href="http://www.asahi-net.or.jp/~qm4h-iim/k990615.htm">【ことばをめぐる】(990615)ご苦労さま,暮しの手帖</a> - http://www.asahi-net.or.jp/~qm4h-iim/k990615.htm</div>

<p>
人によりけりですが、なるべくなら相手の気分を害さない一般的な言葉を使いたいところです。（どっちも一般的ですが）<br />
まあ人によって違うので一つの答えは出せないんですけどね。
</p>]]>
      <![CDATA[<p>
参考記事<br />
・<a href="http://www.nhk.or.jp/a-room/kininaru/2004/04/0413.html">http://www.nhk.or.jp/a-room/kininaru/2004/04/0413.html</a><br />
・<a href="http://q.hatena.ne.jp/1151836046">http://q.hatena.ne.jp/1151836046</a><br />
・<a href="http://www.geocities.co.jp/Bookend-Soseki/3578/2004/otsukaresama.htm">http://www.geocities.co.jp/Bookend-Soseki/3578/2004/otsukaresama.htm</a><br />
・<a href="http://www.asahi-net.or.jp/~qm4h-iim/k990615.htm">http://www.asahi-net.or.jp/~qm4h-iim/k990615.htm</a><br />
</p>]]>
   </content>
</entry>
<entry>
   <title>このままでは駄目になるかもしれない。</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/05/post_18.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.659</id>
   
   <published>2009-05-21T12:11:20Z</published>
   <updated>2009-05-23T03:23:23Z</updated>
   
   <summary>こんなタイトルにしたのは理由があります。 3月下旬くらいから自宅用の業務ノートP...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="その他" scheme="http://www.sixapart.com/ns/types#category" />
   
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      こんなタイトルにしたのは理由があります。

3月下旬くらいから自宅用の業務ノートPCに開発環境をガッツリ作ってしまい、
それからというもの、会社で仕事、自宅でも仕事・勉強……
というようなサイクルになっていました。

GWが明ける頃から、PC画面を見ていると頭痛に襲われるようになりました。

なぜこんなことになったのか…。

まだ自分を解析しきれていないですが、
私はどうやら仕事に関する何かをしていなければ不安になるようです…。

何でこんなに不安になるんだろう。

自宅ノートPCに開発環境がなかったときは会社へ行ってやってたし。
しかも土、日のどっちかは殆どやっていたかもしれない。

まあ、そのおかげで身に付いたことは数知れないですが、
それと引き換えに体調を失っては何の意味もない。

先日、妻に「おまえは何かあってからじゃなきゃ気付かないのか？」と言われました。
とりあえず暫くの間、定時帰宅を心がけ、自宅でのPC作業をやめようかと思います。
      
   </content>
</entry>
<entry>
   <title>Live Searchもウェブマスターツールを出したようです。</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/05/live_search.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.653</id>
   
   <published>2009-05-15T05:24:32Z</published>
   <updated>2009-05-15T05:30:54Z</updated>
   
   <summary>Live Search | Webmaster Center - http://...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="その他" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="151" label="live search" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="152" label="msn" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="153" label="webmaster" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="155" label="webmaster center" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<a href="http://webmaster.live.com/" target="_blank">Live Search | Webmaster Center</a> - http://webmaster.live.com/

既にブログパーツ助っ人も登録済みです。

GoogleやYahooではURLの引越し処理とか結構進むけど、
Live Searchは全然修正されんな。
困ったもんだ。

参考記事：
<a href="http://www.sem-r.com/6/20080807134642.html" target="_blank">MS、サイト管理者向け「Live Search Webmaster Center」を正式版へ、新機能追加</a>
<a href="http://blogs.msdn.com/webmaster/archive/2008/04/18/ramping-up-msnbot.aspx" target="_blank">http://blogs.msdn.com/webmaster/archive/2008/04/18/ramping-up-msnbot.aspx</a>
]]>
      
   </content>
</entry>
<entry>
   <title>FirefoxがCSSのime-modeをサポート</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/04/firefoxcssimemode.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.636</id>
   
   <published>2009-04-27T08:58:00Z</published>
   <updated>2009-04-27T09:01:38Z</updated>
   
   <summary> /* ---------------------------------  *...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="103" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="145" label="firefox" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="146" label="ie" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="142" label="ime" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="144" label="ime-mode" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="149" label="mac" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="105" label="stylesheet" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<style type="text/css">
/* ---------------------------------
 * IME-MODE
 * CreateDate : 2009-04-27
 * LastUpdate : 2009-04-27
 * ------------------------------ */
.imeA {ime-mode:active;}
.imeI {ime-mode:inactive;}
.imeD {ime-mode:disabled;}
.sentence input {
	width:80%;
}
</style>


<p>あれ？</p>

<p>
いつの間にFirefoxはime-modeをサポートしたんだ？<br />
確か前はできなかったよな…？
</p>

えー、ime-modeとは<br />
<pre>
IMEとは Input Method Editor の略であり、Windowsで文字入力を補助するソフトウェアのこと。
日本語Windowsに主に使われている日本語入力用IMEは、ローマ字からひらがな/カタカナへの変換、かなから漢字への変換などを行う。
</pre>

<div class="right">引用:<a href="http://ja.wikipedia.org/" target="_blank">「ウィキペディア (Wikipedia): フリー百科事典」</a></div>
<div class="right">記事:<a href="http://ja.wikipedia.org/w/index.php?title=IME&direction=next&oldid=23383611" target="_blank">IME - Wikipedia</a></div>
ということです。<br />

<p>
これを使うとマルチバイトを入力させたくないようなフォームで強制的に半角英数字モードに変更することができます。<br />
その逆もまた然り。
</p>


<p>
上手く使えばユーザービリティ向上になりますが、下手な使い方をすると…。
</p>


]]>
      <![CDATA[
<p>
	<b>(1)</b> - ime-mode:inactive; 英数字入力モード<br />
	<input type="text" class="imeI" />
</p>

<p>
	<b>(2)</b> - ime-mode:active; 日本語入力モード<br />
	<input type="text" class="imeA" />
</p>

<p>
	<b>(3)</b> - ime-mode:disabled; 強制英数字入力モード（実質そうでしょ？）<br />
	<input type="text" class="imeD" /><br />
	※しかも前の入力状態を維持しているので便利。
</p>

<p>
	<b>(4)</b> - ime-mode:auto; 継承<br />
	<input type="text" style="ime-mode:auto;" />
</p>

<p>
	<b>(5)</b> - なにも指定無し<br />
	<input type="text" />
</p>


<p>
	これをキーボードの「半角／全角」を切り替えて順不同で入力してみてください。<br />
	違いがわかると思います。
</p>


<p>
	※因みにmacでの動作がどうなっているのか実機がないので分かりません。<br />
	マルチバイト許可しないようなフォームの場合に強制的に「<b>disabled</b>」しちゃいたいところなんですが、
	macの挙動がどんなんなのか…。<br />
	<br />
	と思って検索したら…<a href="http://d.hatena.ne.jp/studio-m/20090312/1236818028">フォームでime-mode:disabledしてIME使用不可にすることの問題点</a>や、
	<a href="http://www.d-toybox.com/studio/weblog/show.php?mode=single&id=2007052300&mimemode=quirks">Bug 4223 ime-modeプロパティの実装</a>がありました。<br />
	<br />
	そのほか、気になったら自分で調べてね。<br />
	んでもって、おせぇてくれさい。
</p>



ime-mode参考：
<ul class="arrow">
	<li><a href="https://developer.mozilla.org/ja/CSS/ime-mode">ime-mode - MDC</a></li>
	<li><a href="http://mozilla.jp/blog/entry/1980/">Firefox 3 の修正内容のご紹介 その2 - IE 独自拡張 CSS: ime-mode プロパティのサポート</a></li>
	<li><a href="http://d.hatena.ne.jp/studio-m/20090312/1236818028">フォームでime-mode:disabledしてIME使用不可にすることの問題点</a></li>
</ul>

]]>
   </content>
</entry>
<entry>
   <title>スーツの手入れ</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/04/post_15.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.625</id>
   
   <published>2009-04-05T15:18:53Z</published>
   <updated>2009-04-07T02:12:24Z</updated>
   
   <summary>  やべっちFCを観ながらブログを更新ｗ  最近、毎日スーツを着て出社しているの...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="その他" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="136" label="suit" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="135" label="suits" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="134" label="スーツ" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="137" label="手入れ" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<p>
 やべっちFCを観ながらブログを更新ｗ
</p>

<p>
 最近、毎日スーツを着て出社しているのですが<br />
 はっきり言ってスーツの着方・手入れなど全く知りませんでした。
</p>

<p>
 しかし、スーツというのは安いものではないので大事に着て長く使いたいものです……。
 そこで調べてみました。
</p>]]>
      <![CDATA[<p>
参考記事<br />
・<a href="http://q.hatena.ne.jp/1201142595">http://q.hatena.ne.jp/1201142595</a><br />
・<a href="http://www.rpress.net/web-k/200711/su-tu.htm">http://www.rpress.net/web-k/200711/su-tu.htm</a><br />
・<a href="http://career.oricon.co.jp/news/42227/">http://career.oricon.co.jp/news/42227/</a><br />
・<a href="http://allabout.co.jp/mensstyle/midashinami/closeup/CU20070908A/">http://allabout.co.jp/mensstyle/midashinami/closeup/CU20070908A/</a><br />
</p>


<span style="color:#666;">誤字脱字修正（汗</span>


<h4>毎日同じスーツを着ない</h4>
これはOKです。最近新しく2着買いましたｗ<br />
(社長のススメもあって)


<h4>毎日ブラッシングする</h4>
これは△だなぁ。埃とりくらいしかしてないす。


<h4>きちんとサイズの合ったものを購入する</h4>
これはまあまあOKです。


<h4>厚みのある良いハンガーを使う</h4>
これもOKです。でも自宅のみですが…。<br />
会社用にも買おっと。


<h4>椅子に掛けない</h4>
これもOKです。ただ厚みのある良いハンガーを持参しなければ！<br />
<br />


<p>
<s>と、まあザックリ調べたのですが、たまには私服で出社したいと思います。<br /></s>
とまあザックリ調べたのですが、まだまだ色々あるのでまた次回紹介します。<br />
<br />
あと、たまには私服で出社したいと思います。<br />
おー、ねむい。<br />
アグリー・ベティのシーズン２、早く始まらんかなぁ…。
</p>]]>
   </content>
</entry>
<entry>
   <title>ページャー/ページネーションのデザイン</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/04/post_14.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.624</id>
   
   <published>2009-04-05T09:54:27Z</published>
   <updated>2009-04-06T01:57:10Z</updated>
   
   <summary> ページネーションというのは「丁付け」という意味で、 丁付けというのは「書物に枚...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
         <category term="HTML/XHTML" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="103" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="126" label="pager" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="127" label="pagination" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="104" label="xhtml" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="132" label="ページネーション" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="130" label="ページャー" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="128" label="丁付け" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<p>
ページネーションというのは「丁付け」という意味で、<br />
丁付けというのは「書物に枚数やページ数をつけること」です。
</p>

<p>
あらゆるウェブサービスで無くてはならない機能だと思います。<br />
それゆえ、使い安さには拘りたいところです。
</p>

<p>
そこで何点かサンプルを作ってみました。<br />
あまり画像を使うのは好きではないのでテキストベースでｗ
</p>

<style type="text/css">
/* ---------------------------------
 * Pagination
 * Author     : TETSUWO-OISHI
 * CreateDate : 2009-04-04
 * LastUpdate : 2009-04-05
 * ------------------------------ */


.pagination01 {padding:0; margin:5px 0; text-decoration:none; font:normal normal normal 12px/1.0 monospace;}
.pagination01 b {text-decoration:none; font:normal normal normal 13px/1.0 'Arial';}
.pagination01 a {padding:4px 7px 2px 8px; background:#bbb; color:#333; text-decoration:none; font:normal 12px monospace;}
.pagination01 span {padding:4px 7px 2px 8px; background:#666; color:#fff; text-decoration:none; font:normal 12px monospace;}
.pagination01 a:hover {background:#8c0; color:#fff; text-decoration:none;}


.pagination02 {padding:0; margin:5px 0; text-decoration:none; font:normal normal normal 12px/1.0 monospace;}
.pagination02 b {text-decoration:none; font:normal normal normal 13px/1.0 'Arial';}
.pagination02 a {padding:2px 4px 0px 5px; background:#bbb; color:#333; text-decoration:none; font:normal 12px monospace;}
.pagination02 span {padding:2px 4px 0px 5px; background:#666; color:#fff; text-decoration:none; font:normal 12px monospace;}
.pagination02 a:hover {background:#8c0; color:#fff; text-decoration:none;}


.pagination03 {padding:3px 0; margin:5px auto; text-align:center; text-decoration:none; font:normal normal normal 14px/1.0 monospace;}
.pagination03 a,
.pagination03 a:visited {padding:2px 4px 0px 5px; color:#555; text-decoration:none; font-weight:bold;}
.pagination03 span {padding:2px 4px 0px 5px; background:#333; color:#fff; text-decoration:none; font-weight:bold;}
.pagination03 a:hover {background:#8c0; color:#fff; text-decoration:none;}


.pagination04 {padding:8px 0 6px 0; margin:5px auto; text-align:center; text-decoration:none; font:normal normal normal 14px/1.0 monospace; background:#000; color:#ddd;}
.pagination04 a,
.pagination04 a:visited {padding:2px 4px 0px 5px; background:#555; color:#fff; text-decoration:none; font-weight:bold;}
.pagination04 span {padding:2px 4px 0px 5px; background:#000; color:#ddd; text-decoration:none; font-weight:bold;}
.pagination04 a:hover {background:#d00; color:#fff; text-decoration:none;}
</style>


<h4>オーソドックスなテキストベースのページャー / ページネーション</h4>
※このタイプは一番分かり易くはあるのですがリンク範囲が狭くクリックし損なうこともあるでしょう。
<div class="orthodoxpager">
	<b>【1〜20件表示/1000件中】</b>
	<span title="1">1</span> |
	<a title="2" href="#">2</a> |
	<a title="3" href="#">3</a> |
	<a title="4" href="#">4</a> |
	<a title="5" href="#">5</a> |
	<a title="6" href="#">6</a> |
	<a title="7" href="#">7</a> |
	... |
	<a title="92" href="#">92</a> |
	<a title="2" href="#">次のページ</a>
</div>]]>
      <![CDATA[<h4>弊社が作る管理画面などに多様されるページャー / ページネーション</h4>
※この場合はクリック範囲がデカイので押し易いです。<br />
しかし、あまり目立たせるとコンテンツが見難くなります。<br />
クルーのみんな、使ってくれて嬉しいですｗ(このタイプの考案は1年半くらい前でしょうか？)
<div class="pagination01">
	<b>【1〜20件表示/1000件中】</b>
	<span title="1">1</span>
	<a title="2" href="#">2</a>
	<a title="3" href="#">3</a>
	<a title="4" href="#">4</a>
	<a title="5" href="#">5</a>
	<a title="6" href="#">6</a>
	<a title="7" href="#">7</a>
	...
	<a title="92" href="#">92</a>
	<a title="2" href="#">次のページ</a>
</div>


<h4>上記のスペース無し版(試し)</h4>
※みづらいですね。十分は余白を取れば大丈夫か。
<div class="pagination01">
	<b>【1〜20件表示/1000件中】</b>
	<span title="1">1</span><a title="2" href="#">2</a><a title="3" href="#">3</a><a title="4" href="#">4</a><a title="5" href="#">5</a><a title="6" href="#">6</a><a title="7" href="#">7</a> ... <a title="92" href="#">92</a><a title="2" href="#">次のページ</a>
</div>


<h4>ブログパーツ助っ人で採用しているページャー / ページネーション</h4>
<div class="pagination03">
	ページ:
	<span title="1">1</span><a title="2" href="#">2</a><a title="3" href="#">3</a><a title="4" href="#">4</a><a title="5" href="#">5</a><a title="6" href="#">6</a><a title="7" href="#">7</a>...<a title="92" href="#">92</a><a title="2" href="#">次のページ</a>
</div>


<h4>上のをちょっと格好良くしてみた</h4>
<div class="pagination04">
	ページ:
	<span title="1">1</span>
	<a title="2" href="#">2</a>
	<a title="3" href="#">3</a>
	<a title="4" href="#">4</a>
	<a title="5" href="#">5</a>
	<a title="6" href="#">6</a>
	<a title="7" href="#">7</a>
	...
	<a title="92" href="#">92</a>
	<a title="2" href="#">次のページ</a>
</div>]]>
   </content>
</entry>
<entry>
   <title>CSSだけで角丸を実装してみる(汎用クラス版)</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/03/_css3.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.614</id>
   
   <published>2009-03-25T16:29:07Z</published>
   <updated>2009-03-30T02:22:54Z</updated>
   
   <summary> この間のCSS3の機能を試してみる…の角丸ボックスを汎用クラスにしてもう一度チ...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
         <category term="HTML/XHTML" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="109" label="border" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="72" label="class" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="103" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="108" label="css3" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="110" label="radius" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="119" label="ボーダー" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="120" label="角丸" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<p>
この間の<a href="http://blog.netsket.com/ooishi/2009/03/css3.html">CSS3の機能を試してみる…</a>の角丸ボックスを汎用クラスにしてもう一度チャレンジ。<br />
対応ブラウザも前回と一緒<br />
 <b class="caution">
  - Firefox3.0.8は全部表示できます<br />
  - Safari for Windows3.1.2/Google Crome1.0.154.53は全部表示できます<br />
  - Opera9.62/IEは表示できません<br />
 </b>
</p>

今回気づいたことがあって、<b>-moz-border-radius</b>に関しては<br />
<pre>
-moz-border-radius: top-left top-right bottom-right bottom-left;
</pre>

のような一括で指定できるやり方と<br />
<pre>
-moz-border-radius-topleft:n;
-moz-border-radius-topright:n;
-moz-border-radius-bottomright:n;
-moz-border-radius-bottomleft:n;
</pre>
<p>
のような指定の仕方と2種類あることがわかりました。<br />
一行目のやつは短縮記述として使えますね。<br />
他のradiusと組み合わさると掻き消されるかもですが。
</p>

<style type="text/css">
.R10A {
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
.R10TL {
	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
}
.R10TR {
	-moz-border-radius-topright:10px;
	-webkit-border-top-right-radius:10px;
}
.R10BL {
	-moz-border-radius-bottomleft:10px;
	-webkit-border-bottom-left-radius:10px;
}
.R10BR {
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-right-radius:10px;
}



.R6A {
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}
.R6TL {
	-moz-border-radius-topleft:6px;
	-webkit-border-top-left-radius:6px;
}
.R6TR {
	-moz-border-radius-topright:6px;
	-webkit-border-top-right-radius:6px;
}
.R6BL {
	-moz-border-radius-bottomleft:6px;
	-webkit-border-bottom-left-radius:6px;
}
.R6BR {
	-moz-border-radius-bottomright:6px;
	-webkit-border-bottom-right-radius:6px;
}


.orthodox {
	background:#666;
	color:#fff;
	padding:8px;
	margin-bottom:10px;
}

.skyblue {
	background:#29f;
	color:#fff;
	padding:8px;
	margin-bottom:10px;
}

.lightgreen {
	background:#8c0;
	color:#fff;
	padding:8px;
	margin-bottom:10px;
}

.orthodox .innertitle {
	background:#000;
	color:#fff;
	font-weight:bold;
	padding:8px;
	margin-bottom:5px;
}

.skyblue .innertitle {
	background:#fff;
	color:#36b;
	font-weight:bold;
	padding:8px;
	margin-bottom:5px;
}

.lightgreen .innertitle {
	background:#fff;
	color:#080;
	font-weight:bold;
	padding:8px;
	margin-bottom:5px;
}

</style>



<div class="orthodox R10TL R10BR">
	<div class="innertitle R6TL R6BR">
		-moz-border-radius-topleft / -webkit-border-top-left-radius<br />
		-moz-border-radius-bottomright / -webkit-border-bottom-right-radius<br />
	</div>
	右上と左上だけ角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>


<div class="skyblue R10BR R10BL">
	<div class="innertitle R6BR R6BL">
		-moz-border-radius-bottomright / -webkit-border-bottom-right-radius<br />
		-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius<br />
	</div>
	右下と左下だけ角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>


<div class="lightgreen R10TR R10BR">
	<div class="innertitle R6TR R6BR">
		-moz-border-radius-topright / -webkit-border-top-right-radius<br />
		-moz-border-radius-bottomright / -webkit-border-bottom-right-radius<br />
	</div>
	右上と右下だけ角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>



<div class="orthodox R10TL R10BL">
	<div class="innertitle R6TL R6BL">
		-moz-border-radius-topleft / -webkit-border-top-left-radius<br />
		-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius<br />
	</div>
	左上と左下だけ角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>


<div class="skyblue R10TR R10BL">
	<div class="innertitle R6TR R6BL">
		-moz-border-radius-topright / -webkit-border-top-right-radius<br />
		-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius<br />
	</div>
	右上と左下だけ角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>


<div class="lightgreen R10TR R10BR R10BL">
	<div class="innertitle R6TR R6BR R6BL">
		-moz-border-radius-topright / -webkit-border-top-right-radius<br />
		-moz-border-radius-bottomright / -webkit-border-bottom-right-radius<br />
		-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius<br />
	</div>
	右上と右下と左下を角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>


]]>
      <![CDATA[<p>
IE8では使えるのかねぇ…。
</p>


<div class="skyblue R10A">
	<div class="innertitle R6A">参考サイト</div>
	<a style="color:#fff;" href="http://www.css3.info/">CSS3.Info</a><br />
	http://www.css3.info/
</div>




<b>CSS＆XTHMLソース</b><br />
<textarea cols="60" rows="5" class="monospace"><p>
この間の<a href="http://blog.netsket.com/ooishi/2009/03/css3.html">CSS3の機能を試してみる…</a>の角丸ボックスを汎用クラスにしてもう一度チャレンジ。
</p>

<style type="text/css">
.R10A {
	border-radius:10px;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
}
.R10TL {
	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
}
.R10TR {
	-moz-border-radius-topright:10px;
	-webkit-border-top-right-radius:10px;
}
.R10BL {
	-moz-border-radius-bottomleft:10px;
	-webkit-border-bottom-left-radius:10px;
}
.R10BR {
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-right-radius:10px;
}



.R6A {
	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
}
.R6TL {
	-moz-border-radius-topleft:6px;
	-webkit-border-top-left-radius:6px;
}
.R6TR {
	-moz-border-radius-topright:6px;
	-webkit-border-top-right-radius:6px;
}
.R6BL {
	-moz-border-radius-bottomleft:6px;
	-webkit-border-bottom-left-radius:6px;
}
.R6BR {
	-moz-border-radius-bottomright:6px;
	-webkit-border-bottom-right-radius:6px;
}


.orthodox {
	background:#666;
	color:#fff;
	padding:8px;
	margin-bottom:10px;
}

.skyblue {
	background:#29f;
	color:#fff;
	padding:8px;
	margin-bottom:10px;
}

.lightgreen {
	background:#8c0;
	color:#fff;
	padding:8px;
	margin-bottom:10px;
}

.orthodox .innertitle {
	background:#000;
	color:#fff;
	font-weight:bold;
	padding:8px;
	margin-bottom:5px;
}

.skyblue .innertitle {
	background:#fff;
	color:#36b;
	font-weight:bold;
	padding:8px;
	margin-bottom:5px;
}

.lightgreen .innertitle {
	background:#fff;
	color:#080;
	font-weight:bold;
	padding:8px;
	margin-bottom:5px;
}

</style>



<div class="orthodox R10TL R10BR">
	<div class="innertitle R6TL R6BR">
		-moz-border-radius-topleft / -webkit-border-top-left-radius<br />
		-moz-border-radius-bottomright / -webkit-border-bottom-right-radius<br />
	</div>
	右上と左上だけ角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>


<div class="skyblue R10BR R10BL">
	<div class="innertitle R6BR R6BL">
		-moz-border-radius-bottomright / -webkit-border-bottom-right-radius<br />
		-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius<br />
	</div>
	右下と左下だけ角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>


<div class="lightgreen R10TR R10BR">
	<div class="innertitle R6TR R6BR">
		-moz-border-radius-topright / -webkit-border-top-right-radius<br />
		-moz-border-radius-bottomright / -webkit-border-bottom-right-radius<br />
	</div>
	右上と右下だけ角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>



<div class="orthodox R10TL R10BL">
	<div class="innertitle R6TL R6BL">
		-moz-border-radius-topleft / -webkit-border-top-left-radius<br />
		-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius<br />
	</div>
	左上と左下だけ角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>


<div class="skyblue R10TR R10BL">
	<div class="innertitle R6TR R6BL">
		-moz-border-radius-topright / -webkit-border-top-right-radius<br />
		-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius<br />
	</div>
	右上と左下だけ角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>


<div class="lightgreen R10TR R10BR R10BL">
	<div class="innertitle R6TR R6BR R6BL">
		-moz-border-radius-topright / -webkit-border-top-right-radius<br />
		-moz-border-radius-bottomright / -webkit-border-bottom-right-radius<br />
		-moz-border-radius-bottomleft / -webkit-border-bottom-left-radius<br />
	</div>
	右上と右下と左下を角丸にしてみる。<br />
	画像 or JavaScript使わないでも角丸が実現できる。
</div>




<p>
IE8では使えるのかねぇ…。
</p>


<div class="skyblue R10A">
	<div class="innertitle R6A">参考サイト</div>
	<a style="color:#fff;" href="http://www.css3.info/">CSS3.Info</a><br />
	http://www.css3.info/
</div>
</textarea>


<!--<style type="text/css">
.radiusALL {
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-opera-border-radius:10px;
}
.radiusTL {
	-moz-border-radius-topleft:10px;
	-webkit-border-top-left-radius:10px;
}
.radiusTR {
	-moz-border-radius-topright:10px;
	-webkit-border-top-right-radius:10px;
}
.radiusBL {
	-moz-border-radius-bottomleft:10px;
	-webkit-border-bottom-left-radius:10px;
}
.radiusBR {
	-moz-border-radius-bottomright:10px;
	-webkit-border-bottom-right-radius:10px;
}
</style>

<div class="radius">
<strong>全部角丸</strong><br />
○○○○○○○○○○○○○○○○○○、<br />
○○○○○○○○○○○○○○○○。<br />
</div>

<div class="radiusTL">
<strong>左上のみ角丸</strong><br />
○○○○○○○○○○○○○○○○○○、<br />
○○○○○○○○○○○○○○○○。<br />
</div>-->]]>
   </content>
</entry>
<entry>
   <title>LinuxでCPU使用率・メモリ占有率ランキングを表示する</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/03/linuxcpu.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.611</id>
   
   <published>2009-03-18T08:09:30Z</published>
   <updated>2009-10-05T22:47:39Z</updated>
   
   <summary> だいぶ前にMunin程までいかないけど、サーバー監視スクリプトを作りました。 ...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="Server" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="117" label="awk" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="114" label="cron" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="83" label="linux" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="115" label="ps" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="111" label="shell" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="116" label="sort" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="113" label="シェルスクリプト" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<p>
だいぶ前にMunin程までいかないけど、サーバー監視スクリプトを作りました。<br />
そのスクリプトのコンセプトは「サーバーに負荷をかけている処理を特定する」というものでした。
</p>

<p>
そこで使った、現行処理のCPU使用率・メモリ占有率ランキング表示方法を記載しておきます。<br />
因みに以下のコマンドをシェルスクリプトで書いて監視スクリプトとしました。
</p>

<pre>
■CPU使用率TOP10を表示する
ps -e aux | sort -r -k 3 | head -n 10

■メモリ占有率TOP10を表示する
ps -e aux | sort -r -k 4 | head -n 10

■項目名がウザい場合は以下の文字列を付与する
ps --no-header
</pre>

<p>
この表示だと見たくない情報も含まれたりしますorz<br />
なので…
</p>]]>
      <![CDATA[<pre>
■CPU使用率TOP20を項目名無しでかつ、整形したデータを表示する
ps --no-header -e aux | sort -r -k 3 | head -n 20 | awk '{print $1,$3,$11;};'

■メモリ占有率TOP20を項目名無しでかつ、整形したデータを表示する
ps --no-header -e aux | sort -r -k 4 | head -n 20 | awk '{print $1,$4,$11;};'

因みに
$1=USER
$3=CPU
とかそういう具合です。普通にpsコマンド打ったときの並び順ですね。
</pre>

<p>更にログに落とすと…。</p>

<pre>
■CPU使用率TOP20を項目名無しでかつ、整形したデータをログに落とす
ps --no-header -e aux | sort -r -k 3 | head -n 20 | awk '{print $1,$3,$11;};' > cpu.log

■メモリ占有率TOP20を項目名無しでかつ、整形したデータをログに落とす
ps --no-header -e aux | sort -r -k 4 | head -n 20 | awk '{print $1,$4,$11;};' > mem.log
</pre>

<p>
まあそれぞれのオプションは「ググれカス」ということでｗ<br />
<b>awk</b>は使えますよ〜
</p>

<p>
※2009年10月6日…今更ながらコマンド間違いに気付くorz<br />
　ソートの部分の「-kr」を「-r -k」へ変更。すみません。
</p>]]>
   </content>
</entry>
<entry>
   <title>CSS3の機能を試してみる…</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/03/css3.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.603</id>
   
   <published>2009-03-03T07:12:39Z</published>
   <updated>2009-03-05T04:09:52Z</updated>
   
   <summary> CSS3の機能を試してみたかったのでココで実験してみます。 角丸のボックスを画...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="109" label="border" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="103" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="108" label="css3" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="90" label="design" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="110" label="radius" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<p>
CSS3の機能を試してみたかったのでココで実験してみます。<br />
角丸のボックスを画像なしで実装するCSSです。<br />
 <b class="caution">
  追記(2009/03/05)：<br />
  - Firefox3.0.6は全部表示できます<br />
  - Opera9.62/IEは表示できません<br />
  - Safari for Windows3.1.2/Google Crome1.0.154.48は一番上と一番下のみ表示できます<br />
 </b>
</p>

<style type="text/css">
.test-radius-all {
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-opera-border-radius:10px;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-trtl {
	border-radius:10px 10px 0 0;
	-webkit-border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;
	-opera-border-radius:10px 10px 0 0;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-brbl {
	border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	-moz-border-radius:0 0 10px 10px;
	-opera-border-radius:0 0 10px 10px;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-trbr {
	border-radius:0 10px 10px 0;
	-webkit-border-radius:0 10px 10px 0;
	-moz-border-radius:0 10px 10px 0;
	-opera-border-radius:0 10px 10px 0;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-tlbl {
	border-radius:10px 0 0 10px;
	-webkit-border-radius:10px 0 0 10px;
	-moz-border-radius:10px 0 0 10px;
	-opera-border-radius:10px 0 0 10px;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-tlbr {
	border-radius:0 0 10px 10px;
	-webkit-border-radius:10px 0 10px 0;
	-moz-border-radius:10px 0 10px 0;
	-opera-border-radius:0 10px 10px 0;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-trbl {
	border-radius:0 10px 0 10px;
	-webkit-border-radius:0 10px 0 10px;
	-moz-border-radius:0 10px 0 10px;
	-opera-border-radius:0 10px 0 10px;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-reference {
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-opera-border-radius:8px;
	padding:8px;
	border:1px solid #666;
	background:#aaa;
	color:#fff;
}
.test-radius-reference-in {
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-opera-border-radius:6px;
	padding:6px;
	border:1px solid #666;
	background:#fc0;
	color:#000;
}
</style>

<div class="test-radius-all">
<strong>border-radius</strong><br />
この機能いいよー。<br />
画像orJavaScript使わないでも角丸が実現できる。
</div>

<div class="test-radius-trtl">
<strong>右上と左上だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>
]]>
      <![CDATA[<div class="test-radius-brbl">
<strong>右下と左下だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>

<div class="test-radius-trbr">
<strong>右上と右下だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>

<div class="test-radius-tlbl">
<strong>左上と左下だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>

<div class="test-radius-tlbr">
<strong>左上と右下だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>

<div class="test-radius-trbl">
<strong>右上と左下だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>

<p>
久しぶりにCSSで無邪気に遊んでしまったｗ<br />
まだまだ覚えることは無くならそうです…。<br />
やはり常日頃、勉強や調査が必要ですね。
</p>


<div class="test-radius-reference">
	<div class="test-radius-reference-in">
		<b>−参考サイト</b><br />
		CSS3.Info<br />
		http://www.css3.info/
	</div>
</div>


<b>CSS＆XTHMLソース</b><br />
<textarea cols="60" rows="5" class="monospace"><p>CSS3の機能を試してみたかったのでココで実験してみます。</p>

<style type="text/css">
.test-radius-all {
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	-opera-border-radius:10px;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-trtl {
	border-radius:10px 10px 0 0;
	-webkit-border-radius:10px 10px 0 0;
	-moz-border-radius:10px 10px 0 0;
	-opera-border-radius:10px 10px 0 0;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-brbl {
	border-radius:0 0 10px 10px;
	-webkit-border-radius:0 0 10px 10px;
	-moz-border-radius:0 0 10px 10px;
	-opera-border-radius:0 0 10px 10px;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-trbr {
	border-radius:0 10px 10px 0;
	-webkit-border-radius:0 10px 10px 0;
	-moz-border-radius:0 10px 10px 0;
	-opera-border-radius:0 10px 10px 0;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-tlbl {
	border-radius:10px 0 0 10px;
	-webkit-border-radius:10px 0 0 10px;
	-moz-border-radius:10px 0 0 10px;
	-opera-border-radius:10px 0 0 10px;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-tlbr {
	border-radius:0 0 10px 10px;
	-webkit-border-radius:10px 0 10px 0;
	-moz-border-radius:10px 0 10px 0;
	-opera-border-radius:0 10px 10px 0;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-trbl {
	border-radius:0 10px 0 10px;
	-webkit-border-radius:0 10px 0 10px;
	-moz-border-radius:0 10px 0 10px;
	-opera-border-radius:0 10px 0 10px;
	margin-bottom:10px;
	padding:10px;
	border:1px solid #000;
	background:#ddd;
}
.test-radius-reference {
	border-radius:8px;
	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	-opera-border-radius:8px;
	padding:8px;
	border:1px solid #666;
	background:#aaa;
	color:#fff;
}
.test-radius-reference-in {
	border-radius:6px;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-opera-border-radius:6px;
	padding:6px;
	border:1px solid #666;
	background:#fc0;
	color:#000;
}
</style>

<div class="test-radius-all">
<strong>border-radius</strong><br />
この機能いいよー。<br />
画像orJavaScript使わないでも角丸が実現できる。
</div>

<div class="test-radius-trtl">
<strong>右上と左上だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>

<div class="test-radius-brbl">
<strong>右下と左下だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>

<div class="test-radius-trbr">
<strong>右上と右下だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>

<div class="test-radius-tlbl">
<strong>左上と左下だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>

<div class="test-radius-tlbr">
<strong>左上と右下だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>

<div class="test-radius-trbl">
<strong>右上と左下だけ角丸</strong><br />
ほげほげほげ〜。<br />
ほげほげほげほげほげほげほげ〜。
</div>

<p>
久しぶりにCSSで無邪気に遊んでしまったｗ<br />
まだまだ覚えることは無くならそうです…。<br />
やはり常日頃、勉強や調査が必要ですね。
</p>


<div class="test-radius-reference">
	<div class="test-radius-reference-in">
		<b>−参考サイト</b><br />
		CSS3.Info<br />
		http://www.css3.info/
	</div>
</div></textarea>
]]>
   </content>
</entry>
<entry>
   <title>【CSS】tooltip？ポップアップ？の小技</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/02/csstooltip.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.582</id>
   
   <published>2009-02-10T01:01:50Z</published>
   <updated>2009-02-24T10:05:56Z</updated>
   
   <summary> 	 		名前 		今月 ▲ ▼ 		先月 ▲ ▼ 		合計 ▲ ▼ 	 	 	...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="CSS" scheme="http://www.sixapart.com/ns/types#category" />
         <category term="HTML/XHTML" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="103" label="css" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="71" label="html" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="106" label="popup" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="105" label="stylesheet" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="100" label="table" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="107" label="tooltips" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="104" label="xhtml" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<table cellpadding="0" cellspacing="2" class="coloring">
<thead>
	<tr>
		<th>名前</th>
		<th><a class="sortTips" href="#">今月</a> <a href="#">▲</a> <a href="#">▼</a></th>
		<th><a class="sortTips" href="#">先月</a> <a href="#">▲</a> <a href="#">▼</a></th>
		<th><a class="sortTips" href="#">合計</a> <a href="#">▲</a> <a href="#">▼</a></th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>ほげ1</td>
		<td>1</td>
		<td>10</td>
		<td>11</td>
	</tr>
	<tr>
		<td>ほげ2</td>
		<td>1</td>
		<td>23</td>
		<td>24</td>
	</tr>
	<tr>
		<td>ほげ3</td>
		<td>5</td>
		<td>34</td>
		<td>39</td>
	</tr>
	<tr>
		<td>ほげ4</td>
		<td>5</td>
		<td>876</td>
		<td>881</td>
	</tr>
</tbody>
</table>
<p>テーブルとかに昇順・降順リンク付けるときって大抵こんな感じでやってたけど、<br />最近は、XHTML+CSSだけでツールチップ的なものにして、こんな感じでやってます。</p>
]]>
      <![CDATA[<table cellpadding="0" cellspacing="2" class="coloring">
<thead>
	<tr>
		<th>名前</th>
		<th><a class="sortTips" href="#">今月<b><input type="button" onclick="location.href='#';" value="昇順" /><input type="button" onclick="location.href='#';" value="降順" /></b></a></th>
		<th><a class="sortTips" href="#">先月<b><input type="button" onclick="location.href='#';" value="昇順" /><input type="button" onclick="location.href='#';" value="降順" /></b></a></th>
		<th><a class="sortTips" href="#">合計<b><input type="button" onclick="location.href='#';" value="昇順" /><input type="button" onclick="location.href='#';" value="降順" /></b></a></th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>ほげ1</td>
		<td>1</td>
		<td>10</td>
		<td>11</td>
	</tr>
	<tr>
		<td>ほげ2</td>
		<td>1</td>
		<td>23</td>
		<td>24</td>
	</tr>
	<tr>
		<td>ほげ3</td>
		<td>5</td>
		<td>34</td>
		<td>39</td>
	</tr>
	<tr>
		<td>ほげ4</td>
		<td>5</td>
		<td>876</td>
		<td>881</td>
	</tr>
</tbody>
</table>


<style type="text/css">
a.sortTips {
	position:relative;
	cursor:default;
}

a.sortTips b {
	padding:3px;
	color:#fff;
	font:normal normal normal 10px/100% Arial,Verdana,monospace;
	position:absolute;
	top:-40px;
	right:-30px;
	visibility:hidden;
	background:#000;
	filter:alpha(opacity=90);
	-moz-opacity:0.90;
	opacity:0.90;
	z-index:1000;
}
a.sortTips b input {
	display:block;
}

a.sortTips:hover,
a.sortTips:hover b {
	visibility:visible;
	text-decoration:none;
	cursor:pointer;
}
</style>

<p>ご参考までに…。</p>

<p>
ソース：<br />
<textarea readonly="readonly" onclick="this.select()">
<table cellpadding="0" cellspacing="2" class="coloring">
<thead>
	<tr>
		<th>名前</th>
		<th><a class="sortTips" href="#">今月</a> <a href="#">▲</a> <a href="#">▼</a></th>
		<th><a class="sortTips" href="#">先月</a> <a href="#">▲</a> <a href="#">▼</a></th>
		<th><a class="sortTips" href="#">合計</a> <a href="#">▲</a> <a href="#">▼</a></th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>ほげ1</td>
		<td>1</td>
		<td>10</td>
		<td>11</td>
	</tr>
	<tr>
		<td>ほげ2</td>
		<td>1</td>
		<td>23</td>
		<td>24</td>
	</tr>
	<tr>
		<td>ほげ3</td>
		<td>5</td>
		<td>34</td>
		<td>39</td>
	</tr>
	<tr>
		<td>ほげ4</td>
		<td>5</td>
		<td>876</td>
		<td>881</td>
	</tr>
</tbody>
</table>

<p>最近は、XHTML+CSSだけでツールチップ的なものにしてやってます。</p>

<table cellpadding="0" cellspacing="2" class="coloring">
<thead>
	<tr>
		<th>名前</th>
		<th><a class="sortTips" href="#">今月<b><input type="button" onclick="location.href='#';" value="昇順" /><input type="button" onclick="location.href='#';" value="降順" /></b></a></th>
		<th><a class="sortTips" href="#">先月<b><input type="button" onclick="location.href='#';" value="昇順" /><input type="button" onclick="location.href='#';" value="降順" /></b></a></th>
		<th><a class="sortTips" href="#">合計<b><input type="button" onclick="location.href='#';" value="昇順" /><input type="button" onclick="location.href='#';" value="降順" /></b></a></th>
	</tr>
</thead>
<tbody>
	<tr>
		<td>ほげ1</td>
		<td>1</td>
		<td>10</td>
		<td>11</td>
	</tr>
	<tr>
		<td>ほげ2</td>
		<td>1</td>
		<td>23</td>
		<td>24</td>
	</tr>
	<tr>
		<td>ほげ3</td>
		<td>5</td>
		<td>34</td>
		<td>39</td>
	</tr>
	<tr>
		<td>ほげ4</td>
		<td>5</td>
		<td>876</td>
		<td>881</td>
	</tr>
</tbody>
</table>


<style type="text/css">
a.sortTips {
	position:relative;
	cursor:default;
}

a.sortTips b {
	padding:3px;
	color:#fff;
	font:normal normal normal 10px/100% Arial,Verdana,monospace;
	position:absolute;
	top:-40px;
	right:-30px;
	visibility:hidden;
	background:#000;
	filter:alpha(opacity=90);
	-moz-opacity:0.90;
	opacity:0.90;
	z-index:1000;
}
a.sortTips b input {
	display:block;
}

a.sortTips:hover,
a.sortTips:hover b {
	visibility:visible;
	text-decoration:none;
	cursor:pointer;
}
</style>
</textarea>
</p>]]>
   </content>
</entry>
<entry>
   <title>【メモ】Linux起動時の稼動サービス制御</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/02/linux.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.577</id>
   
   <published>2009-02-05T00:45:12Z</published>
   <updated>2009-02-05T00:52:46Z</updated>
   
   <summary>またブログパーツ助っ人サーバーですが…。 いつも起動時に必須サービスをスタートさ...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="Server" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="83" label="linux" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="81" label="server" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="102" label="service" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<p>またブログパーツ助っ人サーバーですが…。</p>

<p>いつも起動時に必須サービスをスタートさせるのですが、これは忘れると大変なことになるので起動したらスタートするようにできないものかと調査したらありました。</p>

まず
<pre>
# chkconfig postfix --list
postfix         0:off   1:off   2:off   3:off   4:off   5:off   6:off
</pre>
<p>とやってなっていたら起動時に稼動させられません。</p>

そこで
<pre>
# chkconfig postfix on
</pre>
<p>とすれば大丈夫みたいです。</p>

次回再起動時にチェックしてみよう。]]>
      
   </content>
</entry>
<entry>
   <title>Logwatchのメールに書かれてあることを理解する</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/01/logwatch.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.569</id>
   
   <published>2009-01-29T08:08:45Z</published>
   <updated>2009-01-29T08:54:03Z</updated>
   
   <summary>ブログパーツ助っ人サーバーを徘徊していたら、「メールが着てます」って言われたので...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="Server" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="83" label="linux" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="101" label="logwatch" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="81" label="server" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<p>ブログパーツ助っ人サーバーを徘徊していたら、「メールが着てます」って言われたので見てみる。</p>

<pre>
# mail
</pre>

<p>そうすると「<b>Logwatch</b>」からのお知らせだったようで、<br />
中身をみてみると…何やら長々と文字列が続いています。</p>

<p>CronやらPostfixやらsshやら色々なログが記載されている中、pam_unixの項で手が止まりました。</p>

<pre>
 --------------------- pam_unix Begin ------------------------ 
sshd:
   Authentication Failures:
      unknown (*.*.*.*): 121 Time(s)
      root (*.*.*.*): 59 Time(s)
      unknown (*.*.*.*): 43 Time(s)
      admin (*.*.*.*): 7 Time(s)
      adm (*.*.*.*): 2 Time(s)
      adm (*.*.*.*): 1 Time(s)
      admin (*.*.*.*): 1 Time(s)
      apache (*.*.*.*): 1 Time(s)
      まだまだ続く。。。※IPは伏せてあります。
 --------------------- pam_unix End ------------------------ 
</pre>

<p>なんぞこれ？<br />
俺のサーバーにクラックしようとしてんのか？</p>
]]>
      <![CDATA[<p>まあまあ（汗　とりあえず「Logwatch」について調べてみましょう。</p>

<p><b>Logwatch</b><br />
- <a href="http://www.logwatch.org/" target="_blank">http://www.logwatch.org/</a><br />
公式サイトを見てみると…<br />
カスタマイズ可能なログ解析システムで、サーバー監視レポートをメールで送付してくれるらしい。
</p>

<p>その次に<b>pam_unix</b>。</p>

<p>
<b>PAM - Pluggable Authentication Modules</b><br />
- <a href="http://www.linux.or.jp/JF/JFdocs/User-Authentication-HOWTO/pam.html" target="_blank">http://www.linux.or.jp/JF/JFdocs/User-Authentication-HOWTO/pam.html</a><br />
認証、アカウント、パスワードの管理モジュールのUNIX用ということか。
</p>

<p>
つまり、SSHでログインしようとして認証失敗（Authentication Failures）してるってことですね。<br />
一日の間にこれだけの攻撃をしてくるのか。。。<br />
でもこれって、中小規模のサービスじゃ何処でもあることなのか？<br />
とりあえず対策として、何回かアカウント・パスワード間違ったらそのIPから一定時間アクセスできないようにするってところでしょうか？<br />
どうやるんでしょう？<br />
<br />
念のためパスワードの桁数増やそうかなー。
</p>

<p>因みにIPでwhoisしたらチョンゴーだった。</p>]]>
   </content>
</entry>
<entry>
   <title>作ったjQueryプラグインを公開します！</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/01/jquery_1.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.568</id>
   
   <published>2009-01-29T03:48:28Z</published>
   <updated>2009-04-01T04:18:29Z</updated>
   
   <summary>今まで作ったjQueryプラグインの中で比較的完成度の高いものを公開します。 　...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="ｊQuery" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="99" label="follower" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="26" label="graph" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="23" label="javascript" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="22" label="jquery" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="25" label="plugins" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="100" label="table" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<p>今まで作ったjQueryプラグインの中で比較的完成度の高いものを公開します。</p>

<p>
　<b>NetsketLabs - TETSUWO Labs</b><br />
　<s>http://labs.netsket.com/tetsuwo/javascript/jquery/</s> - 2009/04/01修正<br />
　<a href="http://labs.netsket.com/tetsuwo/jquery/" target="_blank">http://labs.netsket.com/tetsuwo/jquery/</a>
</p>

<p>最初からプラグイン化目的で作成したわけではないので、色々不手際なところがあるかもです。<br />
でも、色々なプラグインを見て勉強してから作ったので…あんまりイジメナイで下さい。</p>]]>
      
   </content>
</entry>
<entry>
   <title>Apacheのhttpdモジュールを後から追加する</title>
   <link rel="alternate" type="text/html" href="http://blog.netsket.com/ooishi/2009/01/apachehttpd.html" />
   <id>tag:blog.netsket.com,2009:/ooishi//4.566</id>
   
   <published>2009-01-29T01:51:40Z</published>
   <updated>2009-01-29T02:16:13Z</updated>
   
   <summary>またまたそういえばですが、ブログパーツ助っ人とdraggerのサーバー構築中に ...</summary>
   <author>
      <name></name>
      
   </author>
         <category term="Server" scheme="http://www.sixapart.com/ns/types#category" />
   
   <category term="91" label="apache" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="93" label="apxs" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="94" label="dso" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="92" label="httpd" scheme="http://www.sixapart.com/ns/types#tag" />
   <category term="95" label="module" scheme="http://www.sixapart.com/ns/types#tag" />
   
   <content type="html" xml:lang="ja" xml:base="http://blog.netsket.com/ooishi/">
      <![CDATA[<p>またまたそういえばですが、ブログパーツ助っ人とdraggerのサーバー構築中に
Apacheのhttpdモジュールを追加したくなり、再ビルドする以外に方法がないか調べたら…ありました。</p>

<p>まあ最初のビルド時にDSOモジュールを入れないと駄目ですが。</p>

<p><b>DSO - Dynamic Shared Object</b><br />
- <a href="http://httpd.apache.org/docs/2.2/ja/dso.html" target="_blank">http://httpd.apache.org/docs/2.2/ja/dso.html</a></p>

<p><b>apxs - APache eXtenSion tool</b><br />
- <a href="http://httpd.apache.org/docs/2.0/ja/programs/apxs.html" target="_blank">http://httpd.apache.org/docs/2.0/ja/programs/apxs.html</a></p>

<p>で、このapxsを使ってモジュールを追加します。
ソースの在り処「/usr/local/src/httpd-2.0.56/modules/」</p>

<pre>
# /usr/local/apache2/bin/apxs -i -a -c /usr/local/src/httpd-2.0.56/modules/mappers/mod_rewrite.c
# /usr/local/apache2/bin/apxs -i -a -c /usr/local/src/httpd-2.0.56/modules/その他諸々…
</pre>

説明
<pre>
-i  … Apacheの所定の位置にインストール
-a … LoadModuleを追加する
-c … ソースファイル指定
</pre>]]>
      
   </content>
</entry>

</feed>
