CSS技研：ノート風の罫線にテキストをレイアウトする - builder by ZDNet Japan
ノート風の罫線に揃えてテキストをレイアウトしようとする場合、一昔前であれば各行を<span>でマークアップしたり、テーブルを利用するなどしていた。 しかし現在は、CSSを駆使することで<p>や<div>でシンプルにマークアップしてテキストをレイアウトすることができる。そのため、ブログの記事のデザインなどにも有効に活用することが可能だ。 今回のサンプルは、次の4点をポイントにして作成した。 テキストの各行を罫線に揃えてレイアウトする テキストの分量に合わせて罫線を過不足なく表示する 見出しや段落を追加しても行がずれないようにする ブラウザの文字サイズの設定を変えても行がずれないようにする
JavaScript で文字をトリミングする（改善版）
JavaScript を用いてエントリータイトル等の文字をトリミング（指定した文字数だけ表示する）するカスタマイズです。前回の「JavaScript で文字をトリミングする」は文字数だけでトリミングしたものですが、今回の改善版はバイト数で計算します。全角はそのまま1文字として数え、半角英数は2文字（2バイト）を1文字としてカウントします。 左のスクリーンショットが5文字でトリミングしたサンプルです。上は全角のみなので5文字でトリミングし、下は半角を含むので計7文字でトリミングしています。 さらにスクリプトを修正すれば、特定の半角文字（"M"とか"W"のような幅の広い文字）を全角として数えることも可能と思われます。完璧に横幅を揃えることはできませんが、かなり精度の良いトリミングができると思います。 今回も「id 属性名」と「要素名+ class 属性名」で指定したタグの中に記述された文字列を
CSS Gradient Text Effect
Do you want to create fancy headings without rendering each heading with Photoshop? Here is a simple CSS trick to show you how to create gradient text effect with a PNG image (pure CSS, no Javascript or Flash). All you need is an empty <span> tag in the heading and apply the background image overlay using the CSS position:absolute property. This trick has been tested on most browsers: Firefox, Saf
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
