[B! html5] tk18のブックマーク

HTML5 MathML

ウェブページ上で数式を正確かつ美しく表示するために、HTML5ではMathMLという標準が導入されました。 MathMLとは Mathematical Markup Language（MathML）は、webページ上で数学的な記述や数式を表示するためのXMLベースの言語です。MathMLは、ブラウザが数式を正確にレンダリングし、スクリーンリーダーが適切に数式を読み上げることを可能にします。 MathMLの基本構造 MathMLでは、<math>タグを使用して数式を囲みます。その中に、様々な子要素を入れることで数式を構成していきます。サンプルコード① <math xmlns="http://www.w3.org/1998/Math/MathML"> <mrow> <msup><mi>a</mi><mn>2</mn></msup> <mo>+</mo> <msup><mi>b</mi><m

tk18 2023/07/12

math
html5

リンク

video要素で動画を埋め込み表示するときの記述方法。

YouTubeなど外部の動画配信サイトの埋め込みではなく、自分でサーバーにアップロードしてあるmp4などの動画ファイルをHTMLのvideo要素でサイトに埋め込み表示させるときの記述方法のメモ。 video要素で動画埋め込みの記述「video」要素を使用して、サイトに動画を埋め込むときの記述方法。 ※ videoのMozillaの公式ドキュメント。 1. 基本的な記述「video」要素でHTMLに動画を埋め込む基本的な記述の方法。「動画ファイルのパス」を「src」属性の値に記述。「controls」属性を付与。(属性値は不要。) ※ 「controls」属性を記述しないと、動画にコントローラーツールが表示されないので再生できない。 <video src="movie/foo.mp4" controls></video> 表示領域内での動画の位置の調整はCSSの「object-pos

tk18 2023/01/07

リンク

ChromeとSafariでaudioタグを自動再生するための対策

以前までは、audioタグにautoplay属性を付与することで音声の自動再生が可能でしたが… <audio autoplay id="audio"> <source src="audio/source.mp3"> </audio> ChromeとSafariのメディア要素（<video>, <audio>）の自動再生におけるポリシーの変更され、下記のコードのようなclickイベントを使用しないとaudioタグの自動再生ができなくなりました。 <audio autoplay id="audio"> <source src="audio/source.mp3"> </audio> document.addEventListener('click', audioPlay); function audioPlay() { document.getElementById('audio').play

tk18 2019/05/09

html5

リンク

入力ボックスの初期値として薄いグレーの文字を表示する | Web Tips

公開日：2014年5月8日入力フォームのテキストボックスや検索ボックスで、あらかじめ薄いグレーの文字が表示されているケースがあります。入力欄をクリックしたり値を入力すると文字は消えます。そのような初期値を表示しておく方法を解説します。 JavaScriptで実現する方法もありますが、HTML5で導入されたplaceholder属性を使うとはるかに簡単に実現できますので、その方法をとることにします。現在ではほとんどのブラウザがHTML5対応になっていますので、特殊な事情がない限りこの方法で構わないでしょう。やり方は、以下の例のようにplaceholder属性で表示する文字列を指定するだけです。 <form action="" method="post"> <p><label>電話番号：<br><input type="tel" name="telNumber" placeholder=

tk18 2018/02/24

html5
search

リンク

プレースホルダー (placeholder) の表示とCSSでの装飾方法 [ホームページ作成] All About

プレースホルダー (placeholder) の表示とCSSでの装飾方法プレースホルダーを表示する方法を解説。HTMLのplaceholder属性を使えば簡単に表示できます。textarea要素に表示するプレースホルダーは少し工夫すると改行も可能。CSSのplaceholder疑似クラスを併用すればプレースホルダーの文字を自由な色に変えられます。カーソルが入った瞬間にプレースホルダーの文字が消える仕様もCSSだけで作れます。placeholderの表示と装飾方法をご紹介。プレースホルダー (placeholder) とは placeholder (プレースホルダー) とは、何も入力されていない状態のテキスト入力欄に最初から薄く表示されている案内文字のことです。HTMLではplaceholder属性を使うことで簡単に表示でき、CSSで色を変えることもできます。プレースホルダとして表示されて