CSS3勉強会のフォローアップ其の3

またまた勉強会のフォローアップ続きです。

フレキシブルボックスレイアウト

dispaly:flex フレキシブルボックスレイアウト

displayプロパティの値にflexを指定するだけで子要素は横に並びます。

.flex01{
     width:500px;
     display:-webkit-flex;
     display:flex;
     border:1px solid #000;
}
.flex01 > p{
     padding:1em;
}
<div class="flex01">
<p>フレキシブルボックスレイアウトのサンプルテキストです。</p>
<p>フロートやポジションを使用しなくても段組みが作れるようになります。</p>
<p>フレキシブルボックスレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。</p>
</div>

フレキシブルボックスレイアウトのサンプルテキストです。

フロートやポジションを使用しなくても段組みが作れるようになります。

フレキシブルボックスレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。

フレキシブルボックスレイアウトはまだ仕様が固まっていないようなので今後に注目しましょう。

その他今すぐ使えるCSS3

box-sizing ボックスサイジング

ボックスモデルの横幅の計算方法が選べます。
box-sizing:content-box css2.1までの計算方法
box-sizing:border-box widthで指定した幅にpaddingとborderのサイズを含める

.boxsizing01{
     width:500px;
     padding:1em;
     border:1px solid #000;
     -webkit-box-sizing:content-box;/*css2.1*/
     -moz-box-sizing:content-box;/*css2.1*/
     box-sizing:content-box;/*css2.1*/
     margin-bottom:1em;
}
.boxsizing02{
     width:500px;
     padding:1em;
     border:1px solid #000;
     -webkit-box-sizing:border-box;/*css3*/
     -moz-box-sizing:border-box;/*css3*/
     box-sizing:border-box;/*css3*/
}
<div class="boxsizing01">
box-sizing:content-box;/*これまで通り*/
</div>
<div class="boxsizing02">
box-sizing:content-box;/*css3*/
</div>
content-box; widthの指定にpaddingやborderは含まない
border-box;  ボーダーまで含めて500px

transform 変形

移動・拡大縮小・回転・歪みなどの変形が指定できます。

.transform00{
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:translate(0,0);/*移動なし*/
     -moz-transform:translate(0,0);/*移動なし*/
     transform:translate(0,0);/*移動なし*/
     margin-bottom:1em;
}
.transform01{/*移動*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:translate(40px,20px);/*右に40px下に20px移動*/
     -moz-transform:translate(40px,20px);/*右に40px下に20px移動*/
     transform:translate(40px,20px);/*右に40px下に20px移動*/
     margin-bottom:1em;
}
.transform02{/*拡大縮小*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:scale(1.5,0.5);/*幅が1.5倍。高さが0.5倍*/
     -moz-transform:scale(1.5,0.5);/*幅が1.5倍。高さが0.5倍*/
     transform:scale(1.5,0.5);/*幅が1.5倍。高さが0.5倍*/
     margin-bottom:1em;
}
.transform03{/*回転*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:rotate(45deg);/*45度回転*/
     -moz-transform:rotate(45deg);/*45度回転*/
     transform:rotate(45deg);/*45度回転*/
     margin-bottom:1em;
}
.transform04{/*拡大縮小で変形の基準点を変更*/
     width:200px;
     height:200px;
     line-height:200px;
     text-align:center;
     background-color:#ccc;
     -webkit-transform:scale(1.5,0.5);
     -moz-transform:scale(1.5,0.5);
     transform:scale(1.5,0.5);
     -webkit-transform-origin:0 0;/*左上基準(デフォルトは中心50%50%)*/
     -moz-transform-origin:0 0;/*左上基準(デフォルトは中心50%50%)*/
     transform-origin:0 0;/*左上基準(デフォルトは中心50%50%)*/
     margin-bottom:1em;
}
<div class="transform00">
移動なし
</div>
<div class="transform01">
右に40px下に20px移動
</div>
<div class="transform02">
幅が1.5倍。高さが0.5倍
</div>
<div class="transform03">
45度回転
</div>
<div class="transform04">
変形の基準点を変更
</div>
移動なし
右に40px下に20px移動
幅が1.5倍。高さが0.5倍
45度回転
変形の基準点を変更

CSS3勉強会のフォローアップ其の2

勉強会のフォローアップ続きです。

マルチカラムレイアウト

column-width カラム幅

カラムひとつ分の幅を指定します。

.column01{
     width:500px;
     -webkit-column-width:24px;
     -moz-column-width:240px;
     column-width:240px;
     border:1px solid #000;
     color:#666;
}
<div class="column01">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

column-count カラム数

カラムの数を指定します。
幅は自動的に計算されて表示されます。

.column02{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     border:1px solid #000;
     color:#666;
}
<div class="column02">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

column-gap カラム間の幅

カラム間の幅を指定します。

.column03{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     -webkit-column-gap:100px;
     -moz-column-gap:100px;
     column-gap:100px;
     border:1px solid #000;
     color:#666;
}
<div class="column03">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

column-rule カラム間の境界線

カラム間の境界線をボーダープロパティと同じように指定できます。

.column04{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     -webkit-column-gap:100px;
     -moz-column-gap:100px;
     column-gap:100px;
     -webkit-column-rule:#666 solid 1px;
     -moz-column-rule:#666 solid 1px;
     column-rule:#666 solid 1px;
     border:1px solid #000;
     color:#666;
}
<div class="column04">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

マルチカラムレイアウトまとめ

マルチカラムレイアウトを使った段組みのサンプルです。
2段組み、間隔30px、境界線付き。

.column05{
     width:500px;
     -webkit-column-count:2;
     -moz-column-count:2;
     column-count:2;
     -webkit-column-gap:30px;
     -moz-column-gap:30px;
     column-gap:30px;
     -webkit-column-rule:#666 solid 1px;
     -moz-column-rule:#666 solid 1px;
     column-rule:#666 solid 1px;
     border:1px solid #000;
     padding:1em;
     text-align:justify;
     color:#666;
}
<div class="column05">
<p>マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。</p>
</div>

マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。マルチカラムレイアウトのサンプルテキストです。フロートやポジションを使用しなくても段組みが作れるようになります。でもスマホ用サイトって段組みの表現はあまり見ないですよね。

CSS3勉強会のフォローアップ其の1

昨日はお疲れ様でした。
私自身も非常に勉強になりました。
勉強会中ではソースコードやプレビューなどお見せできませんでしたので、以下でフォローしておきます。

webフォント

  1. グーグルフォントにアクセスします。
  2. 使用したいフォントが決まったら、Quick-useのボタンをクリック。
  3. 3番のフォントを読み込む設定を選びます。
  4. 4番のサンプルのようにフォントを適用したいセレクタにfont-familyを指定します。
.sample{
     font-family: 'Peralta', cursive;
}
<p class="sample">webfont</p>

結果は以下のようになります。
webfont

ドロップシャドウ

box-shadow ボックスシャドウ

ボックスに影をつけます。
値は順番に横移動距離・縦移動距離・ぼかす幅・影の色になります。

.shadow01{
     box-shadow:5px 10px 3px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}
<p class="shadow01">box-shadow</p>

box-shadow

さらに4つ目の数値を入れることができます。
これは広がる幅の指定になります。

.shadow02{
     box-shadow:5px 10px 3px 5px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}
<p class="shadow02">box-shadow</p>

box-shadow

わかりにくいので縦横は移動しないようにします。

.shadow03{
     box-shadow:0 0 3px 5px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}
<p class="shadow03">box-shadow</p>

box-shadow

値の先頭にinsetを指定すると内側に影がつきます。

.shadow04{
     box-shadow:inset 0 0 3px 5px #ccc;
     width:200px;
     height:60px;
     border:1px solid #000;
}
<p class="shadow04">box-shadow</p>

box-shadow

text-shadow テキストシャドウ

ボックスシャドウとほぼ指定の仕方は同じですが、insetの指定はてきません。
カンマで区切って複数の影をつけられます。

.shadow05{
     text-shadow:0 -1px 1px #000,0 1px 1px #fff;
     font-size:2em;
     color:#666;
     background-color:#eee;
     padding:#eee;
}
<p class="shadow05">テキストシャドウ</p>

テキストシャドウ

透明度

opacity オパシティ

ボックス内のものすべての透明度をコントロールします。

.alpha01{
     width:300px;
     background-color:#ccc;
     opacity:0.5;
}
<p class="alpha01">
opacity
<img src="photo.jpg" alt="" />
</p>

opacity
IMG_1599テキストも画像も透明度が50%になりました。

rgba RGBA

colorやbackground-colorプロパティで使用できます。

.alpha02{
     width:300px;
     height:100px;
     background-color:rgba(255,0,0,0.5);
     padding:10px;
}
<p class="alpha02">rgba</p>

rgba
テキストの透明度は変わらず背景だけが透明度50%になりました。

グラデーション

linear-gradient 水平垂直グラデーション

水平や垂直方向のまっすぐなグラデーションです。

.gra01{
     width:300px;
     height:100px;
     background: #87e0fd; /* Old browsers */
     background: -moz-linear-gradient(top, #87e0fd 0%, #05abe0 100%); /* FF3.6+ */
     background: -webkit-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
     background: -o-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* Opera 11.10+ */
     background: -ms-linear-gradient(top, #87e0fd 0%,#05abe0 100%); /* IE10+ */
     background: linear-gradient(to bottom, #87e0fd 0%,#05abe0 100%); /* W3C */
}
<p class="gra01">linear-gradient</p>

linear-gradient

3色4色のグラデーションにするには、カンマで区切って色と%を指定します。

radial-gradient 放射状グラデーション

放射状に広がる円形グラデーションです。

.gra02{
     width:300px;
     height:100px;
     background: #87e0fd; /* Old browsers */
     background: -moz-radial-gradient(center, ellipse cover, #87e0fd 0%, #05abe0 100%); /* FF3.6+ */
     background: -webkit-radial-gradient(center, ellipse cover, #87e0fd 0%,#05abe0 100%); /* Chrome10+,Safari5.1+ */
     background: -o-radial-gradient(center, ellipse cover, #87e0fd 0%,#05abe0 100%); /* Opera 12+ */
     background: -ms-radial-gradient(center, ellipse cover, #87e0fd 0%,#05abe0 100%); /* IE10+ */
     background: radial-gradient(ellipse at center, #87e0fd 0%,#05abe0 100%); /* W3C */
}
<p class="gra01">radial-gradient</p>

radial-gradient

カッコの中に左から、グラデーションの中心位置・形状・大きさ・開始色位置・終了色位置になります。
形状はcircle(正円)かellipse(楕円)を選択します。
大きさはcontain(全体がおさまるサイズ)やcover(全体をおさめる大きさ)など指定できます。

グラデーションは難しいので個人的にはジェネレーターを使って作ってしまいます。
http://www.colorzilla.com/gradient-editor/

角丸

border-radius 角丸

ボックスの角を丸くできます。

.radius01{
     width:200px;
     height:100px;
     padding:10px;
     background-color:#ccc;
     border-radius:5px 0px 30px 15px;
}
<p class="alpha01">border-radius</p>

border-radius
ボックスの角が丸くなりました。

値は順番に、左上・右上・右下・左下と時計回りに指定します。

.radius02{
     width:200px;
     height:200px;
     background-color:#ccc;
     text-align:center;
     line-height:200px;
     border-radius:50%;
}
<p class="alpha01">正円</p>

正円

長くなりましたので続きはまたあとでアップします。

TalkNote第8回に参加してきました

珍しく土曜日の講義が休みだったのでTalkNote(Webのセミナー)に参加してきました。

http://talknote.me/vol8/event/

サイバーエージェントのWebディベロッパーの方々4名を講師に迎えて、主にcss,jQuery,javascript関連の内容でした。

かなり高度な内容で疲れましたが、いい刺激になりました。

 

超!短くまとめるとCSSもjavascriptも【設計】が大事だよねっていう話し。

もうちょっと説明するなら、Webって更新していくものだから保守・再利用・拡張ができるように作るべきだよね。

それにはSAASやBackbone.jsがあるよ。って感じでしょうか。

 

 

個人的には身近な存在のCSSのセッションがおもしろかったです。

スケジュールが合わなくて、なかなか勉強会やセミナーに参加できませんが本当はもっと参加したいと常々思っています。

 

 

2013/6/14追記

描画パフォーマンスの改善について詳しく記述してあるページを見つけました。

http://blog.cacoo.com/ja/2013/06/03/web-paint-performance/