HTML／CSSを操作するjQueryの命令（テキストの変更と取得）

次は簡単シンプルな基礎のjQueryの命令についてです。

 

HTML要素に含まれるテキストをjQueryで変更または取得するには、text()という命令を使う。
$('p#first').text('変更後');
 
●テキストの取得
text()のカッコ内に何も記述しない場合、セレクタで指定した要素に含まれるテキストを取得
$('p#first').text();
 
（例）
<p id="first">取得する文字列</p>
<p id="second">変更前</p>

<script>
$(function(){
$('p#second').text($('p#first').text());
});
</script>
 
●HTMLの取得
html()
<p id="first"><strong>変更前</strong></p>
<p id="second">変更後</p>

<script>
$(function(){
$('p#second').html($('p#first').html());
});
</script>
 
●HTMLの挿入
①HTML要素内の先頭に挿入　prepend()
<p id="first">texttext</p>

<script>
$(function(){
$('p#first').prepend('<strong>!!!!</strong>');
});
</script>
 
②HTML要素内の後ろに挿入　append()
<p id="first">texttext</p>

<script>
$(function(){
$('p#first').append('<strong>!!!!</strong>');
});
</script>
 
③HTML要素の前に挿入　before()
<p id="first">texttext</p>

<script>
$(function(){
$('p#first').before('<h1>H1H1H1</h1>');
});
</script>
 
④HTML要素の後ろに挿入　after()
<p id="first">texttext</p>

<script>
$(function(){
$('p#first').after('<h1>H1H1H1</h1>');
});
</script>
 
⑤HTML要素内の先頭に移動
指定した要素をほかの要素の内部の先頭に移動すには、prependTo()を使います。
<p>テキストテキスト</p>
<strong>先頭に移動</strong>

<script>
$(function(){
$('strong').prependTo('p');
});
</script>
 
⑥HTML要素内の最後に移動
指定した要素をほかの要素の内部の最後に移動するには、appendTo()を使います。
<p>テキストテキスト</p>
<strong>最後に移動</strong>

<script>
$(function(){
$('strong').appendTo('p');
});
</script>
 
⑦HTML要素の前に移動
指定した要素をほかの要素の前に移動するには、insertBefore()を使います。
<p>テキストテキスト</p>
<h1>前に移動</h1>

<script>
$(function(){
$('h1').insertBefore('p');
});
</script>
 
⑧HTML要素の後ろに移動
指定した要素をほかの要素の後ろに移動するには、insertAfter()を使います。
<h1>後ろに移動</h1>
<p>テキストテキスト</p>

<script>
$(function(){
$('h1').insertAfter('p');
});
</script>
 
⑨他の要素で包む
●各要素を指定した要素で包む　wrap()
<要素名>～<要素名>のように空の状態でカッコ内に記述
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>

<script>
$(function(){
$('strong').wrap('<h1></h1>');
});
</script>
 
結果　↓
<h1><strong>テキストテキスト</strong></h1>
<h1><strong>テキストテキスト</strong></h1>
 
●全要素を別の要素で包む
まとめて別の要素で包む、wrapAll()
<strong>テキストテキスト</strong>
<strong>テキストテキスト</strong>

<script>
$(function(){
$('strong').wrapAll('<h1></h1>');
});
</script>
 
結果　↓
<h1><strong>テキストテキスト</strong><strong>テキストテキスト</strong></h1>
 
wrappAll()はセレクタで指定した要素が複数ある場合、要素の間に含まれる別の要素やテキストを除外する。
 
●指定した要素の子要素を別の要素で包む　wrapInner()
<p>テキストテキスト</p>
<p>テキストテキスト</p>

<script>
$(function(){
$('p').wrapInner('<strong></strong>');
});
</script>
 
●親要素を取り除く　unwrap()
<h1><strong>テキストテキスト</strong></h1>

<script>
$(function(){
$('strong').unwrap();
});
</script>
 
上では<strong>タグの親要素である<h1>を取り除いています。
 
●要素の置き換え　replaceWith()
<p>置き換え前</p>

<script>
$(function(){
$('p').replaceWith('<h1>置き換え後</h1>');
});
</script>
 
●要素の削除　remove()
<p><strong>削除するテキスト</strong>残るテキスト残るテキスト</p>

<script>
$(function(){
$('p strong').remove();
});
</script>
 
結果　↓
<p>残るテキスト残るテキスト</p>
 
sublime Textで記述していて気付いたのですが、jQueryを記述している途中でちゃんと補助が表示されます。ありがたいです。
ここまでの勉強はまだまだ基礎ですが、今まで使ってきたjQueryのプラグインたちもwrap()だとかwrapInner()だとかが使われていたように思います。
jQueryはまだまだこれからといったところですが、この基礎の部分をしっかり覚えていきたいです！
 

 

今日からjQuery‼

ずっと自分でjQueryを書けたら…と思っていました。

でもなんだかんだでないがしろにしてしまっていたり、コピペで済ませていたり…。

早速勉強を始めます‼頑張るぞー！＼(^ o ^)／

 

このブログでは、私のためのメモとして使わせて頂きます。

（後で見返したら、「これブログ…？」なんて思いそう…）

今回勉強するにあたり使用した参考書は

『Web制作の現場で使うjQueryデザイン入門（西畑一馬）』

です。ドーナツ本です‼

 

ボリュームが多いため、ブログに長文…になってしまいそうなので、分けて書いていくことになりそうです。

 

早速、要素を指定するセレクタについて

●　スクリプトを実行するタイミングを制御する「ready」というjQueryメソッド
HTMLの読み込みが終わった後に実行されるため、body要素内のHTMLをきちんと操作できます。
$(function(){
    ここにjQueryの処理を記述
});
 
●　HTMLの要素を指定する「セレクター」
$(function(){
    $(' セレクタ ').jQueryの命令
});
 
①CSSでよく利用されるセレクタ
②CSS3のセレクタ
③CSSの属性セレクタ
④jQueryの独自セレクタ
 
$(function(){
    $(' li > strong ').css(' color ', ' red ');
});
 
・隣接セレクタ
特定の要素の次に出現する要素を選択できるのが、隣接セレクタ
$(function(){
    $(' #second ＋ li ').css(' color ',' red ');
});
 
・間接セレクタ
特定のセレクタの後に出現する要素を選択できる。セレクタと要素を~（チルダ）で結びます。
$(function(){
    $(' #second ~ li ').css(' color ',' red ');
});
 
・否定擬似クラス
セレクタ内の要素で特定の条件以外の要素を選択できるのが、否定擬似クラスです。セレクタの後ろに:not(…)を付け、(…)内に除外する条件を記述します。
$(function(){
    $(' li:not(:first-child) ').css(' color ',' red ');
});
 
・nth-child擬似クラス
偶数番目　　$(' li:nth-child(even) ')
機数番目　　$(' li:nth-child(odd) ')
３の倍数番目　　$(' li:nth-child(3n) ')
 
・only-child擬似クラス
セレクタに特定の要素が１つだけ含まれる場合、:only-childで選択
 
・nth-last-child擬似クラス
セレクタに指定した要素で、後ろから数えて指定した順番にある要素を選択できます。
:nth-last-child(番号)
 
・nth-of-type擬似クラス
セレクタに指定した要素で、指定した順番にある要素を選択できます。
nth-child擬似クラスは要素の種類に寒けなくすべての兄弟用を数えるのに対し、
nth-of-type擬似クラスは指定した要素のみを数えます。
$(function(){
    $(' dt:nth-of-type(2) ').css(' color ',' red ');
});
 
他、nth-last-of-type　後ろから数えて指定した順番にあたる要素を選択
first-of-type、last-of-type
 
 
●　CSSの属性セレクタ
要素の属性や属性値を条件に対象を絞り込める、属性セレクタにも対応しています。
①[attribute]　特定の属性を持つ要素をせんたくできるセレクタ
（例）id属性のみ
$(function(){
    $(' [id] ').css(' color ',' red ');
});
 
②[attribute = 'value']
特定の属性が、特定の値を持つ要素選択できるセレクタ
（例）title属性の値が「second」
$(function(){
    $(' [title = 'second'] ').css(' color ',' red ');
});
 
③[attribute! = 'value']
特定の属性が、特定の値を持たない要素を選択できるセレクタ
このセレクタは要素セレクタの後に続けて記述する必要がある
（例）title属性の値が「first」以外のli要素（１番目以外のli要素）が赤色になる
$(function(){
    $(' li[title! = ' first '] ').css(' color ',' red ');
});
 
④[attribute^ = 'value']
特定の属性の値が、特定の文字列で始まっている要素を選択できる
（例）
<ul>
     <li title="first">テキストテキストテキストテキストテキストテキスト</li>
     <li title="second">テキストテキストテキストテキストテキストテキスト</li>
     <li title="third">テキストテキストテキストテキストテキストテキスト</li>
     <li title="fourth">テキストテキストテキストテキストテキストテキスト</li>
</ul>
 
title属性の値が「f」で始まる要素、つまり１番目と４番目のli要素が赤色になる。
$(function(){
    $(' [title^ ='f'] ').css(' color ',' red ');
});
 
⑤[attribute$ = 'value']
特定の値が特定の文字列で終わっている要素を選択できる
（例）上のHTML参照
title属性の値が「d」で終わっている要素、つまり２番目と３番目のli要素が赤色になる
$(function(){
    $(' [title$ = 'd'] ').css(' color ',' red ');
});
 
⑥[attribute* = 'value']
特定の属性が、特定の文字列を含んでいる要素を指定できる
（例）上のHTMLを参照
title属性の値に「ir」を含む要素、つまり１番目と３番目のli要素が赤色になる
$(function(){
    $(' [title* = 'ir'] ').css(' color ',' red ');
});
 
⑦複数の属性セレクタを同時に指定することもできる
$(function(){
    $(' [title^ = 'f'][title* = 'th'] ').css(' color ',' red ');
});
 
●　jQueryの独自セレクタ
①firstセレクタ（:first）、lastセレクタ（:last）
指定したセレクタで最初（最後）に登場する要素だけを選択
$(function(){
    $(' li:first ').css(' color ',' red ');
    $(' li:last ').css(' color ',' blue ');
});
 
②evenセレクタ（even）、oddセレクタ（:odd）
$(function(){
    $(' li:even ').css(' color ',' red ');
    $(' li:odd ').css(' color ',' blue ');
});
 
セレクタの中から特定の順番の要素をeq（equal）セレクタで、特定の要素より前の要素をlt（less than）セレクタで、後の要素をgt（greater than）セレクタで選択できます。要素は登場する順番を数値に指定します。Javascript は０から数えるため、１番目の要素の場合は「０」、２番目は「１」、３番目は「２」……といった具合に、実際の順番から１を引いた数を指定します。
$(function(){
    $(' li:lt(2) ').css(' color ',' red ');
    $(' li:eq(2) ').css(' color ',' red ');
    $(' li:gt(2) ').css(' color ',' red ');
});
 
●headerセレクタ
h1～h6までのheading要素をまとめて選択できるセレクタ
$(function(){
    $(' :header ').css(' color ',' red ');
});
 
●containsセレクタ／hasセレクタ
containsセレクタは特定の文字列が含まれている要素を、hasセレクタは特定の要素が含まれている要素を選択できます
$(function(){
    $(' li:contains(' サンプル ') ').css(' color ',' red ');
    $(' li:has(strong) ').css(' color ',' blue ');
});
 
 
このページはセレクタで終わり～。
次はjQueryの命令です！基礎の基礎になりますかね。。
 

Modernizr

cssの「background-size」はIE8に対応していません！
IE8でどのように表示されるのか、いつも見る前は不安でたまらないですが…。今日はそれを解消できる技を教えてもらいました‼︎

Modernizr

上のサイトのmodernizr.jsを読み込ませます。開発者ツールなどでhtmlのソースを見てみると、<html>タグにクラス名が付きます。
たくさん付いたクラス名の中に「backgroundsize」があるのがわかります。これをIE8で見てみると「no-backgroundsize」になっています。jsが切り替えてくれているので、cssでクラス名「no-backgroundsize」に対してスタイルをつければ、そのスタイルがIE8で見たときだけ効いてくれるのです。

とても便利です‼︎




それと、昨日のブログで紹介した「hightLine.js」ですが、新しいものがあると教わりました。「jquery.heightLine.js」です！
クラスで指定するのでなく、jQueryで指定してあげる感じのようですね。




レスポンシブコーディング

今日はレスポンシブサイトのコーディング作業だったのですが、初めて使った素晴らしいものがありました！「hightLine.js」です‼︎

ググって最初に出てきたのがこれ

レスポンシブで2カラム以上のボックスの横並びはいつも少し悩んでいました。背景がカラーで複数の白地のボックスが高さ常に一緒……よくあるデザインです。

ですがこのjsを使えばクラス名を指定してあげるだけでhightが勝手に均等になってくれます‼︎すごく楽チンです。



レスポンシブコーディングでもう一点…。
PCで見たときは改行してるけど、幅を狭めると改行がおかしくなってしまうことについて！
そういう時は変にbrタグを使うのではなく、改行させたい部分をspanで囲みます。cssでPCの時を
span｛
     display: block;
}
にしておき、メディアクエリでタブレット以下の時を
span｛
     display: inline;
}
にします！block要素とinline要素で実現させている訳です。これ用のクラスをつけてしまえば使い回しも効きます‼︎

レスポンシブコーディングはまだまだ悩みながらなので時間が掛かってしまいます…。。なんとか慣れてしまいたいです‼︎





下にまたメモを書いていきます。

私はついついスライスを最初の段階でやってしまっていたのですが、スライスは最後で良いのです。
画像の感じを見たいときは
これを使いましょう！
でwidth 350、height 150の画像を置くことができます。後々になってデザイン変更って本当によくありますよね…(^^;;
これはとても便利です‼︎




コーディングで学んだこと

今日のコーディングで学んだことを書いていきます。

まず、imgタグのaltには、しっかり代替テキストを記述すること。結構中途半端に書いてしまっていることが多いです。。改善します！


また、ページ全体を見て、どこがh1、h2、h3、pタグになるのかを決めることも重要です。同じデザインのタイトルがバラバラのタグで使われているのは良くないと教わりました。
他のタグもそうですが、コンテンツにピッタリ合ったタグを使用するべきです。

実は今まで、デザインを見てテキストのフォントサイズや色感からタイトル要素を決めてしまうことが多かったんです…。
しかし、フォントサイズが小さくても、ページの見出しになっていればh1やh2になる、反対に、見出しに見えるテキストをpタグにすることもあるのだと分かりました。


そして、後々タグを変更しても良いように、タグにクラス名を付け、そのクラスに対してcssをあてることが大切です！


今日のコーディングで習ったこと

まず、今日のコーディングで習ったことを一つずつメモしていこうと思います。

まずはクラスの付け方について！
私が今まで結構やってきちゃっていたのは、外側のdivなどにクラス名やid名をつけて、その中の要素に対してcssをあてるというものでした。

でも、これだと汎用性がなく、他のコンテンツ部分に同じデザインのものが再登場してもまたcssの書き直しが起こっていました…。。
今思うととても面倒くさいですし、パフォーマンスも悪いですよね(^^;;

まずは全ページデザインデータを見回して、使い回せそうなものをピックアップします。そういった設計は時間を掛けてでもやるべきだと学びました！

クラス名を付ける時はピンポイント指定にしてあげることです！まだ私は慣れていないため、最初は名前付けにも少々悩みそうですが、もちろん汎用性の効きそうな名前を付けてあげるのが良さそうです。



それと合わせて、html5のクラス名の付け方も「なるほど！」な方法を教わりました‼︎html5をコーディングする際はheader内の下の方に、IE9対応用のhtml5.jsを記述するのが一般的なのかなと思ってました。ググると出てくるので一般的なのかも…と思っていたのですが、もうhtml5.jsは使わないのが良いのだそうです！

ではどうするのかというと、私は<header>タグや<nav>タグにクラス名、id名を付けていました。
そうするのではなく、html5タグの中にdivタグを入れて、それにクラス名を付けるようにします。そうすればIE8など対応していないブラウザでも効くようになります。



ブラウザ対応には気を遣いますね…。。
今日もうひとつ教えていただいたのが「Can I use_?」(http://caniuse.com)です！迷ったらこれで調べるようにしようと思います(^ ^)


初めてheader内のog:imageを知る

今日はまず、「header」内に設定するmeta情報について書いていこうと思います。「og:image」「og:url」などです。実はまだ知らなかったりします。(^ ^;;　

 

 

og:image 徹底解説、意味も設定画像スペックもこれでばっちり！ - Six Apart ブログ

フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記

上のサイトがわかりやすかったです。

そのWebページの情報を「OGP」という情報を付けることで、プログラムからも識別してもらうようにすることらしいですね。

それぞれの説明が載っていたので、下に記述しておきます。

● og:type

このウェブページが何のページであるかを記述

● og:title

このウェブページが記述しているモノの名前

● og:image

このウェブページが記述しているモノの画像

● og:url

このウェブページの正式なURL

● og:description

このウェブページの説明

● og:site_name

このウェブページが何かのサイトに所属する場合そのサイト名

 

必須なのは「og:type」、「og:title」、「og:image」、「og:url」のようです。

 

このOGPを記述しないと、どうやらfacebookいいねボタンを置いても意味がないとのこと！

超重要！Facebookからの流入数を２倍に増やす「OGP(Open Graph Protocol)」とは

上のサイトは分かりやすかったです。「いいね」を押したとき、そのwebページの情報を載せなければ情報がないまま拡散…ということに。OGPで設定した内容が拡散される情報そのものになってくれるので、必須情報でした‼

 

 

とりあえず今日のブログはOGP設定だけにしておきます。