Q&A
コードはマークダウンのcode機能を利用してご提示ください。
前提・実現したいこと
ここに質問の内容を詳しく書いてください。
HTML5とCSS３を使用し、Brackets上でコーディングを行っている際に
以下のエラーが発生致しました。
・<title></title>で挟んだ部分画像赤枠⓵のように文字として発生してしまい
WEｂ上のタグの部分に正しく表記されません。
・画像赤枠⓶の部分のtopのnav部分だけ段落がしたに表記されてしまいます。
・バナー背景画像の上に記載されている文字が背景画像の上に載らない状態です。
以上3点について、コーディング上には問題ないと思っているのですが、正しく
分かる方ご説明を頂きたいです。
もしかしたら、Brackets上でプレビュー表示を行い確認しているだけなので
本環境で表示した際は問題が起こるのかは試していません。
以下に記入したコードを載せます。
xで記入している部分は個人情報の為切り取っております。
ここにより詳細な情報を記載してください。
＜＜HTML コード＞＞
＜＜CSS コード＞＞
@charset "UTF-8";
body {
line-height: 1.7;
font-size: 16px;
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック Medium",
YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
color: #000
}
a,
a:link {
color: #3585b7;
}
a:visited {
color: #6252B7;
}
a:hover {
text-decoration: none;
color: #555;
}
/* header /
header {
display: flex;
}
header h1 {
margin: 25px 0 0 20px;
}
header nav {
margin: 0 0 0 auto
}
header nav ul {
list-style-type: none;
margin: 20px 0;
padding: 0;
display: flex;
}
header nav ul li a,
header nav ul li a:link,
header nav ul li a:visited{
display: block;
padding: 10px 15px;
text-decoration: none;
color: #000;
}
header nav ul li a:hover {
color: #888;
}
/ footer */
footer {
background: #ede6e6;
padding: 20px;
}
footer ul {
list-style-type: none;
margin: 0 0 5px;
padding: 0;
display: flex;
justify-content: flex-end
}
footer ul li{
margin: 0 0 0 20px;
}
footer ul li a,
footer ul li a:link,
footer ul li a:visited {
text-decoration: none;
font-size: 13px;
color: #000;
}
footer ul li a:hover {
color:#888;
}
/* main */
main .inner {
width: 990px;
margin: 50px auto;
}
main h2 {
margin: 50px 0 20px;
font-weight: normal;
font-size: 25px;
color: #7f6666;
}
main p {
margin: 0 0 15px;
}
main dl {
width: 100%;
}
main dl dt {
float: left;
clear: both;
padding: 10px 0;
color: #998484;
}
main dl dd {
border-bottom: solid 1px #ccc;
margin: 0;
padding: 10px 0 10px 15%
}
/* top */
.home main .visual {
background: url(../images/sample.jpg)
no-repeat center top;
height: 500px;
padding: 200px 50px 50px;
box-sizing: border-box;
}
.home main .visual p {
color:aliceblue;
}
.home main .visual p.catch {
font-size: 45px;
}
.home main section {
display: flex;
margin-top: 50px;
}
.home main section div {
padding:0 40px 0 0;
}
.home main section:first-child{
flex-direction: row-reverse;
}
.home main section:first-child
div {
padding: 0 0 0 40px;
}
/* busiess */
/* consultant*/
/* contact */
/* process */
/* sitemap */
回答3件
0
・<title></title>で挟んだ部分画像赤枠⓵のように文字として発生してしまい
WEｂ上のタグの部分に正しく表記されません。
html
1<meta name="description" 2content="私たちはお客様が求めている理想とする 3自分に近づけるよるお客様を知る活動に重点を置いております。 4転職活動や業務委託などにおけるお悩み、ご相談はお気軽にご連絡下さい。" 5<title>XXXXXXXXX</title>
直前の<metaが閉じられていません。
投稿2019/12/18 08:39
総合スコア145967
metaの部分解決策ご提示ありがとうございました。
高評価＋させていただきました
おかげ様で⓵に関しまして正常に機能しました。
⓶と⓷の部分については、質問時に画像が添付されていませんでしたので追加で添付致しました
もし、お分かりになるようであればご回答いただけますと幸いです
0
ベストアンサー
<title>の部分については解決済みのようですので、それ以外の2点について。
・画像赤枠⓶の部分のtopのnav部分だけ段落がしたに表記されてしまいます。
htmlの当該箇所を見ると
html
1<li><a href="index.html"></a>top</li> 2<li><a href="business.html">business</a></li> 3
となっていて、「top」の文字が<a>タグの外に出てしまっています。
下の行の「business」と同じように<a>タグの中に入れてやると直ります。
・バナー背景画像の上に記載されている文字が背景画像の上に載らない状態です。
htmlの当該箇所は
html
1<div class="visual"> 2<p class="catch">人と人を繋ぐ</p> 3<p>紹介に留まらず人の成長を</p> 4</div>
となっていますが、cssのほうをみるとvisualクラスにかんして、左右中央揃え等の指定が何もされていません。
試しにcssの
csss
1.home main .visual { 2background: url(../images/sample.jpg) 3no-repeat center top; 4height: 500px; 5padding: 200px 50px 50px; 6box-sizing: border-box; 7}
の箇所に
text-align: center;
などと追記してやると文字がページの中央に表示されるかと思います。
投稿2019/12/19 11:08
総合スコア15
あなたの回答
tips
プレビュー
