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

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

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

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

CSS

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

解決済

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

iceicebaby
iceicebaby

総合スコア10

HTML

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

CSS

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

2回答

0リアクション

0クリップ

252閲覧

投稿2022/09/15 10:03

前提

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

リンク内容

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

実現したいこと

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

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

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

html

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>株式会社XXXX</title> <meta name="description" content=""> <link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/reset.css"> </head> <body> <div class="header w_inner"> <div class="logo"> <img src="img/l5ogo.svg" alt="株式会社XXXX"> <h1>XXXXX</h1> </div> <nav> <ul> <li><a href="">トップ</a></li> <li><a href="">トピック</a></li> <li><a href="">事業内容</a></li> <li><a href="">事業紹介</a></li> <li><a href="">アクセス</a></li> <li><a href="">あ問合せ</a></li> </ul> </nav> </div> <div class="container w_inner"> <div class="header_img"> <img src="img/header.jpg" alt=""> </div> <div class="container_service"> <h2>事業内容</h2> <div class="service_block"> <div class="service"> <img src="img/service_1.jpg" alt="サービス1"> <div class="ttl">Web制作</div> <div class="explain">ここにテキストが入ります。ここにテキストが入ります。</div> <a href="">続きはこちら</a> </div> <div class="service"> <img src="img/service_2.jpg" alt="サービス2"> <div class="ttl">グラフィックデザイン</div> <div class="explain">ここにテキストが入ります。ここにテキストが入ります。</div> <a href="">続きはこちら</a> </div> <div class="service"> <img src="img/service_3.jpg" alt="サービス3"> <div class="ttl">印刷物制作</div> <div class="explain">ここにテキストが入ります。ここにテキストが入ります。</div> <a href="">続きはこちら</a> </div> </div> </div> </div> <footer class="footer"> <div class="pp_link w_inner"> <a href="">個人情報保護方針</a> </div> <div class="copy"> &copy;2022 XXXX </div> </footer> <body> </html>

style.css

@charaset "UTF-8"; body{ font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo',sans-serif; font-size: 15px; border-top: 10px solid #79a1b1 !important; } a { text-decoration: none; color: #333; } .logo { text-align: center; margin-top: 40px; margin-botton: 30px; } .logo img { display: inline-block; margin-bottom: 5px; } .w_inner { width: 1200px; margin: 0 auto; } .header ul { display: flex; margin-bottom: 30px; } .header ul li{ width: 200px; text-align: center; border-right: 1px solid #ddd; } .header ul li:first-child { border-left: 1px solid #ddd; } .header ul li a{ display: block; } .header_img { text-align: center; } .header_img img { display: inline-block; } container_service h2 { text-align: center; font-weight: bold; font-size: 24px; margin-bottom: 20px; } .container_service .service img { margin-bottom: 20px; } .container_service .service .ttl { font-weight: bold; font-size: 18px; margin-bottom: 15px; } .container_service .service .explain { margin-bottom: 20px; } .container_service .service a { background: #79a1b1; color: #fff; padding: 15px 20px 12px; } .footer { margin-top: 40px; } .pp_link { text_align: right; margin-bottom: 7px; } .copy { text-align: center; background: :#79a1b1 color: #fff; font-size: 12px; padding: 7px 0 3px; }

reset.css

@charaset "UTF-8"; body{ font-family: 'Hiragino Kaku Gothic Pro', 'Meiryo',sans-serif; font-size: 15px; } hr { display: block; height: 1ps; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; } input, select { vertical-align: middle; } li { list-style: none; } img { display: block; } .logo img { display: inline-block; margin-bottom: 5px; } .w_inner { width: 1200px; margin: 0 auto; } .header ul { display: flex; margin-bottom: 30px; } .header ul li { width: 200px; text-align: center; border-right: 1px solid #ddd; } .header ul li:first-child { border-right: 1px solid #ddd; } .header ul li a { display: block; } .header_img { text-align: center; margin-bottom: 50px; } .header_img img { display: inline-block; } .container_service .service_block { display: flex; justify-content: space-between; } .container_service .service { width: 380px; text-align: center; bg1 } .container_service h2 { text-align: center; font-weight: bold; font-size: 24px; margin-bottom: 20px; } .container_service .service img { margin-bottom: 20px; } .container_service .service .ttl { font-weight: bold; font-size: 18px; main-bottom: 15px; } .container_service .service .explain { margin-bottom: 25px; } .container_service .service .a { background: #79a1b1; color: #fff; padding: 15px 20px 12px; }

試したこと

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

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

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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

HTML

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

CSS

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