文章の左を一定量空けるレイアウト

 このページで使用している画像は『Kigen』様の作品です(ニゲラという花だそうです)。このサイトからはダウンロードせず、素材サイト様から直接、お借りください。

このスタイルの左空き幅: 200px
このレイアウトは、左にイラストのある「横長」タイプの背景画像に適しています。 最後に書いてある方法で、使いたい「横長」背景画を、このファイルの背景に実際に入れてみて、イラストとの重なり具合を見てください。
文章が入った感じを実際に見ていただくために、同じ文章の繰り返しになりますが、ごめんなさいね。


このスタイルの左空き幅: 175px
このレイアウトは、左にイラストのある「横長」タイプの背景画像に適しています。 最後に書いてある方法で、使いたい「横長」背景画を、このファイルの背景に実際に入れてみて、イラストとの重なり具合を見てください。
文章が入った感じを実際に見ていただくために、同じ文章の繰り返しになりますが、ごめんなさいね。


このスタイルの左空き幅: 150px
このレイアウトは、左にイラストのある「横長」タイプの背景画像に適しています。 最後に書いてある方法で、使いたい「横長」背景画を、このファイルの背景に実際に入れてみて、イラストとの重なり具合を見てください。
文章が入った感じを実際に見ていただくために、同じ文章の繰り返しになりますが、ごめんなさいね。


このスタイルの左空き幅: 125px
このレイアウトは、左にイラストのある「横長」タイプの背景画像に適しています。 最後に書いてある方法で、使いたい「横長」背景画を、このファイルの背景に実際に入れてみて、イラストとの重なり具合を見てください。
文章が入った感じを実際に見ていただくために、同じ文章の繰り返しになりますが、ごめんなさいね。


このスタイルの左空き幅: 100px
このレイアウトは、左にイラストのある「横長」タイプの背景画像に適しています。 最後に書いてある方法で、使いたい「横長」背景画を、このファイルの背景に実際に入れてみて、イラストとの重なり具合を見てください。
文章が入った感じを実際に見ていただくために、同じ文章の繰り返しになりますが、ごめんなさいね。


このスタイルの左空き幅: 75px
このレイアウトは、左にイラストのある「横長」タイプの背景画像に適しています。 最後に書いてある方法で、使いたい「横長」背景画を、このファイルの背景に実際に入れてみて、イラストとの重なり具合を見てください。
文章が入った感じを実際に見ていただくために、同じ文章の繰り返しになりますが、ごめんなさいね。


このスタイルの左空き幅: 50px
このレイアウトは、左にイラストのある「横長」タイプの背景画像に適しています。 最後に書いてある方法で、使いたい「横長」背景画を、このファイルの背景に実際に入れてみて、イラストとの重なり具合を見てください。
文章が入った感じを実際に見ていただくために、同じ文章の繰り返しになりますが、ごめんなさいね。


(…左の幅が75px,50pxのように小さい素材
であれば、むしろ文章を中央におくタイプの
ほうがすっきりまとまるかもしれません…)

このレイアウトの使い方は、下記の通りです。

  1. ファイルを保存する。
    • IE;ファイル(F)→名前をつけて保存→WEBページ完全 または WEBページ単一のファイル
    • NN:ファイル→別名で保存→ソース
  2. 背景画像ファイルを指定する
    • 使いたい背景画像ファイルを、保存したhtmファイルと同じフォルダーに置いて、このファイルの上のほうにある
      background-image:url(nigera-B01.jpg);
      の「nigera-B01.jpg」の部分を、使いたいファイル名に書きかえます。
    • background-image:url(C:\Documents and Settings\…)
      という、自分のPC(ネット上のURLではない)内のファイルを指定してしまうのは、よくある間違いですので、気をつけましょう。
  3. 余計な部分を消します。
    • <div>〜</div>までが一つの設定です。不必要な部分を消去してください。

 ◆TOPへ戻る◆