見出し画像

レイアウトで利用するCSSプロパティー｜WDSG策定チーム［#05］

カトウヒカル

みなさんは普段、レイアウトで利用するCSSプロパティーは何を利用していますか？

WDSG策定チーム専用Slackにて、メンバー間で談義を行い［レイアウトで利用するCSSプロパティー］のガイドラインを作成しました。

WDSG（Web Developer's Sharing Guidelines）とは、Webサイト制作関係者がガイドラインを共有することで、クリエイティブに集中できる環境を作るプロジェクトです。

１．レイアウトで利用するCSSプロパティー

１）基本的に、レイアウト目的のCSSプロパティーは［flexbox］を利用します。

意図１：
サポート対象のブラウザで問題なく動作します。

２）［float］は、回り込みが必要な場合に利用します。

意図１：
右や左への回り込みが、float本来の目的です。

３）［grid］を利用する場合［AutoPrefixer］などを利用して［ie11］への対応を行います。

２．策定までの流れ

［レイアウトで利用するCSSプロパティー］について行ったSlackでの流れを、公開議事録として掲載します。

桑島さん：
レイアウトするとき、Float、Flexbox、CSS Gridのうち、主にどれを使ってますか？
ヒカル：
僕は回り込みが不要なレイアウトはFlexboxです。
たまに、display:inline-block使うときもあります！
CSS Gridが便利そうなので使って見たいのですが、タイミングが無くて…
桑島さん：
私も基本Flexboxでレイアウトしてます。
内容によって、floatもdisplay:inline-blockも使ってます。
CSS Grid使いたいなと思ってるけど、IE対応が怖くてまだ使ってないという感じです。

CSS Grid Layoutをガッツリ使った所感
https://ics.media/entry/17403/
いなとみさん：
ヒカルさんと、ほぼ同じです！
CSS GridとFlexboxでは、作りたいレイアウトによってどちらを使うべきか、その都度判断できると、いいんでしょうけどね。
ケンタロウさん：
僕もヒカルさんとほぼ同じです〜！
GridはIE対応するのにAutoprefixer使ったり書き方に注意しつつ、状況に応じて使いますが、ほとんどflexboxを使ってますね。
ヒカル：
［float］と［Flexbox］は策定して問題無さそうですが、［CSS Grid］の扱いが難しいので、Twitterで一度アンケートを取ってみます！
SMICHRさん：
Gridは基本的に格子状のレイアウトしかつかわないですよね。
ブロークングリッドレイアウトっていうあえてグリッドを使いながら崩した表現する手法もありますが、デザイン的な手法でマークアップのベストプラクティスではないので今回関係ないですね。
ヒカル：
ブロークングリッドレイアウトという呼び名をはじめて聞いたんですが、こういったデザイン手法をそう呼ぶのですね！
ありがとうございます！
ヒカル：
Twitterでアンケートを取った結果、以下の回答を得られました！
・float：8%
・flexbox：61%
・grid：7%
・回答をみる：24%
277票集まったので、傾向として信頼できそうな感じです！
こちらを基に、ガイドラインの叩きを作りますね！
いなとみさん：
grid に関しては、意見が出て来ず、すみません 汗
ひとまず、flexboxと float の使い分けができれば良さそうですね！！
ちなみに、floatの「回り込み」とは、テキストの回り込みを想定で認識あってますでしょうか。
ヒカル：
gridは僕もまだ使って無いので大丈夫ですよ！
floatについては、基本的に「テキストの回り込み」がメインです。
ですが、テキスト以外も回り込ませる事はできるので、明示的に「テキスト」と書くのは避けてみました。
いなとみさん：
テキストって書いちゃうと、これまたガチガチな要素になってしまいますからね！了解しました、ありがとうございます！私はこの感じでOKだと思います。
桑島さん：
ツイッターでの調査もありがとうございます！
gridはまだそれほど使われていなくて、安心しました。
でも便利そうなのでこれから増えそうですね。

以上が、Slackでの流れです。

実際は参考サイトを参照したり、ドキュメント化する時に調査を行いました。

３．WDSG策定チーム専用Slack

WDSG策定チームは、専用Slackで一緒に意見交換をしてくれるメンバーを募集しています！

意見出しチャンネルで制作方法について質問したり、判断に迷っていることや制作の悩みなど、自由な雰囲気で意見交換を行いながら、少しずつガイドライン化を進めています。

この活動が気になった方は、是非とも僕のTwitter（@design_hikaru）へご連絡ください！

最後までお読み頂き、ありがとうございました！

サポート頂いたお金は交通費などの活動資金として、大切に使わせてもらいます^^