teratail
回答率
85.35%
teratail header banner
teratail header banner
質問するログイン新規登録

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

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

新規登録して質問してみよう
ただいま回答率
85.35%
トップCSS3に関する質問
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

Q&A

解決済

1回答

564閲覧

セレクターが認識されない理由が分かりません。

taka_oct092018
taka_oct092018

総合スコア136

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

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

0グッド

1クリップ

投稿2020/12/09 12:20

0

1

現在ウェブページを作成している途中です。
セレクター「.search-01」のプロパティが全く適用されません。
原因が分からなくて困っています。
指摘して頂けないでしょうか。よろしくお願い致します。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>search-window | search-window</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimun-scale=1.0">
<link rel=stylesheet href=css/style.css>
</head>

<body class="search-window-01"><!-- 【.search-window-01】 ここから↓ -->

<div class="block-01 width-01"><!-- 【コンテンツ・ブロック .block-01】 ここから↓ -->
  <div class="wrap-01"><!-- /.wrap-01 ここから↓ -->
    <div class="ctr-01"><!-- /.ctr-01 ここから↓ -->
      <h1 class="h1-01">レシピ検索</h1>
      <form action="#" method="post">
        <fieldset class="fieldset-01"><!-- /.fieldset-01 ここから↓ -->
          <legend>経験度を選ぶ（複数可）</legend>
          <label><input type="checkbox" name="exprience" value="初めて">初めて</label>
          <label><input type="checkbox" name="exprience" value="初級">初級</label>
          <label><input type="checkbox" name="exprience" value="中級">中級</label>
          <label><input type="checkbox" name="exprience" value="中級">上級</label>
        </fieldset><!-- /.fieldset-01 ここまで↑ -->
      </form>
    </div><!-- /.ctr-01 ここまで↑ -->
    <!-- <div class="divider-vertical-01"></div> -->
    <div class="ctr-02"><!-- /.ctr-02 ここから↓ -->
      <form action="#" method="post">
        <fieldset class="fieldset-02"><!-- /.fieldset-02 ここから↓ -->
          <legend>調理時間（いずれか１つ）</legend>
          <label><input type="checkbox" name="time" value="30分以内">30分以内</label>
          <label><input type="checkbox" name="time" value="１時間以内">１時間以内</label>
          <label><input type="checkbox" name="time" value="１時間以上">１時間以上</label>
        </fieldset><!-- /.fieldset-02 ここまで↑ -->
      </form>
    </div><!-- /.ctr-02 ここまで↑ -->
  </div><!-- /.wrap-01 ここまで↑ -->
  <div class="divider-horizontal-01"></div>
</div><!-- 【コンテンツ・ブロック .block-01】 ここまで↑ -->

<div class="block-02 width-01"><!-- 【コンテンツ・ブロック .block-02】 ここから↓ -->
  <div class="ctr-03"><!-- /.ctr-03 ここから↓ -->
    <form action="#" method="post">
      <fieldset class="fieldset-03"><!-- /.fieldset-03 ここから↓ -->
        <legend>調理のタイプ（複数可）</legend>
        <div class="wrap-01"><!-- /.wrap-01 ここから↓ -->
          <label><input type="checkbox" name="type" value="定番チョコ">定番チョコ</label>
          <label><input type="checkbox" name="type" value="焼き菓子">焼き菓子</label>
          <label><input type="checkbox" name="type" value="ケーキ">ケーキ</label>
          <label><input type="checkbox" name="type" value="アレンジ">アレンジ</label>
        </div><!-- /.wrap-01 ここまで↑ -->
        <div class="wrap-02"><!-- /.wrap-02 ここから↓ -->
          <label><input type="checkbox" name="type" value="冷んやり">冷んやり</label>
          <label><input type="checkbox" name="type" value="デコ">デコ</label>
          <label><input type="checkbox" name="type" value="その他">その他</label>
        </div><!-- /.wrap-02 ここまで↑ -->
      </fieldset><!-- /.fieldset-03 ここまで↑ -->
    </form>
  </div><!-- /.ctr-03 ここまで↑ -->
  <div class="divider-horizontal-01"></div>
</div><!-- 【コンテンツ・ブロック .block-02】 ここまで↑ -->

<div class="block-03 width-01"><!-- 【コンテンツ・ブロック .block-03】 ここから↓ -->
  <div class="ctr-04"><!-- /.ctr-04 ここから↓ -->
    <form action="#" method="post">
      <fieldset class="fieldset-04"><!-- /.fieldset-04 ここから↓ -->
        <legend>使用するチョコレート（複数可）</legend>
        <div class="wrap-03"><!-- /.wrap-03 ここから↓ -->
          <label><input type="checkbox" name="type" value="ミルクチョコレート">ミルクチョコレート</label>
          <label><input type="checkbox" name="type" value="ブラックチョコレート">ブラックチョコレート</label>
          <label><input type="checkbox" name="type" value="ホワイトチョコレート">ホワイトチョコレート</label>
        </div><!-- /.wrap-03 ここまで↑ -->
        <div class="wrap-04"><!-- /.wrap-04 ここから↓ -->
          <label><input type="checkbox" name="type" value="ハイミルクチョコレート">ハイミルクチョコレート</label>
          <label><input type="checkbox" name="type" value="ストロベリーチョコレート">ストロベリーチョコレート</label>
          <label><input type="checkbox" name="type" value="抹茶チョコレート">抹茶チョコレート</label>
        </div><!-- /.wrap-04 ここまで↑ -->
      </fieldset><!-- /.fieldset-04 ここまで↑ -->
    </form>
  </div><!-- /.ctr-04 ここまで↑ -->
  <div class="ctr-05"><!-- /.ctr-05 ここから↓ -->
    <form action="#" method="post">
      <fieldset class="fieldset-05"><!-- /.fieldset-04 ここから↓ -->
        <legend>その他材料（複数可）</legend>
        <div class="wrap-05"><!-- /.wrap-05 ここから↓ -->
          <label><input type="checkbox" name="type" value="ピュアココア">ピュアココア</label>
          <label><input type="checkbox" name="type" value="生クリーム">生クリーム</label>
          <label><input type="checkbox" name="type" value="牛乳">牛乳</label>
        </div><!-- /.wrap-05 ここまで↑ -->
        <div class="wrap-06"><!-- /.wrap-06 ここから↓ -->
          <label><input type="checkbox" name="type" value="たまご">たまご</label>
          <label><input type="checkbox" name="type" value="薄力粉・小麦粉">薄力粉・小麦粉</label>
          <label><input type="checkbox" name="type" value="バター（食塩不使用）">バター（食塩不使用）</label>
        </div><!-- /.wrap-06 ここまで↑ -->
      </fieldset><!-- /.fieldset-05 ここまで↑ -->
    </form>
  </div><!-- /.ctr-05 ここまで↑ -->
  <div class="divider-horizontal-01"></div>
</div><!-- 【コンテンツ・ブロック .block-03】 ここまで↑ -->

<div class="block-04 width-01"><!-- 【コンテンツ・ブロック .block-04】 ここから↓ -->
  <section class="ctr-06"><!-- /.ctr-06 ここから↓ -->
    <h2 class="h2-01">フリーキーワード</h2>
    <form>
      <input class="search-01" type="text" name="keyword" value="" placeholder="検索ワードを入力して下さい">
      <input class="send-01" type="submit" value="送信">
    </form>
  </section><!-- /.ctr-06 ここまで↑ -->
</div><!-- 【コンテンツ・ブロック .block-04】 ここまで↑ -->
</body><!-- 【.search-window-01】 ここまで↑-->
</html>

@charset "utf-8";

/* -------------------- 【HTML5 Reset Stylesheet ver1.6.1】 ここから↓ -------------------- */
@@@@@@ 字数制限により省略
/* -------------------- 【HTML5 Reset Stylesheet ver1.6.1】 ここまで↑ -------------------- */

/* 【モバイルファーストによるCSSファイルの設計】 */
/* -------------------- 【ウェブサイト全体の共通箇所】 ここから↓ -------------------- */

/* CSS変数・コンテンツ幅の設定 ここから↓ */
body {
  --width-max    : 100%;
  --width-pc-01  : 80rem;
  --width-pc-02  : 70rem;
  --width-sp-01  : 60rem;
  --width-sp-02  : 58rem;
  --width-tv-01  : 110rem;
  --width-tv-02  : rem;
}

.width-max {
  box-sizing : border-box;
  padding    : 1rem;
  width      : var(--width-max);
}
/* CSS変数・コンテンツ幅の設定 ここまで↑ */

/* フォントの種類の設定。 */
body {
  font-family : 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}

/*
  【フォントサイズ】 ここから↓ 
  1(px)  : .1(rem)  : .093(vw)
  1(rem) : .926(vw) : 10(px)
  1(vw)  : 10.8(px) : 1.08(rem)
  1rem   : 10px     : .926vw
*/
:root {
  font-size : 62.5%;
}

/* スマートフォン用フォントサイズの設定 375px以上 */
body {
  font-size : 1.4rem;
}
/* 【フォントサイズ】 ここまで↑ */


/* 【バックグラウンドカラー】 ここから↓ */
body {
  background-color:var(--pnk);
}

[class|="block"] {
  background-color:var(--wht);
}
/* 【バックグラウンドカラー】 ここまで↑ */  



/* テキストの自動拡大を無効化 */
body {
  -webkit-text-size-adjust : none;
  text-size-adjust         : none;
}

/* ブラウザが挿入する余白を削除する */
body {
  margin : 0;
}

/* リストマークを削除する */
ul {
  list-style : none;
}

p {
  line-height : 1.2;
  padding     : .5em 0;
}

/* フレキシブルボックスレイアウト */
.flex {
  display : flex;
}

/* クリアフィックス */
.clearfix::after {
  clear     : both;
  content   : "";
  display   : block;
  font-size : 0;
}

/* 画像 ここから↓ */
[class|="figure"] {
  margin : 0;
}

[class|="fig"],
[class|="ph"] {
  height : auto;
  width  : 100%;
}
/* 画像 ここまで↑ */

/* コンテンツ内部に余白を入れる */
 [class|="block"] {
  padding : 0;
}

/* コンテンツ大枠にボーダーボックスを適用する。 */
 [class|="block"] {
  box-sizing : border-box;
}
/* -------------------- 【ウェブサイト全体の共通箇所】 ここまで↑ -------------------- */



/* -------------------- 【スマートフォン向けの設定】 ここから↓ -------------------- */
/* -------------------- 【search-window_01.htmlの設定】 ここから↓ -------------------- */
/* スマートフォン版：コンテンツ内側の画面幅 */
.width-01 {
  margin-left  :1rem;
  margin-right :1rem;
  max-width    : var(--width-sp-02); /* --width-sp-02 : 58rem; */
}

/* スマートフォン用フォントサイズの設定 */
body {
  font-size : 1.4rem;
}



/* 【コンテンツ・ブロック .block-01 】 ここから↓ */
/* .ctr-03内の文字列を中央に配置する。 ここから↓ */
.ctr-03 {
  text-align:center
}

.fieldset-01 {
  border : none;
}

/* 水平線 */
.divider-horizontal-01 {
  background-color : var(--blk);
  box-sizing       : border-box;
  height           : .2rem;
  margin           : .5rem .5rem;
  width            : 99%;
/*  padding-top:.25em; */
/*  padding-bottom:.25em; */
}
/* 【コンテンツ・ブロック .block-01 】 ここまで↑ */


/* 【コンテンツ・ブロック .block-02 】 ここから↓ */
.ctr-01,
.ctr-02 {
  text-align:center
}
/* 【コンテンツ・ブロック .block-02 】 ここまで↑ */


/* 【コンテンツ・ブロック .block-03 】 ここから↓ */
/* 【コンテンツ・ブロック .block-03 】 ここまで↑ */


/* 【コンテンツ・ブロック .block-04 】 ここから↓ */

next @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
/* 入力欄とボタンを上下に並べて、それぞれを横方向中央に配置する。 */
.search-01 {
  display      : block;
  margin-left  : auto;
  margin-right : auto;
  width        : 30rem;
}

.send-01 {
  display      : block;
  margin-left  : auto;
  margin-right : auto;
}
/* 【コンテンツ・ブロック .block-04 】 ここまで↑ */
/* -------------------- 【search-window_01.htmlの設定】 ここまで↑ -------------------- */

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

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

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

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

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

cerfweb
cerfweb

2020/12/09 12:24

next @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ というのはそのままcssに書かれているのでしょうか。
taka_oct092018
taka_oct092018

2020/12/09 12:29

はいそうです。 作業途中の印として一時的に使っています。
taka_oct092018
taka_oct092018

2020/12/09 12:52

cerfweb様、@のコメント文を削除したら正常に作動しました。 ご指摘ありがとうございます。
guest

回答1件

0

自己解決

CSSの@@@@@@を削除する。

投稿2020/12/09 12:53

taka_oct092018
taka_oct092018

総合スコア136

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問

トップCSS3に関する質問

セレクターが認識されない理由が分かりません。