ヘッダーの部分に画像を挿入して、その画像の上に”らくらくオンライン”という文字を書きたいのですが、うまくできません。元々、授業でホームページを作ることになったので先生が作ったものを変えていって自分のものをつくる形であるため、どういう仕組みでどうなっているかわかっていない部分もあります。ですので、詳しく教えていただけるとありがたいです。ちなみに今現在、ヘッダーは黒色の背景になっています
<html> <head> <title>課題</title> <meta charset="utf-8"> <style> /* コンテナ */ .container { border:solid; /* マージンで中央寄せ */ margin-right: auto; margin-left: auto; /* 最大幅 */ max-width: 960px; height:auto; } /* ヘッダ */ .header{ width:100%; height:100px; color:white; text-align:center; background-color:black; } /* 中央のボックス */ .main{ width:auto; height:500px; background-color: gray; } .left{ width:30%; min-height:100%; background-color: white; float:left; } .right{ width:70%; min-height:100%; background-color: #ffffdd; float:left; } /* フッター */ .hooter{ clear:both; width:100%; height:auto; background-color: #006600; color:white; text-align:center; } div{ box-sizing:border-box; font-size: 20px; /* border:solid; */ } h1{ margin:0px 0px 0px 0px; padding: 20px; filter:drop-shadow(0 0 5px white); } </style> </head> <body> <!-- コンテナで全体ラップ --> <div class="container"> <!-- ヘッダ --> <div class="header"> <h1>らくらくオンライン</h1> </div> <!-- 真ん中を包む箱 --> <div class="main"> <!-- 左のエリア --> <div class="left"> <h4>◎教科名</h4> </div> <!-- 右のエリア --> <div class="right"> <h4>Bパート(幅50%)</h4> </div> </div> <!-- フッター --> <div class="hooter"> hooter </div> <!-- コンテナの閉じdiv --> </div> </body> </html>
あなたの回答
tips
プレビュー