💡📁📌〰🙏💩💯💬

povo2.0(BCJ用)：070-3773-4558

文字数	スペース	タブ	行数
0	0	0	0
0

正規表現

特殊文字	説明
\t	タブ(Dwの置換でも有効)
\r\n	改行(Dwの置換でも有効)
\	メタ文字のエスケープに使用。 メタ文字は . * + ? | [ ] ( ) { } ^ $ \ の14種類。 / は正規表現の場合エスケープ不要、JSやPythonの場合はエスケープ必要。
^	入力の先頭 【例】：http から始まって欲しい際は、 ^(http):\/\/ と記述。
$	入力の末尾 【例】：URLが com で終わって欲しい際は、 (com)$ と記述。
*	直前の文字の0回か1回以上の連続 【例】： ab*d と記述した場合は abcd, abd, ad などにマッチする。
+	直前の文字の1回以上の連続
.	改行文字以外のあらゆる1文字 【例】： ab.d のように書いた場合は、 abcd, abad, ab d にマッチする。
.*	改行文字以外のあらゆる文字の0回以上の連続 【例】：https://www.abc.com/ ドメインの全ページをマッチさせる場合は https://www\.abc\.com/.* と記述。
.+	全ての文字の1回以上の連続
(https|http)	https または http
[ABC]	AかBかCのいずれか一文字
[^ABC]	AかBかCのいずれか以外の文字
(?!.*ABC)	ABCを含まない

エスケープが必要な文字

エスケープ前	エスケープ後	注意点
\	\\	エスケープを行う文字そのものなので、\ だけの記述はできません。\ にマッチングさせたい場合は \\ と記述してください。
*	\*
+	\+
.	\.
?	\?
{ }	\{\}	出現回数指定文字なのでエスケープが必要
( )	\(\)	エスケープしないと後方参照が作成される。またはグループ化される。
[ ]	\[\]	直前文字の出現回数指定文字なのでエスケープが必要
^	\^	行頭を指定することになる。
$	\$	行末を指定することになる。Perlの場合は、変数の先頭文字である。
-	\-	[　]の中に書く場合のみエスケープが必要
|	\|
/	\/	Perlでは / が正規表現の指定になるのでエスケープが必要。言語によっては、" がエスケープ必要となる。

最短一致(改行を含まない場合)

【例】：<a href="/about">About</a> | <a href="/access">Access</a> | <a href="/contact">Contact</a>
で、それぞれの<a>~</a>タグのみ指定したい場合

<a.*?>(.*?)<\/a>

正規表現は原則最長一致。
最短一致でマッチさせたい場合は、繰り返しで使用するメタキャラクタの最後に「?」を加えたパターンを指定します。

最短一致(改行を含む場合)

【例】：
<div>
    <dl class="clearfix">
      <dt>アクセス</dt>
      <dd>「麻布十番駅」より徒歩3分</dd>
    </dl>
</div>
<div>
    <dl class="clearfix">
      <dt>アクセス</dt>
      <dd>「渋谷駅」B5出口より徒歩5分</dd>
    </dl>
</div>
で、それぞれの<dl>~</dl>のみ指定したい場合

<dl class="clearfix">[\s\S]*?<\/dl>

行間相関表

pt	LH1.2	LH1.5
10	12	15
11	13.2	16.5
12	14.4	18
13	15.6	19.5
14	16.8	21
15	18	22.5
16	19.2	24
18	21.6	27
20	24	30
22	26.4	33
24	28.8	36
26	31.2	39
28	33.6	42
30	36	45
32	38.4	48
34	40.8	51
36	43.2	54
40	48	60
48	57.6	72
56	67.2	84
64	76.8	96
72	86.4	108
80	96	120
88	105.6	132
96	115.2	144
104	124.8	156
112	134.4	168
120	144	180
128	153.6	192
136	163.2	204
144	172.8	216

フォーム部品HTML

絵文字一覧

https://www.chatwork.com/#!rid43504347-1614213197240205312

✨✨
💕
🌿💕
☝️
🦁🌴
😅
☺️🧡
🤭🖋📚
🥰💕
🤲✨
🎶🔥
🌺🙌
😆🙌
🌺🌴💖🤙✨✨
🌹

baseタグ

<base href="http://www.htmq.com/html/base.htm" target="_self">

テキストフラグメント

【基本】

#:~:text=[開始テキスト]

https://miratra.crav.jp/658#:~:text=集合時

---

【応用】

#:~:text=[開始テキスト],[終了テキスト]

https://miratra.crav.jp/658#:~:text=集合時,ありがとう。

#:~:text=[開始直前テキスト-],[開始テキスト],[終了テキスト],[-終了直後テキスト]

https://miratra.crav.jp/658#:~:text=オンロード-,ツーリング
https://miratra.crav.jp/658#:~:text=ツーリング,-ですwww
https://miratra.crav.jp/658#:~:text=今日は-,ビーナスライン,ツーリング,-です

実体参照

文字	実体参照
小なり(<)	&lt;
大なり(>)	&gt;
コピーライト(©)	&copy;
登録商標(®)	&reg;
半角スペース	&nbsp;
アンド(&)	&amp;
ダブルクオテーション(")	&quot;
シングルクオテーション(')	&#039;

境界線コメントアウト

/*-------------------- hr --------------------*/

/* ==========================================================================
 * 
 * ========================================================================== */

HR-Kit Module CSS Framework

HR-Kit Sample
module.css
module_option.css

グローバルナビゲーション

フッターを常にページ末尾に固定

プレビューサイト
参考サイト

#page-container {
	min-height: 100vh;
}
footer {
	position: sticky;
	top: 100vh;
}

下線を引く

太い	background: linear-gradient(transparent 50%, #ffea96 50%);
細い	background: linear-gradient(transparent 70%, #ffea96 70%);

縮小画像のぼやけを防止する(QRコードなど)

imgタグに以下を追記

image-rendering: pixelated;
または
image-rendering: crisp-edges;  (←効かない気がする)

nth-child と nth-of-type

【基本】

p:nth-child(2) { color: blue; }
p:nth-of-type(2) { color: red; }

<section>
    <h1>親の1番目の子供かつ1番目のh1タグ</h1>
    <p>親の2番目の子供かつ1番目のpタグ</p>
    <p>親の3番目の子供かつ2番目のpタグ</p>
</section>

よって、nth-of-typeの方が使用頻度が高いと思う。

---

【実務レベル】

.ex:nth-of-type(2) { color: red; }

<section>
    <h1>親の1番目の子供かつ1番目のh1タグ</h1>
    <p>親の2番目の子供かつ1番目のpタグ</p>
    <p class="ex">親の3番目の子供かつ2番目のpタグ</p>
    <p class="ex">親の4番目の子供かつ3番目のpタグ</p>
</section>

.ex:nth-of-type(2) はあくまで p.ex:nth-of-type(2) の略であるため、①親の2番目のpタグかつ、②class="ex"が赤となる。
(ポイント⇒⇒⇒nth-of-typeは、class="ex"に作用するのではなく、要素(p)に対して作用する。)

backgroundプロパティ ショートハンド

background: color image repeat origin positionX positionY/sizeX sizeY attachment clip;
(【例】：background: #333 url('bg.png') no-repeat border-box left top/contain fixed content-box;)

color	初期値: transparent その他値: 色指定
image	初期値: none その他値: url("")
repeat	初期値: repeat その他値: no-repeat、repeat-x、repeat-y
origin	初期値: padding-box その他値: border-box、content-box
position	初期値: 0% 0% その他値: left、center、right、top、center、bottom、数値指定
size	初期値: auto auto その他値: contain、cover
attachment	初期値: scroll その他値: fixed（スクロールに伴って、背景画像も移動する）
clip	初期値: border-box その他値: padding-box、content-box

テキスト非表示

overflow: hidden;
text-indent: 100%;
white-space: nowrap;

テキスト境界線

光らせた境界線(参考サイト)

text-shadow: 0 0 10px #fff, 0 0 15px #fff;

---

通常の境界線

text-shadow: 
	#fff 2px 0px 2px, #fff -2px 0px 2px,
	#fff 0px -2px 2px, #fff -2px 0px 2px,
	#fff 2px 2px 2px, #fff -2px 2px 2px,
	#fff 2px -2px 2px, #fff -2px -2px 2px,
	#fff 1px 2px 2px, #fff -1px 2px 2px,
	#fff 1px -2px 2px, #fff -1px -2px 2px,
	#fff 2px 1px 2px, #fff -2px 1px 2px,
	#fff 2px -1px 2px, #fff -2px -1px 2px,
	#fff 1px 1px 2px, #fff -1px 1px 2px,
	#fff 1px -1px 2px, #fff -1px -1px 2px;

ずるい境界線

---

<hr style="border-top: 1px solid rgba(0, 0, 0, .2); box-shadow: rgba(255, 255, 255, .3) 0 1px; 0">

①border-topは黒、②box-shadowは白にして、背景の色に合わせてそれぞれの透明度を変更する。

テキストに波の下線

「だいじょうぶ。ぼくにヒツジの絵をかいて。」

テキストの上にドットをつけて強調

「だいじょうぶ。ぼくにヒツジの絵をかいて。」
dot … ドット
circle … 丸
double-circle … 二重丸
triangle … 三角

jQueryプラグイン

• back-to-top.js
• drawer.js
• magnific-popup.js
• video.js
• class-cycler
• clipboard.js
• fixscroll.js
• tooltips
• reCAPTCHA
• コピー禁止
• CSVロード
• 離脱時ポップアップ表示
• プッシュ通知登録誘導ダイアログ

CSS指定

$(要素).css('プロパティ', '値');

$(要素).css({'プロパティ':'値','プロパティ':'値'});

jQuery実行順序

即時実行（JavaScript即時関数）	(function() { 処理内容 })();
即時実行（jQuery即時関数）	(function($) { 処理内容 })(jQuery);
DOMツリー構築完了後に実行	$(function() { 処理内容 });
画像、動画などの関連データの全ての読み込みが完了したら実行	$(window).on('load',function() { 処理内容 });

onイベント一覧

https://qiita.com/temori1919/items/bcbfc4a93301ef902d1d

blur	要素がフォーカスを失った時に発生
focus	要素がフォーカスを得た時に発生
load	ドキュメント内の全リソースの読み込みが完了したときに発生
resize	windowの大きさが変更された時に発生
scroll	ドキュメントがスクロールした時に発生
click	クリックされた時
dblclick	ダブルクリックされた時
mousedown	要素上でマウスが押された時に発生
mouseup	要素上でマウスが押され、上がった時に発生
mousemove	要素上でマウスが移動している時に発生
mouseover	マウスが要素に入った時に発生。子要素でも発生
mouseout	マウスが要素から外れた時に発生。子要素でも発生
mouseenter	マウスが要素に入った時に発生。子孫要素に入った時には発生しない
mouseleave	マウスが要素から外れた時に発生。子孫要素から外れた時には発生しない
change	要素がフォーカスを得て値の修正が完了した時に発生
select	type属性値が"text"のinput要素、textarea要素のテキストが選択された時に発生
submit	フォームが送信された時に発生
keydown	キーが押し下げられた時に発生
keypress	キーが押された時に発生
keyup	キーが上がった時に発生
error	javascriptのエラーが発生した時に発生

遅延実行

$(window).on("load", function() {
	setTimeout(function(){
		処理内容
	},1000);
});//ロードされて1秒後に実行

クリックさせる

$(要素)[0].click();

document.getElementById('ID要素').click();

if文

$(function() {
 	var age = 65;
	if (age < 20) {
		console.log('未成年です。');
	} else if (age >= 65) {
		console.log('シニアです。');
	} else {
		console.log('成人です。');
	}
});

現在のスクロール位置取得

$(window).on('scroll',function() {
    console.log($(document).scrollTop());
});

特定の要素の座標(top,left)を取得

console.log($('.float-btn').offset()); //topとleftを両方取得

console.log($('.float-btn').offset().top);

console.log($('.float-btn').offset().left);

each文(繰り返し)

$('.className').each(function() {
	処理内容
});

パラメータ取得

const arg  = new Object;
url = location.search.substring(1).split('&');
for(i=0; url[i]; i++) {
	const k = url[i].split('=');
	arg[k[0]] = k[1];
}
const parmVal = arg.pl; //パラメータ"pl"の値を取得
console.log(parmVal);

比較演算子と論理演算子

等しい	==
等しくない	!=
左が右より大きい場合TRUE	4 > 3
左が右以上の場合TRUE	4 >= 3
左が右より小さい場合TRUE	3 < 4
左が右以下の場合TRUE	3 <= 4
かつ	&& / and
もしくは	|| / or

URLの取得

【例】：http://hostname.jp/pathname/index.html?search=1&search2=1#hash

URL全体を取得	var url = window.location.href;
親iframeのURL全体を取得	var parentUrl = parent.location.href;
http:(プロトコル)を取得 ※コロンの後のスラッシュ2つは取得されない	var protocol = window.location.protocol;
hostname.jpを取得	var hostname = window.location.hostname;
/pathname/を取得	var pathname = window.location.pathname;
?search=1&search2=1を取得	var parm = window.location.search;
#hashを取得	var hash = window.location.hash;

特定のウィンドウ幅のみ実行

$(window).on("load resize", function() {
	if ($(window).width() <= 765) {//765px以下のときのみ実行
		処理内容
	};
});

ユーザーエージェント判定遷移

//※即時関数で実行すること!
(function() {
    var ua = navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
		alert('スマートフォン');
		//if (window.confirm('スマートフォン向けサイトに移動しますか?')) {
			location.href = "sp.html";
		//}
	} else if ((ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) && screen.width <= 768) {
		alert('タブレット');
		//if (window.confirm('タブレット向けサイトに移動しますか?')) {
			location.href = "tablet.html";
		//}
	} else {
		alert('デスクトップ');
    }
})();

iframeの高さを自動調整

同一ドメインのiframeに限る。

$(window).on("load", function() {
	$('iframe').each(function() {
		if (typeof $(this).attr('height') == 'undefined') {
		$(this).height(this.contentWindow.document.documentElement.scrollHeight+1);
		}
	});
	$('iframe').triggerHandler('load');
});

スマホでデベロッパーモード

<script src="https://cdnjs.cloudflare.com/ajax/libs/eruda/3.4.0/eruda.min.js"></script>
<script>eruda.init();</script>

配列を展開する

print_r ($hoge);

echoにHTMLを含める

echo 'HTML' . PHP構文 . 'HTML';
【例】：echo '<a href="' . get_category_link( $category[0]->term_id ) . '">' . $category[0]->cat_name . '</a>';

if文

<?php if(条件){ ?>

<?php }elseif(条件2){ ?>

<?php }else{ ?>

<?php } ?>

<?php if(条件): ?>

<?php elseif(条件2): ?>

<?php else: ?>

<?php endif; ?>

Wordpressオリジナルテンプレ

Wordpressテストサーバー
管理画面
ID:coding　PASS:coding　Mail:crav.entertainment@gmail.com

リダイレクトループが発生した場合

https://wp-doctor.jp/blog/2016/07/18/...

/wp/のサイトアドレスをルートに変更

1. ルート直下の.htaccessを「ORIGINAL.htaccess」等に名称変更し、ルートディレクトリに.htaccessが存在しない状態にする。
2. WP管理画面の 設定 → 一般設定を開く。
3. サイトのアドレス (URL) 欄のみを、ルートディレクトリのURLに変更。
4. 変更を保存。エラーメッセージが出ても無視し、サイトを開こうとしない。
5. WPディレクトリにある index.php と .htaccess をルートディレクトリにコピー(移動はしない)。
   (パーマリンク設定を使っていなければ、.htaccess ファイルは存在しない場合がある。)
6. ルートディレクトリの index.php 開き、下記に変更し、PUT。
   

   require( dirname( __FILE__ ) . '/wp-blog-header.php' );

   を

   require( dirname( __FILE__ ) . '/wp/wp-blog-header.php' );

   (/wpを足すだけ)
7. 新しいURLからログインする。例えば http://example.com/wp/wp-admin/ など。
8. WP管理画面の 設定 > パーマリンク設定を開き、特に何も変更せず変更を保存。
9. サイトが正常に表示されるかを確認。
10. 「ORIGINAL.htaccess」を開き、内容をコピーして、ルートディレクトリの.htaccessに貼付け。
11. サイトが正常に表示されるかを再度確認。

WordPressで下書きプレビューが出来ない

以下を.htaccessに追加する = URLにpreview=trueが含まれる場合、index.htmlではなくindex.phpを実行する

RewriteCond %{QUERY_STRING} preview=true
RewriteRule ^/?$ /index.php$1 [L]

ワードプレス用jQuery記述方法

jQuery(function($){
	alert('jQuery Alert Test. OK?');
	$('body').css('backgroundColor','#ccc');
})(jQuery);

テンプレートタグ

ホームURL	<?php echo home_url(); ?>
テーマディレクトリ呼び出し	<?php echo get_template_directory_uri(); ?> 【例】：<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/top.css">
uploadsディレクトリ呼び出し	<?php $upload_dir = wp_upload_dir(); echo $upload_dir['baseurl']; ?> 【例】：<img src="<?php $upload_dir = wp_upload_dir(); echo $upload_dir['baseurl']; ?>/thumbnail/thumbnail01.png">
記事タイトル	<?php the_title(); ?>
投稿日	<?php the_time('Y/n/j'); ?>
更新日	<?php if (! get_the_modified_time('Y/n/j') != get_the_time('Y/n/j')) : ?> <?php the_modified_date('Y/n/j'); ?> <?php endif; ?>
投稿者	<?php echo get_the_author() ?>
記事編集リンク	<?php edit_post_link('<span>編集する','','</span>'); ?>
記事ID、クラス	<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
管理画面ログイン	<?php echo wp_login_url(get_permalink()); ?>
管理画面ログアウト	<?php echo wp_logout_url(get_permalink()); ?>
管理画面	<?php echo admin_url(); ?>

インクルード方法

<?php get_template_part( 'include/cm/incl_breadcrumb' ); ?>

<?php include (TEMPLATEPATH .'/include/XXXXX.php'); ?>

[include file='include/incl_global_footer']

カテゴリ・タグ

//記事のカテゴリー情報を取得
$cats = get_the_category();
$cat_id = $cats[0]->cat_ID;					//カテゴリID
$cat_name = $cats[0]->cat_name;				//カテゴリー名
$cat_slug  = $cats[0]->category_nicename;	//カテゴリースラッグ
$cat_url = get_category_link( $cat_id );	//カテゴリーURL

//タグ
$tags = get_the_tags();
$tag_id = $tags[0]->term_id;				//タグID
$tag_name = $tags[0]->name;					//タグ名
$tag_slug  = $tags[0]->slug;				//タグスラッグ
$tag_url = get_tag_link( $tag_id );			//タグURL

インストールしたらやること

• WP page navi
• 表示件数を1件に

メンテナンスモード

ErrorDocument 503 /503.html

### Maintainance ###
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{REQUEST_URI} !/503\.html$
RewriteCond %{REQUEST_URI} !\.css$
RewriteCond %{REQUEST_URI} !\.js$
RewriteCond %{REQUEST_URI} !\.jpg$
RewriteCond %{REQUEST_URI} !\.gif$
RewriteCond %{REQUEST_URI} !\.png$
RewriteCond %{REQUEST_URI} !\.svg$
RewriteCond %{REMOTE_ADDR} !=106.128.47.6
RewriteRule ^(.*)$ /503.html [R=503,L]
</IfModule>

CTAクラス名

①CTAボタン系(②~⑥)すべて (エンゲージメント計測用)	sitest__goal--cta
②電話系ボタン	sitest__goal--tel
③「お問い合わせはこちら」系ボタン	sitest__goal--contact
④「資料請求はこちら」系ボタン	sitest__goal--document
⑤「ご予約はこちら」系ボタン	sitest__goal--reserve
⑥「トライアルはこちら」系ボタン	sitest__goal--trial
⑦「会員登録はこちら」ボタン	sitest__goal--reg
⑧「確認画面に進む」ボタン	sitest__goal--confirm
⑨「送信する」ボタン	sitest__goal--submit

PC版からSP版にリダイレクト

(function() {
    var ua = navigator.userAgent;
    if (ua.indexOf('iPhone') > 0 || ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0) {
		window.location.href = "sp";
	}
})();

SiTest遅延コールトラッキング

<!-- ========== SiTest Call CTA Tracking ========== -->
<script>
$(window).on('load',function() {
	var windowPauseTime = undefined;
	$('.sitest__goal--tel').on('click',function(){
		windowPauseTime = (new Date).getTime();
	});
	function windowActive() {
		var windowActiveTime = (new Date).getTime();
		var diffTime = windowActiveTime - windowPauseTime;

		if (diffTime > 20000) {//秒数を指定(1秒=1000)
			sitest.achieve_for({gid:XXXXX, sid:XXXXX});//カスタムゴールコードを貼付
			console.log('SiTest custom goal code has been triggered.');
			windowPauseTime = undefined;
		} else {
			console.log('SiTest custom goal code ERROR');
			windowPauseTime = undefined;
		}
	}
	window.addEventListener('focus', windowActive);
});
</script>
<!-- ========== END SiTest Call CTA Tracking ========== -->

SiTest Basic Codeコメントアウト

<!-- ========== SiTest Basic Code ========== -->

<!-- ========== END SiTest Basic Code ========== -->