最近ホームページを作成しているのですが、画像 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
- 回答日時:
印刷用のスタイルシート
[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自体はとっても楽だと思います。
No.2
- 回答日時:
HTMLのカテゴリーで質問されているので、HTMLの書き方は、サンプルのようになります。
スタイルシートに関しては、
【Webデザイン・CSS】に関する質問一覧 - 教えて!goo( http://oshiete.goo.ne.jp/category/258/#crumb )
のほうが良いでしょう。
★画像を2枚用意してください。
・あなたが例示された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さしすせそだよ";
}
No.1
- 回答日時:
>基礎的なこともわかってない部分があります。
そのようです。根本的に違う!!
スタイルシートを用いる一番の目的は何でしたっけ??
「文書の構造をプレゼンテーションと切り離すこと( 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の仕様書を通読して、基本をマスターすること。デザインは一切無視して文書構造だけをかけるようになること。でなきゃスタイルシートを学ぶ意味がないです。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- PHP style.cssのjQuery条件付きcssが機能しない 4 2022/07/17 18:27
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- JavaScript 画面に表示したらアニメーションを開始したい 3 2023/01/13 15:38
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- HTML・CSS PCサイズで赤い画像2つと、青い画像2つがそれぞれ横に2つずつ並んでいるのですが、これをスマホサイズ 5 2022/04/11 12:01
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
CSSでボックスのheightが0になる
-
画像イメージの上下左右、欲し...
-
ウインドウを小さくするとbody...
-
定義リストに下線をつけたいと...
-
テーブルのセル間に余白が空い...
-
table周辺の隙間をなくしたい。
-
WEBサイト作成:初心者です...
-
4枚の画像を均等間隔で一列に...
-
Firefoxでネガティブマージンが...
-
メディアクエリで文字サイズを...
-
CSS検証サービス
-
スタイルシートで<div>を使った...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
【HTML&CSS】フッター下部の余...
-
HTMLでCSSでボーダーが表示され...
-
CSSでborderの指定を解除する記...
-
CSSで微妙にずれる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
css初心者 フレックスボックス...
-
余分な縦スクロールバーが出て...
-
CSS:animation開始位置の設定
-
form input テキストを上下中央...
-
W3Cのソースコードの検証サービ...
-
スクロールボックスを中央に配...
-
CSSでボックスのheightが0になる
-
表示倍率を変えるとレイアウト...
-
【CSS】ヘッダーの高さが不明の...
-
Media Queries 4 で 非推奨とな...
-
div領域をウインドウサイズに合...
-
CSS(0の単位)について
-
divで囲まれたpaddingの指定を...
-
中点「・」の改行について
-
CSSで指定した背景画像にリンク...
おすすめ情報