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
2015年7月29日水曜日
WebKitでズーム(拡大縮小)用カーソルを指定するスタイル
WebKitでは
参考: Introducing the New CSS Cursor Styles in CSS3
Safariで画像を直接開いたときにウインドウサイズ以上の画像は拡大縮小できるじゃないですか。
あれをJS+CSSを使って自分のWebView上で再現してみたいと思っています。
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で済ませました。
また、クロスプラットホームに対応させる場合には、
他にもいろいろ指定するする必要があるようです。
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で済ませました。
また、クロスプラットホームに対応させる場合には、
他にもいろいろ指定するする必要があるようです。
登録:
投稿 (Atom)