Archive for 12月 2015

2015年12月28日月曜日

（jQueryの学習）CSS：プロパティを操作する／cssメソッド／複数のプロパティを取得する（その１）

（jQueryの学習）CSS：プロパティを操作する／cssメソッド／複数のプロパティを取得する（その１）

引き続き、CSSのプロパティを操作する方法を学びます。

本日は「2.複数のCSSプロパティを取得する」です。

2.複数のCSSプロパティを取得する

2-1.cssメソッド【返却値(文字列) = 要素.css(プロパティ)】で複数要素のプロパティ値は習得できるか？
1-1.で使用したcssメソッドは1つの要素に対するプロパティしか返却しません。
仮に該当する要素が複数存在した場合はどうなるのか？を見てみます。

『fontタグで定義されている2つの要素を参照する』↓のサンプルを操作すると、「20px」が返却されました。
これは1つ目のfontタグのプロパティ値であることがわかります。
つまり、複数の要素が該当する場合は1つ目の値しか返却しない仕様であることがわかります。
サンプルソース
// HTML
<input type="button" value="ボタンを押すと、指定した要素とそのプロパティが表示されます"><br>
<div class="box-test-area">
  <font class="css1-char1">【テキスト１】</font>　<font class="css1-char2">【テキスト２】</font><br>
</div>

// CSS
/* テキスト１ */
.css1-char1 {font-size: 20px; font-weight: bold; color: green;}
/* テキスト２ */
.css1-char2 {font-size: 80%; color: red; font-style: italic;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    /* サンプル：「テキスト１」と「テキスト２」のフォントサイズを取得する */
    alert("[" + $("font").css("font-size") + "]");
  });
});
実装例
指定した要素に設定されているプロパティを取得します。

要素: 　プロパティ:

【テキスト１】　【テキスト２】

前回の方法では複数のCSSプロパティは取得できませんでした。
次回はやり方を少し変えてみます。

それでは、また。

2015年12月25日金曜日

（jQueryの学習）CSS：プロパティを操作する／cssメソッド／単一のプロパティを取得する

（jQueryの学習）CSS：プロパティを操作する／cssメソッド／単一のプロパティを取得する

今回は.css()メソッドを使って、CSSのプロパティを操作します。
以下、3つのカテゴリに分けて見ていきます。


  1. CSSプロパティを取得する
  2. 複数のCSSプロパティを取得する
  3. CSSプロパティを設定する


本日は「1.CSSプロパティを取得する」を学びます。

1.CSSプロパティを取得する

1-1.cssメソッド【返却値(文字列) = 要素.css(プロパティ)】で1つの要素のプロパティ値を取得する
プロパティの値を取得するためにはcssメソッドを利用します。
要素に対してcssメソッドを使用し、その引数に取得したいプロパティを指定します。
返却値は「文字列」のため、取得したプロパティ値を二次利用するには値の加工が必要。
　例）
　　幅の値は「要素.css("width")」で取得できますが、
　　「"999px"（文字列）」の形式で返却されるため、
　　『"px"を取り除いた後、parseIntをかける』等の細工が必要になります。
　　これをするくらいなら、初めから要素の幅を取得する「widthメソッド」を使った方が楽。
サンプルソース
// HTML
<input type="button" value="ボタンを押すと、指定した要素とそのプロパティが表示されます"><br>
<div class="box-test-area">
  <div class="circle"></div>
</div>

// CSS
/* 内側の円 */
.circle {width:70px; height:70px; text-align: center; background-color:#FFCC99; opacity: 0.8; border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%;}

// jQuery
$(function() {
  $("input[type=button]").click(function(){
    // 【構文】返却値(文字列) = 要素.css(プロパティ)
    //   サンプル：「内側の円」の幅を取得する
    alert("[" + $(".circle").css("width") + "]");
  });
});
実装例
指定した要素に設定されているプロパティを取得します。

要素: 　プロパティ:

【テキスト１】　【テキスト２】

いかがでしたか？
まずは1つの要素に対するCSSプロパティが取得できました。

次回は「2.複数のCSSプロパティを取得する」を学びます。

それでは、また。

2015年12月21日月曜日

（jQueryの学習）CSS：要素のスタイルを変更する（基本）

（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座標）を取得／設定する

それでは、また。