Simplicityを少し改造してみた 番外編2

公式でも少しコメントで話させていただいた部分で、ボタンのズレについて(ブラウザが対応さえしていれば)絶対にズレないCSSを考えてみた。
色々調べていてわかったことは、どうやら世間一般でFacebookのボタンがズレるってのはよく起こっているようで、なんでも公式のシェアボタンのスタイルがバグっている(別にバグっているわけではないけど)と言う話がたくさんあった。
なんでもvertical-align:bottomが入っているとかで、今までちゃんと並んでいたものがズレてしまっていたらしい。ひとまずFacebookの方でも修正が入ったようで、何とか直ったように見えたがまた何やら少しズレたりしていると言う話もあった。

こう言う点からも、例えば現在のSimplicityのズレでも、もしmarginの設定で直るのであればそれが一番早い。ただ各SNS公式のスタイルが変わればまた修正しなおさなければいけないという点では不便ではあるけれども。

さて、現在Simplicityでも搭載されるようになった、独自シェアボタン。SNSのボタンを使わず、自分たちで画像やその他諸々のデザインを用意して、内部の仕組み(カウンタの値とか、クリック後の処理)を流用すると言うようなものについては色々工夫ができる。

ボタンを横並びにする

ボタンを横並びにする方法は色々とあって、中でもよく使われるのがfloatだと思う。floatはdivの嵐になるのでヤダと言う人は、古の手法というか「あ、その手があったよね」と思い出すinline-blockと言う方法もある。個人的には、floatよりもinline-blockを使った方が仕組み的にわかりやすいんだけれども、これらは慣れてる方でというか好き好きで構わない。

しかし、なんか忘れてはいませんか?まだ横並びにする方法があるでしょう?

それは、boxなんです。CSS3で導入された、あれですよ。つまりはボックスの段組を利用してレイアウトするのがかなり便利なんです。そのあたりをちょろちょろと説明します。

見て頂いてわかるように、適当に作ったこのCSS。ボタンの部分とカウンタの部分高さを変えても文字が真ん中に来ているでしょう?
これは何か数値をいじるのではなく、絶対にそうなるようになっているのです。むしろズラす方が手間がかかるかも知れません。問題があるとすると、ブラウザの対応ぐらいと思われます。それが一番ネックなのですが。

ちょっと調べてみた所、Firefox,Chromeあたりは問題なく使えそうです(要ベンダープレフィックス)。ダメなのはoperaのモバイル関係かな?
さっきFirefoxでプレビューしていた時に、Firefoxで見れなくて「ダメじゃん・・・」と思ったら-moz-が抜けてただけでした。ここまで記事を書いていたので冷や汗かきそうでした。まぁIEについては、見られたらいいねぐらいの感じで行ってますので、マイクロソフトの対応次第というところでしょうか。IE11あたりならまぁ見れるかも知れません。
IEよりもモバイル端末が対応しているかどうかの方が現在ではネックになると思いますが、safariはwebkitだし、androidがわかんないけどまぁイケルんじゃないかなぁと思うしで、とりあえず対応してるので見て下さいとしか言えないのですが、一応説明を以下に。


ちなみにSimplicityで独自シェアボタンを利用していて、トップはまぁ大丈夫だけど記事下のバルーンのカウンタ値がズレてる!!と言う人は以下で直ります。(子テーマに追加が良いかと思います。親テーマの仕様が変わったりしたらコメントアウトか削除で)

Screenshot_from_2014-11-15-220020

内容の説明

fiddleの埋め込みでCSSの部分に少しだけコメントも入れてありますが、とりあえず前提から。

まず、一番最初にinline-blockで作ってみたんですが、色々と大変だった部分が文字部分の縦中央揃えでした。前に、

これで縦中央に揃えられると書きました。

Simplicity SNSボタンの中身を縦中央寄せにしたい他
前回まで、Simplicityを少し改造してみたpart1〜4でその内容について、jQueryであったりPHPの説明をしてきたけれど、実はも...

これでももちろん揃えられるのですが相手が文字だとちょっとややこしい。結果的には中央揃えのができるんですが、サイズ調整やあるいは、カウントの部分が上に来るSimplicityで言う所の記事下に出るバルーン型のボタンは、そこそこCSSに書き込みをしなくてはならず、いじる箇所が限定されてしまう(吹き出しの幅・高さ等で)。あまり良く出来たものではありませんでした。
もっとシンプルに、サクッとイケるのを探していたのですが、なかなかそういうものにも出会えず、CSSのリファレンスサイトを見ていた所でboxを思い出しました。

boxを使う利点は色々あります。

  1. 簡単に横並びができる
  2. 横並びができたら縦並びもできる
  3. 親で囲んだ子は順番が変えられる
  4. 設定するだけでフレキシブルにもなる(自動で隙間を埋めてくれる)
  5. 勝手に高さいっぱいで並べてくれる

など、え?なんなんこの高性能さはと言わんばかりの機能満載です。特に、3つ目の「親で囲んだ子は順番が変えられる」ここがとても重要です。今回は横並びしかしませんでしたが、順番が変えられるということはCSSだけで吹き出しの位置を現在の右横から上にすることもできるわけです。

本来なら、それ用のHTMLを作らなくてはいけません。最初に吹き出しを入れてその後、各SNSのボタンを入れてと言う順番にしないと吹き出しが上には行きません。親の方に、縦並びになるbox-orient:verticalを入れるだけの手頃さ。その際には、もちろんid等で識別して縦並び用の吹き出しの幅とか高さを設定する必要はありますが、HTMLを書き直さなくても良いと言うのはその分だけ手間が省けます。
わずかな手の入れようで横にも縦にもなると言うのはかなり利便性が良いと思います。


さて今回、書いたCSSですが、htmlとbody、あるいはそのどちらかでline-heightが設定してあるとします。boxを使った場合は、影響は少ないかも知れませんがinline-blockの時はその影響が顕著に現れます。なんせインラインですから。そのため、今回並べるのに利用したulとliに関しては設定してあるhtml,bodyのline-heightを打ち消して利用します。

「line-heightを打ち消していない時」のボーダーを見てもらえればわかるように中に入っている文字の周りにline-heightの影響が及ぼして線がはみ出ているのが見ていただけると思います。「ボタンの高さを変えたらどうなるか」でボーダーがはみ出ているのは正常な動作です。
一番上の完成ボタンのレイアウトと「line-heightを打ち消していない時」の文字周辺とは基本的なCSSは同じです。ボタンの周りの色やマージンその他の手が加わっているだけで、飾りを取れば「line-heightを打ち消していない時」と比べて一目瞭然に違います。時間があれば一度試してみて下さい。

line-heightの打ち消しはCSSの部分を見てもらってもわかるように、line-height:normalを入れるだけです。html,bodyにある150%はnormalに対しての150%ですから、それをノーマルに戻すことで打ち消しています。

150%だからline-height:1;にすれば元に戻るのではないか?と思いがちですがそれでもline-heightの影響が出てズレます。もしズレさせないようにするのであれば、例えば親にdisplay:tableを入れて、子にdisplay:table-cellを入れたら大丈夫かも知れません。試してませんけども。

line-heightに関してはpなどで文章を入れる時にその行間として使うのは良いですが、レイアウトに使うと「なんで少しだけズレるのだろう」と悩んで、他のマージン・パディングを触っている間にどこで何をしていたのかわからなくなってしまう場合もあるので打ち消してレイアウトするのが良いだろうと思います。どうせレイアウト時にマージンなどで色々と位置を合わせていくのですから、それだったら0スタートの方が何かとわかりやすいと言うのがその理由です。
そもそも何%やら何emやらと言われてすぐに何px動かせば良いと言う計算ができればよいですが、なかなかそうはいかないので0からのスタートがベストだと思います。


そしてhtmlの方ですが、ulの下のliはinline-blockになっています。つまりは、リストを横並びにしているわけです。すると、ご存知のように、リストとリストの間にほんの少しスペースができます。これはそういう仕様です。letter-spacingでネガティブな値を入れて必要な時に直すという方法もありますが、今回は、htmlでliの閉じカッコを外すと言うhackみたいなものを利用してみました。
HTMLのバリデータはどう言うか知りませんが、html5では普通に使える技です。こうするとinline-blockでもスペースはできません。もしメニュー等で横並びのものを作っている人がいれば、「右側のスペースは5pxでいいのになんでちょっと広いんだよ」と愚痴りながらmargin-right:3pxと入れることはなくなるかも知れません。

これはわかりにくいですが「liの閉じタグを入れた時」と「line-heightの打ち消しをしていない時」を比べた時、2つあるボタンの間のスペースを見ていただくと、若干ですが「liの閉じタグを入れた時」の方が広くなっているのがわかるでしょうか?これぐらい微妙な違いですが、その違いに気が付きにくいものなのです。ぴったりくっつけたいのに隙間ができるとか、マイナスの値を入れて何とか揃えようとかするみたいなのは案外こういう元々の仕様によって起こることもあったりします。

今回のレイアウト

こんな感じです。

親となるブロックはwrapBoxとして、-webkit-boxと、-moz-boxが入っています。-ms-とか-o-とかと他のブラウザ用にも付け加える必要があるだろうとは思いますがとりあえずFirefoxとChromeあたり向けに。

下準備としてボタンの共通部分をまとめて、個別に設定が必要な部分だけ別で書き出します。だいたい幅・高さ、色あたりが別で書く部分でしょうか。実際、今回の例では4つの状態とも共通のCSSを流用しています。ボタンごとに変えたい時は、例えば今回ならulにidを入れて、そのidの子になる要素の時だけ設定をすることで4種のスタイルができています。

調査用のボーダーの部分が青とか赤の枠線になってます。一番上のは枠線が入ってませんが、例えば

#id .class1 { border:none; }

などとしておけば、#idの中にあるclass1のボーダーは無しみたいにできますので、目安として作成途中は入れておく方が色々便利かも知れません。最終的にはコメントアウトすればボーダーが出て、コメントアウトを取ればボーダーが消えるわけなので確認用には良いかも知れません。


boxの機能の一つ、フレキシブル・ボックスでは、-webkit-box-flex:1.0;などと入れるだけで自動で残りのスペースいっぱいボックスを広げてくれます。今回の例で言うとTやらFと入っているマーク部分はwidthが入っていますが、吹き出し部分にはflexが入ってます。そのため、吹出し枠には横幅が設定されていません。自動で残りスペースも埋めてくれます。

ただし、縦横センターにする設定が入っているので完全に枠いっぱいにはなっていない感じです。boxの中の要素を横中央に入れる場合は、box-pack:centerなどを使います。縦中央に揃えたい時はbox-align:centerです。これが効いているので、「ボタンの高さを変えたらどうなるか」で見ていただければわかるように絶対に縦中央に揃います。

前に書いたrelativeでtop50%のtranslateY(-50%)では、1つ留意する所がありまして、それは平面で見るか3Dで見るかという点です。ここはtransform-styleを調べてみるとよいでしょう。平面で見る時に、ハーフピクセルなどというちょっとぼやけた感じになることがあります。そのため親要素にpreserve-3dをスタイルで指定して3DでYに動かすのが良いかも知れません。

ベンダープレフィックスが入っている分やや助長な感じに見えますが、仕組みとしてはとても簡単に書けます。
はじめにも書きましたが、idで識別しbox-orient:verticalにして、各要素の幅や高さを指定し、box-ordinal-groupを指定すれば横のボタンから縦のボタンに変えることも可能です。これって、SNSのボタンの場合はそうですが、レスポンシブのサイトとかでもなんだか使えるような気がしませんか?

ベンダープレフィックス無しでサクサクと使えるようになって、ブラウザの対応もほぼ100%ならこれしか無いと思うぐらいの便利さなんだけどなぁと思いつつ。今日はこのへんで。

スポンサーリンク

シェアする

フォローする