みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

HPの作成を教えてください。

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>

よろしくお願いいたします。

投稿日時 - 2015-11-13 17:26:45

QNo.9079721

困ってます

質問者が選んだベストアンサー

text-indent : -9999px; で、テキストを表示しないようにしているからでしょう。

投稿日時 - 2015-11-13 17:31:47

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問