1. /
  2. Web制作

Web制作

CSSで3分割するときガチっとやる方法

CSS
1
2
3
4
5
li {
  width : 33.33333% ;
  width : -webkit-calc(100% / 3) ;
  width : calc(100% / 3) ;
}

ベンダープレフィックスも入れてこれでいけるそうです。

対応ブラウザ：IE9以降、Safari6以降、Google Chrome19以降、Firefox4以降なので大体いける。

vwを利用してfont-sizeをレスポンシブにめんどくさいのでSassのmixinを利用

Sass
1
2
3
4
5
6
7
8
9
10
11
12
13
@function get_vw($size, $viewport:基準とする画面幅){
  $rate: 100 / $viewport;
  @return $rate * $size * 1vw;
}
 
@mixin fz_vw($font_size:10){
  font-size: $font_size * 1px;
  font-size: get_vw($font_size);
}
 
p{
  @include fz_vw(13);
}

 

Sassによるpxから%への演算

様々なリキット Sass
Sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// width
@mixin 任意の値( $parentPxWidth, $pxWidth ){
width: floor((( $pxWidth / $parentPxWidth ) * 10000% )) / 100;
}
 
// margin
@mixin 任意の値($parentPxWidth, $mTop, $mRight, $mBottom, $mLeft){
margin : floor((($mTop / $parentPxWidth) * 10000%)) / 100 floor((($mRight / $parentPxWidth) * 10000%)) / 100 floor((($mBottom / $parentPxWidth) * 10000%)) / 100 floor((($mLeft / $parentPxWidth) * 10000%)) / 100;
}
 
// padding
@mixin 任意の値($parentPxWidth, $pTop, $pRight, $pBottom, $pLeft){
padding : floor((($pTop / $parentPxWidth) * 10000%)) / 100 floor((($pRight / $parentPxWidth) * 10000%)) / 100 floor((($pBottom / $parentPxWidth) * 10000%)) / 100 floor((($pLeft / $parentPxWidth) * 10000%)) / 100;
}
 
// height
@mixin 任意の値($parentPxHeight, $pxHeight){
height: floor((($pxHeight / $parentPxHeight) * 10000%)) / 100;
}
 
// position
@mixin 任意の値($left,$bace-width,$top,$bace-height) {
left : ($left / $bace-width) * 100%;
top: 0;
margin-top:($top / $bace-height) * 100% * $bace-height/$bace-width;
}

widthは親要素のwidthを入れる。

これ間違うと狂う。

SourceTreeのメモ

SourceTreeのメモ

コミット→弄ったファイルの履歴を登録する

ファイルステーション→弄ってまだコミットしてないファイルが表示される

プル→リモートにあるのを落としてくる

プッシュ→ローカルのをリモートにアップする

フェッチ→スケッチワンタッチ

 

参考サイト

Gitの最低限必要な基礎知識