忍者ブログ
手探りでパソコンの事を勉強するブログです。 何か覚えたら記録していきます。
2018 . 10
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  •   

    [PR]



    このエントリーをはてなブックマークに追加
    ×

    [PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

    ブログの外枠(左右)に影をつけるレイアウト方法



    このエントリーをはてなブックマークに追加
    このブログにも導入されていますがブログなどの全体のレイアウトの枠に影のような物を表示させる方法を紹介します。実はこれの仕組みは結構シンプルで高さ1pxの画像を縦に並べてるだけなんです。

    まずは画像を用意します。
    仮にレイアウトの幅が1024pxだった場合は1024px*1pxの影用の画像(1054px*1px)を用意します。

    b97280c9.png

    影をつけたいところ全体に適当なクラスを付けた<div></div>で囲みます。
    <html>
    <head>
    <title></title>
    </head>
    <body>
    <div class="kage">

    ~コンテンツスペース~

    </div>
    </body>
    </html>



    cssを追加します。
    /*影のcss*/
    .kage {
    margin: 0 auto;
    width: 1054px; /*作成した影画像の横幅に合わせる*/
    background: url(画像のURL) repeat-y center top;
    }
    

    こんな感じでokです。
    影をつけるだけってのはあまり派手な演出ではありませんが何も無いチープな感じが若干和らぐ感じがします。
    PR




    ■ この記事にコメントする
    お名前
    タイトル
    文字色
    URL
    コメント
    パスワード
    Vodafone絵文字 i-mode絵文字 Ezweb絵文字
    ■ コメント一覧
    ■ この記事のトラックバック
    この記事にトラックバックする:
    phpでRSSの新着を表示させる方法 HOME xhtmlにて<input> を *行目の <form>~</form> 内に書くことはできません。
    ©パソコン手探り all rights reserved.
    Powered by ニンジャブログ  Designed by ピンキー・ローン・ピッグ
    忍者ブログ / [PR]