- 締切済み
CSS/HTML で画像 2枚重ねた上に文字。
最近ホームページを作成しているのですが、画像 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> ---------------------------
- dog_star_man
- お礼率0% (0/4)
- HTML
- 回答数3
- ありがとう数19
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
印刷用のスタイルシート [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自体はとっても楽だと思います。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
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>© 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さしすせそだよ"; }
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞基礎的なこともわかってない部分があります。 そのようです。根本的に違う!! スタイルシートを用いる一番の目的は何でしたっけ?? 「文書の構造をプレゼンテーションと切り離すこと( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/intro/intro.html#h-2.4.1 )」でしたよね。【必読!!】 ★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/HTML/nav/navigation1.html ) にて、ブラウザ(Chrome除く)の[表示]メニューから[スタイル(シート)]スタイルを選択するように、さまざまにデザインが変更できる。 ★HTMLには焚書構造しか書かない!! class名やidは文書文書構造を補完するものであること 『id属性及び class属性と併用することで、文書に構造を付加する( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )』 HTML5の新しい要素名が参考になります。 リンク先でもないのにidは使わない CSS3とかの前に、とにかくHTML4.01の仕様書を通読して、基本をマスターすること。デザインは一切無視して文書構造だけをかけるようになること。でなきゃスタイルシートを学ぶ意味がないです。
