BLOG﻿メニューとウィジェットFacebookTwitter検索:ABOUT当サイトは株式会社アートグラフィック新潟WEB制作ブログです。WEB制作にまつわることや新潟の情報など投稿していきます。会社のホームページはこちら♪ご注意:記事は当時の情報を元に書かれておりますので、仕様が変更され記事と合わない事がございますので、その際はご容赦願います。CSS」に触れてみたこんにちは、yasaiです。今年の新潟は例年以上に秋を通り過ぎて冬が来ちゃいそうです。寒いのは苦手なのです。今月は当ブログのネタはなんにしようかしら、今日の夕飯はなんにしようかしらと悩んでまして、夕飯を大根ときのこの味噌汁にすることは決めたすぐ決まったのですが、何を書くかはさっぱり。アウトプットって難しい。そんな中coliss様の記事で触ってみたいものを発見したので、今日はそちらを。そちらの記事はこちら。CSS」に触れてみましたよ、というお話です。SYSTEM」とプラスアルファ自分で使いやすくカスタマイズを追加したものを使っています。SYSTEM」の24カラムバージョンを多用しています。こちらはデザイナーさんとも話したうえで使っています。border-box;の威力に感動してた頃です。SYSTEM」のように使えそうなことflexboxを使っていることIE9+で対応しているらしいこと個別のsassファイルで切り分けられ、クラス名が他と重複しづらく他のcssへ干渉しないことflexboxを使ったレイアウトが今後主流になるのかなぁという感じですが、実案件ではIEへの対応(IE10ではベンダープレフィックス付き、IE9以下は非対応)や仕様変更が多くちょっと使うのが怖かったこともあって、使うのを少し敬遠してたところがあったのです。←ただの勉強不足のいいわけそんなときにcoliss様の記事を見て、IE9+なら良さそうだぞ!、ということでやる気になったのでした。試しにざっくりやってみた【DEMO】ドキュメントを見ながら写真おいて、テキスト入れて。基本的な使い方は自分の使いたい奴のクラスをどんどんつけていくパターンです。float+絶対配置やdisplay:table-cell;を使ったレイアウトの良いとこどりな感じで、flexboxを使ったレイアウトで、特徴的なのが「コンテンツを天地のセンター合わせ」と「コンテンツの並びをリバースできる」ってところですよね。可変する高さの「コンテンツの天地のセンター合わせ」に関してはCSS挫折の一つの要素だったんじゃないかと思っているので、flexboxが敷居を下げる一つのきっかけになったらいいな、と思っているのです。<p>ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。<p>無理矢理ボックスを天地のセンターにしたので変ですが。fx-col-center-s"><h2>近所の漁港</h2><p>ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。ここには長めのテキストを入れます。fx-col-center-s"><h2>日本海の夕日</h2><p>無理矢理ボックスを天地のセンターにしたので変ですが。</p></div></div>.fx-rowで行を指定し、その中に.fx-col-00-xでボックスを作ります。00の部分は比率になってます。xの部分はメディアクエリの切り替えのポイントです。1200)画像のボックスは.fx-top-center-xで上付きに、テキストは行に対して.fx-col-center-xを指定して「コンテンツの天地のセンター」にしています。<p>このボックスでは「文章」40%、「画像」30%を、センターにして配置しています。<p>このボックスはHTML的には上のコンテンツ同様、「文章」+「画像」になっていますが「.fx-row-reverse-」を指定し、逆順にしています。<br>HTMLの可読性が大きくあがりますね。fx-col-40-s"><h2>晴れた雪の日</h2><p>このボックスでは「文章」40%、「画像」30%を、センターにして配置しています。fx-col-40-s"><h2>雪の日の空</h2><p>このボックスはHTML的には上のコンテンツ同様、「文章」+「画像」になっていますが「.fx-row-reverse-」を指定し、逆順にしています。<br>HTMLの可読性が大きくあがりますね。alt=""></div></div></section>上のセクションが普通の順番「テキスト+画像」、下のセクションが逆順に「画像+テキスト」になります。違いは下のセクションでは.fx-rowに対して.fx-row-reverse-xを指定しているところですね。同じ内容で見た目だけ違うだけなので、html的には同じ並びになっていてコードの可読性が高くなりますね。あと、このセクションでは.fx-rowに対して.fx-row-center-xを指定しています。これは中のボックスのトータルの水平の配置の仕方です。:均等割り.fx-row-between-xと.fx-row-around-xの違いを言葉で説明できないので、こちらはドキュメントで確認してください。CSSでDEMO作ってみて思ったこと使い方は簡単に覚えていけそうです。基本的にはクラスを付与していくだけなので、どのクラスがどのようになっているのかさえ覚えてしまえば、どんどん組んでいけます。CSSにはリセット関係があらかじめ入っています。この辺りは、sassフォルダの中に分けて入っていたので、自分の制作環境に合わせて使えそうです。メディアクエリの切り替えのポイントなども「variables.scss」の中で定義しているので、こちらを編集したらOKそうです。scssファイルが同梱されているっていうのは、個人的に高感度ポイント高いです!気をつけなくてはならない点は、このフレームワークを使ってもflexboxの使い方(書き方)は覚えないですね、当たり前なんですけど。flexboxを使ったレイアウトの感触をつかむのにはとてもいいんだと思います。CSSを使う際にはまたデザイナーさん(ディレクターにも)と打ち合わせてお互いに何となくわかった状態で進めたほうがスピードアップにつながりそうですね。CSS」を案件に応じて使い分けていってもいいなぁと思っています。初めのさわりだけで、全然突っ込んだところがないんですが、今回は触ってみた感想ということで。