[CSS][Illustrator]透過PNG画像を使い画像の重なりをつくる
完成予想図
見出し画像の上にロゴマーク画像が重なっている状態を目指します。イラストレーターでロゴの透過PNGを、画像の重なりはCSSのPositionを使います。
幅:800px
1.イラストレーターでの透過PNG画像作成
ロゴマーク画像をイラストレーターで開いておきます。そのままではサイズが大きすぎるので、200px程に縮小します
大きな画像を保存する際(又は書き出し時)に画像サイズを変えるやり方もあります。この方法は圧縮によってサイズを変えているため、画像が壊れます。
なので、次の方法でサイズを変えます。
① 長方形ツールで200px四方の正方形を作る
② 正方形を選択した状態で、オブジェクト>アートボード>アートボードに変換 をする ・・・正方形がアートボードになりました
*縮小前に、環境設定で「線幅と効果も拡大縮小」にチェックをしておきます。
チェックをしておかないと、オブジェクトを拡大・縮小しても線幅などはそのままになってしまい、バランスが崩れます。
③ ロゴのオブジェクトの一部を正方形の上に移動し (下のような感じ)
④ アートボード内に収まるように縮小します
⑤ WEB用に保存
透過画像の保存形式は、GIFかPNGのみ。JPEGは円の周囲が透過になりません。
今はほとんどPNGが主流です。
左:PNGー8で保存したもの 右:PNG-24で保存したもの
PNG-8かPNG-24にするかは、場合によりますが、今回は周りのギザギザが目立たないPNG-24にします。
2. 画像を重ねる
ロゴとビルボード画像は#headerに入れます。
ロゴが上、ビルボードが下になるように順番に注意します。
positionの指定ですが、
#container が親なので position: relative;
それを基準に位置を動かす#header h1 img に対して position: absolute; をかけます。
ビルボードもposition指定が必要そうに見えますが、ロゴ分の余白だけなので、marginの調整だけで済みます。position指定は不要です。
ここのCSSは次のようになります。
==============
#container {
position: relative;
}
#header h1 img{
position:absolute;
left: 50px;
top: 20px;
}
#header p img {
margin-top: 120px;
}
==============
3. ビルボード角丸をつくる
CSSで角丸を作る方法
border-radius : ○○%(px);
#header p img {
border-radius: 20px;
}
4. ナビゲーションボタン
画像を使わない、文字だけの横ナビゲーションボタン。
私が間違いやすいポイントは
ボタン幅をli aに指定してしまうこと。
そうすると、左右のボーダー指定をするとボーダー分の幅が増えてしまい、カラム落ちの原因になります。くれぐれも注意!
<必ず覚える 横ナビゲーションの指定項目>
ul {
overflow: hidden;
border : 上、下
}
li {
float: left;
width:
}
li a {
display : block;
border : 右、左
}
ーーーーーーーーーーーーーーー
ソース
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>透過PNGと画像の重なり</title>
<style>
/*reset*/
html, body, div, h1, p, ul, li {
margin:0;
padding: 0;
line-height: 1.0;
font-family:
"Hiragino Kaku Gothic ProN",
Meiryo,
sans-serif;
}
a {
text-decoration: none;
}
img {
vertical-align: bottom;
}
ul {
list-style: none;
}
/* body */
body {
background: #ccc;
}
#container {
background: #FFF;
width: 800px;
margin: 0 auto;
padding: 20px;
position: relative;
}
#header h1 img{
position:absolute;
left: 50px;
top: 20px;
}
#header p img {
border-radius: 20px;
margin-top: 120px;
margin-bottom: 20px;
}
ul {
overflow: hidden;
}
li {
float: left;
width: 160px;
text-align: center;
}
li a {
display:block;
line-height: 50px;
border-right: 1px solid #ccc;
}
li a.first {
border-left: 1px solid #ccc;
}
li a:hover {
border-bottom: 5px solid #F44D37;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1><img src="/img/miraclelogo.png" alt="カフェロゴ"></h1>
<p><img src="/img/billboard.png" alt="ビルボード"></p>
</div>
<ul>
<li><a class="first" href="#">ホーム</a></li>
<li><a href="#">カフェフード</a></li>
<li><a href="#">カフェドリンク</a></li>
<li><a href="#">インフォメーション</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</div><!-- /#container -->
</body>
</html>