すたすた式
Vaster2
デフォルトは float:left で横並びにしているので、width の調整でもできそうですが…
.sns li { float:left; width:30%; /* ここを調整 */ height:54px; margin:20px 3px; list-style:none !important; }
今回は、Flexbox を使って横並び1列のデザインにしてみました。
HTMLを編集します。必ずバックアップを取ってから作業してください。
Before
After
SNSボタンのHTMLはこんな感じの構造でした
<div class='sns'> <ul class='clearfix'> <li class='twitter'>......</li> <li class='facebook'>......</li> <li class='line'>......</li> <li class='hatebu'>......</li> <li class='pocket'>......</li> <li class='feedly'>......</li> </ul> <div>
<ul class='clearfix'>に対して CSSを追加しました
<ul class='clearfix'>
.clearfix { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; }
これを
.sns li { float:left; width:30%; height:54px; margin:20px 3px; list-style:none !important; }
これに変更
.sns li { -ms-flex-preferred-size: 16%; flex-basis: 16%; /* ここでボタンの幅調整 */ }
.clearfix:after { content: ""; display: block; clear: both; }
あまり変わりません
レスポンシブデザイン @media only screen and (max-width: 780px) の部分
.clearfix { -ms-flex-wrap: wrap; flex-wrap: wrap; }
@media only screen and (max-width: 780px) { .sns li{ width:47%; } }
@media only screen and (max-width: 780px) { .sns li { -ms-flex-preferred-size: 48%; flex-basis: 48%; /* ここでボタンの幅調整 */ } }
CSSのベンダープレフィックスはこちらのサイトを利用しました
Autoprefixer CSS online
Autoprefixer online — add the desired vendor prefixes and remove unnecessary in your CSS
ちなみにflex-basis: 90%;にしたら縦1列になりました
flex-basis: 90%;
@media only screen and (max-width: 780px) { .sns li { -ms-flex-preferred-size: 48%; flex-basis: 90%; /* ここでボタンの幅調整 */ } }
このブログではsvg形式の画像にしましたが、文字の場合は、
<i class="fa-hatebu">B!</i>
.fa-hatebu { font-style: normal; font-size: 24px; /* 要調整 */ }
.fa-hatebu { font-size: 20px; /* 要調整 */ }
サイト内検索に使ってください 🐤
© 2015 すたすた式
Enjoy!👍
QooQ
コメントなし:
コメントを投稿