Q&A
next @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@
というのはそのままcssに書かれているのでしょうか。
現在ウェブページを作成している途中です。
セレクター「.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の設定】 ここまで↑ -------------------- */
はいそうです。
作業途中の印として一時的に使っています。
cerfweb様、@のコメント文を削除したら正常に作動しました。
ご指摘ありがとうございます。
自己解決
