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

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

新規登録して質問してみよう
ただいま回答率
85.35%
レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

Dreamweaver

Dreamweaverは、アドビシステムズ(株)が開発したWebページ作成ソフトです。 HTMLやXHTMLだけでなく、PHPやASPなどのサイバーサイドスクリプトの編集も可能で、 OracleやMicrosoftSQLServerなどの、データベースとの連携機能もあります。 Webデザイナーなどの専門業界で圧倒的なシェアを誇っているソフトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

Q&A

解決済

1回答

1859閲覧

ボタンのレスポンシブを書き込んでいたら、今まで効いていたレスポンシブも効かなくなりました。

nozima_hiromi

総合スコア1

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

文字コード

文字コードとは、文字や記号をコンピュータ上で使用するために用いられるバイト表現を指します。

Dreamweaver

Dreamweaverは、アドビシステムズ(株)が開発したWebページ作成ソフトです。 HTMLやXHTMLだけでなく、PHPやASPなどのサイバーサイドスクリプトの編集も可能で、 OracleやMicrosoftSQLServerなどの、データベースとの連携機能もあります。 Webデザイナーなどの専門業界で圧倒的なシェアを誇っているソフトです。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

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

0グッド

1クリップ

投稿2021/04/07 12:58

ボタンをレスポンシブで均等に並べたいのですか、@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を使ってようやくエラー警告が出たのですが。
合わせて思い当たることがあればご教授頂きたいです。
以下、コンソールの画像
イメージ説明

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

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

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

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

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

guest

回答1

0

ベストアンサー

css

1/* アイコンボタンimgのサイズ調整 */ 2.snsbtniti img{ 3 width: 50%; 4 padding-bottom: 10px; 5/* ←ここの括弧が全角になっている */ 6@media screen and (max-width:800px){ 7/*ロゴ画像*/ 8header #logo img { 9 width: 30%;/*画像の幅*/ 10 left: 35%;/*ロゴやメニューが入っているブロックに対して、左からの配置場所の指定。*/ 11} 12}

全角の閉じ括弧があるのでそれを半角に修正しましょう。

どうしたいのか分からないので、内容はみてません。

投稿2021/04/07 13:31

hatena19

総合スコア34075

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

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

nozima_hiromi

2021/04/07 21:55

指摘箇所を修正したら解決しました、ありがとうございます。 自分で調整してボタンを三つ均等に配置できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問