Q&A
これでお金もらってるんですよね？
前提・実現したいこと
【ヘッダーの完成html及びcss】
練習のためコーポレートサイトの模写をしています。
自力で解決できなかった問題点3点です。
①タイトルの中央に持ってくる。
②重要なロゴ画像の画質が荒くなってしまっている。
③リストを一番右に寄せる。余白スペースをなくすには？
ヘッダー作成だけで悪戦苦闘しています、
どなたかご教授の程、宜しくお願い致します。
■見本と模写サイトのリンク
・見本サイト ※模写サイトを提供してるサイト主様がこちらポートフォリオに使ってOKと許可を出しております。
・模写サイト
■使用言語
・HTML
・CSS
■レンタルサーバー
・さくらインターネット（ライト）
■プログラミング経験
・経験年数：4か月
・学習方法：Progate歴3ヶ月（HTML,CSS）
・コードを見た時に何が書いてあるか理解できますが、
私自身で記述できるレベルには到達していません。
↓
2021年3月4日
自力での模写に挑戦中
※ルール：ググるorTeratailで教えて頂き完成を目指す
発生している問題・エラーメッセージ
■エラーページ↓↓
■見本ページ↓↓
該当のソースコード
ソースコード： ■■■HTML■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ <!DOCTYPE html> <html lang="ja"> <meta charset="UTF-8"> <head> <title>corporate-site</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" width="111px" height="48px"></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> <p class="mainvisual-text">街を作る。未来を作る。 </header> </body> </html> ■■■CSS■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ @charset "UTF-8"; .html { font: 100%; } .mainvisual { position: relative; width: 500px; } header { background-image: url(img/main.png); background-repeat: no-repeat; background-position: center; height: 700px; } .sec-navi { margin-right: 0px; } a { color: gray; } a:hover { opacity: 0.5; } .header-list { display: inline-block; list-style: none; vertical-align: middle; float: right; margin-right: 55px; margin-top: 55px; justify-content: space-between; } .header-list a { text-decoration: none; } .logo { float: left; margin-top: 30px; } .mainvisual-text { text-align: center; display: inline-block; }
試したこと
＞①タイトルの中央に持ってくる。
display: inline-block;を試しましたが、文字は少し移動したものの中央には行きませんでした。
＞②重要なロゴ画像の画質が荒くなってしまっている。
<h1 id="header"><a href="#"><img class="logo" src="img/header_logo.png" alt="logo" __width="111px" height="48px"__></a></h1> 斜体の部分「width="111px" height="48px"」を加えてから、画質が荒くなりました。 別の方法でサイズ指定した方が良いのでしょうか？＞③リストを一番右に寄せる。余白スペースをなくすには？
すいません、これは考えても分かりませんでした。
補足情報（FW/ツールのバージョンなど）
■使用ツール
・Terapad
えっ？お金ですか？
ただの勉強ですよ。まだ勉強させていただいてる身です。
「コーポレートサイトを作りたい」ですし。質問内容読んで仕事ではないと思うほうが難しいのです。内容調整してください。
仕事ではなく模写なら相手方に迷惑がかかるのでリンク外してください。
広告や宣伝なら非推奨。そのつもりがあろうとなかろうとこれだけ固有名詞でてリンクもあれば普通は宣伝だと感じます
最初から「模写」と書いてあったし、個人的な感想としては、これを仕事とか広告と見るのは無理があるなあ。
エアビー模写とかisara模写とかで広告という指摘を受けたものをほとんど見たことがない、という先例からして、コミュニティとして模写元を表示することは受け入れられていると思います。
むしろ、「広告に当たるので模写元は提示できません」とか言われた方が、回答しにくいです。
異論はあると思いますが、当方の考え方は以上の通りですので、この低評価は邪魔だな、と感じています。
表現が不適切で語弊を招き、誠に申し訳ありません。
「コーポレートサイト模写」に変更しました。
該当HPのリンクと私のサーバー上にあげた模写サイトのURLも削除しました。
サーバーへのアップも中止しました。
エラーページと見本ページとして2枚画像を上げていますが、
teratailのみで閲覧に限定されている場合は問題はないでしょうか。
この度は、未熟ではありますがご指摘の通り修正させて頂きました。
m.ts10806様
＞仕事ではなく模写なら相手方に迷惑がかかるのでリンク外してください。
模写サイトを提供してるサイト主がこちらポートフォリオに使ってもOKと
許可を出しているのですが、その場合でもリンクは外した方がよいですか？
Teratailで回答してくださる方もサイトリンクがあった方が、
回答しやすいと思ったためです。以上です。
通常の注意を払って見れば、非実在会社だというのは容易に分かると思うのだけど、m.ts10806さんはたくさんの質問をご覧になっているので、タイトルにミスリードされてつい流し読みをされてしまったのだと思いますよ。
修正されたことで、タイトルから模写案件だということがわかるので、リンクを提示してもかまわないと個人的には思います。
というか、なんか、私、スルーされてます？ 回答も無視されているようですし……
気に障ること書いたかな？
Lhankor_Mhy様
＞修正されたことで、タイトルから模写案件だということがわかるので、リンクを提示してもかまわないと個人的には思います。
ご回答ありがとうございます。
今後も模写と分かるように表記し、リンクの提示はするようにします。
＞というか、なんか、私、スルーされてます？ 回答も無視されているようですし……
気に障ること書いたかな？
スルーしておりません。私が打った内容にm.ts10806様が返答されて、
そのご返答内容を見てから返信するつもりでした。そう書けばよかったですね。
長年のご経験から、模写サイトの表示と広告の指摘へのご見解を教えて頂き、
大変参考になりました。
そうでしたか、安心しました。
③についての回答は、この解釈でいいのか、わかりません。違うようでしたら、お互いに上手くコミュニケーションしていきましょう。
はい、よろしくお願いします。
> この低評価は邪魔だな、と感じています。
タイトル変更されたから低評価消しましたが、この質問者の他の質問には低評価してませんよ。
この質問に低評価したのはタイトルにどこぞの会社名らしきものが入っていて尚且つリンクも貼ってあったからです。
> 模写サイトを提供してるサイト主
模写用のサイトだとは知りませんでしたが、基本的に外部リンクを踏む気は無いので今回の質問は広告のように感じました。
質問文に補足情報として模写用のサイトだと言う事も明記しておくと良いと思います。
今回の質問も含め、以後模写用のサイトと分かるよう明記させて頂きます。ありがとうございます。
> 練習のためコーポレートサイトの模写をしています。
質問本文にこう書いてあるので実在の会社だと思いました。Lhankor_Mhyさんのおっしゃる「通常の注意を払って見れば、非実在会社だというのは容易に分かる」ことはありませんでした。
> 模写サイトを提供してるサイト主がこちらポートフォリオに使ってもOKと許可を出している
コメント欄を見て初めて知りました。質問に追記するべきではないでしょうか？
色々フォローありがとうございます。私ももう少し質問注視すべきでした。
>サイト主がこちらポートフォリオに使ってもOKと
そもそも「ポートフォリオ」って作品集なので、模写をポートフォリオとして出すってどうなの？って思います。架空かもしれませんが検索してすぐ出てきますしね（提供者が言ってるなら提供者の姿勢を指摘しています）。
私が応募先の企業の担当者ならまず落とします。
回答1件
0
ベストアンサー
こんにちは。
回答の前に前提としてまず、2点指摘させていただきます。
- リセットCSSを使ってください。見本では使っています。
- 開発者ツールの使い方を覚えてください。基本です。
2021年、モダンブラウザに適したCSSリセットのまとめ | コリス
ブラウザー開発者ツールとは？ - ウェブ開発を学ぶ | MDN
①タイトルの中央に持ってくる。
色々な方法がありますが、見本では絶対配置を使っているようです。
CSSはこうなっています。（セレクタは適宜変更してください）
css
1.header-main__text { 2 position: absolute; 3 top: 50%; 4 left: 50%; 5 transform: translate(-50%); 6 width: 100%; 7 text-align: center; 8 font-size: 48px; 9} 10.header-wrap { 11 background-image: url(../img/main.png); 12 background-repeat: no-repeat; 13 background-size: cover; 14 background-position: center; 15 height: 80vh; 16 position: relative; 17}
position: absolute;を中央寄せする方法 | コトダマウェブ
【css】要素をposition:absoluteで中央に配置する最新の方法(上下左右、上下、左右) | WEBクリエイターの部屋
②重要なロゴ画像の画質が荒くなってしまっている。
ロゴ画像の表示サイズが異なります。
見本では 13960 ですが、エラーページでは 15567 です。
__③リストを一番右に寄せる。余白スペースをなくすには？ __
スクリーンショットを見る限り、「リストを一番右に寄せない。余白スペースをつけるには？」の間違いだと思いますので、そのように回答します。
ヘッダの最大幅の設定の違いです。
見本ではこうなっています。（セレクタは適宜変更してください）
css
1.header-container { 2 max-width: 1100px; 3 margin: 0 auto; 4}
投稿2021/03/06 02:10
総合スコア36928
お世話になります。
①のリセットCSSは下記にて解決しました。
現役プログラマーが使用している、
下記の「HTML5 Doctor Reset CSS」を使用したらうまくいきました。
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
vertical-align:baseline;
background:transparent;
}
②見本の139*60で解決しました。
見本の139*60を検証から探したのですが、
どちらに書いてありましたか？
③教えてもらった通り試しました。
ただ私も改めて考えた時、
③の必要性があったのか疑問になったため、
こちらは一旦、保留にします。
これで、次の「お知らせ」のセクションに進めます。
ご協力頂き、誠にありがとうございます。
ご解決されて何よりです。
>見本の139*60を検証から探したのですが、
どちらに書いてありましたか？
これは「どのCSSで」という意味ですか？
.header-logo {
height: 60px;
}
＞ご解決されて何よりです。
大変助かりました、ありがとうございます。
｛ロゴのheight: 60px;｝探せました。ありがとうございます。
あなたの回答
tips
プレビュー
