WEBデザイン/HTML/CSS
Photopea
絵文字maker
beautiful.ai
canva
rel="noindex,nofollow"
rel="noindex,nofollow,noopener,noreferrer"
<a target="_blank" rel="noopener noreferrer" noreferrer>
CSSフレームワーク BULMA
https://bulma.io/documentation/
https://qiita.com/ochiochi/items/de1afd2d3fc8f6d3ea55
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">
LINK
Bootstrap4 フォーム（Forms）
Bootstrap4 サイズユーティリティ（Sizing）
RGB
https://www.w3schools.com/colors/colors_picker.asp
カラーネーム
http://www.htmq.com/color/colorname.shtml
bootstrap3 日本語リファレンス
http://bootstrap3.cyberlab.info/components/
Font Awesome 5の使い方【Web Fonts with CSS編】
https://niwaka-web.com/fontawsome5_css/
https://fontawesome.com/icons?d=gallery&m=free
https://fontawesome.com/cheatsheet
Bootstrap4に用意されているクラス
https://webnetamemo.com/coding/bootstrap4/201710065870
https://cccabinet.jpn.org/bootstrap4/
HTML5
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
</head>
<body>
<p>HTML5</p>
</body>
</html>
イメージに影
<img src="scodes_img01.jpg" style="box-shadow: 0 0 5px gray;" />
<img src="scodes_img01.jpg" style="box-shadow: 0 0 5px lightgray;" />
<img src="scodes_img01.jpg" style="box-shadow: 0 0 5px black;" />
<img src="scodes_img01.jpg" style="box-shadow: 2px 2px 5px black;" />
<img src="scodes_img01.jpg" style="box-shadow: 0 0 5px rgba(0,0,0,0.4);" />
Milligram.css
https://milligram.io/#buttons
https://milligram.io/#forms
<link rel="stylesheet" href="//cdn.rawgit.com/milligram/milligram/master/dist/milligram.min.css">
HTML/CSS
@media only screen and (max-width: 767px){
/* スマホ画面で適用する内容 */
}
visibility:hidden;
<link rel="stylesheet" href="sp.css" media="screen and (max-width: 767px)">
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;">
左１ブロック
</div>
<div style="float:left;">
左２ブロック
</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-precomposed" href="/favicon.png" />
光沢アリ
<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/alphaicon/index.php
16x16、32x32、48x48、64x64（152x152）
画像圧縮
CSS フレームワーク
アニメGIF
印刷させない
@media print {
img {
width: 1px;
height: 1px;
}
}