2015年12月21日月曜日

(jQueryの学習)CSS:要素のスタイルを変更する(基本)

本日からはjQueryのスタイルシートの操作について、学習していきます。

スタイルシートとは、
ここではCSS(カスケーディング・スタイル・シート)と呼ぶものを表します。
これはWebサイトにおいて、
HTMLだけでは表現することが難しい見栄えやレイアウトの表示に関する指定を行うものです。

例えば、あるサイトではPタグは全て「赤」で表示するルールがあるとします。

<body>
  <p><font color="red">あいうえお</font></p>
</body>
});
・・・こんな感じで指定すれば良いのですが、
対象箇所が多かったときや、異なるタグに同じ属性を適用したいときなど、
これを全てのHTMLに打ち込むのは大変ですよね?
打ち漏れもあるでしょうし・・・。

これをより簡便に定義できるようにしたものがCSSというものです。
こんな感じで書きます。
<head>
  <style type="text/css">
  <!--
  p {color:red;}
  -->
  </style>
</head>
<body>
  <p>あいうえお</p>
</body>
});

CSSについて簡単に述べました。
詳細は追々調べるとして・・・
では、jQueryでCSSを操作するとはどういうことか?

jQueryの利便性を駆使して、
対象範囲が限定できたり、動的操作ができたりと、
Webサイトの表現の幅が広がることに繋がります。

手始めにjQueryでCSSを操作するメソッドを紹介し、
次回以降、それぞれのメソッドを使ってCSSを操作してみたいと思います。
メソッド主な用途
.css( )CSSプロパティを取得/設定する
.height( )要素の高さを取得/設定する
.innerHeight( )borderの内側の高さ(borderは除き、paddingは含む)を取得する
.outerHeight( )borderの外側の高さ(border、paddingを含む)を取得する
.width( )要素の幅を取得/設定する
.innerWidth( )borderの内側の幅(borderは除き、paddingは含む)を取得する
.outerWidth( )borderの外側の幅(border、paddingを含む)を取得する
.offset( )documentからの相対位置を取得/設定する
.position( )親要素からの相対位置を取得する
.scrollTop( )スクロール位置(Y座標)を取得/設定する
.scrollLeft( )スクロール位置(X座標)を取得/設定する

それでは、また。

Previous Post
Next Post

post written by: