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

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

ただいまの
回答率

87.61%

HTML.CSSについて

解決済

回答 1

投稿 編集

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

score 5

右側に謎の隙間と、レスポンシブの色は適応されるのですが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の左側ですかね、?

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

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

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

  • m.ts10806

    2020/03/26 06:30 編集

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

    キャンセル

回答 1

checkベストアンサー

+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;を使ったほうが良いと思いますが、本件とは関係がないので余裕があれば調べてみてください。

投稿

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

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

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

関連した質問

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