Attention! Translated article might be found on my English blog.
ラベル CSS の投稿を表示しています。 すべての投稿を表示
ラベル CSS の投稿を表示しています。 すべての投稿を表示

2015年7月29日水曜日

jQuery, CSSメモ

jQuery:

jQuery要素にclassを追加・削除する:
addClass(), removeClass()を使う
参考: jQuery: 要素にスタイルクラスを適用/除外するには?(addClass/removeClass/toggleClass/hasClass) - Build Insider

jQuery要素にstyleを追加する:
css()を使う
参考: jQuery – style属性のプロパティの値を取得・追加『 css() 』 | 1:n – DETELU Blog

jQuery要素がクリックされたときのアクションを追加する:
click()を使う。再指定時はclick()の前にunbind('click')したほうがよさそう。
参考: .click() | jQuery API Documentation


CSS:

CSSでクラス名を指定する:
.クラス名で指定可能。
参考: スタイルシート[CSS]/CSSの基本/クラス名を使った指定 - TAG index Webサイト

CSS内でコメントアウトする:
/* */ で括る。
参考: CSSのコメントアウト - ホームページ作成F


WebKitでズーム(拡大縮小)用カーソルを指定するスタイル

WebKitでは
cursor: -webkit-zoom-in
もしくは
cursor: -webkit-zoom-out
というスタイルでズームイン、ズームアウトのカーソルが使えるようです。

参考: Introducing the New CSS Cursor Styles in CSS3

Safariで画像を直接開いたときにウインドウサイズ以上の画像は拡大縮小できるじゃないですか。
あれをJS+CSSを使って自分のWebView上で再現してみたいと思っています。

2015年7月7日火曜日

CSSを使って英語文字列の途中で強制改行する

【CSS】長い文字列をCSSで強制的に改行させたいときは『word-wrap:break-word;』を使うべし。 - すたら日記によると、
word-wrap: break-word;を設定すれば可能のようでした。

しかし上記サイトの解説の通り、同時にwidthを指定する必要がありました。
試してみたところ、widthは%ではなくpxなどの固定値でなければならないようで、
ウインドウリサイズに追随しないという問題がありました。

他の解決策を探したところ、Word wrapping/hyphenation using CSS. — Kenneth Auchenberg
動的なリサイズでも改行してくれる方法がありました。 
今回はWebKitだけ対応できれば良いので、word-break:break-all;を設定したところ、
無事リサイズに追随して改行されるようになりました。 

なお記事にある通り、break-allだとワード単位で区切られないという副作用があり、
break-wordという非公式な値を指定することでこの副作用を抑制しているようです。
自分の場合はそこまで神経質になる必要が無いのでbreak-allで済ませました。

また、クロスプラットホームに対応させる場合には、
他にもいろいろ指定するする必要があるようです。