電脳狂想曲 Webデザインの小技

電脳狂想曲のデザイン・管理の時のメモ

デザインの小技 メニュー↑

計算にjavascriptを使用しております。

レイアウトの小技 Ver2.0 (2007/02/16更新)

レイアウトの小技 機能追加版 (2006/07/17更新)

レイアウトの小技

ざっと見てみてどのくらい黄金比が含まれているか印をつけてみました。
便宜上5と8を使って比率を表しております。
間違っている箇所があったらごめんなさい。
黄金比を用いて分割した例
白銀比、黄金比、白金比、第二黄金比を使ったレイアウトが表示されます。
レイアウトに困った時の参考にお使いください。
※配色によって膨張して見える事もありますので、調整してください。
レイアウトの小技には再分割や、色分けと言った気を利かせた機能はまだありません。
レイアウトの小技 機能追加版に再分割機能をつけました。
再分割機能をもうちょっと使いやすく出来ないものかと試行錯誤しております。
javascript使ってます。
多少の誤差が出ます。
使い方の色分けは見やすくするためであって、それ以上の深い意味はありません。
使い方の画像にある隙間にも意味はありません、
雑に作ったからそうなりました(汗

説明

チェックボタンの意味

  • 横幅を元に計算する(縦幅無視)

    横幅だけを元に比率を使って縦幅を導き、分割します。
    横がメインですので、横長の四角形となります。

  • 縦幅を元に計算する(横幅無視)

    横幅とは逆に縦幅だけを元に横幅を導き、分割します。
    縦がメインですので、縦長の四角形となります。

  • 縦幅と横幅を元に計算する(縦横のバランス無視)

    入力された縦幅、横幅を元に計算します。
    分割された四角形が計算した比率を持つ四角形ではないかもしれません。
    面白い使い方として、
    白銀比で導き出した縦横の長さを別の比率、例えば黄金比で分割したり出来ます。

白銀比とは?

A3、A4の用紙の縦横の比率です。
A3を半分に折ってみるとA4の大きさになります。

黄金比とは?

人間が美しいと感じる比率のようです。
ミロのビーナスや、モナリザ等に多く含まれる比率です。

他の比率は?

比率だけネット上で見つけたもので詳しい事は分かりません。情報求む

使い方(応用法)

2分割の例

例えば左の青の部分をメニューとして、
右の赤の部分をコンテンツの表示として分割する事もできます
分割1

3分割の例

分割2

移動

得られた数値をその位置でそのまま使うのではなく、移動させて使います。
下図では濃い赤の長方形を青い長方形の位置に移動して分割しています。
分割4

結合

離れたところにある赤い四角形を足し合わせた長さで分割する。(紫の部分は重なった部分です)
計算の手間を省くために、比率から得られた数値として表示されています
分割3

再分割

大抵、一回で分割できてしまえると思いますが更に分割をしたい場合。
分割したい領域の数値(比率から得られた数値に必要な数値があると思います)を
お手数かと思いますが再分割の機能はまだありませんので再度入力した結果を使ってください。
再分割
再分割1

ロゴやメニューを配置

分割に使うだけではなく、ロゴやメニューを配置するときに使う事もできます。
端を合わせるのではなく、そのロゴやメニューの中心(重心)を
分割された四角形の頂点や辺に配置する事もアリです。
配置1
こんな感じに
配置1-1

転載したい場合や、これを元に改良したものを公開したい場合は
にメール又はBBSメールフォームでその旨を伝えてださい。
改良の要望などにも出来る限り前向きに対応させて頂きたいと思っております。
無断転載は禁止です。
リンクはトップページにお願いします。

管理の小技 メニュー↑

Dreamweaver操作

ライブラリマークアップを削除

テンプレートのマークアップはDreamWeaverが除去してくれるのですが、
ライブラリマークアップは除去してくれないので 正規表現を使って削除します。

<!--\s#BeginLibraryItem[^<]*-->|<!--\s#EndLibraryItem[^<]*-->

これを使えばサイト全体のライブラリマークアップを除去可能
(この記述でライブラリマークアップ以外のコメントが削除されてしまっても責任は持てません)

ファイル、ディレクトリ(フォルダ)の構造

ファイル名は少し冗長にして、
ファイル単体でそれが何のファイルなのか中身を見なくても大体の見当がつくような名前にする。
novel/ss/rider/rider_x.html

多すぎる場合はファイル数を決めて小分けにする。
novel/ss/fate_hiyori/61_90/hiyori_61.html

最初は
novel/ss/fate_hiyori/hiyori_xx.html
だったのですが、日刊連載の時にファイル数が爆発的に増えてしまって、今の形になりました。

部品化して使い回す

とにかく使いまわしやすいテンプレートやライブラリを作っておいて使ったりします。
テンプレートやライブラリは一括でデザイン変更する時に威力を発揮します。

copyright(c) 電脳狂想曲 All Rights Reserved