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

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

【css】スマホ 横向きでのメディアクエリ

@media screen and (max-width: 736px) and (orientation: landscape){

}

sass メモ

ネスト

#main {
	section {
		margin-bottom: 50px;
		h1 {
			font-size: 140%;
		}
		p, ul {
			margin-bottom: 1.5em;
		}
		p.notes {
			color: red;
		}
	}
}

子孫セレクタ以外のセレクタのネスト

#main {
	section {
		+ section {
			margin-top: 50px;
		}
		> h1 {
			font-size: 140%;
		}
	}
}

@mediaのネスト

cssの場合はネストが使えないためメディアクエリを各位置が離れてしまって見通しが悪いのだがsassならネストで便利

#main{
         width: 640px;
        @media screen and (max-width: 640px){
                 float: none;
                 width: auto;
        }
}

セレクタの参照 &

ネストして、中に&がある場合一つ上のセレクタが&になる。

#side {
	width: 240px;
	body.top & {
		width: 300px;
	}
	ul.bnr {
		margin-bottom: 10px;
	}
}

また、親セレクタの参照は、疑似クラスやセレクタの前にもかける。

a {
	text-decoration: none;
	&:hover {
		text-decoration: underline;
	}
}

ul.pageNav {
	li {
		margin: 0;
		width: 50%;
		&.prev {
			float: left;
		}
		&.next {
			float: right;
		}
	}
}

変数

変数は$の直後に変数名を指定し、:のあとに値を指定。

$red: #cf2d3a;

.notes{
  color:$red; 
}

演算

sassはcalcなしで演算できる

.ex01{
  width: 500px + 8;
}

.ex02{
  width: 500px * 8;
}

.ex03{
  width: (500px / 8);
}

スタイルの継承 @extend

.box {
  margin: 0 0 30px;
  padding: 15px;
  border: 1px solid #ccc;
}

.item{
  @extend .box;
}

extendの便利な使い方

.extend.scss

.btnBase {
  text-align: center;
  margin: 0 0 10px;
  a {
    display: block;
    padding: 10px 20px;
    background: #999;
    color: #fff;
  }
}

.imgL {
  float: left;
  margin-right: 15px;
}


.style.scss

@import "extend";

ul.btnList {
	li {
		@extend .btnBase;
	}
}
.item {
	width: 300px;
	.photo {
		@extend .imgL;
		margin-bottom: 10px;
	}
	.text {
		overflow: hidden;
		.btn {
			@extend .btnBase;
			text-align: left;
		}
	}
}
.btnBase, ul.btnList li, .item .text .btn {
  text-align: center;
  margin: 0 0 10px;
}
.btnBase a, ul.btnList li a, .item .text .btn a {
  display: block;
  padding: 10px 20px;
  background: #999;
  color: #fff;
}
.btnBase a:hover, ul.btnList li a:hover, .item .text .btn a:hover {
  background: #ccc;
  color: #333;
}

.imgL, .item .photo {
  float: left;
  margin-right: 15px;
}

.item {
  width: 300px;
}
.item .photo {
  margin-bottom: 10px;
}
.item .text {
  overflow: hidden;
}
.item .text .btn {
  text-align: left;
}

あらかじめ用意した@extend専用のsassファイルに書かれている.btnBaseというセレクタのスタイルを2か所で継承している。
また、.btnでは、.btnBaseのtext-align:centerを上書きして値をleftに変えてる。
このように同じスタイルを使ってから一部を上書きしたり、extend.scssの.imgLのスタイルを継承しつつスタイルを追加している。

@extendで継承したセレクタはグループ化されて同じスタイルが適用され、上書きや追加したスタイルだけ別で生成されるため、合理的なソースになる。
cssでも同じスタイルだけカンマ区切りでグループ化すれば、cssファイルが軽くなり、合理的なソースになる。しかし、ルールセットがバラバラになってしまい、どこに何のスタイルが適用されるのかがわかりにくくなる。
その結果、同じスタイルを何度も書くという作業が非常に多くなってしまう。extendはこの問題を解決してくれる。

extend専用のプレースホルダセレクタ

extendはセレクタを継承する機能なので、コンパイル後のcssには必ず継承元のセレクタも生成されていた。しかし、extend専用としてセレクタを書きたい場合など、継承元のセレクタは不要になる場合もある。そういった場合にIDセレクタやクラスセレクタ
#や.の代わりに%を使う。

sass

// @extend 専用のプレースホルダーセレクタ
%boxBase {
	padding: 15px;
	border: 1px solid #999;
}

// プレースホルダーセレクタを継承
.item {
	@extend %boxBase;
	margin-bottom: 20px;
}
section {
	@extend %boxBase;
	margin-bottom: 60px;
}

css

.item, section {
  padding: 15px;
  border: 1px solid #999;
}

.item {
  margin-bottom: 20px;
}

section {
  margin-bottom: 60px;
}

@media内では@extendは使用できない

これを解決するには、@media内に継承したいセレクタを描く必要がある。

@media all and (orientation:landscape) {
	%btnBase {
		display: inline-block;
		padding: 5px 10px;
		background: #eee;
	}
	a {
		@extend %btnBase;
	}
}

柔軟なスタイルの定義が可能なミックスイン @mixin

// ミックスインを定義
@mixin boxSet {
	padding: 15px;
	background: #999;
	color: white;
}

// 定義したミックスインを呼び出し
.relatedArea {
	@include boxSet;
}

引数を使ったミックスイン

引数を使うことで、@extendとの違いがわかる。引数はミックスインで定義した値の一部を変更する機能。
引数を使う場合、ミックスイン名の直後に()を書き、カッコ内に引数をかく。

scss

@mixin kadomaru($value){
  -moz-border-radius: $value;
  -webkit-border-radius: $value;
  border-radius: $value;
}

.box {
  @include kadomaru(3px);
  background: #eee;
}

.item{
  border: 1px solid #999;
  @include kadomaru(5px 10px);
}

css

.box {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: #eee;
}
.item {
  border: 1px solid #999;
  -moz-border-radius: 5px 10px;
  -webkit-border-radius: 5px 10px;
  border-radius: 5px 10px;
}

引数に初期値を定義

引数を使う際に、毎回値を定義するのは面倒。そこで、頻繁に使う値を引数の初期値として定義しておくと、初期値を変えたい時だけ値をかけばすむようになる。
引数の初期値を定義している場合は()を省略できる。省略しない場合は()だけをかく。

@mixin kadomaru($value: 3px) {
	-moz-border-radius: $value;
	-webkit-border-radius: $value;
	border-radius: $value;
}
.boxA {
	@include kadomaru;
	background: #eee;
}
.boxB {
	@include kadomaru();
	background: #f1f1f1;
}

引数を複数指定する

引数は、カンマ区切りで複数指定できる。


scss

@mixin boxBase($margin: 30px 0, $padding: 10px){
  margin: $margin;
  padding: $padding;
}

.boxA{
  @include boxBase;
  background: #eee;
}

.boxB {
  @include boxBase(0 0 50px, 20px);
  background: #f1f1f1;
}

css

.boxA {
  margin: 30px 0;
  padding: 10px;
  background: #eee;
}

.boxB {
  margin: 0 0 50px;
  padding: 20px;
  background: #f1f1f1;
}

カンマを使うプロパティには可変長引数を利用する

先ほど引数を複数指定する方法だったが、cssのプロパティによってはカンマを使うものがある。例えばtext-shadowやbox-shadowが該当するが、これらを値としてそのまま使うとエラーになる。

以下のコードはエラーになるコード

@mixin shadow($value) {
	text-shadow: $value;
}

h2 {
	@include shadow(8px 8px 0 #999, 15px -10px 0 #eee);
}

そこで、次のように引数の跡に「...」と記述する可変長引数を使う。

@mixin shadow($value...){
  text-shadow: $value;
}

h2{
  @include shadow(8px 8px 0 #999, 15px -10px 0 #eee);
}

WordPressのタームをリンクなしで表示する方法

<?php
$terms = get_the_terms( get_the_ID(), 'タクソノミー' );
if ( !empty($terms) ) : if ( !is_wp_error($terms) ) :
?>
<ul>
<?php foreach( $terms as $term ) : ?>
<li><?php echo $term->name; ?></li>
<?php endforeach; ?>
</ul>
<?php endif; endif; ?>


【参考URL】
https://www.webantena.net/wordpress/terms-get-the-terms-get-the-id-taxonomy/

【wordpress】ブログ編集画面でカテゴリーを一つしか選択できないようにする

add_action( 'admin_print_footer_scripts', 'limit_category_select' );
function limit_category_select() {
  ?>
  <script type="text/javascript">
    jQuery(function($) {
      // 投稿画面のカテゴリー選択を制限
      var cat_checklist = $('.categorychecklist input[type=checkbox]');
      cat_checklist.click( function() {
          $(this).parents('.categorychecklist').find('input[type=checkbox]').attr('checked', false);
          $(this).attr('checked', true);
      });

      // クイック編集のカテゴリー選択を制限
      var quickedit_cat_checklist = $('.cat-checklist input[type=checkbox]');
      quickedit_cat_checklist.click( function() {
          $(this).parents('.cat-checklist').find('input[type=checkbox]').attr('checked', false);
          $(this).attr('checked', true);
      });

      $('.categorychecklist>li:first-child, .cat-checklist>li:first-child').before('<p style="padding-top:5px;">カテゴリーは1つしか選択できません</p>');
    });
  </script>
  <?php
}

【参考URL】
https://www.nxworld.net/wordpress/wp-limit-category-select.html

【wordpress】ブログ編集画面でブログのカテゴリーなどのタクソノミーに一つ最初からチェック

// ブログのカテゴリーに一つ最初からチェック
add_action( 'admin_head-post-new.php', 'default_taxonomy_select' );
function default_taxonomy_select() {
?>
  <script type="text/javascript">
    jQuery(function($) {
      $('#blog_categorychecklist li:first-child input[type="checkbox"]').prop('checked', true);
    });
  </script>
<?php
}

上記の
$('#blog_categorychecklist
この部分のblogをカスタム投稿名にする。要素を検証でID名確かめることもできるけどね...


【参考URL】
https://www.nxworld.net/wordpress/wp-default-taxonomy-select.html

【jquery】ブラウザごとに違うクラス付与

var ua, verArr, version, ieVer, ie, chrome, firefox, opera, safari;
ua = navigator.userAgent;
 
// IEかそれ以外かどうかを判定
if (ua.match(/msie/i) || ua.match(/trident/i)) {
    // IEの場合はバージョンを判定
    verArr = /(msie|rv:?)\s?([\d\.]+)/i.exec(ua);
    version = (verArr) ? verArr[2] : '';
    version = version.replace('.', '_');
    ieVer = "ie"+version;
 
    // "ie11_0"等を付与
    $("html").addClass(ieVer);
} else {
    if (ua.match(/chrome/i)) {
        // chrome
        $("html").addClass('chrome');
    } else if(ua.match(/firefox/i)) {
        // firefox
        $("html").addClass('firefox');
    } else if(ua.match(/opera/i)) {
        // opera
        $("html").addClass('opera');
    } else if(ua.match(/safari/i)) {
        // safari
        $("html").addClass('safari');
    }
}

【参考URL】
https://nodoame.net/archives/5378

【jquery】リサイズが完全に完了したらPC スマホ 画像切り替え

		// スマホ画像きりかえ
	  // 置換の対象とするclass属性。
  var $elem = $('.switch');
  // 置換の対象とするsrc属性の末尾の文字列。
  var sp = '_sp.';
  var pc = '_pc.';
  // 画像を切り替えるウィンドウサイズ。
  var replaceWidth = 768;

  function imageSwitch() {
    // ウィンドウサイズを取得する。
    // var windowWidth = parseInt($(window).innerWidth());
    var windowWidth = window.innerWidth;
    // ページ内にあるすべての`.js-image-switch`に適応される。
    $elem.each(function() {
      var $this = $(this);
      // ウィンドウサイズが768px以上であれば_spを_pcに置換する。
      if(windowWidth >= replaceWidth) {
        $this.attr('src', $this.attr('src').replace(sp, pc));

      // ウィンドウサイズが768px未満であれば_pcを_spに置換する。
      } else {
        $this.attr('src', $this.attr('src').replace(pc, sp));
      }
    });
  }
  imageSwitch();

  // 動的なリサイズは操作後0.2秒経ってから処理を実行する。
  var resizeTimer;
  $(window).on('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
      imageSwitch();
    }, 200);
  });

【参考URL】
https://www.tam-tam.co.jp/tipsnote/javascript/post8851.html

https://qiita.com/r_abe01/items/a3a2e94b5162d949037b(ブラウザサイズをjqueryとメディアクエリと合わせる)