jQuery で指定した要素のスタイルを変更する方法

2012年1月25日 20:38 jQuery で指定した要素のスタイルを変更する方法

jQuery の超小ネタメモ。

ボタンクリックに合わせて、特定要素の背景色や文字色を変えたりというインターフェイスを実現するには、jQuery を使うのが手っ取り早いですね。

// div要素の文字色を変更
$("div").css("color","#9932cc");

上記のように、変更したいスタイルのプロパティと値をカンマ区切りで指定します。

複数のスタイルを一気にしたいする場合は、以下のようにさらにカンマ区切りで続ければ良いです。

// div要素の文字色と背景色の変更
$("div").css("color","#9932cc", "background-color", "#000000");

何らかのアクションに合わせて、ブロック要素の表示・非表示の切り替えをしたりするのもよくやりますが、これも display:none; と display: block; (または display: inline; etc) を切り替えれば良いわけですね。

// id="mesage" を非表示にする
$("#message").css("display", "none");

// id="message" を表示する
$("#message").css("display", "block");

クラスの追加と削除

上記のように css() を使って直接スタイルを指定するのも良いですが、デザインとの一元管理を考えると、クラスの追加・削除を活用した方が良いかもしれません。

// div要素にクラスClassNameを追加
$("div").addClass("ClassName");

// div要素からクラスClassNameを削除
$("div").removeClass("ClassName");

クラスAをクラスBに変更したい場合は、removeClass("ClassA") で削除した後に、addClass("ClassB") で追加してやれば、結果的にClassA が ClassB に変わったことになりますね。

関連するブログ記事
スポンサード リンク
カテゴリー
jQuery | スタイルシート(CSS)
タグ
addClass | css | JavaScript | jQuery | removeClass

コメント(16) | トラックバック(0)

 

DoCoMo の iモード用サイトで CSS(スタイルシート) を使用する際の注意点

DoCoMo の iモード用サイトで、CSS を使用する際には、色々と注意しなきゃいけない点があるので、ざっくりと書いておきます。

一番重要なのは、2009年3月以前に発売された機種(iモードブラウザ1.0搭載端末)と、2009年5月以降に発売された機種(iモードブラウザ2.0搭載端末)とで、大きく使用が異なることです。

2009年3月以前に発売された機種(iモードブラウザ1.0搭載端末)の場合

大前提として、外部CSS は効きません。各要素に対して style 属性でスタイルを指定する必要があります。
ぶっちゃけ、管理・運用の効率化の面では CSS を使用するメリットは皆無に近いかと。

<span style="color:#3399cc;font-size:large;">ウルトラセブン!</span>

上記のような感じで、いちいち各要素に記述していかないとダメなわけです。

例外的に、a 要素の link, focus, visited クラスのみ、 style 要素による内部参照が可能なようです。というか、逆にそれしか手段がないから対応している、という感じでしょうか。

また、xhtml で書かれた文書で、かつ Content-type ヘッダが application/xhtml+xml でないとダメです。
text/html ではアウトです。

なので、perl や PHP でページを出力する場合には、以下のように Content-type ヘッダを出力する必要があります。

#-- perl の場合
print qq|Content-type: application/xhtml+xml\n\n|;

#-- PHP の場合
header("Content-type: application/xhtml+xml");

この辺はperl の CGI や PHP でよく出力する Content-type ヘッダ一覧 (MIME-type)なんかも併せてどうぞ。

スクリプトではなく、ベタの xhtml 文書の場合は、 .htaccess で Content-type ヘッダを指定する必要があります。

#-- 拡張子が .html の場合
AddType	application/xhtml+xml .html

どちらにしても、3キャリア対応のサイトの場合などは、DoCoMo 用にだけ適用しないといけないので、非常に面倒ですね。

2009年5月以降に発売された機種(iモードブラウザ2.0搭載端末)の場合

link 要素による外部CSS の参照も可能になり、style 要素による内部参照も a 要素限定ではなくなりました。

また、html、xhtml どちらでも CSS が有効になったので、 Content-type ヘッダも text/html で大丈夫です。

詳しくは、作ろうiモード:iモードブラウザ2.0対応i-CSS2について | サービス・機能 | NTTドコモを参照。

というわけで、今後出る機種に関しては、CSS を使用する場合において、DoCoMo だけ特別な何かをしなければならない、ということはあんまりなくなりそうです。
ただ、まだまだ現状では iモードブラウザ1.0搭載端末の方が圧倒的に多いと思うので、簡単に取り捨てるわけにはいかないでしょうね。

関連するブログ記事
カテゴリー
スタイルシート(CSS) | モバイル(携帯電話・ケータイ)Web
タグ
.htaccess | Addtype | Content-type | CSS | DoCoMo | perl | PHP | style属性 | style要素 | xhtml | モバイル | 拡張子

コメント(24) | トラックバック(0)

 

CSSで角丸やドロップシャドウなレイアウトを実現する『The Octopus Engine』

ようやくのことで当ブログのデザインも、オリジナルのテンプレートに変更しました。
MT4のテンプレート構成を本格的にじっくり解析しながらのカスタマイズだったので、なかなか楽しかったです。

さて、今回はこのブログでも利用している、スタイルシート(CSS)で角丸やドロップシャドウなレイアウトを実現するためのソリューション『The Octopus Engine』について、解説しようと思います。

と言っても、旧ブログで書いていた記事の転載なんですが。


Webサイトのレイアウトをデザインする上で、特定のブロックの角を丸くしたり、ちょっと変わった枠にしようとすると、背景画像を作って、テーブルレイアウト(tableタグをレイアウトに用いる)をする必要があります。

xhtml+cssがデザインの主流となっている昨今、正直テーブルレイアウトはダサい。

ということで、どうにかしてCSS(スタイルシート)で角丸レイアウトができないか、という人にお勧めなのが、The Octopus Engine(オクトパス・エンジン)です。

The Octopus Engine(オクトパス・エンジン)は、四方の角と上下左右の画像を用意し、CSS(スタイルシート)とJavaScriptによって、角丸等のデザイン性に富んだブロックレイアウトを実現するソリューションです。

JavaScriptは使いたくなければ使わなくてもOKですが、そうするとひとつのブロックを8つのdiv要素(タグ)で囲まなければならないという、あまり美しくないxhtmlソースになってしまいます。
現在のうちのサイトのように、The Octopus Engine(オクトパス・エンジン)を多用する場合はJavaScriptを使用したほうが良いでしょう。

使い方はいたって簡単です。

1. スクリプトのダウンロード

Dragon Labs | The Octopus Engineにて、The Octopus Engine(オクトパス・エンジン)のスクリプト「octopus.zip」をダウンロードします。

「octopus.zip」を解凍すると、JavaScriptのソースコード「octopus.js」と、各種レイアウトの画像ファイルが格納されたフォルダ「anemone」「seahorse」「shark」「squid」「swordfish」、そして各画像のPhotoshop(フォトショップ)プロジェクトファイルが格納されたフォルダ「psd」が展開されます。

2. ファイルのアップロード

「octopus.js」と画像をアップロードします。

とりあえず、画像は「anemone」「seahorse」「shark」の中からどれを選ぶと良いでしょう。
「anemone」は、さらに4つのバリエーションから選択できます。

3. JavaScript「octopus.js」の呼び出し

The Octopus Engine(オクトパス・エンジン)を利用したいページで、「octopus.js」を呼び出します。
具体的には、該当ページのhead要素(タグ)内に、下記を追加します。

<script src="/octopus.js" type="text/javascript"></script>

「octopus.js」へのパスは、環境に合わせて変えてください。

4. CSS(スタイルシート)の追加

CSS(スタイルシート)に以下を追加します。

.north { background: url(north.png) repeat-x top; }
.east { background: url(east.png) repeat-y right; }
.south { background: url(south.png) repeat-x bottom; }
.west { background: url(west.png) repeat-y left; }
.ne { background: url(ne.png) no-repeat top right; }
.se { background: url(se.png) no-repeat bottom right; }
.sw { background: urlsw.png) no-repeat bottom left; }
.nw { background: url(nw.png) no-repeat top left; }

各種画像ファイルのパスは、環境に合わせて変えてください。

5. The Octopus Engine(オクトパス・エンジン)を使うブロックに適用する

The Octopus Engine(オクトパス・エンジン)を使いたいブロックを、下記のdiv要素で囲みます。

<div class="octopus">~</div>

以上で完了です。

なお、使用する画像によっては下記の例のように、クラス「.nw」に何ピクセルかpaddingを入れないと綺麗に表示されません。

.nw { padding: 25px; }

また、「squid」及び「swordfish」は、利用方法が異なります。
どちらも共に3種類の画像と、CSS(スタイルシート)のborder(ボーダー・枠線)を併用するタイプのソリューションです。

こちらの利用方法はまた別の機会に。


ここまでが、旧ブログに書いた記事です。
ここからは追記。

この『The Octopus Engine』の最大の魅力は、「本来なら8つものdiv要素を入れ子にいないと実現できないことを、(JavaScriptをうまく利用して)たったひとつのdiv要素で実現している」ことにあります。

が、このJavaScriptがちょっと問題でして、ページ全体の読み込みが終わってからでないと、スクリプトが実行されない(=角丸等にならない)ので、ちょっとサイズの大きなページだと、読み込みが終わるまでの間、微妙にレイアウトが変になるんですよね。

なので結局僕は、JavaScriptを使って、

<div class="octopus">~</div>

とやらずに、直接8つのdiv要素で囲むという、あんまり(かなり?)スマートじゃない方法を取っています。

<div class="north"><div class="east"><div class="south"><div class="west">
<div class="ne"><div class="se"><div class="sw"><div class="nw">
ここにコンテンツが入る
</div></div></div></div>
</div></div></div></div>

こういうことです。

我ながら、正直微妙……。

関連するブログ記事
カテゴリー
スタイルシート(CSS)
タグ
CSS | JavaScript | The Octopus Engine | Webデザイン | xhtml

コメント(11) | トラックバック(1)

 

このブログについて

阿部辰也

Webコンサルタントやシステムエンジニア、執筆業などをやっている、グッドホープ代表・阿部辰也のブログです。
Web技術系のTipsから仕事の話、趣味の話まで色々と。
人生は所詮生まれてから死ぬまでの壮大な暇つぶし。
だったら有意義に暇をつぶして生きましょー。

阿部辰也へのお仕事のご依頼・問合せはこちらからどうぞ。

Twitter: @t_abe
読書メーター: ID:Tatsuya

このブログのサイトマップ
このブログのはてなブックマーク数

Feed/RSS購読

タグクラウド

最近のトラックバック

阿部辰也の著書

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

77のキーワードで知る インターネットで稼ぐ 図解 ブログ・メルマガ・Webサイト構築の基本

頑張って書いたのに、出版後すぐに出版社が倒産して印税も貰えずじまいで俺涙目(笑)。

Powered by Movable Type 5.02

スポンサード リンク

はてなブックマーク



あわせて読みたい

t-abeの今読んでる本

t-abeの最近読んだ本

t-abeの今やってるゲーム

t-abeの最近やったゲーム