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

キテレツ

2014.01.30

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

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

今回紹介するプロパティ

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

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

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

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



		
		
			
			

			
			[sourcecode lang="css"].box{
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -o-flexbox;
  display: flexbox;
}[/sourcecode]
			
				
					
				
					1
2
3
4
5
6
7
				
						[sourcecode lang="css"].box{
  display: -webkit-flexbox;
  display: -moz-flexbox;
  display: -ms-flexbox;
  display: -o-flexbox;
  display: flexbox;
}[/sourcecode]

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

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

regions – 複数要素をまたがってコンテンツを流し込む
- 基本的な書き方
multi-column – 段組みレイアウトを実現する
- 基本的な書き方
exclusions – 要素を囲うようにテキストを折り返す
おわりに

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

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

○ flex-wrap
折返し順を指定

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

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

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

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

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

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

基本的な書き方

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



		
		
			
			

			
			[sourcecode lang="html"]&lt;article&gt;
&lt;h1&gt;タイトル&lt;/h1&gt;
&lt;section&gt;
 &lt;p&gt;テキストテキスト....&lt;/p&gt;
 &lt;img src=&quot;sample.jpg&quot; /&gt;
&lt;/section&gt;
&lt;/article&gt;

&lt;div class=&quot;page&quot;&gt;
 &lt;div id=&quot;box1&quot; class=&quot;region&quot;&gt;
 &lt;div id=&quot;box2&quot; class=&quot;region&quot;&gt;
 &lt;div id=&quot;box3&quot; class=&quot;region&quot;&gt;
&lt;/div&gt;
[/sourcecode]
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
				
						[sourcecode lang="html"]&lt;article&gt;
&lt;h1&gt;タイトル&lt;/h1&gt;
&lt;section&gt;
 &lt;p&gt;テキストテキスト....&lt;/p&gt;
 &lt;img src=&quot;sample.jpg&quot; /&gt;
&lt;/section&gt;
&lt;/article&gt;
 
&lt;div class=&quot;page&quot;&gt;
 &lt;div id=&quot;box1&quot; class=&quot;region&quot;&gt;
 &lt;div id=&quot;box2&quot; class=&quot;region&quot;&gt;
 &lt;div id=&quot;box3&quot; class=&quot;region&quot;&gt;
&lt;/div&gt;
[/sourcecode]

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



		
		
			
			

			
			[sourcecode lang="css"]article {
 -webkit-flow-into:myThread; /*myThreadというコンテンツフローの始め*/
}
.region {
 -webkit-flow-from:myThread; /*.regionにはmyThreadコンテンツを流し込む*/
}
[/sourcecode]
			
				
					
				
					1
2
3
4
5
6
7
				
						[sourcecode lang="css"]article {
 -webkit-flow-into:myThread; /*myThreadというコンテンツフローの始め*/
}
.region {
 -webkit-flow-from:myThread; /*.regionにはmyThreadコンテンツを流し込む*/
}
[/sourcecode]

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

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

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

基本的な書き方

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



		
		
			
			

			
			[sourcecode lang="css"].content {
 -moz-column-count:2; /*.contentは2カラム*/
 -webkit-column-count:2;
}
[/sourcecode]
			
				
					
				
					1
2
3
4
5
				
						[sourcecode lang="css"].content {
 -moz-column-count:2; /*.contentは2カラム*/
 -webkit-column-count:2;
}
[/sourcecode]



		
		
			
			

			
			[sourcecode lang="html"]&lt;div class=&quot;content&quot;&gt;
  &lt;p&gt;本文テキスト本文テキスト本文テキスト...略&lt;/p&gt;
&lt;/div&gt;
[/sourcecode]
			
				
					
				
					1
2
3
4
				
						[sourcecode lang="html"]&lt;div class=&quot;content&quot;&gt;
  &lt;p&gt;本文テキスト本文テキスト本文テキスト...略&lt;/p&gt;
&lt;/div&gt;
[/sourcecode]

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から目が離せません!