ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

CSS

videoタグにobject-fitプロパティが未指定の場合の挙動

CSS

videoタグで動画を再生するWebページを作りました。 developer.mozilla.orgWebページを作ったのはいいのですが、なぜか動画の左右に空き(?)のような領域ができて、動画が再生されます。 動画の上下方向は、指定したサイズになっているようです。 高さと幅の…

liタグ全体をリンクにしたい場合の対処方法

CSS

Webページおいて、liタグ内にaタグがあり、aタグ内にimgタグというマークアップがしてあります。 imgタグで指定した画像をクリックすると、遷移するようになっています。 <ul> <li><a href="page1.html"><img src="page1.png"></a></li> <li><a href="page2.html"><img src="page2.png"></a></li> </ul> liタグの高さと幅が、画像と一致していれば、liタグだけをクリックできず、画像を…

CSS:divの高さを表示領域かコンテンツの内容に合わせたい

CSS

divタグでコンテンツを囲んであり、左右の境界線を表示しています。 コンテンツの内容が多くてスクロールする場合は画面の下まで左右の境界線が表示されるので、違和感を感じません。 コンテンツの内容が画面の半分くらいの高さで終わってしまう場合、左右の…

CSS:テキストボックスがreadonlyな場合の色の変更

CSS

選択されたら、選択された値を表示するように、以前システムに機能を追加しました。 ajya.hatenablog.jp選択された値を変更されたくないので、テキストボックスにreadonly属性をつけて読み取り専用にしていますが、見た目では入力できるか違いがわかりません…