スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

サイト模写(Paul) 5 要素を上にずらす。

PR >PC1台で月20万稼ぐ方法がやっとわかりました。




5.要素を上にずらす
 DIV外にスライドさせる方法。


最後のカテゴリになりました。
下記の図をご覧ください。

青の枠がヘッダ、赤の枠がメインとなります。

画像からは赤のメインDIV内にあるテーブル要素を赤部分から飛び出して青のDIV内にスライドしているのが
わかるかと思います。
20140531.jpg

今回のサイトには、バックグラウンドイメージが固定で配置されており、メインの内容をもう少し上に配置したいからと言ってヘッダの領域を短くする事ができません。

そういう場合はDIVの領域を超えてスライドさせたい場合には、テーブルのポジションをマイナスの値に設定します。
20140531_2.jpg

CSSコード
#shop_main table {
 position: relative;
 
top: -40px;
}
逆に下にずらしたい場合は、bottomをマイナスに設定します。





スポンサーサイト

サイト模写(Paul) 4 配置 複雑なテーブルを作成する。

4.配置 複雑なテーブルを作成する。
 行数や列の条件を詳細に指定する。

今回は、店舗情報のページを作成していきます。
メインページをtableで構成していきます。
以下の画像が完成イメージです。

20140524_2.jpg

tableの構成をわかりやすくした図がこちら

20140524_3.jpg

この図のコードから見ていきましょう。
<table border="1">
 <tr>
 <td colspan="3">お店の名前</td><td rowspan="4">画像1<br>画像2</td>
 </tr>
 <tr>
  <td colspan="3">お店の説明</td>
 </tr>
 <tr> 
  <td colspan="3">お店の情報</td>
 </tr>
 <tr>
  <td>お店外観</td><td> </td><td>店内画像</td>
 </tr>
</table>

まず、「お店の名前、お店の説明、お店の情報」はその下の行にある「お店外観、空白、店内画像」この3つの列の結合したものなので、colspan="3"を設定します。
続いて右の列「画像1、画像2」は左の4行を縦に結合しているので、rowspan="4"を設定します。

これを元にサイトの構成に合わせていきます。

<table width="680" height="183" border="0" cellspacing="0" cellpadding="0">
     <tr><td width="350" height="110" colspan="3"><h3>XXXXX店</h3><br>
             お店の説明<br>
           </td>

           <td width="330" rowspan="11" class="a">
            <img src="" width="250" height="220" alt"お店外観"/><br><br>
            <img src="" width="250" height="220" />
           </td>
      </tr>
      <tr>
        <td colspan="3"><img src="images/shop_line01.jpg" width="343" height="9" alt="line01" /></td>
      </tr>
      <tr>
        <td colspan="3"> 電話   |000-000-0000</td>
      </tr>
      <tr>
        <td colspan="3"><img src="images/shop_line01.jpg" width="343" height="9" alt="line01" /></td>
      </tr>
      <tr>
        <td colspan="3"> 営業時間|10:00~19:00</td>
      </tr>
      <tr>
          <td colspan="3"><img src="images/shop_line01.jpg" width="343" height="9" alt="line01" /></td>
          <td width="290"></td>
      </tr>
      <tr>
          <td colspan="3"> 住所   |住所00-11</td>
      </tr>
        <tr>
         <td colspan="3"><img src="images/shop_line01.jpg" width="343" height="9" alt="line01" /></td>
      </tr>
            <tr><td><br></td></tr>
      <tr>
         <td width="120"><img src="" width="120" height="200" /></td>
         <td width="5"> </td>
         <td width="214"><img src="" width="120" height="200" /></td>
      </tr>
      <tr>
        <td><span class="s">お店の外観</span></td>
        <td></td>
        <td><span class="s">お店の店内</span></td>
      </tr>
</table>

このコードの画像がこちら。

20140524_1.jpg





サイト模写(Paul) 3 配置 テーブルを使用

3.配置 テーブルを使用 
 通常DIV等で配置する全体の配置をテーブルで配置する。

1.ヘッダ、メイン、フッタ画像作作成・配置で少しお話しましたが、
今回、背景をヘッダ、メイン、フッタとすべてバックグラウンドで繋げて表示しています。
その上にDIVを使用していろいろな要素を配置していくと、画像がずれたり背景の画像が消える等にトラブルが起きやすくなる為(解決方法があれば教えてもらいたいです。)

今回は構成にDIVを使用せずにTABLEの構成によりPaulのトップページを作成していこうと思います。


ヘッダ、フッタはあとで考えるとしてメインの部分。

このトップページの場合は、左側にお店の写真があり、右側にお店の名前とお店の紹介文があり、
右下にはメニューボタンが二つ並んでいます。
Paulソースを見ると、大きく分けてこの3つに大別されています。
しかも"Pau"lの文字と紹介文とその部分の背景はすべて一枚の画像で作られています。
Illustrator等から作成し切り抜いた、といった感じでしょうか。

tableのコードにすると以下のようになります。 
    <table width="740" border="0" cellspacing="0" cellpadding="0">
      <tr>
         <td width="350" rowspan="2">
          <img src="お店の写真.jpg" />  
         </td>
         <td width="390" >
          <img src="文字'Paul'とお店紹介文.jpg" /> 
         </td>
      </tr>
      <tr>
         <td>
            <a href="article.html"><img src="バナー1.png" /></a><br>
            <a href="list.html"><img src="バナー2.png"  /></a>
         </td>
      </tr>
    </table>

サイト模写(Paul) 2 写真付きアイコンボタン

前回はバックグラウンドの画像を作成しました。

ベースの画像が出来たところで、次はアイコンボタンの作成をしていきます。


2.写真付きアイコンボタン
 画像を使用し少し手を加えたアイコンボタンを作成する。

今回はこのアイコンバナーを作成していきます。
top_btn004.jpg
ただ文字が入っているだけのバナーより、少し手を加える事で質の高いアイコンボタンができます。


まずは、ベースとなる色を元画像から取得し原型を作ります。
影もつけてあげますが、バックグラウンドの少しクリームがかった色を意識して影の色を黒ベースでなく、
茶色寄りの影色にします。

top_btn001.jpg

つづいてPaulの写真を貼り付けます。
元画像が真四角の場合は角部分で出てしまうので、消しゴムツールを使用して角を消していきます。
top_btn002.jpg

次は麦のような模様を鉛筆ツール等を使用し直接描いていきます。
描いたあとに不透明度を下げる事で、さりげない模様のようにします。
top_btn003.jpg

最後に、文字入れです。薄いピンク色から白のグラデーションにします。
top_btn004.jpg

これでできあがりです。



サイト模写(Paul) 1 ヘッダ、メイン、フッタ画像配置

1.ヘッダ、メイン、フッタ画像作作成・配置

サイト「Paul」の模写の第一回目は、何と言ってもPaulのサイトの象徴とも言える
サイトデザイン部分です。
全体を額縁で囲み、落ち着いた色合いでまとめることで品が良くグッとオシャレな感じが出ていますね。

オシャレ、という事はその分作りが単純ではないという事ですね(笑)

額縁部分ですが、上部は名前のロゴを売れるヘッダに、
中央は、コンテンツを入れるメインに、
下部は、copylightのお決まり文句を入れるフッタにします。
これらを画像ですべて繋げる必要があります。

この画像をすべてバックグラウンドイメージで表示
その上にDIVを使用していろいろな要素を配置していくと、画像がずれたり背景の画像が消える等にトラブルが起きやすくなる為(解決方法があれば教えてもらいたいです。)
今回は構成にDIVを使用せず、TABLEで構成していこうと思います。

それでは、イラストレータ又はフォトショップで画像を作成します。
四角い枠を作ってしまって後から保存する際に分割して保存するのがベターです。
額縁は外側に行くにつれて黒くする事で、バックの黒と途中から融合するような深みのある雰囲気になります。
影を付けるのならフォトショップの方が簡単にできるような気がします。

ヘッダ部分

まんなかの画像はy軸をリピートするので長くする必要がありません。
メイン部分

フッタ部分


この画像を各DIVの背景画像に設定します。


 

スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。