Ｉllustratorでグリッドを作成
グリッドの目的は、作りたい自分のレイアウトの標準を作っておく為。
WEBでは5列、DTPでは4列でつくると使いやすい。
1.Ａ4サイズ、余白10mm、5列5行のグリッドを作ります。
2.整列パレットで「アートボードに整列」
3.アートボードの原点を左上にする(デフォルトは左下の為）
4.A4のサイズから余白を取り、整列パレットで計算する。（W:210/5mm H:297/5mm）
5.左上を軸にしてX:10mm Y：-10mmに移動する。
6.移動＋コピーしてガイドにする。
課題（Illustrator）
線に沿って文字を入力
写真をトレース（3）
ライブトレースのトレースオプションで
プレビューを見ながら作成しました。
positionでナビゲーションをレイアウト
「float」を使用しないで横並びになるのに違和感を感じましたが、決まった位置に配置されるので崩れません。今回は「display: block;」を使用しましたが、今後は「display: inline-block」を指定していくようです。
「float」を使用してレイアウトが崩れる理由
- 中身がない空ボックスは、高さを確保してくれない為
- <div id="wrapper">〜</div>のような空ボックスの作り過ぎ。
@charset_"UTF-8";
img {
border: 0;
margin: 0;
padding: 0;
}
ul,li{
list-style-type: none;
margin:0;
padding:0;
}
html {
text-align: center;
padding: 0;
margin: 0;
}
body {
position: relative;
height: 600px;/*便宜上の高さ*/
width: 800px;
text-align: left;
padding: 0px;
margin-top: 0;
margin-right: auto;
margin-bottom: 0;
margin-left: auto;
}
#header {
position: relative;
width: 800px;
height: 100px;
background-color: #FFFFCC;
margin: 0px;
padding: 0px;
}
#nav {
position: relative;
width: 800px;
height: 40px;
margin: 0px;
padding: 0px;
}
li.nav01 {
position: absolute;
left: 0px;
display: block;
}
li.nav02 {
position: absolute;
left: 200px;
display: block;
}
li.nav03 {
position: absolute;
left: 400px;
display: block;
}
li.nav04 {
position: absolute;
left: 600px;
display: block;
}
#wrapper {
position: relative;
height: 300px;
width: 600px;
}
#main {
position: absolute;
left: 0;
margin:0;
width: 400px;
height: 300px;
background-color: #CCFFFF;
}
#side {
position: absolute;
height: 300px;
width: 400px;
left: 400px;
background-color: #9999FF;
margin:0;
}
#footer {
width: 800px;
position: relative;
background-color: #FFCCCC;
height: 70px;
}
positionを使用して２段組レイアウト
floatによる崩れをpositionでレイアウト
「float」を使用しないで、前回と同じ２段組を「position」を使用してレイアウトしてみました。慣れてくると、positionの方が決まった場所に配置出来るのでとても使いやすいと思いました。
