MW211 EXIT

devlog
SVN/排他属性の設定方法
2014年03月07日
「TortoiseSVN」の「プロパティ」を選択。
┌──────────────────────────────────────┐
│プロパティ                                                                  │
├──────────────────────────────────────┤
│┌────────────────────────────────────┐│
││                                                                        ││
││                                                                        ││
││                                                                        ││
│└────────────────────────────────────┘│
│  ┌────┐┌────┐┌────┐┌────┐┌────┐┌────┐  │
│  │        ││        ││        ││        ││        ││新規    │  │
│  └────┘└────┘└────┘└────┘└────┘└────┘  │
└──────────────────────────────────────┘
「新規」を右クリックして、「ロックが必要」を選びウインドウを開く。
┌──────────────────────────────────────┐
│ロックが必要                                                                │
├──────────────────────────────────────┤
│  ●ロックが必要(読み取り専用で更新)                                        │
│  ○ロックは不要                                                            │
│                                  ┌─────┐┌─────┐┌─────┐│
│                                  │    OK    ││キャンセル││  ヘルプ  ││
│                                  └─────┘└─────┘└─────┘│
└──────────────────────────────────────┘
「ロックが必要」を選び、「OK」を押下。
この時点ではまだ設定は反映されないので、最後に「SVNコミット」を実行して完了。
分類:SVN
MySQL/結果に連番をふる
2014年03月06日
得点が多い順にならべて順位をつけるSQLは以下のような感じ。
┌──────────────────────────────────────┐
│SELECT 列,                                                                  │
│       (SELECT COUNT(*)                                                     │
│            FROM 表 AS 別表                                                 │
│            WHERE 表.得点 < 別表.得点                                       │
│       ) + 1 AS `順位`                                                      │
│    FROM 表                                                                 │
│    ORDER BY 得点 DESC;                                                     │
└──────────────────────────────────────┘

逆に、失点の少ない順にならべて順位をつけるSQLは以下のような感じ。
┌──────────────────────────────────────┐
│SELECT 列,                                                                  │
│       (SELECT COUNT(*)                                                     │
│            FROM 表 AS 別表                                                 │
│            WHERE 表.失点 > 別表.失点                                       │
│       ) + 1 AS `順位`                                                      │
│    FROM 表                                                                 │
│    ORDER BY 失点 ASC;                                                      │
└──────────────────────────────────────┘

自己結合を使う。
分類:MySQL
jQuery/セレクタ「:hidden」に注意
2014年03月05日
「input type="submit"」を指すセレクタの「$(':submit').」と同じように
「input type="hidden"」を指すセレクタとして「$(':hidden').」が使える。

でも、これは非表示要素(「display:none;」)も対象とするので
意図しないところを指してしまい嵌ってしまうことがある。
「$('input:hidden').」と、絞り込んだ方が安全だと思う。
分類:注意、jQuery
CSS/左寄せセンタリング
2014年03月04日
┌──────────────────────────────────────┐
│                                   あいう                                   │
│                                   えお                                     │
└──────────────────────────────────────┘
上記のように複数行を左寄せしてさらにそれをセンタリングするには、
以下いずれかのtableタグで実現できる。
┌──────────────────────────────────────┐
│<table style="margin:auto;">                                                │
│  <tr><td>あいう<br>えお</td></tr>                                          │
│</table>                                                                    │
└──────────────────────────────────────┘
┌──────────────────────────────────────┐
│<table style="margin:auto;">                                                │
│  <tr><td>あいう</td></tr>                                                  │
│  <tr><td>えお</td></tr>                                                    │
│</table>                                                                    │
└──────────────────────────────────────┘
これをtableタグを使わずにdivタグでできないものか?

こうする。
┌──────────────────────────────────────┐
│body {                                                                      │
│    text-align          :center;                                            │
│}                                                                           │
│div {                                                                       │
│    display             :inline-block;                                      │
│    text-align          :left;                                              │
│}                                                                           │
├──────────────────────────────────────┤
│<body>                                                                      │
│<div>あいう<br/>えお</div>                                                  │
│</body>                                                                     │
└──────────────────────────────────────┘
「display:inline-block;」を使うのだ。
純粋なブロック要素でなくなるので、「margin:auto;」は使えないが、
外側で「text-align:center;」してあげればよい。
なお、外側のセンタリングが内側にも継承されるので、
内側で左寄せ「text-align:left;」してあげるのを忘れずに。

なお、「display:inline-block;」はIE8から使用可能となった(IE7以前は使えない)。
分類:CSS
主な仮想化ソフト
2014年02月26日
VMware     … VMware社製。Player版は非営利目的なら無償。
VirtualBox … Oracle社製。オープンソース、無償。
Hyper-V    … Microsoft社製。WindowsServer2008標準付属。
Xen        … Citrix社製。オープンソース、Server版は無償。
KVM        … Linux向け。オープンソース。
分類:IT全般
正規表現/行末が特定の文字でないもの
2014年02月23日
秀丸エディタで、行末が「a」という文字で終わらないものをヒットするには?
┌──────────────────────────────────────┐
│[^a]$                                                                       │
└──────────────────────────────────────┘

で、こいつでgrepすれば、その行のみ抽出…と思ったら、
ほぼ全ての行がヒットしてしまった。

もう一度元に戻って、前出の正規表現で検索していくと…。
そう、気にしていなかったが、「a」という文字で終わっている行も
微妙にその末尾(改行コード?)がヒットしているのだ。

よって、grepすればこの行もヒットしてしまうということだ。

じゃ、望む通りに抽出するには、どうすればいいのか?
こうする。
┌──────────────────────────────────────┐
│^(?!.*a$).*$                                                                │
└──────────────────────────────────────┘
むむむ、難しい。
後読みを上手いこと駆使するってことだ。
分類:正規表現
CSS/「;」漏れ対策正規表現
2014年02月22日
CSSで末尾の「;」を忘れると結構厄介だ。

例えばこんな感じ。
┌──────────────────────────────────────┐
│div#main {                                                                  │
│    top                 :0     /* ←「;」が漏れている */                    │
│    height              :1em;  /* ←効かない          */                    │
└──────────────────────────────────────┘
後続の指定が効かなくなってしまう。

ということで、そういうのをみつける正規表現。
┌──────────────────────────────────────┐
│:[^;]*$                                                                     │
└──────────────────────────────────────┘
「:」で始まって、「;」がないまま終わっている行を抽出してくれる。

もちろん、二行に渡って書いたりしたら抽出されてしまうし、
「a:link」みたいなのも抽出されてしまう。
ま、そこはご愛嬌(そんなに多くないはず個別に判断して)ということで。
分類:CSS、正規表現
CSS/float要素の縦幅揃え
2014年02月21日
┌──────────┐
│┌──┬──┬──┐│
││    │    │    ││
││    │    ├──┘│
│└──┤    │      │
│      │    │      │
│      └──┘      │
└──────────┘
float要素を横に並べると、高さが揃わないことがある。
tableタグだったらこんなことにならないのに…などと思ってしまうが
これを解消する方法。

┌──────────────────────────────────────┐
│float           :left;                                                      │
│padding-bottom  : 32767px;                                                  │
│margin-bottom   :-32767px;                                                  │
└──────────────────────────────────────┘
「float:left;」などを定義する要素に、下方向へのとっても大きなパディングと
ネガティブマージンを同時に定義してあげる。
とっても大きなというのは表示ウインドウサイズをはみ出るくらいの大きさ。
ま、指定できる最大値の「32767px」あたりを定義してあげればいい。

これによって、あら不思議、一番長い縦幅に揃ってくれるのだ。
┌──────────┐
│┌──┬──┬──┐│
││    │    │    ││
││    │    ├──┘│
│└──┤    │ ↓ ││
││ ↓ │    │ ↓ ││
│└──└──┘──┘│
└──────────┘
でも、なんか裏技っぽいようなぁ。
なんでdivはtable同等の機能を標準で備えていないんだと
相変わらずの疑問が湧くのであった。

…と思っていたら、将来的には
  「display:table;」(親要素)と「display:table-cell;」(子要素)
ってのが、主流になりそうな感じなのね(IE8から使えてる?)。
分類:CSS
CSS/float要素を内包した領域の幅
2014年02月20日
以下のようなfloat要素を内包するdivタグの場合、高さ(縦幅)は「0」である。
よって、背景色を指定しても表示されない。
┌──────────────────────────────────────┐
│<div style="background-color:#FF0000;">                                     │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
└──────────────────────────────────────┘
通常は、内包する要素によって外側も拡げられるものだが
float要素の場合は、内包とはいっても浮いてる感じなので
外側としては最低限の大きさしか持たない状況になる。

で、これを解消して、外側のdivタグにも高さや横幅を持たせる方法。
以下のいずれか。

(1) 外側のdivタグに「overflow:hidden;」を持たせる
┌──────────────────────────────────────┐
│<div style="overflow:hidden;background-color:#FF0000;">                     │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
└──────────────────────────────────────┘
「overflow:auto;」「overflow:scroll;」でも大丈夫。
既定の「overflow:visible;」がダメなようだ。

(2) clear要素を最後につける
┌──────────────────────────────────────┐
│<div style="background-color:#FF0000;">                                     │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│<div style="clear:both;"></div>                                             │
│</div>                                                                      │
└──────────────────────────────────────┘
「float:left;」向けの「clear:left;」、
「float:right;」向けの「clear:right;」もあるが、
両方兼ねる「clear:both;」が便利。

(3)after疑似要素を使う
┌──────────────────────────────────────┐
│<div style="background-color:#FF0000;" class="■">                          │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
├──────────────────────────────────────┤
│.■:after {                                                                 │
│    content             :"";     /* after疑似要素の必須項目 */              │
│    display             :block;  /* after疑似要素の必須項目 */              │
│    clear               :both;                                              │
│}                                                                           │
└──────────────────────────────────────┘
モダンブラウザ(この場合はIE8以降)であれば、
clear要素のタグをわざわざ作らなくとも、CSS上で制御できる。
「content」の指定がないと効かないので、ダミーで「""」でも指定しておく。

(4) 外側のdivタグ自体を「float:left;」にして「width:100%;」にする
┌──────────────────────────────────────┐
│<div style="float:left;width:100%;background-color:#FF0000;">               │
│<div style="float:left;height:1em;width:1em;"></div>                        │
│</div>                                                                      │
└──────────────────────────────────────┘
ちと強引すぎるが、こういう方法もあるよということで。
分類:CSS
CSS/ネガティブマージンとボーダーⅡ
2014年02月19日
ネガティブマージンの対象を変えれば、自分の領域を減らすっぽいことができる。
  「margin-bottom:-1em;」→「margin-top:-1em;」
┌───────────┐  ┌───────────┐
│div#A {               │  │div#A {               │
│  height        :2em; │  │  height        :2em; │
│  width         :2em; │  │  width         :2em; │
│  border-right  :1em; │  │  border-right  :1em; │
│  border-bottom :1em; │  │  border-bottom :1em; │
│                      │  │  margin-top    :-1em;│
│}                     │  │}                     │
│div#B {               │  │div#B {               │
│  height        :2em; │  │  height        :2em; │
│  width         :2em; │  │  width         :2em; │
│}                     │  │}                     │
├───────────┤  ├───────────┤
│                      │  │    ┌───┬─┐    │
│                      │  │    │      │  │    │
│‥‥┌───┬─┐‥‥│  │‥‥│  A  │  │‥‥│
│    │      │  │    │  │    │      │  │    │
│    │  A  │  │    │  │    ├───┘  │    │
│    │      │  │    │  │    │        a│    │
│    ├───┘  │    │  │    ├───┬─┤    │
│    │        a│    │→│    │      │  │    │
│    ├───┬─┤    │  │    │  B  ├─┤    │
│    │      │  │    │  │    │      │  │    │
│    │  B  ├─┤    │  │    ├─┬─┼─┤    │
│    │      │  │    │  │    │  │  │  │    │
│    └───┴─┘    │  │    └─┴─┴─┘    │
└───────────┘  └───────────┘
もちろん玉突き式に反対側に迷惑をかけることになるのだが、
ウインドウの端っこであれば、ごまかすこともできる。
分類:CSS
前へ 1 … 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 … 156 次へ