HTML文書でhタグに自動連番見出しを振る方法

HTML, CSS, JavaScript

body { counter-reset: chapter; counter-reset: section; counter-reset: detail; } h1 { counter-reset: chapter; } h2 { counter-reset: section; } h3 { counter-reset: detail; } h2:before { content: counter(chapter) ". "; counter-increment: chap…

2016-06-09

HTML 画像のドラッグ＆ドロップ

HTML, CSS, JavaScript

HTML5のFileReaderを使ってクライアントのローカル画像をドラッグアンドドロップ → 表示するサンプルコード <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script> $(function() { if (!window.FileReader) { alert("not supported File API."); return false; } var droparea = $("#xxx"); var cancelEvent …</head></html>

2016-05-24

CSSインライン要素の縦位置を中央寄せ

HTML, CSS, JavaScript

よく忘れてしまうので備忘録。ブロック内に配置するイメージの縦位置を中央に寄せるには、テーブルを使うのがてっとり早い。 imgの親の親ブロックのスタイルに `display:table` を指定する。 imgの親ブロックのスタイルに `display:table-cell` と `vertical…