« どこでどうなるかわからんねぇ・・・ | トップページ | 明日はよくなっているかなぁ »

2010年7月23日 (金)

縦書きスクリプトとdivボックスのセンタリング

昨日と今日は、湿度が高いからか、暖かめで過ごしやすかった。

週末は、まずまずな天気のようだ。

そして、相変わらず、Treatを聴きまくっている!

今日、Canon NZからメールが届いた。

僕は、数年前から、Canon NZのCPS(Canon Professional Service)の会員。

会員になった時に、特に会費も取られず、会員カードをもらっただけ。

ある時、受付の人に、CPSメンバーのメリットって何?と聞いたことがある。
例えば、機器の無料貸し出しがあるとか、割り引きがあるとか。

が、そういうことは一切なく、せいぜい、修理の時に、普通の人より若干仕上がり日数が早くなるくらい。

大してメリットはないなぁ、と。

思い返せば、Canon NZを使ったのって、随分前のこと。

最近は、センサークリーニングは自分で出来るし(こっちはえらく高い金額を取られる)、特に故障していないし(去年の11月は、運良く日本で故障した)、だから、行く用事がない。

で、メールの中身は何だったかというと、メンバー制度の仕組みを変える、と。

1年間、$140で、有償になる。
でも、5回まではセンサークリーニング無料、修理関連では20%割り引き、以前同様、一般の人より素早い(?)対応をしてくれるらしい。

なんか、会員というより、保険の勧誘みたいだ。(笑)

最初の一年間は、無料にしてくれるらしいので、登録はしておいた。

日本でのように、もっとサービスが充実すればいいんだけれどねぇ。$140も払うんだったら。

さて、題名の件。

パソコン関連、プログラミング関連の話なので、興味のある人は、次からどうぞ。

ようやく落ち着いたので、色々と勉強してみた。

まずは、縦書きスクリプトについて。

以前、涅槃という縦書きのJava Scriptを紹介した。

最近、全く別の、竹取JSというJava Scriptを知った。

このサイトに飛べばわかるだろうけれど、これはもう、感動もの!

ここまでちゃんと縦書きにしてくれるとは!!

面白いのが、縦書きになっている部分をダブルクリックすると、通常通りの横書きになる。
その横書きの状態でダブルクリックすると、今度は縦書きになる。

うーん、これはすごすぎ。

これは早速取り込んでみなければ、と思って、写心小説のページで実験。
興味のある人は、このページの「Java Script縦書き版」というのをクリック。

20100723b 

上記のような感じで見える。 

この小説での写真も、Java Scriptを使って、フェードインするようにしているから、Flash版とほとんど相違はない。 

あと、ちょっとだけ気の利いた仕組みを入れている。 

通常、ページを読み込むと、横書きから縦書きに遷移する状態が見える。
それだとちょっと萎えるので、Java Scriptの方で、横書き状態の時は見えないようにしている。
だから、いきなり縦書きが現れるように見える。 

どのブラウザでも、ほぼ問題なく見える。
が、上記の小説では、Operaではちょっと変な表示になってしまっている。 

残念ながら、スクロールバーは、普段僕が使っているJava Scriptでは、スクロールバーの置き換えは出来なかった。
このスクロールバーが違うものに出来れば、更に見栄えがよくなるのにね。 

次に、以前、涅槃とMonocleを合わせたページを紹介した。 

せっかくだから、と思って、この竹取JSとMonocleも合わせてみた。 

但し、どういう訳か、Firefoxだけでしかちゃんと表示しない。
前回、問題なかったSafariやChromeでは文字が出てこなかった。
(突き詰めるのが面倒だったので、原因は不明。) 

Firefoxの人は、このページからどうぞ。「Monocleと竹取のテストページ」がそれ。 

見た目はこういう感じ。 

20100723c

使い勝手で言えば、竹取JSの方が使いやすかった。
涅槃の時は、一行の文字数を意識しないといけなかったけれど、竹取JSでは、そういうことを意識しなくてもよく、改行したい時にちゃんと改行コード<br />を入れておけばよい。

残念ながら、Monocleとの組み合わせでは通常使用には耐えられないけれど、竹取JS単体であれば、色んなインターフェースを作り込めると思う。

いよいよ、Flashは窮地に追い込まれる?!?!(笑)

いい縦書きスクリプトに出会えたので、また作品作りに励もうと思う。

次は、divボックスのセンタリングについて。

CSSを使い始めの頃って、divのセンタリングって結構困る。

僕自身、きちんと勉強しないで、どこぞから持ってきたコードや、適当にやっていたらなんとかなったとか、という状態でやってきた。

でも、それではいけない、と思って、真剣にそれに取り組んでみた。
もちろん、自力では出来ないので、ネットの情報を取り込みながら。

divボックスの縦横センタリングのやり方はいくつかあるけれど、多分、このやり方がベターでわかりやすいと思う。

簡単に書くと、

#container {
position:absolute;
height: 150px;
top: 50%;
margin-top: -75px;
width: 200px;
left: 50%;
margin-left: -100px;
}

widthとheightをちゃんと定義してあげ、縦位置に50%、横位置に50%それぞれ移動。
そして、widthとheightの半分のピクセル数だけ、マージンを戻してあげる。
(この原理を知っておけば、色んなことに応用可能。)

すると、ブラウザのサイズがどのようになっても、必ずど真ん中に来るのである。

これが一番わかりやすいやり方だと思う。

これを応用し、以下のように、複数のdivボックスをブラウザのど真ん中に持ってきてみよう。

20100723a

 

ちょっとみづらいかもしれないけれど、#containerの中に、5個のdivボックスを作り、こういう感じで配置している。
#containerは、わかりやすくするために、外枠を灰色の線にしている。

サイトを作っている時に作成する、典型的な形だよね。
mixiも、外枠だけを拾えば、 こういう形のはず。

上記の#containerのやり方だと、widthやheightを変更する度に、関係箇所を変更しないといけなくなる。

それだと面倒なので、動的にしてみるのもいいかな、と。

残念ながら、CSSのみではそういうことは出来ないそうなので、Java Scriptを使用して実施。

boxh2 = document.getElementById("container").offsetHeight;
document.getElementById("container").style.marginTop = - boxh2 / 2 + "px";
boxw = document.getElementById("container").offsetWidth;
document.getElementById("container").style.marginLeft = - boxw / 2 + "px";

offsetHeightやoffsetWidthを使用して、要素内の実際のピクセル数を算出し、上記の例で示したように、半分にし、マージンを戻して動的に変化させている。

こうしておけば、marginやpaddingを変更しても対応してくれる。
単なるheightやwidthでは、そのmarginやpaddingの値はゲットしてくれないので注意。

次に、#containerの中に入っている各要素について。

ポイントは、オレンジと水色。

これ、真ん中の黄色の高さが変わったら、オレンジと水色の高さも動的に変わる仕組みにしている。

これも、残念ながら、CSS純粋ではできないようだ。

やり方は、同じくJava Script。

boxh = document.getElementById("param3").clientHeight;
document.getElementById("param2").style.height = boxh + "px";
document.getElementById("param4").style.height = boxh + "px";

こうやって、黄色の高さを取ってあげ(1行目)、オレンジと水色(2, 3行目)に代入してあげる。

こうしておけば、黄色がどういう高さになっても対応出来る。

あとは、必要に応じて、各ボックス内に必要なものを突っ込んでいけばよい。

と、こういう感じの仕組みを導入すれば、もう、divボックスに関しては怖いものなし!

出来る人からすれば、何を今更、という感じかもしれないけれど、ネットで検索しても、なかなかちゃんと書いてくれているところがないので、普段お世話になっているから、ここに書いておこうかな、と思って書いている次第。(笑)

コードを全て書いておくので、必要な人は持っていって下さい。

これを持っていれば、あらゆることに応用出来るだろうから。<head>から置いておきます。

<head>

<title>Javascript Practice</title>

<style type="text/css">
body {
    margin: 0px;
    overflow-y:scroll;
}
*html body {       /*IE6だけに適用*/
    overflow-y:auto;
}
*+html body {     /*IE7だけに適用*/
    overflow-y:auto;
}

#container {
    width: 500px;
    border:3px solid darkgray;
    position: absolute;
    left: 50%;
    top: 50%;
}

#param1 {
    background-color: pink;
    width: 500px;
    height: auto;
    position: relative;
}

#param2 {
    background-color: orange;
    width: 100px;
    position: relative;
    float: left;
}

#param3 {
    background-color: yellow;
    width: 300px;
    position: relative;
    float: left;
}

#param4 {
    background-color: aqua;
    width: 100px;
    position: relative;
    float: right;
}

#param5 {
    background-color: gray;
    width: 500px;
    height: auto;
    position: relative;
    float: left;
}

</style>

<script language="javascript">
<!--
    window.onload=function() {
        boxh = document.getElementById("param3").clientHeight;
        document.getElementById("param2").style.height = boxh + "px";
        document.getElementById("param4").style.height = boxh + "px";

        boxh2 = document.getElementById("container").offsetHeight;
        document.getElementById("container").style.marginTop = - boxh2 / 2 + "px";

        boxw = document.getElementById("container").offsetWidth;
        document.getElementById("container").style.marginLeft = - boxw / 2 + "px";
    }
//-->
</script>


</head>

<body>

<div id="container">
    <div id="param1">
        param1-top<br />
        aaa<br />
        aaa<br />
        aaa
    </div>

    <div id="param2">
        param2-left
    </div>

    <div id="param3">
        param3-contents<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
        ccc<br />
    </div>

    <div id="param4">
        param4-right
    </div>

    <div id="param5">
        param5-bottom<br />
        eee<br />
        eee<br />
        eee<br />
        eee    </div>
</div>

これをそのままコピペして、<html><body>で囲ってあげれば動くでしょう。

これさえ押さえておけば、例えば、一般的な、ヘッダー、コンテンツ、フッターという3段構成も簡単にできる。

両端のオレンジと水色に関する部分を削除し、あとは黄色のwidthを補正してあげるだけ。

あと、縦位置のセンタリングが必要なければ、top:50%やそれに関するJava Script内のmarginTopを削除すればよい。
そうすれば、横位置のみのセンタリングが可能。
あとは、必要に応じて、#containerにmargin-topを指定してあげれば、窮屈にならなくてすむでしょう。

もう一つ、小技。

bodyの中に、overflow-y:scroll;というのがある。

これは何かというと、ブラウザのスクロールバーを表示させる、というもの。

Hayleyのサイトを作り直している時に気付いた。

ページによって、左右に微妙にずれる時がある。
なんでずれるの?と何度も何度も見返していて気付いた。

ページがきちんと、画面内に収まっている時は、スクロールバーが表示されない。
でも、画面をはみ出したページだと、スクロールバーが表示される。

この差が、デザインの微妙なずれになっていた。

そういうのが気持ち悪い、という人は、これを指定しておけば、そのずれが全くなくなる、つまり、常にスクロールバーが表示される状態になるので、デザインは崩れない。

イマイチわからない、という人は、overflow-y:scroll;を外したり付けたりして確認してみるといいでしょう。

ここまで理解出来たら、サイトを全て見直して作り直したくなってくるよ。(笑)
そんなことしたらどえらいことになるので、目を瞑るけれど。

ご参考まで。

|

« どこでどうなるかわからんねぇ・・・ | トップページ | 明日はよくなっているかなぁ »

パソコン・インターネット」カテゴリの記事

コメント

コメントを書く



(ウェブ上には掲載しません)




« どこでどうなるかわからんねぇ・・・ | トップページ | 明日はよくなっているかなぁ »