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

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

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

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

Q&A

1回答

1337閲覧

facebookのアイコンに余白を設定する

tidavest

総合スコア595

HTML5

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

0グッド

0クリップ

投稿2017/01/21 07:21

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="70px" height="70px" viewBox="0 0 300 300"> <defs> <style> .fill {fill: #3b5998;} </style> </defs> <path class="fill" d="M283.000,-0.000 C283.000,-0.000 17.000,-0.000 17.000,-0.000 C7.853,-0.000 -0.000,7.854 -0.000,17.000 C-0.000,17.000 -0.000,283.000 -0.000,283.000 C-0.000,292.144 7.853,300.000 17.000,300.000 C17.000,300.000 161.000,300.000 161.000,300.000 C161.000,300.000 161.000,183.000 161.000,183.000 C161.000,183.000 121.000,183.000 121.000,183.000 C121.000,183.000 121.000,139.000 121.000,139.000 C121.000,139.000 161.000,139.000 161.000,139.000 C161.000,139.000 161.000,105.000 161.000,105.000 C161.000,66.251 183.432,45.000 218.000,45.000 C234.558,45.000 249.852,46.449 254.000,47.000 C254.000,47.000 254.000,88.000 254.000,88.000 C254.000,88.000 229.000,88.000 229.000,88.000 C210.201,88.000 207.000,96.891 207.000,110.000 C207.000,110.000 207.000,139.000 207.000,139.000 C207.000,139.000 252.000,139.000 252.000,139.000 C252.000,139.000 246.000,183.000 246.000,183.000 C246.000,183.000 207.000,183.000 207.000,183.000 C207.000,183.000 207.000,300.000 207.000,300.000 C207.000,300.000 283.000,300.000 283.000,300.000 C292.144,300.000 300.000,292.144 300.000,283.000 C300.000,283.000 300.000,17.000 300.000,17.000 C300.000,7.854 292.144,-0.000 283.000,-0.000 Z"/> </svg> 上記のコードが、facebookのアイコンをhtmlに直接入力したものなのですが、これに余白を設定したいのですが、divで囲んで、cssのテキストに余白を設定したのですが、出来ませんでした。何か良い方法があれば教えてください。

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

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

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

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

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

guest

回答1

0

1.SVG要素、あるいはその親要素に対してクラスを付与
2.そのクラスに対してCSSを指定

Html

1<div class="fb"> 2 <svg>...省略...</svg> 3</div>

CSS

1.fb{ 2 /*例えば*/ 3 padding: 5px; 4 width: 70px; 5 height: 70px; 6 -moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box; 7} 8.fb svg{ 9 width: 100%; 10 height: auto; 11}

あとsvg要素にstyleを入れ込んでいますが、インラインでsvg要素を記述する際はcssファイルにまとめてしまったほうがいいかなと思います。(メンテナンス性や再利用性が上がります)

投稿2017/01/21 08:06

編集2017/01/21 11:12
manabufukai

総合スコア700

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

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

tidavest

2017/01/21 08:52

paddingで、指定したも余白が空きませんでした。このコードとの相性があるのでしょうか。
manabufukai

2017/01/21 11:13

失礼しました、元々cssに *{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;} の指定を入れていたのを失念していました。 なのでコードを修正しました。 svgアイコンの周囲に5pxの余白を加える、というかたちだと回答文のコードのようにすれば良いです。
tidavest

2017/01/21 11:41

コードを変更して入力したのですが、余白が設定されませんでした。やはり、相性でしょうか。
manabufukai

2017/01/21 12:19

コードの相性とは何でしょう? また、質問文を改めて読んでみて > divで囲んで、cssのテキストに余白を設定したのですが、出来ませんでした。 facebookアイコンの周囲に余白を入れたい、という認識に間違いはありませんか? cssのテキストに余白?とはどういうことでしょう? アイコンの周囲に余白を入れたいのであれば記述したコードでchrmoe,firefox,safariは普通に余白ができますが。(サイズそのものを変えたくなければbox-sizingの指定を消せば良いです)
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問