CSSで角丸やドロップシャドウなレイアウトを実現する『The Octopus Engine』

2007年10月 6日 03:23 CSSで角丸やドロップシャドウなレイアウトを実現する『The Octopus Engine』

ようやくのことで当ブログのデザインも、オリジナルのテンプレートに変更しました。
MT4のテンプレート構成を本格的にじっくり解析しながらのカスタマイズだったので、なかなか楽しかったです。

さて、今回はこのブログでも利用している、スタイルシート(CSS)で角丸やドロップシャドウなレイアウトを実現するためのソリューション『The Octopus Engine』について、解説しようと思います。

と言っても、旧ブログで書いていた記事の転載なんですが。


Webサイトのレイアウトをデザインする上で、特定のブロックの角を丸くしたり、ちょっと変わった枠にしようとすると、背景画像を作って、テーブルレイアウト(tableタグをレイアウトに用いる)をする必要があります。

xhtml+cssがデザインの主流となっている昨今、正直テーブルレイアウトはダサい。

ということで、どうにかしてCSS(スタイルシート)で角丸レイアウトができないか、という人にお勧めなのが、The Octopus Engine(オクトパス・エンジン)です。

The Octopus Engine(オクトパス・エンジン)は、四方の角と上下左右の画像を用意し、CSS(スタイルシート)とJavaScriptによって、角丸等のデザイン性に富んだブロックレイアウトを実現するソリューションです。

JavaScriptは使いたくなければ使わなくてもOKですが、そうするとひとつのブロックを8つのdiv要素(タグ)で囲まなければならないという、あまり美しくないxhtmlソースになってしまいます。
現在のうちのサイトのように、The Octopus Engine(オクトパス・エンジン)を多用する場合はJavaScriptを使用したほうが良いでしょう。

使い方はいたって簡単です。

1. スクリプトのダウンロード

Dragon Labs | The Octopus Engineにて、The Octopus Engine(オクトパス・エンジン)のスクリプト「octopus.zip」をダウンロードします。

「octopus.zip」を解凍すると、JavaScriptのソースコード「octopus.js」と、各種レイアウトの画像ファイルが格納されたフォルダ「anemone」「seahorse」「shark」「squid」「swordfish」、そして各画像のPhotoshop(フォトショップ)プロジェクトファイルが格納されたフォルダ「psd」が展開されます。

2. ファイルのアップロード

「octopus.js」と画像をアップロードします。

とりあえず、画像は「anemone」「seahorse」「shark」の中からどれを選ぶと良いでしょう。
「anemone」は、さらに4つのバリエーションから選択できます。

3. JavaScript「octopus.js」の呼び出し

The Octopus Engine(オクトパス・エンジン)を利用したいページで、「octopus.js」を呼び出します。
具体的には、該当ページのhead要素(タグ)内に、下記を追加します。

<script src="/octopus.js" type="text/javascript"></script>

「octopus.js」へのパスは、環境に合わせて変えてください。

4. CSS(スタイルシート)の追加

CSS(スタイルシート)に以下を追加します。

.north { background: url(north.png) repeat-x top; }
.east { background: url(east.png) repeat-y right; }
.south { background: url(south.png) repeat-x bottom; }
.west { background: url(west.png) repeat-y left; }
.ne { background: url(ne.png) no-repeat top right; }
.se { background: url(se.png) no-repeat bottom right; }
.sw { background: urlsw.png) no-repeat bottom left; }
.nw { background: url(nw.png) no-repeat top left; }

各種画像ファイルのパスは、環境に合わせて変えてください。

5. The Octopus Engine(オクトパス・エンジン)を使うブロックに適用する

The Octopus Engine(オクトパス・エンジン)を使いたいブロックを、下記のdiv要素で囲みます。

<div class="octopus">~</div>

以上で完了です。

なお、使用する画像によっては下記の例のように、クラス「.nw」に何ピクセルかpaddingを入れないと綺麗に表示されません。

.nw { padding: 25px; }

また、「squid」及び「swordfish」は、利用方法が異なります。
どちらも共に3種類の画像と、CSS(スタイルシート)のborder(ボーダー・枠線)を併用するタイプのソリューションです。

こちらの利用方法はまた別の機会に。


ここまでが、旧ブログに書いた記事です。
ここからは追記。

この『The Octopus Engine』の最大の魅力は、「本来なら8つものdiv要素を入れ子にいないと実現できないことを、(JavaScriptをうまく利用して)たったひとつのdiv要素で実現している」ことにあります。

が、このJavaScriptがちょっと問題でして、ページ全体の読み込みが終わってからでないと、スクリプトが実行されない(=角丸等にならない)ので、ちょっとサイズの大きなページだと、読み込みが終わるまでの間、微妙にレイアウトが変になるんですよね。

なので結局僕は、JavaScriptを使って、

<div class="octopus">~</div>

とやらずに、直接8つのdiv要素で囲むという、あんまり(かなり?)スマートじゃない方法を取っています。

<div class="north"><div class="east"><div class="south"><div class="west">
<div class="ne"><div class="se"><div class="sw"><div class="nw">
ここにコンテンツが入る
</div></div></div></div>
</div></div></div></div>

こういうことです。

我ながら、正直微妙……。

Twitterつぶやく
阿部辰也へのお仕事のご依頼・お問合せはこちら

Twitter始めました。Followはお気軽にどうぞ。

関連するブログ記事
スポンサード リンク
カテゴリー
スタイルシート(CSS)
タグ
CSS | JavaScript | The Octopus Engine | Webデザイン | xhtml
現在位置
TOP > Web制作技術 > スタイルシート(CSS) > CSSで角丸やドロップシャドウなレイアウトを実現する『The Octopus Engine』
前のブログ記事
『SUPER LOVE SONG』(B'z)の感想。既に再生数が凄いことに……。 [2007年10月 5日 23:59]
次のブログ記事
『うみねこのなく頃に』の主題歌を歌っている志方あきこさんの「歌曲が収録されている」CDリスト [2007年10月 7日 14:51]

トラックバック(1)

このブログ記事に対するトラックバックURL:
» 画像の枠Table FrameをCSSに(kisatonomori blog)のトラックバック [2007年11月14日 18:33]
思い出して引っ張り出してきた、テーブルフレーム。 写真を中に入れて出してみて、このテーブルタグ、 なんとかCSSに出来ないかなーと思った。 実は... 続きを読む

コメント(10)

Cheap Oakley Twenty Sunglasses [2014年9月 7日 00:58]
money mutual [2014年11月26日 16:45]

prjapjwo http://paydayloansbrm.com/ money mutual

payday loans [2015年2月18日 15:32]

sqqyjux http://paydayloansrnj.com/ payday loans

hello [2015年3月22日 09:25]

iqpbty poztcwoo

hello [2015年3月22日 10:54]

rrstwal [url=http://fqinyh.com/]rbxwzsig[/url]

hello [2015年3月22日 12:14]
payday loans [2015年9月28日 03:05]

namcrwa http://paydayloansnsa.com/ payday loans

fast [2015年11月 4日 11:48]

Hello!

fast [2015年11月 4日 11:48]

Hello!

online [2015年11月 4日 11:49]

Hello!

コメントする


画像の中に見える文字を入力してください。

 

このブログについて

阿部辰也

Webコンサルタントやシステムエンジニア、執筆業などをやっている、グッドホープ代表・阿部辰也のブログです。
Web技術系のTipsから仕事の話、趣味の話まで色々と。
人生は所詮生まれてから死ぬまでの壮大な暇つぶし。
だったら有意義に暇をつぶして生きましょー。

阿部辰也へのお仕事のご依頼・問合せはこちらからどうぞ。

Twitter: @t_abe
読書メーター: ID:Tatsuya

このブログのサイトマップ
このブログのはてなブックマーク数

Feed/RSS購読

タグクラウド

最近のトラックバック

阿部辰也の著書

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

頑張って書いたのに、出版後すぐに出版社が倒産して印税も貰えずじまいで俺涙目(笑)。

Powered by Movable Type 5.02

スポンサード リンク

はてなブックマーク



あわせて読みたい

t-abeの今読んでる本

t-abeの最近読んだ本

t-abeの今やってるゲーム

t-abeの最近やったゲーム