[B! CSS][text] sh19eのブックマーク

文字列を省略して「…」を付与する方法 – CSS/jQuery | DevelopersIO

通常、設計・デザインの段階であらかじめ表示する文字数の上限を決めておき、PHPやRuby、Javaなどサーバサイドで表示する文字列を加工することが多いかと思います。しかし、この方法だと動的に変化する領域を基準に表示する文字数を制限する場合や、文字サイズや表示領域のサイズに合わせて上限を算出する場合に限界があります。そこで、クライアントサイドで表示領域から文字列がはみ出す場合、文字列を省略して省略記号「…」をつける方法を紹介してみたいと思います。実現方法として以下の2つの方法があります。 text-overflowプロパティを使う jQueryで表示領域の幅・高さに合わせて文字列を加工する text-overflowプロパティを使う text-overflowプロパティを用いると、文字列が表示領域からはみ出してしまった場合、はみ出した文字列を省略記号「…」で省略することができます。尚

sh19e 2014/12/02

リンク

Vertical-Align: All You Need To Know (CSS)

Yep, let’s talk about the CSS property vertical-align. It’s intended use is to align text and elements next to each other. Like centering an icon next to a bit of text. But, it can be a real scumbag sometimes with all its seemingly mysterious rules at work. For example, it might happen, that the element you changed vertical-align for doesn’t change its alignment at all, but other elements next to

sh19e 2014/09/19

リンク

codelator.com - codelator リソースおよび情報

sh19e 2014/09/16

リンク

Glitch Effect On Text / Images / SVG | CSS-Tricks

DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! Lucas Bebber’s Glitch is a super cool effect. It’s like you’re looking at some text displayed on a progressive scan monitor that has been dropped on the ground one too many times and so the alignment of the pixels is off in weirdly un-even amounts time and space. It’s bonafide CSS trick if t

sh19e 2014/09/09

リンク

CSS3で遊ぼう！縦書きにルビを振ってみたり〜！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

お早うございます！デザイナーの王です。直感ですが、本を読む時、僕は縦書のほうが読みやすいのです。実際、人間の視野って、上下のほうが狭いそうなので、それだけ集中して文字を追いやすいと思います。何より、指でなぞりやすいのがいいｗｗアルファベット表記が混在する場合は別ですが、基本的に縦書が好きです。今回はタイトルの通り、ルビ付きの縦書の実装方法を紹介したいと思います。以下は実際にWeb上で表示されたもののスクリーンショットです。驚愕の事実！実はIEはバージョン5.5から実装されてました！縦書を指定する際に用いるCSS3「writing-mode」というモジュールは、な‥なんと！IE5.5から実装されてました！今はすっかり嫌われ者とされているあのIEは当時では最先端ですね！長い間、IE独自実装のため、新参のWeb屋にはあまり知られていない機能ではないでしょうか。勿論、CSS3の「w

sh19e 2014/08/20

CSS
text

リンク

紙面に近づけたい！HTML＋CSSで作る文字レイアウト12個 | PRESSMAN*Tech

印刷する紙のデザインと異なり、Webデザインは環境によって見た目が変わります。どの環境でも同じレイアウトで見せるには画像として書き出せば確実なのですが、テキストの部分はそうもいきません。 DTPデザイナーの方からも「こんな文字のレイアウトはWebだと無理？」といったご相談を受けることがよくあります。今年に入って、HTML5＆CSS3に対応したブラウザのシェアもかなり増えてきましたので、今回は文字のレイアウトに関するHTMLとCSSをご紹介したいと思います。目次：段組み縦組み（縦書き）行末揃え（両端揃え）先頭文字スタイル（ドロップキャップ）段落先頭1字下げ2行目から1字下げ（ぶら下げインデント）行頭禁則文字ふりがな（ルビ）圏点（傍点、脇点）大文字と小文字の変更スモールキャップス（スモールキャピタル）長体、平体（水平比率、垂直比率）※IE以外のブラウザは、2014年7月4日現在の最新版にて