HTML/CSS

HTML meta 定義

<meta name="viewport" content="width=device-width">
<meta name="robots" content="noindex,nofollow">
<link rel="canonical" href="https://moz.com/learn/seo/duplicate-content" />
<meta property="og:title" content="たてのブロック ~子供向けプログラム学習ゲーム~">
<meta property="og:type" content="website">
<meta property="og:description" content="子供向けプログラム学習ゲーム「たてのブロック」。ブロックを配置することでプログラムを作りキャラクタを動かしプログラムを学ぶことができます">
<meta property="og:url" content="http://block.tatenosystem.com/">
<meta property="og:image" content="http://block.tatenosystem.com/img/og/title_og.jpg">

キャッシュしない

<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Expires" content="0">

HTML5

<html prefix="og:http://ogp.me/ns#"  lang="ja">
セクショニング・コンテンツ
section, article, aside, nav

table CSS

<style type="text/css">
table { border-collapse: collapse; width:100%; }
th.t_top { border-top: #be1309 4px solid; }
th { border-bottom: #e3e3e3 1px dotted; text-align: left; padding: 10px; font-weight: normal; }
td.t_top { border-top: #b3b3b3 4px solid; }
td { border-bottom: #e3e3e3 1px dotted; text-align: left; padding: 10px; }
tr:hover { background: #3D80DF; color: #FFFFFF; }
</style>

AdSence マウスオーバー

<style type="text/css">
a img:hover {
  -webkit-filter: brightness(120%);
}
</style>

スマホHTML ひな形

<!DOCTYPE html>
<html>
<head>
<title>たいとる</title>
<meta name="viewport" content="width=device-width">
<!-  <meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,user-scalable=yes"> -->
<meta charset="UTF-8" />
<script type="text/javascript" src="/js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="/css/style.css" charset="UTF-8" />
</head>
<body>
ないよう
</body>
</html>

HTML ひな形

<!DOCTYPE html>
<html prefix="og:http://ogp.me/ns#"  lang="ja">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="base.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<link rel="shortcut icon" href="">
</head>
<body>
</body>
</html>

div 横並び

flex box
https://qiita.com/HiromuMasuda0228/items/baf8015076d7d90b8fea

<div style="float:left;">
左1ブロック
</div>
<div style="float:left;">
左2ブロック
</div>
<div style="clear:both;">
フロートの下のブロック
</div>

モーダル

<style type="text/css">
   .modalbox { margin: -55px 0 0 -120px; border: 5px solid #808099; display: none; position: absolute; top: 50%; left: 45%; z-index: 9999; width: 300px; height: 100px; background-color: #dce1f0; }
   #modalOverlay { display: none; position: absolute; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: #454560; filter: alpha(opacity=60); -moz-opacity: 0.6; opacity: .60; }
</style>
<script>
function openModal(value, message)
{
   if (value === 'none') {
       document.getElementById('modalOverlay').style.display = "none";
       document.getElementById('modalbox1').style.display = "none";
       document.getElementById('modalbox2').style.display = "none";
       return;
   }
   if (value === 'notice') {
       document.getElementById('modalboxText2').textContent = message;
       document.getElementById('modalOverlay').style.display = 'block';
       document.getElementById('modalbox2').style.display = 'block';
   } else {
       document.getElementById('modalboxText1').textContent = message;
       document.getElementById('modalOverlay').style.display = 'block';
       document.getElementById('modalbox1').style.display = 'block';
   }
}
</script>
<div id="modalOverlay" onclick="openModal('none');"></div>
<div id="modalbox1" class="modalbox">
 <p style="margin:0; padding-top:14px; text-align:center;"><span id="modalboxText1">message</span><br><br>
 <input type="button" id="modalCancel" value="CANCEL" onclick="openModal('none');">
 <input type="button" id="modalOK" value=" OK " onclick="openModal('none');execModalOk();">
 </p>
</div>
<div id="modalbox2" class="modalbox">
 <p style="margin:0; padding-top:14px; text-align:center;"><span id="modalboxText2">message</span><br><br>
 <input type="button" id="modalCancel" value="OK" onclick="openModal('none');">
 </p>
</div>

利用方法

<script>
function execModalOk()
{
   // モーダル OK クリック時の処理
}
</script>

<button onclick="openModal('block', 'OK/CANCELモーダル メッセージ');">もーだる1</button>
<button onclick="openModal('notice', '警告モーダル メッセージ');">もーだる2</button>

ファビコン

<link rel="shortcut icon" href="favicon.ico">

光沢アリ
<link rel="apple-touch-icon" href="http://サイトのURL/webclip.png" />
光沢ナシ
<link rel="apple-touch-icon-precomposed" href="http://サイトのURL/webclip.png" />

※ 16px × 16px 、32px × 32px マルチアイコン

16×16、32×32、48×48、64×64 の4つを推奨します。

マルチアイコン作成
https://ao-system.net/multiicon/
https://ao-system.net/alphaicon/index.php

16x16、32x32、48x48、64x64(152x152)

印刷させない

@media print {
    img {
        width: 1px;
        height: 1px;
    }
}