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

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

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

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

Q&A

解決済

1回答

1033閲覧

HTML.CSSについて

nariken

総合スコア5

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

CSS

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

0グッド

0クリップ

投稿2020/03/25 18:51

編集2020/03/25 18:52

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

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

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

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

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

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

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

m.ts10806

2020/03/25 21:31 編集

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

回答1

0

ベストアンサー

レスポンシブに関する記述を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.50%

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

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

質問する

関連した質問