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

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

ただいまの
回答率

90.38%

  • HTML

    12230questions

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

  • CSS

    8084questions

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

  • Atom (テキストエディタ)

    679questions

ATOMのCSSでfooterだけコード通りにならない

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 245

前提・実現したいこと

CSSでfooterをより見やすくしたい。

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

ドットインストールの動画で学習中なのですが、headerへのコードをコピぺしてfooterに変更したところ、headerには反映されていたのですが、footerには反映されていませんでした。自分では、メール、吹き出し、カメラのアイコンの左にある「・」を消して、アイコンを横並びにする。(c)Taro Yamadaの色を薄くして右寄せにするなどの変更を入力したつもりでした。

該当のソースコード

<footer>
    <ul>
      <li>
        <a href="mailto:taguti@gmail.com"target="_blank">
          <img src="img/mail.png" width="20" height="20" alt="メール送信">
        </a>
      </li>
      <li>
        <a href="https://dotinstall.com"target="_blank">
          <img src="img/blog.png" width="20" height="20" alt="ブログサイトへ">
        </a>
      </li>
      <li>
        <a href="https://dotinstall.com"target="_blank">
          <img src="img/photos.png" width="20" height="20" alt="写真サイトへ">
        </a>
      </li>
    </ul>
    <p>(c)Taro Yamada</p>
  </footer>
footer {
width: 400px;
margin: 0 auto 60px;
}

footer ul{
  margin:0;
  list-style-type: none;
  padding-left:0;
  float:left;
}

footer li{
  display:inline-block;
}

footer li > a:hover{
  opacity:0.6;
}

footer p{
  color:lightgray;
  font-size:14px;
  text-align:right;
}

試したこと

イメージ説明
イメージ説明
イメージ説明
イメージ説明

動画を見返して、動画のコードと違う部分を探しましたが見つからず、原因がわかりません。

画像のコードをコピペしたものを該当のソースコードの部分にあります。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

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

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • yoshinavi

    2019/01/13 00:53

    ほかの部分を戻すときに、手間は掛かりますが1ブロックずつ戻し、表示がおかしくなったブロックを確認してみてください。

    キャンセル

  • 0220JiatengGC

    2019/01/14 00:50

    分かりました。
    ありがとうございます。

    キャンセル

  • s8_chu

    2019/01/14 17:58 編集

    誤投稿。

    キャンセル

回答 1

0

問題は解決しましたでしょうか?解決法を見つけているのであれば自己解決のボタンを押してください.

headerのcssが提示されていないので比較はできませんが提示されたcssについては正常に動作しているように思います.
もし"(c)Taro Yamada"を完全に画面右側に寄せたいと考えているのであれば原因は

footer{
    width: 400px;
}


ではないでしょうか.これではfooter全体の幅が400pxで表示されその400pxの中で"(c)Taro Yamada"が右寄せになっています.
修正するならば上記のwidthを削除するか

footer{
    width: 100%;
}


にしてみてください.
左右の空白が気になるのならばbodyのmarginを削除してください.
要素のサイズがわかりにくい場合はbackground-colorでわかりやすい色を当てて確認してみるといいと思います.

ちなみにHTMLのエスケープ文字に&copy;で"©"が表示できます."(c)"でも問題はありませんが.

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

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

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

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 90.38%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

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

  • HTML

    12230questions

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

  • CSS

    8084questions

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

  • Atom (テキストエディタ)

    679questions