制作者の活動(PR)。
- アイドル女優・堀北真希ちゃんにうさ耳を着けた創作キャラクタ。次ぎ
-
- 主な作品
-
人気女優をモデルにした創作キャラクタを用いたイラストの一例とアニメーション動画
- サイト表紙
- しらぎくのウェブサイト作成入門
- CSSの小技集
- モバイルなどでのみ有用なテキストを消す
モバイルなどでのみ有用なテキストを消す。
CSSの小技として、モバイルなどでのみ有用なテキストを消す方法です。
モバイルなどでのみ有用なテキストを消す・目次。
テキスト消去が有用な理由。
ウェブ文書はあらゆる環境で使えるようになっておりますが、やはり環境に合わせた表示は必要なものです。
例えばモバイル端末や音声端末ではページ内の移動などのアンカーは非常に便利ですが、通常のPC環境では却って鬱陶しいかも知れません。
そこで、こう言った特定の環境でのみ役立つテキストは、他の環境では隠してしまうのが良いと言う訳です。
- 本当なら、隠すと言わずに完全に消してしまうのがいいのですが、そうするとPCのブラウザ(インターネットエクスプローラ)を利用している音声ブラウザ(ホームページリーダなど)で消されたテキストを扱う事が出来なくなるため、消すのではなく隠してしまうと言う手法が採られます。
このCSSプロパティ定義の手法をオフ・レフトと言います。
テキスト消去の実例。
オフ・レフトを実際に行なうには以下のようにします。
隠したいテキストに与えられるセレクタ {
position: absolute;
top: 0;
left: -1000em
width: 900em;
}
- モバイルなどでのみ有用なテキストを消すCSSの記述例はここまで
詳しくは以下の文書で解説しました。
- ホームページリーダ対策
- この手法がなぜ必要か、実際に行うにはどのようにすべきかを解説しております。
- モバイル向けフルブラウザ対策
- 「段組カラムには適切なナヴィゲーションを付けましょう」にて、この手法を利用すべき例を示しました。
注意。
- ネットスケープ 4.xではオフ・レフトがまともに機能しませんので、「
display: none;」プロパティで消してしまうしか方法は無いでしょう。
- また、スクリーンリーダではオフ・レフトされたテキストが読上げられない場合があるようです。
しらぎくのウェブサイト作成入門サイトマップ
