この写真の記事へ

CSSで斜線を引く方法:表の空セルなど任意のHTML要素に(画像)(14ページ目)

西村 文宏

執筆者：西村 文宏

ホームページ作成ガイド

古いブラウザでは斜線は引かれないが、単に「斜線が見えないだけ」であり、表示が崩れるような悪影響はない

古いブラウザでは斜線は引かれないが、単に「斜線が見えないだけ」であり、表示が崩れるような悪影響はない

この写真の記事へ
空欄に斜線を引いた表の例
行列の交差部分に斜線を引いた表の例
CSSだけで、様々な配色・太さの斜線が引ける
空っぽのセルにだけ背景色を付加する
空っぽの要素になら何でも適用可能
サンプルページ1
CSSで表のセル内部に斜線を引く
セル内に斜線が引かれている
古いブラウザでは斜線は引かれないが、単に「斜線が見えないだけ」であり、表示が崩れるような悪影響はない
空っぽのセルにだけ背景色が付加
表内の行列が交差する部分にCSSで斜線を引いた表示例
CSS3の:empty疑似クラスを使えば、表(テーブル)の中で中身のない空っぽのセルだけに限定して背景色を付加できる
CSSで斜線を引く方法の活用例
古いブラウザでは斜線は引かれないが、単に「斜線が見えないだけ」であり、表示が崩れるような悪影響はない
斜線の角度が自動調整されるCSSを使った表示例

ほかのギャラリーを見る

ハートマークも文字として定義されているので、色やサイズはCSSで自由に装飾できる (Edgeでの表示例)
EdgeではWebkit用の記述も有効になっている例
一度無効化されたボタンでも、再度有効な状態に戻せるようにする
よく使われるサンプル用ドメイン名のスペルミスを狙った危険なウェブサイトもある
アクセスするたびに異なる画像が表示される
ページ移動や別ウインドウを表示することなく、任意のメッセージや別ページの内容を表示できる