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

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

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

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

HTML

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

CSS

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

Q&A

解決済

1回答

908閲覧

Bracketsのプレビューでアイコンの外枠が円ではなく、楕円に表示されてしまいます。

yuki328

総合スコア6

Brackets

Bracketsは、オープンソースで開発されているHTML/CSS/JavaScriptのコードエディターです。

HTML

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

CSS

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

0グッド

0クリップ

投稿2020/02/11 15:35

前提・実現したいこと

Brackets上のプレビューで、SNSアイコンの外枠(円)の表示が楕円に表示されてしまう。真円に表示したいです。

発生している問題

エディタにはBracketsを使用しているのですが、Brackets上のプレビューで確認すると、下部の方に記してある、SNSアイコンの外枠(円)の表示が楕円に表示されてしまいます。画像を添付します。
イメージ説明

該当のソースコード

HTML

1<!DOCTUPE html> 2 <html lang="ja"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>サンプル</title> 7 <meta name="viewport" content="width=device. initial-scale=1.0"> 8 <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet"> 9 <link rel="stylesheet" href="style.css"> 10 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css"> 11</head> 12 13<body> 14 15 <footer> 16 <div class="container"> 17 <div class="footA"> 18 <h2>LOG</h2> 19 <p> 20 〒000-0000 東京都中央区<br> 21 <a href="#">http://</a> 22 </p> 23 24 <nav class="footD"> 25 <ul> 26 <li><a href="#"> 27 <span class="fab fa-twitter" title="Twitter"></span> 28 </a></li> 29 <li><a href="#"> 30 <span class="fab fa-facebook-f" title="Facebook"></span> 31 </a></li> 32 <li><a href="#"> 33 <span class="fab fa-google-plus-g" title="Google Plus"></span> 34 </a></li> 35 <li><a href="#"> 36 <span class="fab fa-instagram" title="Instagram"></span> 37 </a></li> 38 <li><a href="#"> 39 <span class="fab fa-youtube" title="Youtube"></span> 40 </a></li> 41 </ul> 42 </nav> 43 </div> 44 45 <nav class="footB"> 46 <div> 47 <h3>ABOUT</h3> 48 <ul> 49 <li><a href="#">設立</a></li> 50 <li><a href="#">所在地</a></li> 51 <li><a href="#">地図</a></li> 52 <li><a href="#">スタッフ</a></li> 53 </ul> 54 </div> 55 <div> 56 <h3>SUPPORT</h3> 57 <ul> 58 <li><a href="#">ダウンロード</a></li> 59 <li><a href="#">マニュアル</a></li> 60 <li><a href="#">よくある質問</a></li> 61 <li><a href="#">お問い合わせ</a></li> 62 </ul> 63 </div> 64 <div> 65 <h3>CONTENTS</h3> 66 <ul> 67 <li><a href="#">お知らせ</a></li> 68 <li><a href="#">ビジネス</a></li> 69 <li><a href="#">プロフィール</a></li> 70 <li><a href="#">開発者</a></li> 71 <li><a href="#">ブログ</a></li> 72 </ul> 73 </div> 74 </nav> 75 <div class="footC"> 76 &copy; corp. All rights reserved. 77 </div> 78 </div> 79 </footer> 80</body></html> 81

CSS

1@charset "UTF-8"; 2 3/* 基本色 */ 4:root { 5 --main-color: #5D9AB2; 6 --accent-color: #BF6A7A; 7 --dark-main-color: #2B5566; 8 --text-bright-color: #fff; 9 --icon-color: #fff; 10 --icon-bk-color: #ddd; 11 --large-width: 1000px; 12} 13 14body { 15 margin: 0; 16 font-family: 'メイリオ', 17 'Hiragino Kaku Gothic Pro', 18 sans-serif; 19} 20 21 22/* フッター */ 23 24footer { 25 color: #fff; 26 color: var(--text-bright-color); 27 background-color: #2B5566; 28 background-color: var(--dark-main-color); 29} 30 31@media (min-width: 768px) { 32 footer .container { 33 display: flex; 34 flex-wrap: wrap; 35 max-width: 1000px; 36 max-width: var(--large-width); 37 margin-left: auto; 38 margin-right: auto; 39 40 } 41 42 .footA { 43 flex: 0 0 40%; 44 } 45 46 .footB { 47 flex: 0 0 60%; 48 } 49 50 .footc { 51 flex: 0 0 100%; 52 } 53} 54 55footer .container { 56 padding: 40px 20px; 57} 58 59/* フッターA : サイト情報 */ 60 61.footA { 62 margin-bottom: 30px; 63} 64 65.footA h2 { 66 margin-top: 0; 67 margin-bottom: 10px; 68 font-family: 'Montserrat', sans-serif; 69 font-size: 30px; 70 letter-spacing: 0.2em; 71} 72 73.footA p { 74 margin-top: 0; 75 margin-bottom: 0px; 76 font-size: 14px; 77} 78 79.footA a { 80 color: inherit; 81 text-decoration: none; 82} 83 84/* フッターB : フットメニュー */ 85 86.footB div { 87 margin-bottom: 20px; 88} 89 90.footB h3 { 91 margin-top: 0; 92 margin-bottom: 10px; 93 border-bottom: solid 1px currentColor; 94 font-size: 14px; 95} 96 97.footB ul { 98 margin: 0; 99 padding: 0; 100 list-style: none; 101} 102 103.footB a { 104 display: block; 105 padding: 5px; 106 color: inherit; 107 font-size: 12px; 108 text-decoration: none; 109} 110 111.footB a:hover { 112 background-color: rgba(0, 0, 0, 0.3); 113} 114 115@media (min-width: 768px) { 116 .footB { 117 display: flex; 118 } 119 120 .footB div { 121 flex: 1; 122 } 123 124 .footB div:not(:first-child) { 125 margin-left: 40px; 126 } 127} 128 129.footC { 130 font-size: 12px; 131 text-align: center; 132 font-family: 'Montserrat', sans-serif; 133} 134 135/* フッターD : SNSメニュー */ 136 137.footD { 138 margin-top: 20px; 139} 140 141.footD ul { 142 display: flex; 143 margin: 0; 144 padding: 0; 145 list-style: none; 146} 147 148.footD a { 149 display: block; 150 margin-right: 8px; 151 padding: 0; 152 color: inherit; 153 font-size: 16px; 154 text-decoration: none; 155 border: solid 1px currentColor; 156 width: 2em; 157 line-height: 2em; 158 border-radius: 50%; 159 text-align: center; 160 161} 162 163.footD a:hover { 164 background-color: rgba(0, 0, 0, 0.3); 165} 166

試したこと

JSFiddleにて記載のコードで確認したところ、そちらでは円で表示されるのを確認しました。
イメージ説明
なぜこのような表示の違いが出るのか、原因が分からず困っています。

補足情報(FW/ツールのバージョンなど)

エディターはBrackets(ver:1.14.1) プレビューはChromeで確認しています。

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

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

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

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

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

guest

回答1

0

ベストアンサー

DOCTYPE を書き損じているため、互換モードになっています。JSFiddle では反映されないようです。

HTML

1<!DOCTYPE html>

https://momdo.github.io/html/syntax.html#the-doctype
https://developer.mozilla.org/ja/docs/Web/API/Document/compatMode

投稿2020/02/12 02:22

x_x

総合スコア13749

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

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

yuki328

2020/02/12 05:50

ご指摘ありがとうございました。無事解決しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問