HTML5

前へ

次へ

HTML5ベースコード

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="format-detection" content="telephone=no, email=no, address=no">
    <meta name="robots" content="noindex, nofollow"><!-- ※公開時外すのを忘れないこと -->
    <title></title>
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="stylesheet" href="">
    <link rel="icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
</head>


<body>
    <header>
        <!-- ヘッダー内容 -->
    </header>

    <main>
        <!-- メイン内容 -->
    </main>

    <footer>
        <!-- フッター内容 -->
    </footer>

    <script
    src="https://code.jquery.com/jquery-3.6.1.min.js"
    integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
    crossorigin="anonymous"></script>
    <script>window.jQuery || document.write('<script src="js/jquery-3.6.1.min.js"><\/script>')</script>
    <script src=""></script>
</body>
</html>

内部CSS

<style> CSS </style>

【HTML4.01以前】
<style type="text/css"> CSS </style>

内部JavaScript

<script> JavaScript </script>

【HTML4.01以前】
<script type="text/javascript"> JavaScript </script>

特殊文字

<　&lt;
>　&gt;
&　&amp;
"　&quot;
™　&trade;
©　&copy;
®　&reg;

【スペース】＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■前後改行禁止スペース
&nbsp;
■nと同じ幅のスペース
&ensp;
■mと同じ幅のスペース
&emsp;
■細いスペース
&thinsp;

WAI-ARIA(ウェイ・アリア)

アクセシビリティ確保のための属性

【role属性】
コンテンツの役割を明示
■role="application" …アプリケーション
■role="search" …検索フォーム領域
■role="form" …検索以外のフォーム領域
■role="button" …ボタンとしてのアクションを起こす

<a role="button">Button</a>
※元来はbutton要素を使用するべきだが、使えない時はrole属性で明示する。


＝＝＝＝＝＝＝＝＝＝＝＝＝＝
【aria属性】
コンテンツの状態や性質を明示。
表示されないが、スクリーンリーダーなどで読み上げてくれる。

■aria-label="" …その要素の性質をラベリング

例：
<button aria-label="閉じる">X</button>
※a要素は元来別のページへのリンクを示すものなので、閉じるボタンなどはbutton要素の方が正しい。

figure要素

無くても本文に影響を与えないが、本文を補足することが出来る注釈として機能する画像・図表・コード断片などを意味する。

■カテゴリー …フロー・コンテンツ
■内包できる要素 …フロー・コンテンツ

例：
<figure>
  <figcaption>キャプション(無くても良い)</figcaption>
  <pre>コード断片</pre>
</figure>

del要素 ins要素

■del要素 …削除したテキスト
<del datetime="yyyy-mm-dd">削除されたテキスト</del>

■ins要素 …追加されたテキスト
<ins datetime="yyyy-mm-dd">追加されたテキスト</del>

※datetime属性を利用することで、削除・追加した日付を明示できる。

動画再生

<video autoplay poster="画像パス">
    <source src="動画1パス" type="動画タイプ">
    <source src="動画2パス" type="動画タイプ">
    <img src="画像パス">
</video>

【videoタグの属性】
autoplay(自動再生)
loop(ループ再生)
muted(ミュート)
controls(コントロール表示)
poster=""(再生されない場合に表示)

【sourceタグ】
上から順次再生していきます。

【動画タイプ】
video/mp4(拡張子mp4)
video/ogg(拡張子ogv)
video/webm(拡張子webm)

【imgタグ】
videoタグの非対応ブラウザで画像を表示させる。

Can I use

CSS3

前へ

次へ

CSSベースコード

@charset "utf-8";
/* ========================================================================================
 *コメント
 *======================================================================================== */

/* 初期設定 */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    height: 100%;
    font-size: 62.5%;
}

body {
    background: #fff;
    height: 100%;
    letter-spacing: 0.08em;
    color: #444;
    font-family: YuGothic, 游ゴシック, "Hiragino sans", ヒラギノ角ゴシック, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, メイリオ, sans-serif;
    font-size: 16px;
    font-size: 1.6rem;
    line-height: 1.5;
    word-wrap : break-word;
    overflow-wrap : break-word;
}

a {
    color: #******;
}

a:link,
a:visited {
    text-decoration: underline;
}

a:hover,
a:active {
    text-decoration: none;
}

img {
    border-width: 0px;
    vertical-align: middle;
}

/* clearfix */
.cf::after {
    content: "";
    clear: both;
    display: block;
}

セレクタ

■子セレクタ　E > F {}
子要素

■隣接セレクタ　E + F {}
直後の弟

■間接セレクタ　E ~ F {}
全ての弟

■属性セレクタ
E[foo] {}
属性が一致する要素

E[foo="bar"] {}
属性と値が一致する要素

E[foo~="bar"] {}
1つないし複数の値の中に、一致する値を持つ要素

E[hreflang|="en"] {}
値が一致するか、ハイフンの前が一致する要素

E[foo^="bar"] {}
値が前方一致する要素

E[foo$="bar"] {}
値が後方一致する要素

E[foo*="bar"] {}
値が部分一致する要素


【擬似クラス】＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■[×IE7]言語擬似クラス　E:lang(fr) {}
lang属性の値が一致か、ハイフンの前が一致する要素
※lang属性…言語コード指定の属性

■E:first-child {}
先頭の子要素
※他の種類の子要素もカウント

■[×IE7/IE8]E:first-of-type {}
同じ種類の先頭の子要素
※同じ種類の子要素のみカウント
※タグセレクタが同じだとclassで設定していても
違うclassのものまでカウントしてしまう

■[×IE7/IE8]E:last-child {}
最後の要素
※他の種類の子要素もカウント

■[×IE7/IE8]E:last-of-type {}
同じ種類の最後の子要素
※同じ種類の子要素のみカウント
※タグセレクタが同じだとclassで設定していても
違うclassのものまでカウントしてしまう

■[×IE7/IE8]E:nth-child(n) {}
n番目の子要素
※他の種類の子要素もカウント
偶数：　2n　/　even
奇数：　2n+1　/　odd

■[×IE7/IE8]E:nth-of-type(n) {}
同じ種類のn番目の子要素
※同じ種類の子要素のみカウント
※タグセレクタが同じだとclassで設定していても
違うclassのものまでカウントしてしまう
偶数：　2n　/　even
奇数：　2n+1　/　odd

■[×IE7/IE8]E:nth-last-child(n) {}
後ろから数えてn番目の子要素
※他の種類の子要素もカウント
偶数：　2n　/　even
奇数：　2n+1　/　odd

■[×IE7/IE8]E:nth-last-of-type(n) {}
同じ種類の後ろから数えてn番目の子要素
※同じ種類の子要素のみカウント
※タグセレクタが同じだとclassで設定していても
違うclassのものまでカウントしてしまう
偶数：　2n　/　even
奇数：　2n+1　/　odd

■[×IE7/IE8]E:only-child {}
親にとって唯一となる子要素
※他の種類の子要素もカウント

■[×IE7/IE8]E:only-of-type {}
親にとってその種類の唯一となる子要素
※同じ種類の子要素のみカウント
※タグセレクタが同じだとclassで設定していても
違うclassのものまでカウントしてしまう

■[×IE7/IE8]E:empty {}
内容が空の要素(テキスト/空白含む)

■[×IE7/IE8]E:target {}
アンカーリンクの移動先の要素

■[×IE7/IE8]E:enabled {}
有効となっているUI要素

■[×IE7/IE8]E:disabled {}
無効となっているUI要素

■[×IE7/IE8]E:checked {}
チェックされているUI要素
※ラジオボタンやチェックボックスなど

■[×IE7/IE8]:not(s) {}
sで指定したセレクタ以外の要素

【擬似要素】＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
※「::」はIE7/IE8が未対応

■E::first-letter {}
テキスト一文字目

■E::first-line {}
テキスト一行目

■[×IE7]E::before {}
要素の内容の頭に挿入

■[×IE7]E::after {}
要素の内容の最後に挿入

calc()ファンクション

長さ・周波数・角度・時間・数量・整数値に数式を用いたい時に使用。
例えば、幅・高さ・フォントサイズなどに利用。

width : 33.3% ; /* IE8以下とAndroid4.3以下 */
width : -webkit-calc(100% / 3) ;
width : calc(100% / 3) ;

■数式
+（加算）
-（減算）
*（乗算）
/（除算）

※background-positionで使うとIE9でクラッシュ。

Can I use

vw・vh・vmin・vmax

ビューポートに対する割合(*/100)を指定できる。

■vw
ビューポート幅に対する割合
■vh
ビューポートの高さに対する割合
■vmin
ビューポート幅・高さで小さい方に対する割合
■vmax
ビューポート幅・高さで大きい方に対する割合

例）100vw = 100%

※IE9～/iOS6～/Android4.4～
※IE9ではvminの代わりにvm
※IE・iOS6はvmaxをサポートしない
※iOS7でvhにバグがある

Can I use

Media Queries

■＊＊＊px以下
@media screen and (max-width: ＊＊＊px) {
}

■＊＊＊px以上
@media screen and (min-width: ＊＊＊px) {
}

■＊＊＊px～＊＊＊pxの間
@media screen and (min-width: ＊＊＊px) and (max-width: ＊＊＊px) {
}

※IE8以下サポート対象外

改行

■長いURLや英単語を折り返す
word-wrap : break-word;
overflow-wrap : break-word;

※基本的には通常の改行規則に則る。
改行ポイントが無い時のみ単語の途中で改行。
※overflow-wrapがCSS3での正式名称だが、一部サポート外のため、旧称のword-wrapを併記する。

■強制改行
word-break : break-all;

※一切の改行規則を解除して単語途中で折り返すため、推奨されない。

border-color

■透明
transparent

box-sizing

【初期値：パディング・ボーダーを幅・高さに含まない】
box-sizing: content-box;

【パディング・ボーダーを幅・高さに含む】
box-sizing: border-box;

【親要素の値を継承】
box-sizing: inherit;

Can I use

flexbox

■flexbox
display: flex;

Can I use 

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■flex内のアイテムの並び
flex-direction: 値;

【値】
左から右へ並べる: row (デフォルト)
右から左へ並べる: row-reverse
上から下へ並べる: column
下から上へ並べる: column-reverse

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■flex内のアイテムの行数
flex-wrap: 値;

【値】
一行に収める: nowrap (デフォルト)
収まらなければ複数行(上から下): wrap
収まらなければ複数行(下から上): wrap-reverse

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■flex内のアイテムの横配置
justify-content: 値;

【値】
左寄せ: flex-start (デフォルト)
右寄せ: flex-end
中央寄せ: center
均等配置(両端余白なし): space-between
均等配置(両端余白あり): space-around

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■flex内のアイテムの縦配置
align-items: 値;

【値】
親の高さに広げる: stretch (デフォルト)
上寄せ: flex-start
下寄せ: flex-end
中央寄せ: center
ベースラインで揃える: baseline

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■flex内のアイテムの複数行時の縦配置
align-content: 値;

【値】
均等配置（上端余白なし）: stretch
均等配置（上下端余白なし）: space-between
均等配置（上下端余白あり）: space-around
上に詰める: flex-start
下に詰める: flex-end
中央寄せ: center

※複数行でかつ、親が子より広い時のみ

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■flex内のアイテムの表示順を指定
order: 値;

※flexboxの子要素に対して指定
※値は数字（負の数字も入れられる）
※デフォルトの値は0

transition

【変化に掛かる時間】
transition-duration: 時間A;

【変化の適用対象】
transition-property: プロパティ1,プロパティ2;

【変化タイミング】
transition-timing-function: 値;
値 ease(初期値)
   linear(一定)
   ease-in(ゆっくり開始)
   ease-out(ゆっくり終了)
   ease-in-out(開始と終了をゆっくり)

【変化を開始する時間】
transition-delay: 時間B;

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■まとめて設定
transition: プロパティ 時間A タイミング 時間B,プロパティ2 時間A…;

※transition: all 0.3s ease;

Can I use

transform

【初期値】
transform: none

【移動】
transform: translate(X方向距離, Y方向距離);
transform: translateX(距離);
transform: translateY(距離);

※-webkit-transform: translate(-3px, -3px);

【ズーム】
transform: scale(X方向数値, X方向数値);
transform: scaleX(数値);
transform: scaleY(数値);

※-webkit-transform: scale(0.5);

【回転】
transform: rotate(角度);
transform: rotateX(角度);
transform: rotateY(角度);

※-webkit-transform: rotate(-45deg);

【シアー】
transform: skew(X軸角度, Y軸角度);
transform: skewX(角度);
transform: skewY(角度);

※-webkit-transform: skew(20deg, 20deg);

Can I use

animation

■アニメーション内容を指定
@keyframes アニメーション名 {
  0% { プロパティ: 値; }
  50% { プロパティ: 値; }
  100% { プロパティ: 値; }
}
@-webkit-keyframes アニメーション名 {
  0% { プロパティ: 値; }
  50% { プロパティ: 値; }
  100% { プロパティ: 値; }
}

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■アニメーションを実行
セレクタ {
  animation: アニメーション名 時間 タイミング 開始時間 繰り返し;
  -webkit-animation: アニメーション名 時間 タイミング 開始時間 繰り返し;
}

以下プロパティをまとめて設定しています。
まとめて書く時はこの順で指定
1）animation-name
2）animation-duration
3）animation-timing-function
4）animation-delay
5）animation-iteration-count
6）animation-direction
7）animation-fill-mode
8）animation-play-state

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■各プロパティの説明
【アニメーション名】
@keyframes で定義した名前
animation-name: 値;

【アニメーション時間】
animation-duration: *s;

【変化タイミング】
animation-timing-function: 値;
値 ease（初期値）
   linear(一定)
   ease-in(ゆっくり開始)
   ease-out(ゆっくり終了)
   ease-in-out(開始と終了をゆっくり)

【変化を開始する時間】
animation-delay: *s;

【繰り返し回数】
animation-iteration-count: 値;
値 infinite(無限ループ)

【再生方向】
animation-direction: 値;
値 normal（初期値）
   reverse(逆再生)
   alternate(奇数回：通常/偶数回：逆)
   alternate-reverse(奇数回：逆/偶数回：通常)

【再生前後の状態】
animation-fill-mode: 値;
値 none（初期値）
   forwards(再生後:最後のキーフレーム)
   backwards(再生前:最初のキーフレーム)
   both(forwards と backwards の両方)

【一時停止/再生中】
animation-play-state: 値;
値 paused(一時停止)
   running(再生中)

Can I use

Java Script

前へ

次へ

DOMの読み込み完了後実行

HTMLの読み込みが完了後、処理が実行されます。

■パターン1
$(function(){
    処理
});

■パターン2
jQuery(function(){
    処理
});

■パターン3
$(document).ready(function(){
    処理
});

■パターン4
$(document).ready(function(){
    処理
});

全ての要素の読み込みが完了後に実行

画像や動画等、全ての要素の読み込みが完了後、処理が実行されます。

■パターン1
$(window).load(function(){
    処理
});

■パターン2
$(window).on('load',function(){
    処理
});

イベントを定義するon()

■一つ定義
$('セレクタ').on('イベント名', function() {
    処理
});

■複数定義
$('セレクタ').on({
    'イベント名1': function() {
        処理1
    },
    'イベント名2': function() {
        処理2
    }
});

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
■イベントの解除off()
.on()で定義されたイベントは、.off()で解除可能。

$('セレクタ').off('イベント名');

イベント名

【左クリック時】
click

【ダブルクリック】
dblclick

【右ボタンを押した時】
contextmenu

【左/右ボタンを押した時】
mousedown

【左/右ボタンを話した時】
mouseup

【カーソルが動いた時】
mousemove

【カーソルが入った時】
mouseover/mouseenter

【カーソルが離れた時】
mouseout/mouseleave

【フォーカス時】
focus/focusin

【フォーカスが外れた時】
blur/focusout

【要素の内容変更時】
change

【フォーム送信時】
submit

【キーが押された時】
keydown/keypress

【キーが外れた時】
keyup

【画面がスクロール時】
scroll

【ウインドウサイズ変更時】
resize

【HTML読み込み完了時】
ready

【別ページへの遷移時】
unload

【データ読み込み完了時】
load

【データ読み込み失敗時】
error
jQueryのイベント一覧 | たねっぱ！

aタグのリンクを無効化

event.preventDefault();

■例文
$(function(){
    $('#menu-btn').on('click',function(){
        event.preventDefault();
        $(this).addClass('Close');
    });
});

タイトル3-1

内容