アットウィキロゴ
nicepaper @ ウィキ
アットウィキロゴ
nicepaper @ ウィキ
ページ一覧

フォントサイズで色々と迷うところはあると思います。そんな中で比率でフォントサイズをデザインをしていきたいと思います。 隣接するフォントサイズを1:1.618にするとデザイン性が向上します。 今日はそのような記事を執筆していきます。8月2日記事



イメージ



目次




フォントサイズ

reset.cssを読み込んでいる場合はfont-size:100%になっていると思います。それを基準とし倍率を指定していきます。 読み込んでいない場合はユニバーサルセレクタを用いてfont-size:100%にします。 

*{font-size: 100%}



コード

フォントサイズと余白を1.618倍していきます。 HTML 

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="reset.css">
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8">
<title>黄金比でフォントサイズデザイン</title>
</head>
<body>
<div id="wrapper">
	<div id="title"><header><h1>黄金比でフォントサイズデザイン</h1></header></div>
    <div id="left">
    	<nav>
            <ul>
                <li><a href="#">メニュー1</a></li>
                <li><a href="#">メニュー2</a></li>
                <li><a href="#">メニュー3</a></li>
                <li><a href="#">メニュー4</a></li>
            </ul>
    	</nav>
    </div>
    <div id="right">
    	<h2>黄金比(h2)</h2>
    	<h3>1.618(h3)</h3>
    	<p>綺麗なものは1.6倍になっているそうです。(p)</p>
    	<h3>隣接するものを1.618倍する</h3>
        <p>隣接する文字サイズを1.618倍にするとデザイン性が向上します。</p>
        <hr>
    	<h2>白銀比</h2>
    	<h3>1.414</h3>
    	<p>&radic;2もよいそうです。</p>
    	<h3>隣接するものを1.414倍する</h3>
        <p>隣接する文字サイズを1.414倍にするとデザイン性が向上します。</p>
		<hr>
    	<h2>余白も黄金比や白銀比に</h2>
    	<h3>margin-bottomやpadding-top,padding-bottomも設定</h3>
    	<p>margin-bottomなどを用いて比率を設定していく。</p>
    	<h3>余白も黄金比や白銀比にする</h3>
        <p>隣接する余白を1.618倍や1.414倍にするとデザイン性が向上します。</p>

    </div>
    <div id="footer"><footer></footer></div>
</div>
</body>
</html>

CSS 

@charset "utf-8";
/* CSS Document */

#wrapper{
	width:1000px;
	margin: 0 auto;
}
#title{
	width: 960px;
	padding : 20px;
	background: #FFC;
	min-height: 100px;
}
#left{
	width: 250px;
	padding: 10px 0px;
	float:left;
	background: #FCF;
	min-height: 500px;
}
#right{
	width: 710px;
	padding: 20px;
	float:left;
	background: #CFF;
	min-height: 500px;
}
#footer{
	clear:both;
	width: 960px;
	padding : 20px;
	background: #CCC;
	min-height: 30px;
}

* {
	font-size: 100%;/*reset.cssにもあるけどあえて記述*/
}
h1{
	font-size: 4.235em;
}
h2{
	font-size: 2.617em;
	margin-bottom: 26px;
}
h3{
	font-size: 1.618em;
	margin-bottom: 16px;
}
p{
	font-size: 1em;
	margin-bottom: 10px;
}

/*他部分*/
nav li{
	font-size: 1.618em;
	padding: 10px;
	list-style: none;
}
nav li a{
	text-decoration: none;
}

まとめ

余白部分も黄金比や白銀比にするとよりデザインが増します。

以上

「黄金比でフォントサイズをデザインする」をウィキ内検索
最終更新：2015年08月02日 16:51
添付ファイル