2008年05月30日

高さの異なるカラムを揃えるスタイルシート、に絡む諸々の問題

またリニューアル中のページについてですが、テーブルデザインだ、ということは既に書きました。それをMODxに取り込んだのですが、やはりそのままでは我慢できず、テーブルを取り外してXHTMLにする作業を始めてしまいました。

すると問題になったのが、テーブルデザインでよくある左右の隣り合うブロックとの間のボーダー(ではなくて幅1pxのtd)です。単純にdivなどのボーダーを設定しても、隣同士の高さが合わないとラインが下まで伸びません。

背景などを使って見た目を整えるのが正当なのでしょうが、画像を用意したりするのが面倒… と思っていたら、こんなやり方を見つけました。

高さの異なるカラムを揃えるスタイルシート

これはいいですねわーい(嬉しい顔) 早速リニューアルサイトに取り入れました。ところが、ページ内にジャンプするリンクをクリックすると、ページの上の方がちょん切れたような変な表示になってしまいます。どうやら、overflow:hidden; が悪さをしているようです。

包容要素にoverflow:hidden;を使う際の注意点メモ

いろいろ試しましたが、スタイルシートやHTMLで逃げるうまい方法はなさそうでした。そこで、JavaScript でスクロールさせる方法ならどうだろう、と試してみました。

スムーズにスクロールさせる方法は調べるとたくさんあります。その中で、こちらの方が最近「決定版!」とされている方法を試してみることにしました。

ページ内をスクロールするスクリプトの決定版 | WINGHEART

「jQuery」を使うスクリプトです。MODxのassets/js/にjquery.jsとjquery.page-scroller.jsを入れ、テンプレートに記述するだけで動作します。リンクタグやアンカー用idに手を加えなくていいところが素晴らしい。

[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3

「高さの異なる…」の記事を書かれた方が作者さんなのかな?

ただ、MODxの必須タグといわれている<base href="[(site_url)]" />のせいで、単純に<a href="#abc">と書くとトップページに飛んでいってしまいます。リンクがページ内の#abcではなく、http://www.ドメイン名/#abc となってしまうんですね。

仕方がないので、「外部ページのページ内リンクへスクロール」する方法を試してみました。元々の問題はこれでめでたく解決! ジャンプ後に表示がおかしくなる件は修正することができました。JavaScriptを切ってしまうと元のおかしな動作になってしまうのですが、それは目をつぶることにしましょう。

あと、細かい問題で、外部ページへのスクロールとしているためか、動きがスムーズではないんですね。せっかくスムーズ・スクロールを導入したんだからきれいに動いて欲しいところですが、これも現在のMODxの仕様ということで仕方がないかな。

ジャンプ後、ブラウザのリンク欄に外部ページへのリンクのために付けた「?pScabc」というのが残ってしまうのも気になるけど、まあいいでしょう。

追記
このように試用させていただいた「Page Scroller ver.3」ですが、ライセンス条件を見ると「非商用に限り無料」なんですね。残念ながら今回使おうとしたお客様のページは歯医者さんのページなので、非商用とは言えません。あきらめて別の方法を探すことにします。
posted by 急いでジャンプ at 15:20| Comment(0) | TrackBack(0) | Web開発 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。