徒然 - Liquid Tension Experiment

やりたい事がありすぎるので、徹夜します。

ということで、作業用ＢＧＭ。仕事がはかどるようにやや静かめな曲を中心に集めてみました。


(続きを読む…)

前回作ったテンプレートは、IE以外では「リンクがクリックできない」という問題点を含んだものでした。
実際にソースをコピペして、コンテンツ内容にリンクを含ませると確認できます。

理由としては、
カラム間は一見重なりがないように見えて、実は余白を作って見せかけだけ調整しているためで、
透明な重なり部分がリンクを奥に隠してしまい、クリックが届かない、
というイメージだと思います。

そこで、z-index を使って、

.leftcontents_2columns_leftfix a,
.rightcontents_2columns_leftfix a,
.leftcontents_2columns_rightfix a,
.rightcontents_2columns_rightfix a,
.leftcontents_3columns a,
.rightcontents_3columns a,
.centercontents_3columns a{
	position:relative;
	z-index:666;
}

としてやれば解決できるのですが、
モーダル・ウィンドウを使ったり複雑な構造の場合は z-index を使いたくないし、
そもそも IE6 には　z-index が効かないバグもあるので、できるだけ避けたい、、、

ということで、z-indexを 使わずに修正してみました。

考え方としては、

＜２カラム左固定・右可変＞

●問題点

左ナビ（幅190px)の後に、
可変の右（幅が100%-190px）、
すなわちwidth:100%;margin-left:-190pxのハコ、margin-left:190pxの中身を、
ハコをfloat:leftにして配置すると、
左ナビのリンクが奥に隠れてクリックできない（ただしIEはOK）。
↓

●対策

左ナビの後は、
width:100%;margin-right:-190pxのハコ、margin-right:190pxの中身を、
ハコをfloat:leftにして配置
（float:rightで配置してもOK。ただしfloatにしないと、横幅が確保できない（回り込んでしまう））。
↓

●問題点

右側に190pxの透明な余白ができ、横方向スクロールバーが出現する。
↓

●対策

overflow:hiddenで消す（ただし、Firefoxではwindowをある幅以下にすると出現する。これに対しては未解決）。
↓

●問題点

IEはスクロールバーが消えない。
↓

●対策

IEのみ、最初に作った構造を適用させる。
↓

●結果

全てのブラウザでOK、、、だと嬉しい。

＜２カラム左可変・右固定＞

●問題点なし

↓なぜならば、
可変左（幅が100%-300px）、
すなわち、width:100%;margin-right:-300pxのハコ、margin-right:300pxの中身の後に、
300pxの右ナビをfloat:right（leftでもOK）で配置しているので、重なりは記述のない部分なので。

＜３カラム左右固定・中可変＞

●問題点

左ナビ（幅190px）、右ナビ（幅300px）の後に、
width:100%;margin:0 -300px 0 -190pxのハコ、margin:0 300px 0 190pxの中身を配置しているので、
ナビ部分が重なってリンク部分がクリックできない（IEはOK)。
↓

●対策

上の２カラムで対策を施した構造を応用して作成。
IE以外では、中央カラムに横幅を指定しなくても、右側に左右分のマージンを取るだけでOK。
IEは以前作ったものを使用。



ということで、以下のソースで大丈夫だと思います。

でも、なんでこんなことをやっているかというと、表示に時間がかかる場合の対策やSEO絡みで、記述する順番に制約があるためで、
単にリキッドレイアウトを作るためならもっと簡単に作れると思います。

<style type="text/css">
* {
	margin:0;
	padding:0;
}
h3 {
	clear:both;
	font-weight:bold;
	padding:3em 0 0;
}

/* -- IE以外の横スクロールバー対策 -- */
.forNonIE{
	overflow:hidden;
}


/* --- 2カラム左固定・右可変 --- */
.leftcontents_2columns_leftfix{
	width:190px;
	float:left;
	background:#fee;
}
.rightwrapper_2columns_leftfix{
	width:100%;
	margin:0 -190px 0 0;
	margin:0 0 0 -190px\9;
	float:right;
}
.rightcontents_2columns_leftfix{
	margin:0 190px 0 0;
	margin:0 0 0 190px\9;
	background:#eef;
}


/* --- 2カラム左可変・右固定 --- */
.leftwrapper_2columns_rightfix{
	width:100%;
	margin:0 -300px 0 0;
	float:left;
}
.leftcontents_2columns_rightfix{
	margin:0 300px 0 0;
	background:#fee;
}
.rightcontents_2columns_rightfix{
	width:300px;
	float:right;
	background:#eef;
}


/* --- 3カラム左右固定・中可変 --- */
.leftcontents_3columns{
	width:190px;
	float:left;
	background:#fee;
}
.rightwrapper_3columns{
	width:100%;
	margin:0 -190px 0 0;
	margin:0 0 0 -190px\9;
	float:left;
}
.rightcontents_3columns{
	width:300px;
	margin-right:190px;
	margin-right:0\9; 
	float:right;
	background:#eef;
}

.centerwrapper_3columns{
	width:100%\9;
	margin:0 -300px 0 -190px\9;
	float:right\9;
}
.centercontents_3columns{
	margin:0 490px 0 0;
	margin:0 300px 0 190px\9;
	background:#ccc;
}
</style>


<h3>↓↓2カラム左固定・右可変↓↓</h3>
<div class="forNonIE">
	<div class="leftcontents_2columns_leftfix">
			<a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> 
	</div>
	<div class="rightwrapper_2columns_leftfix">
		<div class="rightcontents_2columns_leftfix">
			<a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 3</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a>
		</div>
	</div>
</div>


<h3>↓↓2カラム左可変・右固定↓↓</h3>
<div class="leftwrapper_2columns_rightfix">
	<div class="leftcontents_2columns_rightfix">
		<a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> 
	</div>
</div>
<div class="rightcontents_2columns_rightfix">
		<a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a>
</div>



<h3>↓↓3カラム左右固定・中可変↓↓</h3>
<div class="forNonIE">
	<div class="leftcontents_3columns">
		<a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> <a href="1">link 1</a> 
	</div>
	<div class="rightwrapper_3columns">
		<div class="rightcontents_3columns">
			<a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a> <a href="2">link 2</a>
		</div>
		<div class="centerwrapper_3columns">
			<div class="centercontents_3columns">
				<a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a> <a href="3">link 3</a>
			</div>
		</div>
	</div> 
</div>

リッキッドなテンションが上がるＢＧＭ

時間がなくて、7月に行ったロンドンの日記すらまだ書けずに困っているところに、とんでもないアルバムを出したDREAM THEATERはホント迷惑です（笑）。睡眠時間がまた減ってしまいました_/乙(､ﾝ､)_、、、寝ずに何度リピートしたことやら。

マイク・ポートノイを愛する者としては切ないほどに名盤で、ジョン・ペトルーシファンとしてはガッツポーズが止まらない傑作。

まるで両親に離婚された子供が父親の所に行こうか母親の所に行こうか悩んでいるかのように、最初は複雑な心境でしたが、聴けば聴くほどに素晴らしく、４周目くらいからようやく「ポートノイ脱退」の悲しみよりも「マンジーニ加入」の喜びの方が大きくなってきました。

冒頭に書いたロンドンでの新生DREAM THEATERライヴで、その気持の整理は克服出来たと思っていたのですが、新譜を聴いて蘇ってきたトラウマのようなマイキー・ショック。そう思わせるほどに今回のアルバムは「新しくなったDREAM THEATERの再出発」を高らかに宣言したかのような内容になっています。

『Awake』や『Metropolis Part 2: Scenes from a Memory』（追記：『Images And Words』）の頃に戻ったかのような印象も受けますが、そこにジョン・ペトルーシ、ジェイムズ・ラブリエ、ジョーダン・ルーデスが各々のソロでやってきた要素が自然な形で融合されており、しかもこれが今まで聴いた中で最高に良いので、リリース前のメンバーの自信に満ちたインタビュー発言もさもありなん、と納得させられました。今までラブリエのソロを聴いて「彼のソロは良いんだよな～」と思っていましたが、まさかその持ち味がこのような形で発揮されるとは思ってもいませんでした。

タイトルについては、伊藤政則氏の解説によると

「A DRAMATIC TURN OF EVENTS」――何となくマイク・ポートノイの脱退と新生DREAM THEATERの旅立ちを想起させるタイトルだが、このタイトルを考え出したジョン・ペトルーシは、「それは偶然だ」と話している。彼は曲の歌詞が完成したとき、そこに一貫したテーマがあることに気がついた。それは、どの曲も何らかの大きな出来事（Big Events）を題材として扱っていて、それが様々な形で変容していったという事実だった。楽曲（歌詞）の成り立ちと、その変容の軌跡は、まさに「A DRAMATIC TURN OF EVENTS」ではないかと感じ取ったわけである。

そうですが、危機的状態でも狼狽ぶりを見せることなく、己の才能で未来を切り開き、進んで行くピエロのジャケットが意味深です。

それにしても今回のドラマー交代騒動が結果的にプラスに働いたことを思うと、一層、マイク・ポートノイも同時に応援したくなります。ジョン・サイクスと絡むのも良いですが、個人的には、ラッセル・アレン、マイク・オーランドとの最強プロジェクト、ADRENALINE MOB でもっと精力的にアルバム制作、ライヴをやって欲しいと強く望みます。

ちなみにこれ↓がロンドンで撮ったマンジーニ加入後のライヴ。途中で止められてしまっていますが。
（写真は後日公開します）





2011年09月06日のCDアルバムデイリーランキングを受けてのfacebookのコメントには胸が熱くなりました。

We’ve always said we have the best fans in the world–they never fail us! This includes our dear friends in Japan who’ve been through so much this year. Today, we heard from our label that our new album A Dramatic Turn Of Events went in on the day of release–at #1 on Total Album Sales Chart! That’s the chart for both the domestic and international artists. We are massively proud! Thanks to all the believers! And Japan, stay strong!

いつも言っていることだけど、我々には世界中に最高のファンがいる。そして、彼らは僕たちを決して裏切ることがない！その中には今年（地震などで）たくさん辛い思いをした日本の仲間もいる。今日、レーベルを通して、新譜の『A Dramatic Turn Of Events』がリリース日のアルバム売上総合ランキングで１位をとったことを聞いた！国内外総合のチャートでだよ。とても誇らしい！信じてくれたみんな、ありがとう！がんばれニッポン！

今回こそは是非とも来日して欲しいです。



時間が無いので簡単に各曲の感想です。詳しくは後日書くかも？

1. On the Backs of Angels

初めて聴いたときは、かなり興奮したもののなぜか「サビがつまらない」と一気にテンションが下がっていたのですが、今聴くとその時の心境が理解できません。キーボードが印象的。ロンドンでのライヴではアルバムどおりの完璧な演奏でした。リリース前、来日前にライヴを体験したことは死ぬまで自慢し続けるでしょう（笑）

2. Build Me Up, Break Me Down

DTでは新機軸な曲ですが、ラブリエのソロではよく聴くタイプ。２曲目にこれがあることによって、その意外性に戸惑いました。個人的には『Awake』の「Caught In A Web」的な立ち位置の印象。

3. Lost Not Forgotten

最初の２曲も良いですが、ここから俄然良くなります！最初のピアノだけでは気づきませんでしたが、これって「Under A Glass Moon Pt.2」？（笑）と思うような最初と最後。ギターソロがかなり好き！

4. This is the Life

イントロのギター・アルペジオが非常にツボ。このアルペジオは「Another Day」「Hell’s Kitchen」「A Nightmare to Remember」「The Count of Tuscany」に出てくるのと同じくらい好きです。前作で言うなら「Wither」と「The Best of Times」、MP2なら「One Last Time」に通じるかも？

5. Bridges in the Sky

最初と最後のシャーマンの声に最初は「何？」と思いましたが、荘厳でドラマチック、テクニカルな展開が好きです。イントロからギターリフの出だしは往年のイングヴェイを思わせされました。そしてサビのヴォーカルと、その時のドラムが良いです！その後、キーボードのオーケストレーションを経てソロへ続くあたりはまるでブラームスやマーラーなどの大規模な交響曲を聴いているようで快感！

6. Outcry

本作中では前曲とこれが最もDTらしい？インスト部分と、ヴォーカルが戻ってくるところが好きです。思う所がたくさんありすぎて書き切れません。「Metropolis Pt.1」「Fatal Tragedy」「Home」「The Dance of Eternity」「In the Presence of Enemies」的！

7. Far from Heaven

ジョーダンのキーボード、特にストリングスの音色が美しくて癒されます。SECRET GARDENのようで、今にもheavenに昇りそうな気分になります。

8. Breaking All Illusions

テクニカルな中にポップな要素があり、最近聴いた中ではSYMPHONY Xの「Reign in Madness」と同じくらい好き。YESやKING CRIMSON、PINK FLOYDを感じさせるところも良いし、ギターソロは「Falling into Infinity」の頃の感覚もあって素晴らしいです！　ジョン・マイアングの書いた「生き方を変えて何か新しいことをするためには、古い殻を脱ぎ捨てなければならない」というテーマも興味深く、日本に必要な“Breaking All Illusions” 「増税不可避」「電力改革不可能」の幻想を捨てよと論文のタイトルにも使われるほど。ラストは映画を観終ったような感覚になります。

9. Beneath The Surface

大作の最後を飾るバラードの小曲。映画終了後のエンドロール、あるいは満腹後のお茶漬けみたいで、後味が爽やかです。位置づけ的に、LIQUID TENSION EXPERIMENT『2』の「Hourglass」やMARILLION『Brave』の「The Great Escape」を思い出しました。