Q&A
> 私自身で記述できるレベルには到達していません。
文字化けの修正はデバッグみたいなもんだからちょっと頑張ってお手元のファイルの内容見直してみては？
前提・実現したいこと
デモページ同様に背景画像の上に画像(左上)と文字(右上)を載せたいです。
ポジション要素で試したのですが変化が見られませんでした。
■作成中のホームページURL（コーポレートサイト）
作成中→蒼乃建設：コーポレートサイト
完成版→見本
■使用言語
・HTML
・CSS
■レンタルサーバー
・さくらインターネット（ライト）
■プログラミング経験
・経験年数：4か月
・学習方法：Progate歴3ヶ月（HTML,CSS）
・コードを見た時に何が書いてあるか理解できますが、
私自身で記述できるレベルには到達していません。
↓
2021年3月4日
自力での模写に挑戦中
※ルール：ググるorTeratailで教えて頂き完成を目指す
発生している問題・エラーメッセージ
■エラーページ↓↓
■見本ページ↓↓
該当のソースコード
ソースコード： ■■■HTML■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ <!DOCTYPE html> <html lang="ja"> <head> <title>corporate-site</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <img class="mainvisual" src="img/main.png" alt="mainvisual"> <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo"></a></h1> <ul class="sec-navi"> <li class="header-list"><a href="#">企業理念</a></li> <li class="header-list"><a href="#">施工事例</a> <li class="header-list"><a href="#">採用情報</a> <li class="header-list"><a href="#">お問い合わせ</a> </ul> </header> </body> </html> ■■■CSS■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ @charset "UTF-8"; .html { font: 100%; } .mainvisual { position: relative; width: 500px; } .mainvisual { width: 100%; height: 400px; object-fit: cover; } .mainvisual h1 { position: absolute; top: 25%; left: 39%; }
試したこと
下記のサイトにて「画像の上で文字を重ねる方法」を検索し、
ポジション要素を使って試してみました。
しかし、うかず文字化けも発生しています。
検索したサイト
.mainvisual h1 { position: absolute; top: 25%; left: 39%; }
補足情報（FW/ツールのバージョンなど）
■使用ツール
・Terapad
模写してるものを
全世界に公開していいかどうかは一考していただきたく
回答4件
0
ベストアンサー
一つの案として、背景画像をCSSでbackground-imageとして扱うのはいかがでしょうか？
CSS
1header { 2 background-image: url(img/main.png); 3 background-repeat: no-repeat; 4 background-position: center; 5}
文字化けですが、htmlの文字コードを指定してみていただけますか？
html
1 <meta charset="UTF-8"> 2 <meta name="robots" content="noindex , nofollow"> 3 <title>corporate-site</title>
追記 ローカルじゃなくてレンタルサーバーってことなので、
そっとnoindexとnofollowも足しておいた方が良いかも？
※という指摘が修正依頼であったようなので何をするのか分かりやすいように追記しておきます。
※HTMLとCSS、javascriptくらいまでならPCのデスクトップ上で比較的簡単に練習できたりしますよ。
投稿2021/03/04 14:02
編集2021/03/05 06:06
退会済みユーザー
総合スコア0
＞一つの案として、背景画像をCSSでbackground-imageとして扱うのはいかがでしょうか？
試してみたところ画像の上に文字を重ねることができました。
＞文字化けですが、htmlの文字コードを指定してみていただけますか？
<meta charset="UTF-8">を追記したら文字化けが解消されました。
<meta name="robots" content="noindex , nofollow">は追記は不要でしょうか？
> <meta name="robots" content="noindex , nofollow">は追記は不要でしょうか？
必要です。
絶対に安心とは言えないのですが、追記しておいていただけると助かります。
※本当は他者所有のサイトを完全コピーするならローカル上をおすすめしたいです。
質問への追記・修正にてm.ts10806様が指摘されている、
「模写してるものを全世界に公開していいかどうかは一考していただきたく」
この一文を受けてやるべき対策を追記いたしました。
コピーサイトが何かの拍子に間違って本家サイトよりも上位に表示されたり、
本家サイトが検索結果から消えてしまった場合、
JAQKxsuke様は本家サイトの運営会社さんから損害賠償を請求される恐れがございます。
もし可能であれば、中のテキストを変えるなり、背景の画像を著作権フリーのモノを利用するなど、
本家のサイトとぱっと見違うサイトになるように考慮していただきたく思います。
何かあった時に困るのはJAQKxsuke様とコピーされたサイトの持ち主さんだけなので、
僕らは注意を促すだけです。ちょっとまずいと思うけど…ってね。
＞コピーサイトが何かの拍子に間違って本家サイトよりも上位に表示されたり、
本家サイトが検索結果から消えてしまった場合、
JAQKxsuke様は本家サイトの運営会社さんから損害賠償を請求される恐れがございます。
勉強になります。ありがとうございます。
テキストを変更し画像はフリー素材を使用します。
見本サイトの表示は控えます。
丁寧かつ分かりやすく教えて頂き、ありがとうございます。
とても参考になりました。
noindexとnofollowも追記しておきました。
0
見本ページがあるのなら、そのページのHTMLやCSSを検証ツールで確認しましょう。それを参考にコーディングするのが早道です。ただ単にそのまま写すのではなく、それぞれのコードを意味を調べることでスキルアップできます。
初心者向け！Chromeの検証機能（デベロッパーツール）の使い方
で、見本ページを検証ツールで確認すれば、
背景画像は、CSS の background-image を使っていることが分かります。
ロゴ画像とメニューリストはDisplay: felx; で横並びにしているとかも分かります。
投稿2021/03/04 16:44
総合スコア34073
＞見本ページがあるのなら、そのページのHTMLやCSSを検証ツールで確認しましょう。
検証ツール試してみます。スキルアップのアドバイスもありがとうございます。Display: flex;も今から試してみます。
0
- position:absoluteで所定の場所に配置するか
- svgなどで配置するか
が良いでしょう
sample
見本通りではありませんが、とりあえず載せてみました
css
1<style> 2*{margin:0;padding:0;} 3.wrap{position:relative;} 4#i1{width:100%;} 5#i2{position:absolute;top:50px;left:100px;} 6</style> 7<div id="wrap"> 8<img src="http://jaqkxsuke.sakura.ne.jp/corporate/img/main.png" id="i1"> 9<img src="http://jaqkxsuke.sakura.ne.jp/corporate/img/header_logo.png" id="i2"> 10</div>
投稿2021/03/04 13:59
編集2021/03/05 02:33
総合スコア116690
0
cssについているbackgroundもしくはhtmlのcss属性であるbackground-imageを使ってみてはいかがでしょうか。
例えば。
html
1<header> 2 3</header>
このなかに画像を表示し、その上に文字を重ねて表示するとします。
html
1<header class="background-test"> 2ヘッダー内容 3</header>
css
1.background-test { 2background-image: url(画像のURL); 3}
このような感じになります。
ご参考までに…
投稿2021/03/04 23:29
総合スコア50
あなたの回答
tips
プレビュー
