- 2024年10月24日
- 2024年10月24日
【HTML】【CSS】動画をダブルクリックした際に全画面表示をさせない方法
動画を視聴中にvideo要素をダブルクリックするとブラウザの機能によって動画が全画面再生されます。便利な機能ではありますが動画を見ながら他の作業をする前提のwebサービスでは不意 […]
動画を視聴中にvideo要素をダブルクリックするとブラウザの機能によって動画が全画面再生されます。便利な機能ではありますが動画を見ながら他の作業をする前提のwebサービスでは不意 […]
webページをユーザーが印刷する際、印刷対象となる要素を絞り込みたくなる場合があります。例えばメニュー、ヘッダー、フッター、サイドバーなどのwebページを便利にするためのパーツを […]
次図のようなレイアウトで、スクロールが発生するほど大きな要素を内部に持っていてもヘッダーとフッターを画面内に置き、コンテンツだけをスクロールできるようにする方法を紹介します。 […]
HTMLメールはメールクライアントがHTMLやCSSを用いてメールの見た目を構築するリッチな機能であり良いデザインを作る手助けをしてくれます。しかし全てのメールクライアントが同じ […]
画面のサイズは無限ではありません。このため表示したいものや操作したいものが増えてきて、それを一画面に押し込めようとするとどうしてもごちゃごちゃしてしまいます。この記事ではごちゃご […]
CSS の三角関数が主要ブラウザで実装されきる日が近づいてきたので、これの使用例として任意の2要素を直線で結ぶ方法を紹介します。 2023年はCSSで三角関数「sin(), co […]
時折、画面の余っている部分いっぱいに要素を広げたいという要望があります。そういった時の解決方法は様々ありますが、なるべく設定が壊れにくい方がいいです。グリッドデザインならばこれを […]
タイトル通り、Table要素のセルに斜線を引く方法についてです。 なお、私は <td> 要素に引きたかったので、そのように記述しました。 参考に…というかまるっとコード […]
例えば次の様な木構造のデータがあります。これは PHP のフレームワークである Laravel 内の一部分のファイルとディレクトリです。 Mail ├── Attachment. […]
CSS で印刷時のレイアウトを指定できる @media print を使った時に、印刷時のレイアウトを簡単に確認する方法についてです。 使用頻度はそこまで高くなさそうですが、今後も […]
まだ実際に使ってはいないのですが、今後使う機会がきっとあるだろう!ということでまとめ。 iOS の Safari で 100vh がビューポートの高さではないという仕様に対応出来る […]
stylelint は CSS 関連の言語に対する静的解析ツールです。これを使うことでインデントの整形をはじめ、重複したCSSセレクター、読み難いプロパティ、無効な値などを検出で […]