<< 通常版のFirefoxをUSBに入れて持ち運ぶ方法
あけおめ、ことよろ >>
  1. HOME
  2.  > -
  3.  > スポンサーサイト

スポンサーサイト

  • 2016.11.05 Saturday
  • -
  • Permalink
    • -
    • -
    • by スポンサードリンク

一定期間更新がないため広告を表示しています

  1. HOME
  2.  > Blog カスタマイズ
  3.  > コメントボックスに黄金比率を採用しました。

コメントボックスに黄金比率を採用しました。

  • 2007.12.17 Monday
  • 03:18
  • Blog カスタマイズ
  • Permalink
    • comments(0)
    • trackbacks(3)
    • by ポンポン

黄金比率って聞いた事ありますか?
縦対横の比率がバランスよく美しい比率なんだそうです。

黄金比(おうごんひ、En:Golden ratio, The Golden Mean/Rectangle)(=PHI)は、最も美しいとされる比¥mathbf{1}:{{¥mathbf{1}+¥mathbf{¥sqrt5}}¥over¥mathbf{2}}。近似値は1:1.618、約5:8。線分を a, bの長さで 2 つに分割するときに、a : b = b : (a + b) が成り立つように分割したときの比 a : b のことである。

[ 黄金比 - Wikipedia ]より引用
Accessed Date:2007年12月17日 2:59:08

この1:1.618の比率でコメントボックスをバランスとっても誰も気付かないでしょうがね
でもやってみることにしました

JUGEMテーマ:インターネット

黄金比率は、身の回りを見渡せば結構この比率になっているものは多いです。
例えば、郵便葉書、コピー用紙、名詞、建造物、etc...
もっとありますが色々探してみても楽しいですよ。

コメント欄のお話ですが、細かい計算をしても結局はブラウザによって僅かなサイズの違いは出てしますのですが、できるだけ黄金比率のに近づけて見ました。

コメント欄全体の1:1.618(X)HTML

<div class="entry_area">
	<dl id="com_form">
	<p class="title">コメントする</p>
	<form name="comment_area" id="comment_area" action="./?mode=comment" method="post">
	<input name="entry_id" value="{entry_id}" class="input" type="hidden">
	<dt><label for="name">name:</label></dt>
	<dd><input tabindex="1" name="name" id="name" value="{cookie_name}" class="input" type="text"></dd>
	<dt><label for="email">email:</label></dt>
	<dd><input tabindex="2" name="email" id="email" value="{cookie_email}" class="input" type="text"></dd>
	<dt><label for="url">url:</label></dt>
	<dd><input tabindex="3" name="url" id="url" value="{cookie_url}" class="input" type="text"></dd>
	<dt><label for="description">comments:</label></dt>
	<dd><textarea tabindex="4" id="description" name="description" ></textarea><br />
	<input tabindex="5" src="./template/piano/img/submit.gif"
 value="コメント送信" title="コメント送信" type="image">   
	<input name="set_cookie" value="1" id="set_cookie" type="checkbox">
	<label for="set_cookie"> 入力情報を登録しますか?</label></dd>
	</dd>
	</form>
	</dl>
</div>

色を変えた部分がコメントの部分です。ここをCSSでサイズをコントロールすれば黄金比率になります。

サイズを指定している部分のCSS

dl#com_form dd input.input { width:200px; }
dl#com_form dd textarea {
	width: 300px;
	height: 185px;
	margin: 0 0 10px 0;
}

高さが185pxですので
185÷1.618=299.33ですが小数点以下は省略するしかないので300pxにしています。

簡単な計算ならGoogleでできます。185 * 1.61800 = 299.33 - Google 検索

後、サイドバーのコメント履歴とトラックバック履歴、月別アーカイブの部分が長すぎなのでここにもちょっと手を加えてみました。250px以上になったらこの3つがスクロールバーが出て間延びするのを防げます。
コメントやトラックバックを読まれる方は、スクロールバーを使ってクリックして下さいね。

黄金比率について詳しいサイト一覧

  1. HOME
  2.  > -
  3.  > スポンサーサイト

スポンサーサイト

  • 2016.11.05 Saturday
  • -
  • Permalink
    • -
    • -
    • by スポンサードリンク
コメント
コメントする

   
この記事のトラックバックURL
トラックバック
綾瀬はるか 水着
綾瀬はるかの水着画像や写真集について。本名は蓼丸綾だそうです。ビューティーコロシアムでダイエットに成功した動画は
  • 綾瀬はるか 水着
  • 2008/10/30 5:15 PM
南アフリカランド
南アフリカランドの情報サイトです。ありがとうございます。
  • 南アフリカランド
  • 2008/04/13 10:08 PM
ふーん★外国為替・そしあす証券のトレジャーネットについて・TOP&カードのポイントシステム
ふーん★外国為替・そしあす証券のトレジャーネットについて・TOP&カードのポイントシステム
  • ふーん★外国為替・そしあす証券のトレジャーネットについて・TOP&カードのポイントシステム
  • 2008/04/02 7:19 AM
Access Ranking
ブログパーツ
Search this site.
Calendar
  12345
6789101112
13141516171819
20212223242526
2728293031  
<< August 2017 >>
Categories
Selected entries
Recent comment
Recent trackback
Profile
Recent
Recent
現場のプロから学ぶXHTML+CSS
現場のプロから学ぶXHTML+CSS (JUGEMレビュー »)
益子 貴寛,堀内 敬子,小林 信次,千貫 りこ,伊藤 学,山田 あかね,西畑 一馬
Links
Software
カラメル
Sponsored Links
Mobile
qrcode
Others
Powered
  • みんなのブログポータル JUGEM

pageup