くろひょうのwebデザインのお勉強帳

フェリカテクニカルアカデミー web制作科の受講生です。授業の要点、復習でつまづいた点などを記録し、レベルアップに励みます。

クリエイターになるための、お勉強の記録帳

[CSS][Illustrator]透過PNG画像を使い画像の重なりをつくる

完成予想図

見出し画像の上にロゴマーク画像が重なっている状態を目指します。イラストレーターでロゴの透過PNGを、画像の重なりはCSSのPositionを使います。
幅:800px 

f:id:pleasure10501:20150407221111p:plain

1.イラストレーターでの透過PNG画像作成

 ロゴマーク画像をイラストレーターで開いておきます。そのままではサイズが大きすぎるので、200px程に縮小します

大きな画像を保存する際(又は書き出し時)に画像サイズを変えるやり方もあります。この方法は圧縮によってサイズを変えているため、画像が壊れます。
なので、次の方法でサイズを変えます。

 

① 長方形ツールで200px四方の正方形を作る

② 正方形を選択した状態で、オブジェクト>アートボード>アートボードに変換 をする   ・・・正方形がアートボードになりました

 

*縮小前に、環境設定で「線幅と効果も拡大縮小」にチェックをしておきます。
チェックをしておかないと、オブジェクトを拡大・縮小しても線幅などはそのままになってしまい、バランスが崩れます。

 

③ ロゴのオブジェクトの一部を正方形の上に移動し (下のような感じ)

f:id:pleasure10501:20150407192937p:plain

④ アートボード内に収まるように縮小します

f:id:pleasure10501:20150407192939p:plain

⑤ WEB用に保存

透過画像の保存形式は、GIFPNGのみ。JPEGは円の周囲が透過になりません。
今はほとんどPNGが主流です。

 

左:PNGー8で保存したもの    右:PNG-24で保存したもの

f:id:pleasure10501:20150407145836j:plain

PNG-8かPNG-24にするかは、場合によりますが、今回は周りのギザギザが目立たないPNG-24にします。

 

2. 画像を重ねるf:id:pleasure10501:20150407221755p:plain

ロゴとビルボード画像は#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. ビルボード角丸をつくる

f:id:pleasure10501:20150407221051p:plain

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>

広告を非表示にする