MP4ビデオの再生ボタンがクリックできない
WEBサイトにMP4の動画を設置しました。再生／停止や全画面再生などのメニューを表示させるため、<video>タグにcontrolsを加えました
<video controls src="sample.mp4">
しかし、以下のように再生ボタンにカーソルを重ねても指のマークに変わらず、クリックできません。
…
CSS | テキストを上半分、下半分でスライスする方法
CSSでテキストを上半分、下半分で切り分けてスライスする方法を紹介しています。 テキストを上半分、下半分でスライスする テキストを上半分、下半分でスライスする方法について、疑似要素を使った方法や他の手段を考えていましたが […]…
CSS | 選択中フォームの親要素のスタイルを指定するfocus-withinの使い方
CSSの疑似クラス:focus-withinを使って選択中（フォーカス中）のフォームの親要素のスタイルを指定する方法を紹介しています。 focus-withinの使い方 :focus-withinの簡単な使い方を紹介して […]
CSS | 深度を変更して表示順序を並び替える方法
CSSで重なり合う要素の深度を変更して表示順序を並び替える方法を紹介しています。 深度を変更する方法 CSSの深度はz-indexプロパティにて設定可能となっています。 positionプロパティで位置指定した際などに重 […]…
CSS | HTMLだけで要素を非表示（display:none）にする方法
CSSを使わずにdisplay:noneをHTMLのみで指定可能なHTML属性「hidden」と簡単な指定方法を紹介しています。 hiddenで要素を非表示にする HTML5から追加された属性hiddenは、HTMLコー […]
CSS | テキストが浮かび上がっているように見せる方法
CSSのtext-shadowプロパティを使ってテキストが背景から少し浮かび上がっているように見せるシンプルなサンプルを紹介しています。 テキストを浮かせる text-shadowプロパティを利用した単純な方法でテキスト […]…
CSS | テキストをマウスホバーで差し替える方法
CSSのみでテキストをマウスホバーで違うテキストに差し替える（置き換える）簡単な方法を紹介しています。 マウスホバーでテキストを差し替える 要素内にあるテキストをマウスホバー時に別のテキストに置き換える方法とそのサンプル […]…
CSS | ストライプ柄の作り方
CSSのグラデーション機能、repeating-linear-gradient()プロパティを使って簡単なストライプ柄の作り方を紹介しています。 ストライプ柄やグラデーション、水玉くらいですとCSSで簡単に作成・編集でき […]…
CSS | 画像を親要素内の縦横中央に配置する方法
CSSで画像をそのサイズに関係なく親要素内の縦横中央に配置する簡単な指定方法です。 紹介しているのはdisplay: flexとalign-items、justify-contentを使う方法、position: abs […]
CSS | 画像に透過グラデーションをかける方法
CSSで画像に（疑似）透過グラデーションをかける方法を紹介しています。 ※透過グラデーションと表記していますが、背景色と同色に透過色のグラデーションを画像の上からかけているだけで画像そのものを透過表示しているわけではあり […]…