質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

679閲覧

html, cssで作成したHomepageで、Footerに色がつかない、文字がrightにならない

iceicebaby

総合スコア10

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2022/09/15 10:03

前提

皆さんこんにちは、上記の件で質問させてください。
以下のリンクを参考にポートフォリオ用にホームページを作成したのですが、
以下のような問題があります。
・footerの色がでない
・個人情報保護方針が右側に行かない

リンク内容

どこが悪いのか、分かる方教えて下さい。

実現したいこと

ここに実現したいことを箇条書きで書いてください。

  • ▲▲機能を動作するようにする

発生している問題・エラーメッセージ

html

1<!DOCTYPE html> 2<html lang="ja"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <title>株式会社XXXX</title> 9 <meta name="description" content=""> 10 <link rel="stylesheet" href="css/style.css"> 11 <link rel="stylesheet" href="css/reset.css"> 12 </head> 13 14 <body> 15 <div class="header w_inner"> 16 <div class="logo"> 17 <img src="img/l5ogo.svg" alt="株式会社XXXX"> 18 <h1>XXXXX</h1> 19 </div> 20 <nav> 21 <ul> 22 <li><a href="">トップ</a></li> 23 <li><a href="">トピック</a></li> 24 <li><a href="">事業内容</a></li> 25 <li><a href="">事業紹介</a></li> 26 <li><a href="">アクセス</a></li> 27 <li><a href="">あ問合せ</a></li> 28 </ul> 29 </nav> 30 </div> 31 <div class="container w_inner"> 32 <div class="header_img"> 33 <img src="img/header.jpg" alt=""> 34 </div> 35 <div class="container_service"> 36 <h2>事業内容</h2> 37 <div class="service_block"> 38 <div class="service"> 39 <img src="img/service_1.jpg" alt="サービス1"> 40 <div class="ttl">Web制作</div> 41 <div class="explain">ここにテキストが入ります。ここにテキストが入ります。</div> 42 <a href="">続きはこちら</a> 43 </div> 44 <div class="service"> 45 <img src="img/service_2.jpg" alt="サービス2"> 46 <div class="ttl">グラフィックデザイン</div> 47 <div class="explain">ここにテキストが入ります。ここにテキストが入ります。</div> 48 <a href="">続きはこちら</a> 49 </div> 50 <div class="service"> 51 <img src="img/service_3.jpg" alt="サービス3"> 52 <div class="ttl">印刷物制作</div> 53 <div class="explain">ここにテキストが入ります。ここにテキストが入ります。</div> 54 <a href="">続きはこちら</a> 55 </div> 56 </div> 57 </div> 58 </div> 59 <footer class="footer"> 60 <div class="pp_link w_inner"> 61 <a href="">個人情報保護方針</a> 62 </div> 63 <div class="copy"> 64 &copy;2022 XXXX 65 </div> 66 </footer> 67 <body> 68</html>

style.css

1@charaset "UTF-8"; 2 3body{ 4 font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo',sans-serif; 5 font-size: 15px; 6 border-top: 10px solid #79a1b1 !important; 7} 8a { 9 text-decoration: none; 10 color: #333; 11} 12.logo { 13 text-align: center; 14 margin-top: 40px; 15 margin-botton: 30px; 16} 17.logo img { 18 display: inline-block; 19 margin-bottom: 5px; 20} 21.w_inner { 22 width: 1200px; 23 margin: 0 auto; 24} 25.header ul { 26 display: flex; 27 margin-bottom: 30px; 28} 29.header ul li{ 30 width: 200px; 31 text-align: center; 32 border-right: 1px solid #ddd; 33} 34.header ul li:first-child { 35 border-left: 1px solid #ddd; 36} 37.header ul li a{ 38 display: block; 39} 40.header_img { 41 text-align: center; 42} 43.header_img img { 44 display: inline-block; 45} 46 47container_service h2 { 48 text-align: center; 49 font-weight: bold; 50 font-size: 24px; 51 margin-bottom: 20px; 52} 53 54.container_service .service img { 55 margin-bottom: 20px; 56} 57 58.container_service .service .ttl { 59 font-weight: bold; 60 font-size: 18px; 61 margin-bottom: 15px; 62} 63 64.container_service .service .explain { 65 margin-bottom: 20px; 66} 67 68 69 70 71 72.container_service .service a { 73 background: #79a1b1; 74 color: #fff; 75 padding: 15px 20px 12px; 76} 77.footer { 78 margin-top: 40px; 79} 80.pp_link { 81 text_align: right; 82 margin-bottom: 7px; 83} 84.copy { 85 text-align: center; 86 background: :#79a1b1 87 color: #fff; 88 font-size: 12px; 89 padding: 7px 0 3px; 90}

reset.css

1@charaset "UTF-8"; 2 3body{ 4 font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo',sans-serif; 5 font-size: 15px; 6} 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22hr { 23 display: block; 24 height: 1ps; 25 border: 0; 26 border-top: 1px solid #cccccc; 27 margin: 1em 0; 28 padding: 0; 29} 30input, 31select { 32 vertical-align: middle; 33} 34li { 35 list-style: none; 36} 37img { 38 display: block; 39} 40 41.logo img { 42 display: inline-block; 43 margin-bottom: 5px; 44} 45 46 47.w_inner { 48 width: 1200px; 49 margin: 0 auto; 50} 51 52 53.header ul { 54 display: flex; 55 margin-bottom: 30px; 56} 57 58.header ul li { 59 width: 200px; 60 text-align: center; 61 border-right: 1px solid #ddd; 62} 63 64.header ul li:first-child { 65 border-right: 1px solid #ddd; 66} 67 68.header ul li a { 69 display: block; 70} 71 72.header_img { 73 text-align: center; 74 margin-bottom: 50px; 75} 76.header_img img { 77 display: inline-block; 78} 79.container_service .service_block { 80 display: flex; 81 justify-content: space-between; 82} 83.container_service .service { 84 width: 380px; 85 text-align: center; 86 bg1 87} 88.container_service h2 { 89 text-align: center; 90 font-weight: bold; 91 font-size: 24px; 92 margin-bottom: 20px; 93} 94.container_service .service img { 95 margin-bottom: 20px; 96} 97.container_service .service .ttl { 98 font-weight: bold; 99 font-size: 18px; 100 main-bottom: 15px; 101} 102 103.container_service .service .explain { 104 margin-bottom: 25px; 105} 106 107.container_service .service .a { 108 background: #79a1b1; 109 color: #fff; 110 padding: 15px 20px 12px; 111} 112

試したこと

ここに問題に対して試したことを記載してください。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

css

1 background: :#79a1b1

: は1つでいいです。行末に ; が必要です。

投稿2022/09/15 12:48

int32_t

総合スコア20672

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

iceicebaby

2022/09/17 03:16

ありがとうございます。 おかげさまでできました。
guest

0

自己解決

style.cssのL80からのtext_alignをtext-alignに直したら
個人情報保護方針が右側に行ってくれました。
.pp_link {
text-align: right;

あとはFooterのバックグラウンドに色がつかない件です。
宜しくお願い致します。

投稿2022/09/15 10:16

iceicebaby

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

y_programming

2022/09/18 04:29

「・footerの色がでない」にかんしてなのですが、 「style.css」のなかで、 .footer { margin-top: 40px; } となっていたため、Footerのバックグラウンドに色がつかない、という状態は自然であるとかんがえます。 色をつけるとなったバヤイ、 .footer { margin-top: 40px; background: #79a1b1; } のように色を設定してあげるといいのかなとかんがえます。 質問者さまのやりたいことと違ったバヤイ、教えてくださいましー! あと、「@charaset "UTF-8";」のところは「@charset "UTF-8";」がただしいかと思います。 characterを略す時、charaじゃなくてcharになるっぽいですね ぼくはVSCodeで検証してるので、ミスってるとこに縮れ毛みたいな線がつくので気付くのがカンタンでした、 VSCode、オスススメです。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問