タグ

contentに関するkobayashi_shinjiのブックマーク (3)

  • [css] contentプロパティで挿入できるコンテンツ – WebTecNote

    clearFixでお馴染みなCSSの擬似セレクタ::beforeと::afterではcontentプロパティというものが使えるわけですが、 ::beforeと::afterがIE7以下未対応ということもあって使ってない人は未だ多かろうと思います。 しかしながらレガシーなIEで表示されないから使わないというのは非常に勿体無いので、 今一度contentプロパティで挿入出来る内容についてまとめておこうと思います。 ※2019年現在は全ブラウザ対応しています。 挿入出来るモノ 大きく分けると3つです。 テキスト プロパティの値 画像 content:”テキスト” 半角英数や半角の記号ならそのままでOK。ただしクォーテーションなどのメタ文字は\でエスケープしないと表示されない。 日語などの2バイト文字も書いたまま表示されるけど、数値文字参照の値で書いた方が無難です。 例:タイトルの前に★マークを

    [css] contentプロパティで挿入できるコンテンツ – WebTecNote
  • CSS テキスト飾り罫(TexTsiTe)

    border等でやるのもいいけど、そろそろCSS擬似要素でハッチャケちゃってもいい時期だと思うので、実験を兼ねて色々なパターンのサンプルを作ってみる。フォントによってどうなるかわからんのである程度は「お遊び」程度のものと捕らえて欲しい。ポイントになるのは、 字詰め(letter-spacingのマイナスの値) 「white-space:pre」必須(特に全角の文字等を使う際) 元要素に「overflow:hidden」必須 字詰めをやっとかないとアスキーアートやメルマガなんかと変わらないものが多いので注意。 その他、このパターンも良いよてなものがあったらコメント欄にでもガンガン入れちゃってください。サンプルに追加します(気が向いたら)。尚、サンプルのスタイルは都合上contentの量を減らしています。あと、このページのみ、のけぞるようなソースをしているが借り物のシステム上、お察し下さい。

  • Safariでのcontentプロパティが文字化けするバグの対策 - Transrain

    caramel*vanillaさんを見ていて気づいたのですが、Safariでcontentプロパティに日語を使うと文字化けします。 そこでweb creatorsの6月号を確認してみると、文字列をエンコードして設定してあげると良いと判りました。 エンコードをするにはJavaScriptで作られたツールを使うと良いです。 数値文字列参照変換スクリプト ここで日語を「16進数のhtml数値文字参照」に変換します。すると、文字列がJavascriptで使用できる状態にエンコードされます。 「あ」→ 「あ」 この状態のままでは使えないので、もう少し変換をかけます。 「&#x」を「\」に、「;」を削除して下記の形式に変換します。 「あ」 → 「\\3042」 こうやってできた文字列参照を使ってcontentプロパティを記述します。 修正前 ins:before { (略) content:

  • 1