東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【sass】compassの忘れそうなもの

transform

@include transform(perspective(300px) rotateX(30deg) rotateY(0deg) rotateZ(0deg) translate3d(0px, 50px, 0px));

transform-origin

@include transform-origin(center,top);

【参考url】
http://jsdo.it/shuuuuun/gNlr


backface-visibility:hidden;

@include backface-visibility(hidden);

perspective

@include perspective(500px);

perspective-origin

@include perspective-origin(origin-x [origin-y]);
/*例*/
@include perspective-origin(0 0);

【参考URL】
http://compass-style.org/reference/compass/css3/transform/

【wordpress】編集者(お客様アカウントは)テキストエディタを隠す

// 編集者(お客様アカウントは)テキストエディタを隠す
if (!current_user_can('level_10')) {
add_filter( 'wp_editor_settings', function ( $settings ) {
    if ( user_can_richedit() ) {
        $settings['quicktags'] = false;
    }

    return $settings;
} );
}


【参考URL】
https://teratail.com/questions/36972

【wordpress css】mw wp formのチェックボックススタイリング

.contact_form input[type="checkbox"]{ 
  display: none;
}
  
.contact_form label{
  cursor: pointer;  
}

  
.contact_form label {
  position: relative;
  padding-left: 33px;     
}

.contact_form label:before{
  width: 20px;
  height: 20px;
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  background: #fff;
  border: 2px solid #AAAAAA;
}

.contact_form .mwform-checkbox-field-text:after{
    width: 10px;
    height: 5px;
    border: 2px solid $deep_blue;
    content: '';
    position: absolute;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    left: 6px;
    top: 6px;
    border-top: none;
    border-right: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  opacity: 0;
    
}
      
.contact_form input[type="checkbox"]:checked ~ .mwform-checkbox-field-text:after {
    opacity: 1;
}

【sass】sassフレームワークprofoundgridの使いかた

①sassフォルダにダウンロードデータの中のprofoundgrid/sass/grid/_grid.scssを入れる

②style.scssの冒頭に

@import "_grid.scss";

をいれる

③すぐ下のおれおれ変数ゾーンに以下の変数を入れる。
※ここで注意したいことが。この3つに「%指定」と「px指定」が混ざっていると、エラーが出てSassがコンパイルされない。

$total_width:100%; //カラムの総幅。px/%指定が可能
$container_margin:2%; //container左右のマージン。px/%/auto指定が可能
$gutter_width:2%; //生成カラムの余白(ガーター)幅。px/%指定が可能


また、カラム数も自分で決めることができます。よほどのことがなければ変えなくていい。

$total_columns:12;//カラム数。デフォルトは12


④例えば、PCビューでは3つの要素が横並び、タブレットでは左2つの要素が横並び、最後の要素が段落ちして全幅にしたいときは以下のコード。

f:id:miukro:20181018164625p:plain




f:id:miukro:20181018164636p:plain

.container{
  width: 100%;
  margin:auto;
  position:relative;
  padding: 0 8.75%;
  box-sizing: border-box;
  @include media(min_container){
    padding: 0;
    max-width: 1640px;
  }
}

.grid_container{
  @include container();
  @include clearfix();
  @include media(tablet){
    @include generate_grid_positions(div,6);
  }
}


.cc{
  @include column(4);
  background: blue;
  height: 500px;
  @include media(tablet){
    @include column(6);
    margin-bottom: 10px;
  }
}

.grid_container .cc:nth-child(1){
  @include push(0);
}

.grid_container .cc:nth-child(2){
  @include push(4);
  @include media(tablet){
    @include push(6);
  }
}

.grid_container .cc:nth-child(3){
  @include push(8);
  @include media(tablet){
    @include push(0);
    @include column(12);
  }
}


全体を囲う要素containerを最大幅1640pxにして、その子要素にgrid_containerを入れる。
このgrid_containerがgridシステムの親要素として機能させるためprofoundgridのmixinである@include containerと@include clearfixを入れ、
メディアクエリ内で@include generate_grid_positions(div,6);を設定。引数はgrid_containerの子要素と、デフォルトとして一つの要素に何カラム使うのかの数値を。
メディアクエリでレイアウトを変えたい時、grid_containerにこの@include generate_grid_positions(div,6);をいれてやらないと、要素が重なってしまう。

あとはgrid_containerの子要素であるdiv.ccに@include column()と@include push()を設定。メディアクエリ内でこのmixinを設定することでブレイクポイントでレイアウトが変えられる。


【参考サイト】
http://commonsense-design.com/web/profound-grid-introduction/

制作側でキャッシュを削除

画像やcssに以下の記述

<img src=”img/sample.png?date=180617” alt=”○○キャンペーン”>
<link href=”css/sample.css?date=180617” rel=”stylesheet”>
<script src=”js/sample.js?date=180617“></script>

【参考URL】
https://nichiyogogo.com/not_load_cache/