dポイントプレゼントキャンペーン実施中！

CSS/HTML で画像 2枚重ねた上に文字。

締切済

  • 質問者：dog_star_man
  • 質問日時：
  • 回答数：3件

最近ホームページを作成しているのですが、画像 2 枚を重ねて、その上にリンク付きの文字を
のせるにはどのようにしたらよいでしょうか。

CSS を構い始めたのは 1 週間程度なので、基礎的なこともわかってない部分があります。
いろいろ試して、(3)が近いような気がしますが、(1)、(2)に付け加える形でもよいので、
ご教授お願いします。



以下、私が試した 3 パターンの方法です。数値、画像は適当な値です。

(1) 画像 1 枚の上に文字を入れた形。※画像 2 枚目を重ねられませんでした。
---------------------------
--- CSS ---
#img1 {
background-image : url(img1) ;
background-repeat : no-repeat ;
width : 100px;
height : 100px;
/* -- 各ブラウザ対応用 -- */
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
--- HTML ---
<DIV class="img1">タイトルなどのテキスト</div>
---------------------------



(2) 画像を 2 枚重ねた形。 ※文字を上に載せれませんでした。
---------------------------
--- CSS ---
#img1 {
background-image : url(img1) ;
background-repeat : no-repeat ;
width : 100px;
height : 100px;
/* -- 各ブラウザ対応用 -- */
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}

.img2 {
padding: 50px 0 0 0px; /*2枚目の画像の位置調整*/
}
--- HTML ---
<div id="img1">
<img class="img2" src="red-star.png" width="横" height="高さ">
</div>
---------------------------



(3) 画像 2 枚を重ねた上に文字を載せた場合。
※思ったとおりに表示できました。が、何故か<a href="#">テスト</a> のリンクができません。。。

---------------------------
--- CSS ---
#img1 {
position: relative;
bottom :-100px;
left: -80px;
width : 250px;
height : 80px;
transform: rotate( -15deg );
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
z-index: 2;
}

#img2 {
position: relative;
bottom :90px;
left: 80px;
width : 200px;
height : 40px;
transform: rotate( -15deg );
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
z-index: 1;
}

#MENU {
position: relative;
bottom :725px;
left: -25px;
transform: rotate( -15deg );
-webkit-transform: rotate(-15deg);
-moz-transform: rotate(-15deg);
-ms-transform: rotate(-15deg);
-o-transform: rotate(-15deg);
z-index: 3;
}

--- HTML ---
<div id="img1"><img src="img1" width="100" height="100"></div>
<div id="img2"><img src="img1" width="100" height="100"></div>
<div id="MENU"><a href="#">テスト</a></div>
---------------------------

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.3

  • 回答者： ORUKA1951
  • 回答日時：

印刷用のスタイルシート


[print.css]
@charset "Shift_JIS";
div.header div.nav ol{
width:160mm;
border:solid 1px black;
position:relative;
padding:0;
}
div.header div.nav ol:after{
content:"サイトマップ";
background-color:white;
position:absolute;
top:-0.5em;
left:1em;
font-size:1.2em;font-weight:bold;
}
div.header div.nav ol:before{
content:url(../images/background/a1.jpg);
float:left;
margin-top:10mm;}
div.header div.nav ol,div.header div.nav ol li{
display:block;
}
div.header div.nav ol li{margin-left:250px;}
div.header div.nav ol li a{text-decoration:none;}
div.header div.nav ol li a:after{
content:"\A http://hoge.com"attr(href);
white-space:pre;
}

あとはブラウザの表示メニューからスタイルシートを選択して・・・(Chromeは代替スタイルシートを使えない)・・・表示を確認し、印刷プレビューで印刷状態も確認。

★要はHTMLはデザインを無視して正直に詳しく文書構造だけを記述すると、
＞画像 2枚重ねた上に文字
　だろうが、なんだろうが自由自在にデザインできまます。まず、きちんとHTMLを書きましょう。HTML自体はとっても楽だと思います。
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： ORUKA1951
  • 回答日時：

HTMLのカテゴリーで質問されているので、HTMLの書き方は、サンプルのようになります。


スタイルシートに関しては、
【Webデザイン・CSS】に関する質問一覧 - 教えて！goo( http://oshiete.goo.ne.jp/category/258/#crumb )
　のほうが良いでしょう。

★画像を２枚用意してください。
　・あなたが例示された250px×80pxと200px×40pxをそれぞれa1.jpg、a2.jpgとしてHTMLを置くフォルダー内に、images/backgroundフォルダーをつくり保存視する。

[HTML]本体　Shift_JIS のHTML4.01strict です。文字コードはShift_JIS
・Another HTML-lint 5( http://www.htmllint.net/html-lint/htmllint.html# )
　のDATA入力でチェック済み
・タブは＿に置換してあるので戻すこと。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
＿<title>サンプル</title>
＿<meta name="author" content="ORUKA1951">
＿<meta http-equiv="Content-Style-Type" content="text/css">
＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
＿<link rel="START" href="../index.html">
＿<link rel="stylesheet" type="text/css" href="./CSS/rotation.css" media="screen" title="回転">
＿<link rel="Alternate stylesheet" type="text/css" href="./CSS/type2.css" media="screen" title="type2">
＿<link rel="Alternate stylesheet" type="text/css" href="./CSS/type3.css" media="screen" title="タイプ3">
＿<link rel="stylesheet" type="text/css" href="./CSS/print.css" media="print">
</head>
<body>
＿<div class="header">
＿＿<h1>タイトル</h1>
＿＿<div class="nav">
＿＿＿<ol>
＿＿＿＿<li><a href="/test">テスト</a></li>
＿＿＿＿<li><a href="/a">あいう</a></li>
＿＿＿＿<li><a href="/k">かきく</a></li>
＿＿＿＿<li><a href="/s">さしすせ</a></li>
＿＿＿</ol>
＿＿</div>
＿</div>
＿<div class="section">
＿＿<h2>見出し</h2>
＿＿<p>・・・</p>
＿</div>
＿<div class="footer">
＿＿<h2>文書情報</h2>
＿＿<dl class="documentHistry">
＿＿＿<dt id="FIRST-PUBLISHED">First Published</dt>
＿＿＿<dd>2012-08-10</dd>
＿＿</dl>
＿＿<address>&copy; ORUKA1951 2012 - 2016 All Rights Reserved mailto:*****</address>
＿</div>
</body>
</html>

[スタイルシート]文字コードShift_JIS、HTMLと同じ場所にCSSというフォルダーを作成して、それぞれの名前をつけて保存
(rotation.css)
@charset "Shift_JIS";
div.nav ol,div.nav ol li{
margin:0;padding:0;display:block;position:relative;
}
div.nav ol{list-style:none;height:100px;}
div.nav ol li{
width:250px;height:80px;
text-align:center;
background:url(../images/background/a1.jpg);
transform: rotate( -15deg );float:left;
}
div.nav ol li:before{
content:url(../images/background/a2.jpg);
position:absolute;top:25px;left:20px;
}
div.nav ol li a{
display:block;width:100%;height:100%;
line-height:80px;
position:absolute;top:0;left:0;
text-decoration:none;
}

(type2.css)
@charset "Shift_JIS";
div.nav ol,div.nav ol li{
margin:0;padding:0;display:block;position:relative;
}
div.nav ol{list-style:none;text-align:center;}
div.nav ol li{
display:inline-block;
width:200px;height:40px;
background:url(../images/background/a2.jpg);
}
div.nav ol li:before{
content:url(../images/background/a2.jpg);
position:absolute;top:15px;left:15px;
}
div.nav ol li a{
display:block;width:80%;height:80%;
background-color:yellow;
line-height:30px;
position:absolute;top:15px;left:15px;
text-decoration:none;
}

(type3.css)
@charset "Shift_JIS";
div.nav ol,div.nav ol li{
margin:0;padding:0;display:block;
}
div.nav ol{
width:500px;height:200px;
margin:0 auto;
background-image:url(../images/background/a1.jpg);
background-size:cover;
list-style:none;
position:relative;
}
div.nav ol li{
width:200px;height:40px;
background:url(../images/background/a2.jpg);
line-height:40px;
text-align:center;
}
div.nav ol li a{
display:block;width:100%;height:100%;
}
div.nav ol li a:hover:after{
content:attr(href)"\Aテストだよ";
white-space:pre;
font-size:200%;
position:absolute;
top:0;left:200px;
width:300px;height:200px;
background-color:red;
}
div.nav ol li a:active{
background-color:yellow;
}
div.nav ol li a[href="/a"]:hover:after{
content:attr(href)"\Aあいうえおだよ";
}
div.nav ol li a[href="/k"]:hover:after{
content:attr(href)"\Aかきくけこだよ";
}
div.nav ol li a[href="/s"]:hover:after{
content:attr(href)"\Aさしすせそだよ";
}
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： ORUKA1951
  • 回答日時：

＞基礎的なこともわかってない部分があります。


　そのようです。根本的に違う!!

　スタイルシートを用いる一番の目的は何でしたっけ??
「文書の構造をプレゼンテーションと切り離すこと( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )」でしたよね。【必読!!】
★HTMLには文章しか書かない!!
　それによって「広汎なプラットフォームや多様なメディアでの文書提供コストを低下でき、文書の改訂も容易になる」のですよ。基本が出来ていないからHTMLもCSSも複雑怪奇で「コストもかかり、文書の改訂も複雑になる。」


例えば、それがナビゲーションでしたらHTMLは
<div class="nav">
　<ol>
　　<li><a href="/t">テスト</a></li>
　　<li><a href="/a">アイウエオ</a></li>
　　<li><a href="/k">かきくけこ</a></li>
　</ol>
</div>
　となっているはずですね。デザインはスタイルシートに任せるので、HTMLには文書構造だけ書けばよくなる。
　その上でスタイルシートを書く、それもたったこれだけ
★下になる大きい画像a1.jpgは背景(250×80)
★二番目の画像a2.jpgは内容の追加(200×40)
div.nav ol,div.nav ol li{
margin:0;padding:0;display:block;position:relative;
}
div.nav ol{list-style:none;height:100px;}
div.nav ol li{
width:250px;height:80px;
text-align:center;
background:url(./images/background/a1.jpg);
transform: rotate( -15deg );float:left;
}
div.nav ol li:before{
content:url(./images/background/a2.jpg);
position:absolute;top:25px;left:20px;
}
div.nav ol li a{
display:block;width:100%;height:100%;
line-height:80px;
position:absolute;top:0;left:0;
text-decoration:none;
}
文書構造しか書かれていないので・・・
ナビゲーションリストを様々にデザインしてみよう。( http://www.ichiya.com/WebService/Howto/sample/HT … )
にて、ブラウザ(Chrome除く)の[表示]メニューから[スタイル(シート)]スタイルを選択するように、さまざまにデザインが変更できる。

★HTMLには焚書構造しか書かない!!
　class名やidは文書文書構造を補完するものであること
　『id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )』
　HTML5の新しい要素名が参考になります。
　　リンク先でもないのにidは使わない

CSS3とかの前に、とにかくHTML4.01の仕様書を通読して、基本をマスターすること。デザインは一切無視して文書構造だけをかけるようになること。でなきゃスタイルシートを学ぶ意味がないです。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報