Q&A
なぜ全てに position: relative を指定しているのか理由はありますか？
きちんと理解して使っていますか？
position:relativeを使う必要はありますか？
htmlとcssで卒業研究で使うWEBページを製作しています。
z-indexで重なり順を変えたいのですがうまくいきません。
※HTMLとCSSのソースコードを別々に書く方法がわからなかったので一緒に書いてあります。
該当のソースコード
HTML
<body> <div id="header-fixed"> <div id="header"> <div class="boxA"> <div class="box1"> <html> <img src="image/rogo.png" width="250" height="125" alt=""> </div><!--box1閉じ--> <div class="box2"> <nav class="menu"> <ul> <li><a href="#" class="btn-square">TOP</a></li> <li><a href="#" class="btn-square2">診断</a></li> </ul> </nav> </div><!--box2閉じ--> </div><!--boxA閉じ--> </div><!--header閉じ--> </div><!--headerfixed--> <div class="box3"> <div class="slider"> <img src="image/hand.png" width="500" height="500" alt=""> <img src="image/ito.png" width="500" height="500" alt=""> <img src="image/joi.png" width="500" height="500" alt=""> <img src="image/nae.png" width="500" height="500" alt=""> </div> </div><!--box3閉じ-->CSS
@charset "UTF-8";
.boxA:after {content:"";
display: block;
clear: both
z-index:100;
position: relative}
div#header-fixed{
position: fixed; /* ヘッダーの固定 /
top: 0px; / 位置(上0px) /
left: 0px; / 位置(右0px) /
width: 100%; / 横幅100% /
height: 140px; / 縦幅140px */
}
.box1 { float:left;
width:50%;
z-index:90;
position: relative}
.box2 { float:left;
width:50%;
z-index:80;
position: relative}
.box3 { z-index:50;
position:relative;
top:150px}
.box4 { z-index:40;
position: relative}
.box5 { z-index:30;
position:relative;
top:150px}
わからないです。どうすればいいですか？
それが卒業研究なのでは？何が卒業研究なのかは知りませんが、
Webサイトを作るという卒業研究なのでしたら少しお勉強が足りなさすぎる気がします。
それともWebサイトは単なる研究を見せるためのものなら、自分で作らずにホームページ作成サイトなどを使った方がよいのでは？
締め切りが近く切羽詰まっているのでできれば、ソースコードをすべて教えてほしいです。
未熟な自分が簡単見ても、突っ込み所がいくつか見えるので、一から見直した方が良いと思います。
多分このまま進めるとどこかで上手くいかなくなる可能性が高いです。
もし制作自体が卒業研究なら、もう少し勉強をして、知識を固める事をオススメします。
追記
＞締め切りが近く切羽詰まっているのでできれば、ソースコードをすべて教えてほしいです。
一旦そちらの事情や丸投げな事を百歩譲って無視するとしても、提示されてる範囲でのソースコードしかこちら側では提示出来ませんし、とりあえずで良いならasuchi0819さんの回答で解決するのでは？
「締め切りが近く」
それは締め切りが近くなるまで放置していた質問者さんの責任で、
回答者からしてみれば全く関係のないことです。
「ソースコードを全て教えてほしいです」
これも作業依頼であって、質問サイトであるteratailでは相応しくありません。
作業依頼がしたいのであれば、別のサイトでお金を払ってやってもらってください。
既に回答もついていますし、この質問で質問者さんが困っているz-indexが効かない事象は解決するのでは？
というか締め切りに間に合わないのであれば、それが質問者さんの実力ですし、それが卒業研究ですよね。
おとなしく教授に頭を下げるか、もう1年頑張りましょう。
学科が、Webサイト制作関連なのでしょうか？
であるならば、担当の先生に聞くべきなのではないでしょうか・・・？
そして、担当の先生が教えてくれないというのならば、azuapricotさんがおっしゃるとおり、
そのわからないことを、自分で調べ、研究する、も含めて卒業研究の一貫であるとお見受けします。
> ソースコードをすべて教えてほしいです。
この一言がどういう意図なのかによります。
正しいコードをくれ、というなら丸投げですし、
コードが、どういう意味があるのか、役割なのかを教えてくれというならば、
学校の担当の先生に聞くのが筋でしょう。
このサイトは、作業依頼所でも、学校でもないので。
まず、質問文に、
自分でどこまで調べて、どのサイトを記事を参考にしたが、ここがわからなかった、と
自分でどこまで努力したかも記載しましょう。
みなさんが辛口コメント・塩回答をされている理由は、
現状の質問では、質問者さんの調査努力が見られない、
最初からあきらめてぶん投げているように感じられる質問だから、に尽きます。
回答2件
0
htmlとcssで
提示された HTML がマークアップ言語として成立してないですよ。
CSSは正しくマークアップされた文書にしか適用できません。
なので、同じ行に書かれている「WEBページを製作」以前の問題と感じます。
マークアップ文書って、元々、大戦時に米軍が軍備拡大を図ったとき、マニュアルを電子化する目的から、仕様が考えられ、誕生したそうですよ（私自身、文献は見たことがなく、ネット上の噂みたいな記事で知った事ですけど）。
SGML,HTML,XMLといった種類があることや、それぞれの仕様の変遷を調べたり、HTMLではスタイルシートをどのように適用すればいいのか等、「スタイルシートだけで表現を！」と言われていた時期のことを調査して、レポートに仕上げればいいのではないでしょうか。
ちょうど、「スタイルシートだけで表現を！」と言われていた時期の書籍として、
秀和システム「Web標準の教科書（ISBN4-7980-1092-8）2005年8月」があります（手元で確認してます）。
CSS2.1 策定中の仕様を纏めた書籍ですが、HTML+CSSであれば、十分に参考になると思いますよ。
HTMLを研究テーマに出すような学校なら図書館で見つかるんじゃないでしょうか。
投稿2019/11/13 11:07
総合スコア5434
あなたの回答
tips
プレビュー
