フォント：サイズ ( font-size:12px; )

style="font-size:14px;"
<span style="font-size:14px;">　</span>
タグはHTML5では廃止されました
<font size="1" color="#0000ff">　</font>

フォント：カラー ( color:#ff0000; )

style="color:#ff0000;"
■FFFFFF
■FFFFCC
■FFFF99
■CCFF99
■99CCFF
■9999FF
■0000FF
■CCCCCC
■999999
■666666
■000000
■990000
■996666
■996699
■CC0000
■FF9999
■FFCCCC

フォント：行間 ( line-height:130%; )

style="line-height:150%;"

フォント：太さ ( font-weight: bold; )

標準（数値指定：400）
style="font-weight: normal;"
太字（数値指定：700）
style="font-weight: bold;"
細字（一段階細く）
style="font-weight: lighter;"

フォント：Times New Roman

style='font-size:14px;font-family : "Times New Roman","ＭＳ Ｐゴシック",sans-serif ;'

フォント：メイリオ

style='font-size:14px;font-family : "メイリオ","ＭＳ Ｐゴシック",sans-serif ;'

フォント：Google

<link href='http://fonts.googleapis.com/css?family=Noto+Sans' rel='stylesheet' type='text/css'>

リンク：タイトル ( title="" id="" )

<a href='http' title="" id=""></a>

新しい窓で開く
<a href='http' title="" id="" target="_blank"></a>

リンク：文字色固定

<a href='http' title="" id=""><span style="color:#000000">文字</span></a>

新しい窓で開く
<a href='http' title="" id="" target="_blank"><span style="color:#000000">文字</span></a>

リンク用：下線無 ( text-decoration:none; )

style="text-decoration:none;"

リンク用：電話番号

<a href="tel:000000">045-000-0000</a>

画像：タイトル ( title="" alt="" )

<img src="http" title="" alt="" />

画像用：切抜

rect(上 右 下 左)
<img src="http" title="" alt="" style="position: absolute;clip: rect(50px 500px 300px 100px);" />

左上固定から右下へ切る場合
<img src="http" title="" alt="" style="position: absolute;clip: rect(auto 500px 300px auto);" />

画像用：横縦 ( width="" height="" )

style="border:0;width:100px;height:100px;"

画像用：背景：色

style="background-color: #ffffff"

画像用：背景：URL

style='background: #ffffff url("http")'

余白マージン

style="margin:0px 0px 0px 0px;padding:0px 0px 0px 0px;"

テキスト位置：左 ( text-align:left; )

style="text-align:left;"

テキスト位置：中 ( text-align:center; )

style="text-align:center;"

テキスト位置：右 ( text-align:right; )

style="text-align:right;"

枠色：赤1px

style="border: 1px #ff0000 solid;"

枠色：緑2px

style="border: 2px #006600 solid;"

枠色：青3px

style="border: 3px #0000ff solid;"
■FFFFFF
■FFFFCC
■FFFF99
■CCFF99
■99CCFF
■9999FF
■0000FF
■CCCCCC
■999999
■666666
■000000
■990000
■996666
■996699
■CC0000
■FF9999
■FFCCCC

マウスオン画像変更

onmouseover="this.src='http';" onmouseout="this.src='http'"

カーソルの形変更

<a href='http' title="" id="" style="cursor: wait;"></a>
■：auto
■：default
■：pointer
■：crosshair
■：move
■：wait
■：text
■：help

DIV：フォント/縦横

<div style="width: 400px;font-size:14px;text-align:left;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;"></div>

DIV：フォント/縦横/枠/背景

<div style="width: 400px;font-size:14px;text-align:left;padding: 0px 0px 0px 0px;border: 1px #ff0000 solid;margin: 0px 0px 0px 0px;background-color:#ff0000;"></div>

DIV位置：左 ( float:left; )

<div style="float:left;"></div>

DIV位置：右 ( float:right; )

<div style="float:right;"></div>

DIV位置：クリア ( clear:both; )

<div style='clear:both;'></div>

DIV位置：クリア余白付

<div style='clear:both;margin: 0px 0px 0px 0px;'></div>

フレーム

<iframe src="http" width="800" height="800" ></iframe>
sandbox属性使用
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http" width="800" height="800"></iframe>
sandbox属性使用　横縦 100%
<iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http" width="100%" height="100%"></iframe>
カラー枠、背景 BOX入り
<div style="width: 400px;height:400px;padding: 0px 0px 0px 0px;margin: 0px 0px 0px 0px;border: 1px #ff0000 solid;background-color:#ff0000;"> <iframe sandbox="allow-same-origin allow-forms allow-scripts" src="http" width="100%" height="100%"></iframe></div>
↑縦 401px 横 401px 赤い1pxの枠がつきます

背景はブラウザにより透過か白なのでどちらかを設定
透過：background-color: transparent;
白：background-color: #ffffff;

スクロールバー非表示（HTML5廃止）
scrolling=”no”
CSS表示方法　overflow-y: hidden;

テーブル：枠 2列

<table border="0" width="790" cellpadding="0" cellspacing="0"> <tr><td>　</td><td>　</td></tr> </table>
tdタグ内で文字列を改行したくない場合
「nowrap」と入れるとtd～/td内の文字列は改行しません
widthで指定していても無視されます

テーブル：枠 3列

<table border="0" width="790" cellpadding="0" cellspacing="0"> <tr><td>　</td><td>　</td><td>　</td></tr> </table>

テーブル：枠 4列

<table border="0" width="790" cellpadding="0" cellspacing="0"> <tr><td>　</td><td>　</td><td>　</td><td>　</td></tr> </table>

テーブル：枠 5列

<table border="0" width="790" cellpadding="0" cellspacing="0"> <tr><td>　</td><td>　</td><td>　</td><td>　</td><td>　</td></tr> </table>

AMP用 ( Google AMPテスト )

AMP定型タグ

TOP：DOCTYPE / title / meta
<!DOCTYPE html><html amp lang="ja"><head><meta charset="utf-8"> <title>ページタイトル</title> <link rel="canonical" href="https"> <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> <script async custom-element="amp-auto-ads" src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script> <script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script> <script async custom-element="amp-sticky-ad" src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

TOP：style / head 〇〇は必須
<script type="application/ld+json"> { "@context": "http://schema.org", "@type": "NewsArticle", "mainEntityOfPage": { "@type": "WebPage" , "@id": "https://dw230.jp/f/eomonth/" } , "headline": "〇〇タイトル〇〇", "description": "〇〇ページ説明〇〇", "datePublished": "〇〇2018-08-09T00:00:00+0900〇〇", "dateModified": "〇〇2018-08-09T00:00:00+0900〇〇", "author": { "@type": "Person" , "name": "〇〇作成者〇〇" }, "publisher": { "@type": "Organization" , "name": "〇会社名〇" , "logo": { "@type": "ImageObject" , "url": "〇〇ロゴURL" , "height": 60 , "width": 600 } }, "image": { "@type": "ImageObject" , "url": "〇〇アイキャッチ画像" , "height": 400 , "width": 800 } } </script>

TOP：style / head
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style> <noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> <script async src="https://cdn.ampproject.org/v0.js"></script> </head>

AMPページ ( canonical )

<link rel="canonical" href="http">

AMPリンク先（元ページ）( amphtml )

<link rel="amphtml" href="http:amp">

画像 ( amp-img )

<amp-img src="http" width="1600" height="900" layout="responsive"></amp-img>

画像用：横縦

style="width:100px;height:100px;"

文字カラー

文字赤
<span style="color:#ff0000">文字赤</span>

文字緑
<span style="color:#006600">文字緑</span>

文字青
<span style="color:#0000FF">文字青</span>

フレーム：地図 ( amp-iframe )

<amp-iframe width=600 height=400 layout="responsive" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups" src="https"></amp-iframe>

フレーム：YOUTUBE

<amp-youtube data-videoid="xxxxxID" layout="responsive" width="600" height="400"></amp-youtube>

SNS：Facebookシェア

<amp-social-share type="facebook" data-param-app_id="xxxxx">

強制文字コード：UTF-8

<?php @header('Content-Type: text/html; charset=UTF-8'); @header('Content-Language: ja'); ?>

強制文字コード：EUC-JP

<?php @header('Content-Type: text/html; charset=EUC-JP'); @header('Content-Language: ja'); ?>

強制文字コード：SJIS

<?php @header('Content-Type: text/html; charset=SJIS'); @header('Content-Language: ja'); ?>

強制転送

<?php header("HTTP/1.1 301 Moved Permanently"); header("Location: http"); ?>

エンコード：EUC-JP ( auto )

$name = mb_convert_encoding($name, "EUC-JP", "auto");

エンコード：UTF-8 ( ALL )

$name = mb_convert_encoding($name, "UTF-8", "ASCII,JIS,UTF-8,EUC-JP,SJIS");

エンコード後：XSS対策

$name = htmlspecialchars($name);

エンコード後：タグ除去

$name = strip_tags($name);

URLエンコード

$name = urlencode($name);

値がセットされた場合 ( isset )

<?php if(isset($q)){@include("top_000.php");} ?>
issetの複数条件の場合
isset($a, $m, $p)
※emptyは1回のみ

値がセットされた場合：転送

<?php if (isset($valuee)) {header("HTTP/1.1 301 Moved Permanently");header("Location: http");} ?>

値が空の場合 ( empty )

<?php if(empty($q)){@include("top_000.php");} ?>

値が空の場合：転送

<?php if (empty($valuee)) {header("HTTP/1.1 301 Moved Permanently");header("Location: http");} ?>

文字：置換 ( str_replace )

$word = str_replace("〇","●",$word);

文字：〇を含む場合

if (preg_match("/〇/", $key)) {$key ="〇"; } else {$key ="×"; }

文字：長い文字列を省略

<?php echo mb_strimwidth('PHP関数とタグ', 0, 9,'～', 'utf8'); ?> 結果　PHP関数～
PHP　3
関数　4
～　2
9文字

文字取得：〇～●：1回

preg_match('/<a href.*?<\/a>/',$contents,$ary);
preg_match('/<title>.*?<\/title>/',$contents,$ary); 結果 ary[0] →　<title>xxxxxxxxxxx</title> ary[1] →　xxxxxxxxxxx [0]は検索文字含む [1]は検索文字の内側

文字取得：〇～●：ALL

リンクを取得　
preg_match_all('/<a href.*?<\/a>/',$contents,$ary);
文字数を取得　「PHP関数」5文字 echo mb_strlen( "PHP関数", "UTF-8" );

IF：基本

if($word === "word") { $word = $word; }

IF：条件2

if($word1 === "word1" || $word2 === "word2" ) { $word = $word; }

IF：条件3

if($word1 === "word1" || $word2 === "word2" || $word3 === "word3" ) { $word = $word; }

IF：基本 else

if($word === "word") { $word = $word; } else { $word = $word; }

IF：条件2 else

if($word1 === "word1" || $word2 === "word2" ) { $word = $word; } else { $word = $word; }

IF：条件3 else

if($word1 === "word1" || $word2 === "word2" || $word3 === "word3" ) { $word = $word; } else { $word = $word; }

繰り返し：for

for($i = 0; $i <= 99; $i++){ }

ランダム：4桁数字 ( 2358 )

<?php echo rand(1000,9999); ?>
■ランダムパスワード生成

ランダム：配列から選択 ( 4973 )

<?php $arno01 = array(2,3,4,5,6,7,8,9);for($i = 0; $i <= 3; $i++){echo $arno01[array_rand($arno01)];} ?>
■ランダムパスワード生成

ファイル取得：ページ ( file_get_contents )

$content = @file_get_contents($url);

ファイル取得：ページ ( include )

<?php include("http"); ?>

ファイル取得：ページ：エラー非表示

<?php @include("http"); ?>includeの前に「@」を付けるとエラーコード非表示

$_SERVER取得：IPアドレス

$stAd = $_SERVER["REMOTE_ADDR"];
結果例：18.216.42.225

$_SERVER取得：プロバイダ

$strRemoteHost = gethostbyaddr($_SERVER["REMOTE_ADDR"]);
結果例：ec2-18-216-42-225.us-east-2.compute.amazonaws.com

$_SERVER取得：OS/ブラウザ

$strHttpUserAgent = $_SERVER["HTTP_USER_AGENT"];
結果例：Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)

$_SERVER取得：リファイラー

$httphost = $_SERVER['HTTP_REFERER'];
結果例：https://dw230.jp/

FORM：GET ( 余白なし )

<form style="margin-bottom: 0" method="get" action="http"></form>

input 非表示（hidden）
<input type="hidden" name="hid" value="FORID">

input 複数選択 ⦿（radio）
<input type="radio" name="ra" value="A"><input type="radio" name="ra" value="B"><input type="radio" name="ra" value="C">

input 複数選択 ☑（checkbox）
<input type="checkbox" name="ch" value="100"><input type="checkbox" name="ch" value="200"><input type="checkbox" name="ch" value="300">

input テキストボックス
<input type="text" name="q" value="" style="width:200px;">

input テキストボックス（文字数制限/音声）
<input type="text" name="q" value="" maxlength="20" spellcheck="true" id="result_text" autofocus x-webkit-speech style="width:60%;">

input 検索ボタン（submit）
<input type="submit" name="search" value="検索">

FORM：POST ( 余白なし )

<form style="margin-bottom: 0" method="post" action="http"></form>

input 非表示（hidden）
<input type="hidden" name="hid" value="FORID">

input 複数選択 ⦿（radio）
<input type="radio" name="ra" value="A"><input type="radio" name="ra" value="B"><input type="radio" name="ra" value="C">

input 複数選択 ☑（checkbox）
<input type="checkbox" name="ch" value="100"><input type="checkbox" name="ch" value="200"><input type="checkbox" name="ch" value="300">

input テキストボックス
<input type="text" name="q" value="" style="width:200px;">

input テキストボックス（文字数制限/音声）
<input type="text" name="q" value="" maxlength="20" spellcheck="true" id="result_text" autofocus x-webkit-speech style="width:60%;">

input 検索ボタン（submit）
<input type="submit" name="search" value="検索">

FORM取得：GET

$url = "";$url = $_GET['url'];

FORM取得：POST

$url = "";$url = $_POST['url'];

時間取得：日本時間

<?php $gmt = time()+9*3600; ?>

時間取得：日付 ( 2024/11/21 )

<?php $gmt = time()+9*3600; echo gmdate("Y/m/d ", $gmt); ?>
年表示は「Y」西暦4桁と「y」西暦下2桁。
平成で表示したい場合は「y+12」
令和で表示したい場合は「y-18」

時間取得：時間 ( 14:02:41 )

<?php $gmt = time()+9*3600; echo gmdate("H:i:s", $gmt); ?>
時表示は「h」12時間表示と「H」24時間表示、
「g」0無し12時間表示、「G」0無し24時間表示
分表示は「i」1桁のとき必ず0が付きます。
0無し表示はありません。
秒表示は「s」1桁のとき必ず0が付きます。
0無し表示はありません。

時間取得：日時 ( 2024/11/21 14:02:41 )

<?php $gmt = time()+9*3600;gmdate("Y/m/d H:i:s", $gmt); ?>
年表示は「Y」西暦4桁と「y」西暦下2桁。
平成で表示したい場合は「y+12」
令和で表示したい場合は「y-18」
時表示は「h」12時間表示と「H」24時間表示、
「g」0無し12時間表示、「G」0無し24時間表示
分表示は「i」1桁のとき必ず0が付きます。
0無し表示はありません。
秒表示は「s」1桁のとき必ず0が付きます。
0無し表示はありません。

時間取得：日付 ( 2024年11月21日 )

<?php $gmt = time()+9*3600; echo gmdate("Y年m月d日", $gmt); ?>

時間取得：日付 ( 平成36年11月21日 )

<?php $gmt = time()+9*3600; $year = gmdate("y", $gmt)+12; echo "平成" . $year . gmdate("年m月d日", $gmt); ?>

平成31年5月1日～　元号「令和」で表示する場合
<?php $gmt = time()+9*3600; $year = gmdate("y", $gmt)-18; echo "令和" . $year . gmdate("年m月d日", $gmt); ?>
結果：令和6年11月21日

時間取得：時間 ( 14時02分41秒 )

<?php $gmt = time()+9*3600; echo gmdate("H時i分s秒", $gmt); ?>

時間取得：曜日 ( 木曜日 )

<?php $week = array( "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" );$comw = $week[date("w")];echo $comw; ?>

画像：縦、横、色のビット数

<?php $topimg = getimagesize(http); ?>
結果：echo $topimg[3]; → width="1600" height="900"
Array
(
[0] => 1600 //横　echo $topimg[0];
[1] => 900 //縦　echo $topimg[1];
[2] => 2 //画像の形式
[3] => width="1600" height="900" //IMGタグ
[bits] => 16 //色のビット数
[channels] => 4 //3：RGB、4：CMYK
[mime] => image/jpeg //MIMEタイプ
)