横並びのブロック要素の高さを自動調節するTips

前回はfloatを使用した子要素が親要素をはみ出す問題を解決するために、overflowを使う方法を紹介したが、この方法でも横並びのブロック要素の高さを揃えることはできない。

具体的にどういうことかというと、以下のような場合だ。

■ブロック要素を横並びに配置した例

一番右側のブロック

真ん中のブロック

一番左側のブロック

このように子要素の高さが同じなら問題はないが、高さがかわると下のようになる。

一番右側のブロックの高さが変わるように内容を記述

真ん中のブロック

一番左側のブロックはさらに高くなるようにする。このブロックが一番高いので、他の並びのブロックが合わせるようにしたい。

ソースコード

<div style="width:100px; padding: 5px; background-color: #FFC; float: left; color: #000;">一番右側のブロックの高さが変わるように内容を記述</div>
<div style="width:100px; padding: 5px; background-color: #FCF; float: left; color: #000;">真ん中のブロック</div>
<div style="width:100px; padding: 5px; background-color: #CFF; float: left; color: #000;">一番左側のブロックはさらに高くなるようにする。このブロックが一番高いので、他の並びのブロックが合わせるようにしたい。</div>

一見、「higth」に100%やautoを指定すれば調整してくれそうだが、これは上位要素に対しての相対的な指定なので、結局値が決まっていなければ意味がない。もちろん、最も高いブロックに合わせて高さを指定すれば問題ないが、内容が不特定の場合それでは困る。また、親要素を作って全体を入れ子にする方法もあるが、罫線で囲ったり、それぞれの子要素に別々の背景を適用したりする場合はやはり高さをそろえる必要がある。

こうした問題を解決する最も手軽な方法は、floatではなく、「display:table(-cell)」を使うことだ。
display:table(-cell)は、指定した要素をテーブルやセルとして扱うというもの。tableタグやtdタグのようなものだと考えれば良いだろう。使い方は親要素に「display:table」を、子要素に「display:table-cell」を指定するだけで、floatのようにclearしてやる必要もない。

■display:tableを使用した例

一番右側のブロックの高さが変わるように内容を記述

真ん中のブロック

一番左側のブロックはさらに高くなるようにする。このブロックが一番高いので、他の並びのブロックが合わせるようにしたい。

ソースコード

<div style="display:table;">
<div style="width:100px; padding: 5px; background-color: #FFC; display:table-cell; color: #000;">一番右側のブロックの高さが変わるように内容を記述</div>
<div style="width:100px; padding: 5px; background-color: #FCF; display:table-cell; color: #000;">真ん中のブロック</div>
<div style="width:100px; padding: 5px; background-color: #CFF; display:table-cell; color: #000;">一番左側のブロックはさらに高くなるようにする。このブロックが一番高いので、他の並びのブロックが合わせるようにしたい。</div>
</div>

このように非常に簡単だ。ただし、IE7以前には対応していないので注意が必要だ。

overflowでfloatを自動高さ調整するTips

以前に、こちらの記事で子要素にfloatを使った場合、親要素が高さを自動で調整してくれず、枠からはみ出してしまう問題の解決策を書いたが、別の方法があったので紹介しよう。

■floatを使用すると親要素からはみ出す例

一番外側のブロック

真ん中のブロック

このように高さが違うと子要素が親要素をはみ出す

ソースコード

<div style="width:300px; padding: 5px; background-color: #FF0; color: #000;">一番外側のブロック
<div style="width:200px; padding: 5px; background-color: #6CF; color: #000;">真ん中のブロック
<div style="width:100px; padding: 5px; background-color: #F60; float: left; color: #000;">このように高さが違うと子要素が親要素をはみ出す</div>
</div></div>

以前の方法は、floatを使うと階層が変わってしまうために起こる現象なのだから、親要素にもfloatを適用すれば良いというものだった。ただ、この方法だと入れ子にするたびに、すべてのブロック要素にfloatを書かなければならない。

■親要素にfloatを適用した例

一番外側のブロック

真ん中のブロック

子要素が親要素のブロック内に収まるようになる

ソースコード

<div style="float: left; width:300px; padding: 5px; background-color: #FF0; color: #000;">一番外側のブロック
<div style="float: left; width:200px; padding: 5px; background-color: #6CF; color: #000;">真ん中のブロック
<div style="width:100px; padding: 5px; background-color: #F60; float: left; color: #000;">子要素が親要素のブロック内に収まるようになる</div>
</div></div>

ここからが本題。実はこの方法以外にも「overflow」を使うことで、問題を解決することができる。しかも、親要素にfloatを適用していく方法と違い、本来floatを使用するはずの子要素の直上にある親要素にだけ記述すれば良いのだ。

■2番目のブロックにoverflowを適用した例

一番外側のブロック

真ん中のブロック

こちらも親要素のブロック内に収まるようになる

ソースコード

<div style="width:300px; padding: 5px; background-color: #FF0; color: #000;">一番外側のブロック
<div style="overflow: auto; width:200px; padding: 5px; background-color: #6CF; color: #000;">真ん中のブロック
<div style="width:100px; padding: 5px; background-color: #F60; float: left; color: #000;">こちらも親要素のブロック内に収まるようになる</div>
</div></div>

どうやらclearfixと同じような役割をするようだ。
ただし、親要素にfloatを適用する方法でも、overflowを使う方法でも解決できない問題が発生する。それはfloatで横並びにした場合に、高さが自動で揃わないという現象だ。
しかし、この問題を解決した上でさらに横並びのブロック要素を使いやすくするテクニックがあるので、次回はそれを紹介しよう。

Google AdWordsの返金手続きは面倒!?

Google AdWordsは、ご存知のようにGoogleが提供する
PPC広告の一種で、Yahoo!のプロモーション広告と共に、
今やインターネットの宣伝になくてはならない存在になりつつある。
ただし、宣伝だからといってどんなサイトでも有りかというと、
そうではなくて、一定の審査基準をクリアしないと掲載できないことになっている。
特にGoogle AdWordsではアフィリエイトを厳しく制限しているようで、
この種のサイトを宣伝しようとする場合は注意が必要だ。
実際、私自身もアカウントを取得してみたものの、
肝心の宣伝しようとしていたサイトは不承認となってしまった。
Yahoo!プロモーション広告では問題なく承認されたサイトなのだが。

ここで問題になったのは当時は勝手がわからなかったこともあり、
広告審査が降りる前にアカウントに入金してしまったことだ。
これは声を大にして言っておきたいが、
AdWordsに入金するのは必ず広告審査が承認されてからにしよう。
でないと私のように面倒な手続きに煩わされることになる。

宣伝できないなら当然、入金した金は返してもらわなければならない。
AdWordsで返金手続きをするにはアカウントをキャンセルした上で、
所定の払い戻しリクエストフォームを印刷し、
FAXもしくは郵送で送るという手続きが必要だ。
WEB上やEメールなどでは受け付けてもらえない。
Google側はあくまでセキュリティーのためとしているが、
入金する時はWEB上の手続きでできるのに、返金は不可というのは
わざと手続きを複雑にして返金しにくくしているのではないかと疑ってしまう。

また、このアカウントのキャンセルというのがわかりにくく、
最初は登録したGmailアドレスなども一切削除されるのかと思ったが、
どうやらそうではないらしく、キャンセルされるのはAdWordsに関することだけらしい。
しかも、アカウント自体は残るようでキャンセル後もログインや
Gmailの利用はできるようだ(要するに「アカウントの停止」ということらしい)。
リクエストフォームを送ってもGoogle側からEメールで了承した旨などの連絡は
一切こないので、リクエストフォームが届いたかはどうかは
AdWordsにログインして確認するしかない
(キャンセルしたアカウントにログインできることもGmailが使えることにも
しばらく気づかなかったので、リクエストフォームが届いたかは返金されるまで
確認する方法がないのかと思っていた)。
なお、払い戻しには約1ヶ月ほどかかるそうだ。

MetaTrader4「Build500」リリースに伴う再インストールのためのTips

MetaTrader4(メタトレーダー4、以下MT4)に
いよいよ新バージョン「Build500」がリリースされた。
これに伴い、8月1日以降、古いバージョンではMT4を利用できなくなった。
(接続状態に「旧バージョン」と表示されているはず)
これまでも定期的にバージョンアップしてきたMT4だが、
それらは原則として起動時に自動でアップーデートされるだけだったのだが、
今回は大きな改変のためなのか、
プログラム自体を再インストールする必要があるようだ(Windows XPの場合、以下も同様)。

とはいえ、単純にアンインストール→再インストールしていたのでは、
これまでの設定や自分で導入したカスタムインジケーターなどが
失われてしまう可能性がある。
そこで再インストールするに当たっての注意事項やテクニックをまとめてみた。

まず、一番確実なのは古いMT4を削除する前にインストールフォルダを
丸ごとバックアップしてしまうことだ。
丸ごとといっても普通に利用している分には数十MB程度なので、
大した負担にはならないはずだ。再インストール・再設定した後、
様子を見て問題なければ削除すれば良い。

インストールフォルダは特に設定を変更していなければ
通常C:Program Files内にあるはずなので探してみてほしい。
無事、バックアップしたら「スタート」→「すべてのプログラム」から
対象のMT4を選択して「Uninstall」で可能。
なお、これだけでは恐らくすべて削除されていないと思うので、
気になる人は残ったインストールフォルダ毎削除してしまえば良い。

続いて新しいバージョンのMT4をダウンロードする。
MT4はデベロッパー毎にカスタマイズされたものが提供されているので、
元のMT4と同じデベロッパーのものを選ぶのが良いだろう。
以下に代表的なデベロッパーのダウンロードページをリンクしておく。

・FXDD
・Alpari Japan
・GCI

指示通りインストールしたら、元通りの設定に戻すのに必要なファイルを
先ほどバックアップしたフォルダから移していこう。

・カスタムインジケーター
「experts」→「indicators」内のファイル全て
(dll等を使用している場合は「libraries」内のファイルも)
・定型チャート
「templates」内のファイル全て(「experts」内の「templates」ではなく
インストールフォルダ直下の「templates」なので注意)
・表示画面構成
「profiles」→「default」内のファイル全て
・入手した過去データ
「history」内のフォルダ内
・その他
「config」内のemail.ini　恐らくEメールアラートの設定

この当たりを戻せば大体元の環境を再現できるだろう。

OCNからサービス停止の連絡無し

管理人は別テーマでNTTコミュニケーションズのISP「OCN」の
ブログサービス「ブログ人」を利用しているのだが、
先日からログインできない状態になっていた。
(別ページに飛ばされるとかではなく、完全につながらない状態)

OCNといえば、つい先日、不正アクセスを受けて
IDやパスワードが流出したばかり。
この件で一時的につながり難くなっているのかと、
しばらく静観していのだが、
一向にログイン可能な状態にならない。

そこで調べてみると、26日未明に再び不正アクセスを受けて、
「ブログ人」を始めとする幾つかのサービスで
ログインを停止しているとのこと。

もちろん、セキュリティ管理の甘さも大問題なのだが、
唖然としたのはこの件に関して
ユーザーである私の元には一切何の連絡もなく、
調べてみるまでログインできない原因をまったく把握できなかったのだ。
先の流出時には注意喚起とお詫びのメールが届いたが、
今回のログイン停止については何の音沙汰もない。

言っておくが、「ブログ人」は誰でも利用できる無料サービスではない。
OCNの会員、つまり利用料金を払っている人間が使うサービスである。
にも関わらず、この対応はどうかと思うのだが。

たまたま私にだけ何らかの原因で連絡が届かなかっただけという可能性も否定しきれないが、
もともとブログとしての機能が中途半端で使い勝手が悪く、
ずっと移転したいと思っていたのが、面倒臭くて先送りにしていたのが現状だ。

実はこのブログは私が最初に開設したブログでもある。
まだ、ブログに何の知識もなかった頃に加入したプロバイダのサービスだからという理由だけで、
利用し始めたに過ぎない。
無料ブログの方がよほど使いやすく、今だったら絶対に利用しないだろう。

そんなわけでそろそろ本当に引越しを考えなければならないかも知れない。