SONICMOOV Googleページ

2014年使っていきたい4つのcssプロパティたち

2014年使っていきたい4つのcssプロパティたち

  • このエントリーをはてなブックマークに追加

こんにちは。久方ぶりに回ってきました キテレツです。昨年からランニングにハマってます。当初、健康のため走ってたのが 走るために健康でいなくては、といったように手段と目的が入れ替わってます。
何を目指してるのか分からなくなってきましたが、本年も頑張ります、宜しくお願いします。

今回は表題にある通り、今後使っていきたいレイアウト系のcssプロパティのお話をば..。

今回紹介するプロパティ

  • flexbox
    コンテナ上で要素を縦横に対し柔軟に配置する
  • regions
    複数要素をまたがってコンテンツを流し込む
  • multi-column
    段組みレイアウトを実現する
  • exclusions
    要素を囲うようにテキストを折り返す

※多くが仕様策定中のため、ベンダープレフィクスが必要です。
 情報が少ない & 変更が多い仕様もあります。

flexbox – コンテナ上で要素を縦横に対し柔軟に配置

flex は flexible の略で、名の通り柔軟にコンテンツ配置ができます。
縦並び・横並び、可変設定なども指定できます。特に表示する順序も変えることができるので、PCサイトとスマートフォンサイトでコンテンツの順番を入れ替えたりできます。
flexboxを使うには「flexboxコンテナ」が必要です。CSSで「display:flex」と指定すると、「flexboxコンテナ」として定義できます。
flexboxコンテナの子要素はflexboxアイテムになります。
flex

.box{
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -o-flexbox;
  display: flexbox;
}

flexboxを使うには、flexboxコンテナが必要なため上記のようにします。
flexboxコンテナでは子要素の配置方法を色々なプロパティで指定できます。

続きを読む

flexコンテナで指定できるプロパティ

○ flex-direction
子要素の配置方向を指定

○ flex-wrap
折返し順を指定

○ order
アイテムの並び順を指定

○ justify-content
横方向の寄せを指定

○ align-items
縦方向の寄せを指定

flexboxは書こうと思うとデモも含め、内容が膨大になるため、各々確認してみてください。
なお下記サイトではジェネレータが試せます。
http://the-echoplex.net/flexyboxes/

regions – 複数要素をまたがってコンテンツを流し込む

下図のように元となるコンテンツと表示領域を用意し、コンテンツを流し込むことができるようになります。
safari6.1とiOS7 safariでサポートを開始してます。また、chromeでflagを有効化して利用できます。
regions

基本的な書き方

コンテンツとレイアウトを分離して考えられます。
元となるコンテンツ、それを表示するレイアウトをそれぞれ書きます。

<article>
<h1>タイトル</h1>
<section>
 <p>テキストテキスト....</p>
 <img src="sample.jpg" />
</section>
</article>

<div class="page">
 <div id="box1" class="region">
 <div id="box2" class="region">
 <div id="box3" class="region">
</div>

CSSで「flow-into」と「flow-from」を指定します。

article {
 -webkit-flow-into:myThread; /*myThreadというコンテンツフローの始め*/
}
.region {
 -webkit-flow-from:myThread; /*.regionにはmyThreadコンテンツを流し込む*/
}

regionsについての詳細な解説、デモは下記のAdobeサイトで確認できます。
http://html.adobe.com/jp/webplatform/layout/regions/

multi-column – 段組みレイアウトを実現する

名前の通り、段組み(マルチカラム)のレイアウトを実現するプロパティです。
コンテンツ変更に伴うレイアウトの調整を省力化できます。
multi_column

基本的な書き方

column-countで何カラムにするかを書くだけ

.content {
 -moz-column-count:2; /*.contentは2カラム*/
 -webkit-column-count:2;
}

<div class="content">
  <p>本文テキスト本文テキスト本文テキスト...略</p>
</div>

multi-culomnの詳細は下記のmozillaのサイトが分かり易いので興味のある方て覗いてみてください
https://developer.mozilla.org/ja/docs/Web/Guide/CSS/Using_multi-column_layouts

exclusions – 要素を囲うようにテキストを折り返す

exclusionはwrap-flowプロパティで「除外要素」を指定すると、除外要素のまわりに他のコンテンツを回り込ませてレイアウトすることができます。
まだ情報少なく、変更も多い仕様です。(IE10で動作確認ができます)

これについてはMicrosoftのデベロッパーサイトを確認して頂いた方が十分な情報が得られます。
まだまだ策定中の情報となりますが、これもレイアウトの幅を広げてくれそうです。
http://msdn.microsoft.com/ja-jp/library/ie/hh673558%28v=vs.85%29.aspx

おわりに

1つ1つの内容を網羅するとかなり長くなるので、簡素に説明してしまいましたがどれもワクワクするプロパティですね。
従来であれば、無理矢理div等で区切ってやらなきゃいけない、故にそういうデザインをする事自体が敬遠されたり、ご法度だったような流れが変わるきっかけになるかもしれません。
2014年もcssから目が離せません!

  • このエントリーをはてなブックマークに追加

記事作成者の紹介

キテレツ(フロントエンドエンジニア)

ソリューション事業部 コーディング担当のキテレツです。 キテレツというのは入社時に決めたあだ名ですが全く浸透してません‥

関連するSONICMOOVのサービス

フロントエンドエンジニア募集中!

×

SNSでも情報配信中!ぜひご登録ください。

×

SNSでも
情報配信中!
SONICMOOV Facebookページ SONICMOOV Twitter SONICMOOV Googleページ
フロントエンドエンジニア募集中!

新着の記事

mautic is open source marketing automation