フリーランス WEBデザイナー 【キングサイト】
最近のウェブ制作技術
WordPress(ワードプレス)で親カテゴリーを指定して子カテゴリ一覧(カテゴリーリスト)を表示させる方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)で親カテゴリーを指定して子カテゴリ一覧(カテゴリーリスト)を表示させる方法
Webデザイナーになる為の第一歩(初級)
WEB屋になる為の知識と技術
Webデザイナーになる為の第一歩(初級)
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目と画像アップロード機能を追加する設定方法
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ブログツール【CMS】情報とWEBコンテンツ技術
WordPress(ワードプレス)でカテゴリー編集画面に新しい項目を追加する設定方法
ホームページ制作簡単作成ツールWix(ウィックス)
WEB屋になる為の知識と技術
ホームページ制作簡単作成ツールWix(ウィックス)
ウェブ制作カテゴリ
Facebookの投稿
ウェブ制作技術 SNS・ブログ
おすすめウェブサイト
ウェブ制作のご注文は全国対応

北海道 青森 岩手 秋田 宮城 山形 福島 東京 神奈川 埼玉県 千葉 茨城 群馬 栃木 愛知 静岡 三重 岐阜 新潟 長野 山梨 石川 富山 福井 大阪 京都 奈良 兵庫 滋賀 和歌山 岡山 広島 鳥取 山口 島根 愛媛 徳島 高知 香川 福岡 佐賀 長崎 大分 熊本 宮崎 鹿児島 沖縄

CSS(CSS3) を使って画像の上に文字を重ねる設定方法

07.01.16 18:51 | コメント(0)

floatを使わず display: inline-block で横並び

画像や写真の上にテキストやボタンを重ねて表示させる時は、CSS(スタイルシート)を使って設定が出来ます。
また、テキストやボタン以外にも検索窓やフォームも表示させることが出来ます。 「position」プロパティ要素を利用して、画像や写真の上にテキストを配置する方法をご紹介いたします。

画像の上に文字を重ねる

画像の上にテキストを表示
 1. positionプロパティ要素とは
 2. positionプロパティ要素で距離(位置)を指定するプロパティ
 3. 画像の上にテキストを配置するCSS
 4. 画像の上にテキストを配置する設定方法

positionプロパティ要素とは

position」プロパティ要素とは、表示位置をずらしたり、配置方法を指定する要素です。
position」プロパティ要素で指定できる値は、以下の4種類の値で指定できます。
※static以外の値を指定した場合には、表示位置をずらすことが出来ます。
説明
static:標準 位置をずらさない標準の表示を表す値
relative:相対配置 本来の位置から指定距離だけ移動させる値
absolute:絶対配置 親ボックス(css)の端から、指定距離だけ移動させる値
fixed:固定配置 描画領域(ウインドウ)の端から、指定距離だけ移動した位置に固定させる値 (画面をスクロールさせても動きません)

positionプロパティ要素で距離(位置)を指定するプロパティ

position」プロパティ要素を設定した後、距離(位置)を指定するプロパティを記載して位置をずらします。
距離(位置)を指定するには、以下の4つのプロパティがあります。
プロパティ 説明
top 上端からの距離を指定する
bottom 下端からの距離を指定する
left 左端からの距離を指定する
right 右端からの距離を指定する

画像の上にテキストを配置するCSS

画像の上に文字を重ねるためには、positionプロパティ要素を使い、「relative」と「absolute」2つの値を設定します。
これら2つの値を指定した場合の表示効果を以下に紹介しておきます。

【relativeで指定する場合】
本来表示される位置から相対的に指定した距離だけ移動した位置に配置されます。
position: relative;
top: 10px;
left: 10px;

【absoluteで指定する場合】
親ボックス(css)の端を基準にして、指定距離だけ移動した位置に配置されます。
position: absolute;
top: 10px;
left: 10px;

画像の上にテキストを配置する設定方法

上記の内容でcssの記載は完了ですが、htmlには画像と同じ「class」要素に画像とテキストを配置します。
【htmlの記載】

画像の上に配置するテキスト


【cssの記載】
.sample{}
.sample p{
position: absolute;
top: 10px;
left: 10px;
}

以上で CSS(CSS3) を使って画像の上に文字を重ねる設定方法になります。
カテゴリ:CSS3, HTML5 + CSS3の基礎, WEB屋になる為の知識と技術
  • このエントリーをはてなブックマークに追加
  • Facebookでコメントする

    コメントする

    おすすめの記事

    PAGE TOP