Smart -Web Magazine

WEB開発者に嬉しいステキ講座

MENU

Headline

1 2 3 4 5 6 7 8 9 10 … 55

THE BULLITTS X JAY ELECTRONICA『RUN & HIDE』

2011年12月6日 コメントの追加
CATEGORY: MUSIC BLOG

ジェイムス・サミュエル(Jeymes Samuel)を中心としたイギリスのバンドで、ノスタルジックなサウンドを現代的にアレンジという紹介がされていましたが、まさにそのとおり。耳に残る不思議でどこか懐かしいメロディーだけど、めちゃめちゃかっこいい。

ジェイ・エレクトロニカをフィーチャーした『RUN & HIDE』が映像も含めてかっこいい。

このエントリーをはてなブックマークに追加

jQueryでTABLE要素の操作

2011年11月17日 コメントの追加
CATEGORY: JavaScriptテックラボ

jQueryを使ってTABLE要素のレコードを追加したり変更したり、削除したりする方法をご紹介します。 

<table id="tb-test">
	<thead>
		<tr>
			<th>タイトル1</th>
			<th>タイトル2</th>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>
表示例
タイトル1 タイトル2

上記のようなテーブルであれば、appendメソッドで簡単にレコードを追加できます。

TBODY要素に新しいレコードを追加
$('table#tb-test tbody').append('12');
実行例
タイトル1 タイトル2

削除する場合はremoveメソッドが使えます。

TBODY要素にあるコンテンツを削除
$('table#tb-test tbody *').remove();
実行例
タイトル1 タイトル2
1 2
1 2

変更したい場合も簡単で、任意のセルの内容を変更するには次のようにアクセスできます。
次の例では、TH要素の内容を"change"という文字列に変更しています。 

$('table#tb-test thead th').text("change");

ただし、この方法だとTH要素全てが変更されてしまいます。
一部だけ変更したい場合はnth-childメソッドを使います。次の例では、TH要素の1番目のセルのテキストを変更しています。 

$('table#tb-test thead tr th:nth-child(1)').text("change");
実行例
タイトル1 タイトル2
1 2
3 4

1レコード全てにアクセスしたい場合は次のようeachメソッドが使えます。
次の例では、TD要素に0からの数値をインクリメントして代入しています。 

var i	= 0;
$('table#tb-test tbody td').each(function(){
	$(this).text(i);
	i++;
});
実行例
タイトル1 タイトル2
100 100
100 100
このエントリーをはてなブックマークに追加

WordPressのSEO対策用プラグイン『All in One SEO Pack』

2011年11月15日 コメントの追加
CATEGORY: WordPress講座

WordPressでSEO対策する用に幾つかのプラグインがありますが、その中でも比較的シンプルな『All in One SEO Pack』を使ってみました。
シンプルといっても、SEO以外のプラグインよりは様々な項目があるので、参考サイトを見ながら作業したほうが良いと思います。

All in One SEO Packの使い方
All in One SEO Packの利点
All in One SEO Pack日本語化

このエントリーをはてなブックマークに追加

HTML5のコンテンツモデル

2011年11月15日 コメントの追加
CATEGORY: HTML・CSSテックラボ

HTML4にはブロック要素とインライン要素という概念がありましたが、HTML5では、それに変わり、コンテンツモデルが導入されています。コンテンツモデルとは、どの要素にどんなコンテンツを入れても良いかを定義します。
その要素ですが、HTML5では7つのカテゴリに分類されています。

要素のカテゴリ一覧
  • メタデータ・コンテンツ
  • フロー・コンテンツ
  • セクショニング・コンテンツ
  • ヘッディング・コンテンツ
  • フレージング・コンテンツ
  • エンベッディッド・コンテンツ
  • インタラクティブ・コンテンツ

要素は必ずしもいずれかのカテゴリに属するわけではなく、複数のカテゴリに重複して属したり、どのカテゴリにも属さなかったりします。
HTML5では、カテゴリ毎にどの要素を入れて良いかを定義しています。

メタデータ・コンテンツ

メタデータ・コンテンツとは、メタデータやスタイルの定義に分類されるような要素のカテゴリです。

メタデータ・コンテンツ要素

base command link meta noscript script style title

フロー・コンテンツ

フロー・コンテンツとは、ドキュメントで使われるほとんどの要素を含むカテゴリです。

フロー・コンテンツ要素

a, abbr, address, article, aside, audio, b, bdo, blockquote, br, button, canvas, cite, code, command, datalist, del, details, dfn, div, dl, em, embed, fieldset, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, i, iframe, img, input, ins, kbd, keygen, label, map, mark, math, menu, meter, nav, noscript, object, ol, output, p, pre, progress, q, ruby, samp, script, section, select, small, span, strong, sub, svg, table, textarea, time, ul, var, video, テキスト

条件付きでフロー・コンテンツになる要素もあります。

area （map要素の中にある場合）
style （scoped属性が指定された場合）

セクショニング・コンテンツ

セクショニング・コンテンツとは、章や節など、見出しからその内容を含んだセクションのカテゴリです。

セクショニング・コンテンツ要素

article aside nav section

ヘッディング・コンテンツ

ヘッディング・コンテンツとは、見出しをあらわすカテゴリです。

ヘッディング・コンテンツ要素

h1 h2 h3 h4 h5 h6 hgroup

フレージング・コンテンツ

フレージング・コンテンツとは、ドキュメントのテキストをあらわすカテゴリのことです。HTML4におけるインライン要素に近い概念です。

フレージング・コンテンツ要素

a abbr area audio b bdo br button canvas cite code command datalist del dfn em embed i iframe img input ins kbd keygen label link map mark math meta meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time var video wbr Text*

エンベッディッド・コンテンツ

エンベッディッド・コンテンツとは、ドキュメントの中に、外部のリソースをインポートしたり、HTML以外の言語で表示される要素のカテゴリです。外部のリソースの例としては、画像、プラグイン、フレーム、ビデオ、Canvasなど、HTMLではない別の言語で表されるコンテンツの例としては、SVGやMathMLが挙げられます。

エンベッディッド・コンテンツ要素

audio canvas embed iframe img math object svg video

インタラクティブ・コンテンツ

インタラクティブ・コンテンツとは、ユーザーが操作をすることが可能な要素のカテゴリです。代表的な要素はハイパーリンクやボタンです。

インタラクティブ・コンテンツ要素

a audio button details embed iframe img input keygen label menu object select textarea video

セクショニング・ルート

前後のコンテンツと切り離された独立した要素のカテゴリです。

セクショニング・ルート要素

blockquote body details fieldset figure td

このエントリーをはてなブックマークに追加

JavaScriptなどプログラミングのまとめ（2011年5月）

2011年11月10日 コメントの追加
CATEGORY: テックラボ
目的の座標へ回転させる

角度 = Math.atan2(y座標,x座標) * 180 / Math.PI;

回転させる

MCのx座標 = Math.cos(角度 * Math.PI / 180) * 半径;
MCのy座標 = Math.sin(角度 * Math.PI / 180) * 半径;

バネのような、減速＋慣性の移動

MC座標 += (目的地座標 - MC座標) * 減速係数 + 前回の移動距離 * 慣性係数

減速移動

MCの座標 +=（ 目的地座標 - MCの座標 ) * 減速係数(0.1～0.3程度)

複雑なデータ構造のJSONを扱う際にCSSセレクタ風にアクセスできて超便利な「JSONSelect」
JSON使うときに試してみよう。

21 Examples of Parallax Scrolling in Web Design
パララックススクロール（視差を利用したスクロール）サイト21選。控えめな動きからグリグリ動くものまで。

Originální, ručně vyráběné diáře 2011 - LEN M.
パララックススクロールのグリグリ動くサイト。 ここまで動くと読みにくいけど、動物もたくさんいてデザインは好き。

25 sites utilisant un effet de parallaxe original
エフェクトが効いたサイト25選

[AS3.0]ローディングムービー
ローディング待ちアニメーションの分かりやすい解説。 ただし、基本はProgressEvent.PROGRESSを使うこと。

FLVPlayback
Flashでビデオを使う際のリファレンスページ。FLVPlaybackインスタンスにmc_movという名前をつけた場合、mc_mov.volumeという感じでアクセスできるよ。

このエントリーをはてなブックマークに追加

デザイン関連つぶやきのまとめ（2011年5月）

2011年11月8日 コメントの追加
CATEGORY: DESIGN, テックラボ

HOTEL ANTEROOM KYOTO
京都のホテルサイト。サイトデザインもいいけど泊まってみたい。

50+ Incredible Sets of High Quality Free Website Buttons
フリーのボタンデザイン50選

CRELIP
サイトデザインや素材などを集めた便利サイト。フォントやデザインパーツなど多種あり！

50 Amazing Animals Typography
動物好きにはたまらない、アニマルなタイポグラフィ50選

500+ Free PSD Graphics for Web Designers
無料のPhotoshop関連素材。

25 Fresh Examples of Illustration In Web Design
イラストを使ったウェブデザイン25選

Webデザイナー & デベロッパー必見！絶対使えるチートシートまとめ
実際あまり使わないけど、好き。眺めるだけでもいい。

20 good sets photoshop gradients
Photoshopのグラデーション用リソース。結構お世話になっております。

32 Elegant and Minimalist Icon Packs
シンプルなアイコン集。シンプルだからこそ、デザインの仕事でも利用出来る。

70 Free PSD Web UI Elements For Designers
UI部品のフリーPSD素材70選。

ログインフォーム製作時に個人的に参考にしたいデザインのメモ
ログインデザインのまとめ。無料PSDダウンロードもある。

このエントリーをはてなブックマークに追加

ファビコン作成のまとめ

2011年11月2日 コメントの追加
CATEGORY: HTML・CSSテックラボ

ファビコン作成のまとめです。
ファビコン(Favicon)はウェブサイトやウェブページに関連付けられたアイコンのことで、ブラウザのブックマークや、アドレスバーに表示されます。

faviconの作成

まずファビコンのファイル形式ですが、アニメーションさせたいといった特殊なケースでなければICO形式で作成します。PNG形式やGIF形式、JPEG形式は最近のモダンブラウザでは対応していますが、IE8以下が対応していません。
ICO形式はアイコン作成専用のソフトを使うか、PNG形式やGIF形式からICO形式に変換するウェブサービスがあるので、それを利用することも出来ます。

favicon関連サイト
@icon変換
アイコン作成専用ソフトウエア（Windows）です。
favicon.ico Generator
ファビコン用に作成した画像（PNG/GIF/JPEG）をICO形式に変換したり、直接編集したりできます。
favikon
シンプルに、ファビコン用に作成した画像（PNG/GIF/JPEG）をICO形式に変換します。
favicon.icoを作ろう！
16x16、32×32、48×48の3サイズのマルチファビコンが作れます。

ファビコンの読み込みはHEAD要素の中で下記のように記述します。

あとはHEAD要素で指定した場所にfavicon.icoをアップするだけです。ファビコンはキャッシュに強く残るので、更新の際はキャッシュをクリアしてから確認したほうが良いでしょう。

このエントリーをはてなブックマークに追加

jQueryのセレクタ解説

2011年10月31日 コメントの追加
CATEGORY: jQuery入門

jQueryには任意の範囲、要素を指定するためのセレクタと呼ばれる機能が用意されています。

たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。

$("img")

例えば、IMG要素のボーダーを3ピクセルの赤に設定するには次のようにします。 

$("img").css("border","3px solid red");

セレクタで対象を指定し、cssというメソッドでボーダー属性の値を設定しています。

セレクタは要素名以外にも、ID名やCLASS名を指定することができます。
たとえば、BODY要素内にあるすべての画像にアクセスしたい場合は下記のようにセレクタを指定します。

$("img.photo")

IMG要素で、かつID名が photo01 の要素を指定するには、次のようにシャープの後にID名を指定します。

$("img#photo01")

要素名を省略すると、すべての要素が対象になります。次の例では、IMG要素でもDIV要素でもどのような要素でも photo というクラス名であれば選択されます。

$(".photo")

要素セレクタ

要素セレクタは、特定の(X)HTML要素を選択します。

$('div')

IDセレクタ $('#ID名')

IDセレクタは、指定したID名の要素を選択します。

$('#header')

CLASSセレクタ $('.CLASS名')

CLASSセレクタは、指定したCLASS名の要素を選択します。

$('.link')

ユニバーサルセレクタ

セレクタにアスタリスク(*)を指定すると、すべての要素が対象となります。次の例では、ID名mainにあるすべての要素が選択されます。

$('div#main *')

グループセレクタ $('code,#ID名,.CLASS名')

複数のIDやCLASSを指定したい場合は、カンマ（,）で区切ります。

$('h1, #h-title, img.bar-title')

子孫セレクタ

子孫要素と呼ばれる、特定の要素の内側にある要素を選択したい場合は、複数のセレクタをスペース区切りで指定します。

$('div#main img')

子セレクタ

直接の子セレクタのみ選択します。孫は対象外となります。

$('div#main > p')

隣接セレクタ

隣り合う要素が対象となります。
下記の場合、div$mainの次にくるDIV要素が対象となります。

$('div#main + div')

first疑似クラス

最初の要素のみを選択します。

$('li:first') 

<script>
$(function(){
	$('li:first').css({backgroundColor:"#ff0000"});
});
</script>
<ul>
	<li>ここが対象になります</li>
	<li>※※※※※</li>
	<li>※※※※※</li>
</ul>
  • 1
  • 2
  • 3

last疑似クラス

最後の要素のみを選択します。

$('li:last') 

<script>
$(function(){
	$('li:last').css({color:"#ff0000"});
});
</script>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>
  • 1
  • 2
  • 3

even疑似クラス

偶数番目の要素を選択します。インデックスとしての順番になるので0から始まります。

$('li:even') 

<script>
$(function(){
	$('li:even').css({color:"#ff0000"});
});
</script>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
  • 1
  • 2
  • 3
  • 4

odd疑似クラス

奇数番目の要素を選択します。

$('li:odd') 

<script>
$(function(){
	$('li:odd').css({color:"#ff0000"});
});
</script>
<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
  • 1
  • 2
  • 3
  • 4
jQueryで利用できる主なセレクタ
名称 書式 指定対象
CSSでよく利用されるセレクタ
要素セレクタ $("要素名") 特定のHTML要素
IDセレクタ $("#ID名") 特定のid属性を持つ要素
クラスセレクタ $(".クラス名") 特定のclass属性を持つ要素
子孫セレクタ $("要素1 要素2") 要素1のブロック内にある要素2
ユニバーサルセレクタ $("*") すべての要素
グループセレクタ $("要素1,要素2") 要素1と要素2
CSS2のセレクタ
子セレクタ $("要素1 > 要素2") 要素1の直下の要素2
隣接セレクタ $("要素1 + 要素2") 要素1の次にくる要素2
first-child擬似クラス $("要素:first-child") 同一の親要素内の最初の要素
CSS3のセレクタ
間接セレクタ $("要素1 ~ 要素2") 特定の要素の後に出現する要素
否定擬似クラス $("要素1:not(要素2)") 要素1で要素2以外
empty擬似クラス $("要素:empty") 子要素やテキストを含まない要素
nth-child擬似クラス $("要素:nth-child(番号)") 特定の要素内の指定した番号の要素
last-child擬似クラス $("要素:last-child") 特定の要素内の最後の要素
only-child擬似クラス $("要素:only-child") 指定した要素が1つだけ含まれる特定の要素
CSSの属性セレクタ
[attribute] $("[属性名]") 特定の属性を持つ要素
[attribute='value'] $("[属性名='値']") 特定の属性が指定した値を持つ要素
[attribute!='value'] $("要素名[属性名!='値']") 特定の属性が指定した値を持たない要素
[attribute^='value'] $("[属性名^='値']") 特定の属性が特定した値で始まっている要素
[attribute$='value'] $("[属性名$='値']") 特定の属性が特定した値で終わっている要素
[attribute*='value'] $("[属性名*='値']") 特定の属性が特定した値を含んでいる要素
[attributeFilter1][attributeFilter2] $("[属性セレクタ1][属性セレクタ2]") 複数の属性セレクタに該当する要素
jQueryの独自フィルター
firstフィルター $("要素:first") 同一の親要素内の最初の要素
lastフィルター $("要素:last") 指定した要素の最後の要素
evenフィルター $("要素:even") 指定した要素の偶数番目の要素
oddフィルター $("要素:odd") 指定した要素の奇数番目の要素
eqフィルター $("要素:eq(番号)") 指定した番号の要素
gtフィルター $("要素:gt(番号)") 指定した番号より後の要素
ltフィルター $("要素:lt(番号)") 指定した番号より前の要素
headerフィルター $("要素:header") h1～h6までのheader要素
containsフィルター $("要素:contains(文字列)") 特定の文字列が含まれている要素
hasフィルター $("要素1:has(要素2)") 特定の要素が含まれている要素
parentフィルター $("要素:parent") 子要素やテキストを含む要素
フォームフィルター
:inputフィルター $("要素:input") input要素/textarea要素/select要素/button要素
:textフィルター $("要素:text") 1行テキスト入力フォーム（type="text"）
:passwordフィルター $("要素:password") パスワード入力フォーム（type="passoword"）
:radioフィルター $("要素:radio") ラジオボタン（type="radio"）
:checkboxフィルター $("要素:checkbox") チェックボックス（type="checkbox"）
:submitフィルター $("要素:submit") 送信ボタン（type="submit"/type="images"）
:imageフィルター $("要素:image") イメージボタン（type="image"）
:resetフィルター $("要素:reset") リセットボタン（type="reset"）
:buttonフィルター $("要素:button") ボタン（button要素）
:fileフィルター $("要素:file") ファイル選択フォーム（type="file"）
:checkedフィルター $("要素:checked") ラジオボタン、チェックボックスでチェックが入っている要素
:selectedフィルター $("要素:selected") セレクトボックスで選択されている要素
このエントリーをはてなブックマークに追加

1 2 3 4 5 6 7 8 9 10 … 55
Jump to the top