HTML– category –

JavaScriptなしで、transform / perspective / layered shadows と CSSカスタムプロパティ だけで “パッ”と目を引く3Dカードを作成してみましょう。 さらに Shadow DOM 内でも同じ見た目を再現できるよう、::part() と変数で拡張可能にします。 ゴール（で...

これまで「ポップアップ」や「モーダルウィンドウ」を作るには、JavaScriptやCSSトリックを駆使するのが当たり前でした。 ところが最近、HTMLだけでポップアップを表示できる新属性「popover」が登場！これが想像以上にシンプルで、しかも見た目も自然なん...

HTML5の登場以降、Webデザインの表現力は大きく進化しました。その中でも<canvas>タグは、まるで映像作品のような動きをブラウザ上で描くための強力な機能です。 「アニメーション＝JavaScriptが必要」と思われがちですが、実はJavaScriptを使わずに...

HTMLで番号付きリストを表示するのは<ol>タグの中に<li>タグを記述することで表現できますが、<ol>タグにreversed属性やstart属性、type属性を付与することで表示される番号を操作することが出来ます。 <ol>タグに何も属性付けな...

Web開発者泣かせでお馴染みのIEにはIEの過去バージョンモードで表示出来る互換表示機能があります。 しかし互換表示することで表示が崩れてしまう場合、デフォルトでは互換表示させたくないケースが多々あります。 そういう場合にはmetaタグで「X-UA-Compa...

JSPのコメント文とHTMLのコメント文の違いについてまとめておきます。 JSPのコメント [crayon-696a43ab0f8c4985341931/] HTMLのコメント [crayon-696a43ab0f8cf072995008/] さて、両者の違いとは何でしょうか。 見た目大して変わらないしどっちでもいいん...

HTMLを作成する時に悩む、<b>太字タグと<strong>論理強調タグの違いについてメモしておきます。 この二つは表面上はよく似ていて、どちらも太字になります。 ですが<b>タグは単に太く見えるだけで単なる一般的な太字ですが、<strong&...

通常ブラウザにはF12押下でブラウザ標準の開発ツールが使用可能となりますが、今回紹介する「Firebug」は高性能なJavaScriptデバッガツールです。JavaScriptだけではなくHTMLやスタイルシートの値をリアルタイムに変更して確認したり、非同期通信状況やDOM...

CSSでスタイルを設定していると「margin」と「padding」の基礎知識が曖昧だと使用する際に混乱しがちなので今回は両者の違いをまとめてみます。 marginとpaddingの関係図 marginの特徴 borderの外側にスペース（余白）が設けられる スペース（余白）に背景...

ふとエスケープとエンコードの違いって何だろうと思ったので整理してみました。 どちらも「一定の規則に従い別の記号や文字列に置換する」という点では同義語に見えますが、根本的にその性質は全く異なるものです。 エスケープ HTMLでは「< 」を「＆ｇｔ；...