ボタンをレスポンシブで均等に並べたいのですか、@mediaを入れるとエラーが起きます。
テンプレートを流用しながら作成しています。
テンプレートに記述がなかったSNSボタンを作成しており、そのレスポンシブを実装中に以下のエラーメッセージが発生しました。先に記述していたレスポンシブも効かなくなっています。
該当のソースコード
.flowbtn16{ display: flex; border-radius:20px; display:inline-block; width:65px; height:60px; font-size:30px; transition:.5s; text-decoration:none; background-color:#9ecbca; color:#fff; } .flowbtn16:hover{ text-decoration:none; } /*Twitterマウスホバー時 */ .flowbtn16.fl_tw2:hover{ background:#55acee; } /*pixsvマウスホバー時 */ .flowbtn16.fl_fd2:hover{ background:#0096fa; } /*noteマウスホバー時 */ .flowbtn16.fl_ma2:hover{ background:#3ec8b3; } /*ボタン内テキスト調整 */ .flowbtn16 div{ font-size:11px; letter-spacing:0; font-weight:bold; position:relative; bottom:20px; } /* ulタグの内側余白を0にする */ ul.snsbtniti{ padding:0!important; width:400px; margin:0 auto; } /*アイコンボタンの位置調整 */ .snsbtniti{ display:flex; flex-flow:row wrap; } /* アイコンボタン同士の余白調整 */ .snsbtniti li{ flex:1 0 24%; text-align:center!important; padding:30px 2px 50px; } /* アイコンボタンimgのサイズ調整 */ .snsbtniti img{ width: 50%; padding-bottom: 10px; } @media screen and (max-width:800px){ /*ロゴ画像*/ header #logo img { width: 30%;/*画像の幅*/ left: 35%;/*ロゴやメニューが入っているブロックに対して、左からの配置場所の指定。*/ } } /*画面幅480px以下の設定 ----------------------------------------------------------------------------*/ @media screen and (max-width:480px){ /*ヘッダー(一番上の、ロゴやメニューが入っているブロック) ---------------------------------------------------------------------------*/ /*ロゴ画像*/ header #logo img { width: 50%; /*画像の幅*/ left: 25%; /*ロゴやメニューが入っているブロックに対して、左からの配置場所の指定。*/ } /*コンテナー(headerとfooterをのぞくブロックを囲むブロック) ---------------------------------------------------------------------------*/ #container { font-size: 12px; font-size: 2.93vw; } /*コンテンツ(上のcontainerの中のブロック) ---------------------------------------------------------------------------*/ /*コンテンツ内にあるh2(見出し)タグの指定*/ #contents h2 { font-size: 16px; /*文字サイズ*/ } /*コンテンツ内にあるh3(見出し)タグの指定*/ #contents h3 { font-size: 14px; /*文字サイズ*/ } /*Serviceページ ---------------------------------------------------------------------------*/ /*h4見出しの設定*/ .list h4 { font-size: 16px; /*文字サイズ*/ } /*ul.disc,olタグ ---------------------------------------------------------------------------*/ ul.disc { padding: 0 0px 20px 35px; } ol { padding: 0 0px 20px 35px; } /*その他 ---------------------------------------------------------------------------*/ /*アイコンボタン同士の余白調整*/ .flowbtn16{ display: block; width: 50px; } ul.snsbtniti{ padding: 35px; width: 400px; margin: 0 auto; } .snsbtniti li{ flex: 0 5 25%; padding: 30px 8px 36px; } }
以下は該当箇所htmlです。
<section id="contact"> <h2>各種アカウント</h2> <div class="snsbtniti_innar"> <ul class="snsbtniti"> <li><a href="https://twitter.com/〇〇" class="flowbtn16 fl_tw2"><i class="fab fa-twitter"></i><div>Twitter</div></a></li> <li><a href="https://www.pixiv.net/users/38388153" class="flowbtn16 fl_fd2"><img src="images/arrow-pixiv.png" alt=""><div>pixiv</div></a></li> <li><a href="https://note.com/〇〇_55555" class="flowbtn16 fl_ma2"><img src="images/arrow-note.png" alt=""><div>note</div></a></li> </ul> </div> <p class="c">お仕事等のご連絡は以下までお願い致します。</p> <p class="c"><a href="mailto:〇〇gmail.com"><span style="cursor: hand; cursor:pointer; color:#374c55;">〇〇gmail.com</span></a></p> <!--<p class="c sns_coment">↓使用しているアカウントです↓</p>--> <p class="c"><img src="images/sample1.jpg" alt="" width="300"></p> </section>
全角空欄がないか探し、余計な半角空欄も消したのですが治りませんでした。
記載個所を入れるとエラーが起きることを確認しているので、この中の記述に問題があると思うのですが。どこがダメなのかわからないです。
初心者で申し訳ないですが、よろしくお願いいたします。
補足情報
基本的にサクラエディタを使って記述していますが、エラー洗い出しの際にDreamweaverを使っています。
ボタンのコードもネット上の見本コードをもとに作成しています。
また、開発者ツールではエラーコードが出てこず、ただCSSが効いていないことはわかりました。Dreamweaverを使ってようやくエラー警告が出たのですが。
合わせて思い当たることがあればご教授頂きたいです。
以下、コンソールの画像
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/04/07 21:55