メインコンテンツに移動

メインナビゲーション

  • ホーム
  • サイトマップ
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • 複数のソーシャルボタンの並びずれがあるので、cssで簡単に配置調整

複数のソーシャルボタンの並びずれがあるので、cssで簡単に配置調整

SEO
css
Facebook
SEO
Twitter
inline-block

やりたいこと:複数のソーシャルリンクボタンを一行に配置

  • 複数のソーシャルリンクボタン(例:Twitter、FacebookのFollowボタン)を一行に配置したいです

問題点:ボタンが同じライン上に揃っていない

  • 各ボタンのcss設定が違うため、一行配置時に、同じラインに揃えるのは難しいです
  • FacebookのFollowボタンのcss設定が時にその要素のstyleに書き込んだため、追加したcssファイルの設定が優先度低いため、上書きすることが難しいです(!impotantキーワード使用だったら可能かな?)

解決:ボタンをラップする親ボックスの配置を調整

  • ボタンを構成する要素のcssの上書きが難しい場合、ボタンをラップするブロックの配置場所を調整することより、ボタンを揃えます
  • 例:FacebookのFollowボタンをラップする親クラス:class=”fb-follow”のcss設定に、top:-2pxを設定すれば、二つのボタンを一行に揃えました。
ホーム

古松

検索

Article Category

  • apache(7)
  • css(19)
  • drupal(295)
  • Electron(4)
  • html(34)
  • javascript(27)
  • laravel(4)
  • linux(5)
  • macOS(2)
  • mysql(13)
  • php(19)
  • python(4)
  • SEO(12)
  • video(72)
  • Visual Studio Code(4)
  • windows(13)
  • wordpress(32)