※ ChatGPTを利用し、要約された質問です(原文:HPの作成を教えてください。)
HP作成方法:DIVでヘッダーを作成する際に表示されない文字の問題
このQ&Aのポイント
HP作成において、DIVでヘッダー領域を作成し、その中に区分けしたヘッダーロゴを表示させたい場合に、文字が表示されない問題が発生しています。
初心者でも分かりやすい方法で解決するためには、CSSを正しく設定する必要があります。
CSSの設定には、ヘッダーのサイズ、位置、浮動(float)の設定などが含まれています。適切な設定を行うことで、文字が正しく表示されるようになります。
HP作成を見よう見まねで作成しているのですが最初からつまずきました。
作成したいのはDIVで#headerでヘッダー領域を作りその中にヘッダー#header-inを作りその中を区分けしたいので#header-logoと#header-logo2をCSSで作成したのですが#header-logoと#header-logo2の文字が表示されません。
何分初心者なので分かりやすく教えて頂ければ助かります。
body , html {
height: 100%;
margin: 0;
padding: 0;
text-align: center;
/* 標準文字色 */
font-size : 100%;
background-image : url(../imege/bg01.png);
background-repeat : repeat-x;background-position : left top;
}
/* Safari用ハック 文字サイズ調整 */
/*\*/
html:\66irst-child body{
font-size: 90%;
}
/* end */
}
img{
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
}
#container {
width: 100%;
position: relative;
height : 100%;
min-height: 100%;
background-image : url(../imege/fbg01.png);
background-repeat : repeat-x;background-position : left bottom;
}
#header{
width: 100%;
height : 84px;
margin-top : 0px;
margin-bottom : 0px;
text-indent : -9999px;
}
#contents {
padding-top : 84px;
padding-bottom: 100px;
margin-top : 0px;
margin-bottom : 0px;
margin-left : auto;
margin-right : auto;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
margin-left : auto;
margin-right : auto;
}
#header-in{
width : 900px;
height : 84px;
position : relative;
margin-left : auto;
margin-right : auto;
margin-top : 0px;
margin-bottom : 1px;
}
#contents-in{
margin-left : auto;
margin-right : auto;
width : 900px;
position : relative;
margin-top : 0px;
margin-bottom : 0px;
}
#footer-in{
margin-left : auto;
margin-right : auto;
margin-bottom : 0px;
width : 900px;
height : 100px;
position : relative;
margin-top : 0px;
}
#header-logo{
width : 500px;
height : 84px;
float : left;
z-index: 2;
}
#header-logo2{
width : 200px;
height : 84px;
float : left;
z-index: 2;
}
<div id="container">
<div id="header">
<div id="header-in">ヘッダー
<div id="header-logo">トップロゴ</div>
<div id="header-logo2">お問い合わせ</div>
</div>
</div>
<div id="contents">
<div id="contents-in">コンテンツ</div>
</div>
<div id="footer">
<div id="footer-in">フッター</div>
</div>
</div>
よろしくお願いいたします。