HTML.CSSについて

右側に謎の隙間と、レスポンシブの色は適応されるのですがlistsのところが適応されません。
何故でしょうか？
全くわかりません。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <link href="stylesheet.css"rel="stylesheet"type="text/css"><meta name=”viewport” content=”width=device-width,initial-scale=1″><title>Document</title></head><body><div class="clear"><div id="hoge"><div class="title"><h1>aiueo<br>kakikukeko</h1></div><div class="lists"><div class="list plofile"><a href="#">profile</a></div><div class="list skill"><a href="#">Skill</a></div><div class="list portfolio"><a href="#">Portfolio</a></div><div class="list otoiawase"><a href="#">Contact</a></div></div></div></div><div class="plofile-container"><div class="plofile-area area"><img class="plofile-img"src="img/unnamed.png"><h2>Profile</h2><p>プロフィール</p></div></div><script src="particles.js"></script><script src="setting.js"></script></body></html>ーーーーーここからCSSーーーーー

@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Lobster&display=swap');

*{
box-sizing: border-box;
}

body {
width: 100%;
margin: 0;
padding: 0;
font-family: 'Lobster', cursive;
}

#hoge {
margin: 0;
padding: 10px;
background-color: #181818;
background-size: cover;
z-index: 1;
position: relative;
text-align: center;
font-family: 'Lobster', cursive;
}
.clear{
float: none;
}

/* タブレット */
@media (max-width:1000px) {
h1 {
font-size: 50px;
color: blue;
position: absolute;
transform: translate(-50%, -50%);
letter-spacing: 10px;
}

a {
width: 50% ;
}

}

/* スマホ*/
@media (max-width:670px) {

.title h1 {
color: green;
font-size: 60px;
letter-spacing: 8px;
}

.lists a{
width: 100% ;
}

}

.title {
font-size: 70px;
color: #fff;
text-align: center;
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
letter-spacing: 5px;
}

.lists {
position: absolute;
top: 80%;
width:100%;
}

.list a{
color: red;
font-size: 30px;
width: 25%;
display:inline-block;
text-align: center;
float: left;

}

.plofile a{
color: aqua;
}

.skill a{
color: coral;
}

.portfolio a{
color: chartreuse
}
.otoiawase a{
color: red;
}

.plofile-container{
position: relative;
padding: 16px 0 24px;
background: black;
color: #fff;
text-align: center;
}

.area h2{
margin: 1px;
letter-spacing: 5px;
}
.area p{
font-size: 3px;
}

右側というか、listsの左側ですかね、？

どなたか回答お願いします。。。

m.ts10806

2020/03/25 21:31 編集

コードはマークダウンのcode機能を利用してご提示ください。また、タイトルはタグにある内容のみでは要件伝わりませんので起きている問題や実現したい機能の詳細など要件を記載してください

行動規範の内容に同意します

回答1件

ベストアンサー

レスポンシブに関する記述をCSSの末尾に移動すると、とりあえず動くようになると思います。

/* タブレット */
@media (max-width:1000px) {
  h1 {
    font-size: 50px;
    color: blue;
    position: absolute;
    transform: translate(-50%, -50%);
    letter-spacing: 10px;
  }

  .list a {
    width: 50%;
  }
}

/* スマホ*/
@media (max-width:670px) {
  .title h1 {
    color: green;
    font-size: 60px;
    letter-spacing: 8px;
  }

  .lists a {
    width: 100%;
  }
}

レスポンシブに関して、以下の2つの点の理解が必要です。

[1] レスポンシブの記述は後ろのほうに書くべき

CSSの原則として、(セレクタの詳細度が同じであれば) 後にある記述が前にある記述を上書きします。

a {
  width: 100%;
}
a {
  width: 25%; /* 上書き */
}

↓同じことが以下の記述でも生じます。

@media (max-width:670px) {
  a {
    width: 100%;
  }
}
a {
  width: 25%; /* 上書き */
}

↓スマホサイズでwidth: 100%;を指定したいなら、以下のように記述すべきです。

a {
  width: 25%;
}
@media (max-width:670px) {
  a {
    width: 100%; /* 上書き */
  }
}

[2] @media内の記述は、セレクタの詳細度が低いと上書きされない

.lists a {
  width: 25%;
}
a {
  width: 50%; /* セレクタの詳細度が低いので上書きされない */
}

↓同じことが以下の記述でも生じます。

.lists a {
  width: 25%;
}
@media (max-width:1000px) {
  a {
    width: 50%; /* セレクタの詳細度が低いので上書きされない */
  }
}

横並びを表現するにはfloatではなくdisplay: flex;を使ったほうが良いと思いますが、本件とは関係がないので余裕があれば調べてみてください。

投稿2020/03/25 21:56

new1ro

総合スコア4528

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.35%

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

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

質問する

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

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

HTML.CSSについて

[1] レスポンシブの記述は後ろのほうに書くべき

[2] @media内の記述は、セレクタの詳細度が低いと上書きされない

関連した質問