にしし ふぁくとりー:西村文宏 個人サイト

"CSS Tips Factory" : Presented by Nishishi. Since 1997.

ボックスの右下にロゴ(画像)を固定して表示するCSSの書き方 [イメージ,ボックス]

特定のボックスの端(右下など)にロゴ画像を常に固定して表示したいケースがあります。ただ1つのボックスに特定のロゴ画像を表示したいこともあれば、複数のボックスに同じロゴ画像を掲載したい場合もあるでしょう。
スタイルシートを使えば、ボックスの右下など任意の場所にロゴ画像を固定表示することも簡単に実現できます。

ここでは、こんなロゴ画像「LOGOサンプル」をサンプルとして用意しました。もっとセンスの良いロゴが用意できれば例として良かったとは思いますが……。(^_^;;; まあ、脳内で見栄えの良いロゴに置き換えて解釈して下さい。^^;

さて、各ボックスの右下にロゴを固定表示させた例は、以下のような感じです。点線で囲まれた黄色いボックス内に文章が掲載されていますが、その右下に先程のロゴ画像が表示されているはずです。

このスタイルの特徴は、常にボックスの「右下」にロゴが表示されるという点です。
ボックスの高さ(行数)がどれくらいであっても、必ず「右下」に表示されます。
PCなどの広いディスプレイでこのページをお読みであれば、おそらくこのボックスの高さは3~4行程度でしょうが、狭いディスプレイなどで(このボックスの高さが)5行分になっても10行分になっても、ロゴ画像は常に右下固定です。

このように、ボックスをいくつ配置しても、各ボックスの右下にロゴが表示されます。
何か自分のウェブサイトのロゴ画像があるなら、ちょっと薄めに加工して、ボックスの背景に置いてもおかしく見えないように作ってみるとおもしろいかもしれません。
会社のロゴとか製品ロゴとかだとうまく使えそうですかね?

上記のようにボックスにロゴ画像を付加するスタイルを作るのはとても簡単です。
「右下」に配置するロゴ画像は、単に「ボックスの背景画像」として表示しているだけです。ただ、

  • 背景画像の繰り返しをなくす(=1回だけ表示)
  • 背景画像の表示位置を「右下」に固定する

……という指定を加えているだけです。

具体的には、以下のようにCSSソースを記述します。(class名「sample」を指定したp要素が適用対象の場合)

p.sample {
   background-image: url("DarkYellowLogo.gif"); /* ロゴURL */
   background-repeat: no-repeat;                /* 1回だけ表示 */
   background-position: bottom right;           /* 右下に表示 */
   background-color: #ffffcc;                   /* 背景色 */
   padding: 0.3em;                              /* 内側の余白 */
   border: 1px dotted gray;                     /* 枠線 */
}

必要なのは、2~4行目だけです。

  • 2行目:
    まずは、背景画像を指定するbackground-imageプロパティの値にロゴ画像のURLを指定します。(これだけだと、ロゴ画像がボックスの背景全面にタイル状に並んで表示されてしまいます。)
  • 3行目:
    背景画像の繰り返し方法を指定するbackground-repeatプロパティに値「no-repeat」を指定すると、背景画像が1回だけ表示されるようになります。(描画領域が余っていても上下左右にタイル状には並ばなくなります。)
  • 4行目:
    背景画像の掲載位置を指定するbackground-positionプロパティに値「bottom right」を指定すると、背景画像は右下に表示されます。ここで指定する値「bottom」と「right」の間には半角スペースがあり、値を2つ指定しています。なお、ここを「top right」にすれば、ボックスの右上に固定表示できます。

5行目以降はサンプル用の装飾であって特に必須ではありません。
background-colorプロパティはボックスに背景色を加えているだけ、paddingプロパティは内側の余白を設けているだけ、borderプロパティは枠線(ここでは1pxで灰色の点線)を引いているだけです。

というわけで、ロゴ画像さえうまく作れば、おもしろい装飾になるんではないかと思います。(^_^;;;

()

スタイルシートTipsふぁくとりーの主要なカテゴリ

下記のカテゴリに区分して、スタイルシートに関するTIPSを公開しています。カッコ内の数字は、該当する記事の件数です。

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連するかもしれない情報

▼当サイト内外で関連しそうな記事などが自動表示されています。(たぶん)

--- 当サイト内を検索 ---