All About オールアバウト
デジタル
  • パソコン・周辺機器
  • カメラ・AV機器
  • 携帯電話・スマートフォン
  • IT・インターネット
  1. All About
  2. デジタル
  3. IT・インターネット
  4. ホームページ作成
  5. CSSで斜線を引く方法:表の空セルなど任意のHTML要素に
この写真の記事へ

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

更新日:2018年05月01日
西村 文宏

執筆者:西村 文宏

ホームページ作成ガイド

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

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

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

ほかのギャラリーを見る

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

人気記事ランキング

  • 1
    【HTML+CSS】ウインドウ幅に合わせて画像サイズを変化させる方法
    【HTML+CSS】ウインドウ幅に合わせて画像サイズを変化させる方法
    2021/12/22
  • 2
    ドロップダウンメニューとは?HTML+CSSだけで簡単に作る方法
    ドロップダウンメニューとは?HTML+CSSだけで簡単に作る方法
    2022/07/28
  • 3
    タブ機能の作り方!ページ移動せずに内容を切り替える
    タブ機能の作り方!ページ移動せずに内容を切り替える
    2022/12/26
  • 4
    idとclassの違いと使い分け!スタイルシート(CSS)適用法
    idとclassの違いと使い分け!スタイルシート(CSS)適用法
    2022/07/19
  • 5
    移転先へ自動移動(転送/リダイレクト)させる方法
    移転先へ自動移動(転送/リダイレクト)させる方法
    2018/09/04
ランキングをもっと見る

ホームページ作成

  • ホームページ作成の基本
  • ホームページ作成ソフトの選び方
  • HTML5とは
  • CSS3とは
  • HTML・スタイルシート(CSS)の基礎
他のテーマも見る

カテゴリー一覧

  • 住宅・不動産
  • マネー
  • 健康・医療
  • ビューティ
  • デジタル
  • 暮らし
  • 恋愛・結婚
  • ビジネス・学習
  • メンズスタイル
  • 旅行
  • 趣味
  • ファッション
  • グルメ
  • 車・バイク

ガイド関連

  • 専門家サーチ(ガイドを探す)
  • All Aboutガイド募集
  • ガイドへの仕事・取材依頼
  • 国民の決断

All Aboutサービス・メディア

  • All About ニュース
  • Best One
  • All About Japan
All About公式SNS
日々の生活や仕事を楽しむための情報を毎日お届けします。
公式SNS一覧
  • 会社概要
  • 採用情報
  • 投資家情報
  • 広告掲載
  • 利用規約
  • プライバシーポリシー
  • All Aboutについて
  • 著作権・商標・免責
  • 当サイトの情報についての注意
  • サイトマップ
  • ヘルプ
© All About, Inc. All rights reserved. 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載・公衆送信等を禁じます