why代表ブログスタート
whyという名前でスタート致しました。
これからよろしくお願いします。
whyは千葉のweb制作、デザイン制作・印刷、パソコン教室を今後行なっていく予定です。
このブログではwhy全体に関することから起業や私自身のことも発信していきたいと思います。
HTML5について今更調べてみた簡単まとめ。
- hgroup
- nav
- h要素
- section
- small
hgroup
hgroupの中にはh要素のみしかいれられない。
タグラインなどはh1でサイトタイトルを記述した場合は、h2で記述。
hgroup内で最も高い要素のみアウトライン化される。
今回の場合はh1のみ。
nav
navはサイト内の重要なナビゲーションにのみ記述する。
フッターメニューなどはnavで囲まなくてもよい。
h要素
h要素はセクションを使うことによりh1のみでもいい。
しかし、わかりずらいので、h要素を階層レベルに合わせてつかうのがよい。
small
copyright今まではaddressは記述してましたが、正しくはsmallで記述する。
Javascript『this』『that』の使用
Javascriptでプログラミングをしている際、
ループ内でループ外のthisを使いたい場合に、
ループ内で今までのthisが使えなくなってしまう。
そのような時は『that』とループ外で定義してthisを入れてしまうとループ内でも、
ループ外の『this』を使用することが出来る。
jQuery高速化
jQueryは便利でJavascriptだとめんどうなclassで指定できるなど、非常に使いやすいライブラリーです。
しかし、使いやすいからとclassなど、Javascriptだということを考えないで組んでいくと後々非常に重いjavascriptとなってしまいます。
そうならないためにjQueryをコーディングする際気をつけるべきことです。
- 出来るだけ#idで指定する。
- クラスを使用する場合はタグを記入する
- オブジェクトをキャッシュする
- 何度も書かない
- サブクエリを使用する
- 圧縮する
1.出来るだけ#idを指定する
なぜ出来るだけ#idを使用するかというと、元々のJavascriptがidで指定できるためです。
#idで指定してあげると無駄な処理が無い分早くなります。
[javascript]
$("#test").click….
[/javascript]
2.クラスを使用する場合はタグを記入する
タグを指定してあげることで、検索対象がすべてのタグから特定のタグになるので早くなります。
[javascript]
$("div.test").click….
[/javascript]
3.オブジェクトはキャッシュする
オブジェクトを変数に入れ無駄なアクセスを減らす事で高速化できます。
[javascript]
$("div.test").click(….
$("div.test").css(….
$("div.test p").attr(….
[/javascript]
を、
[javascript]
$test = $("div.test");
$test.click(….
$test.css(….
$test.find("p").attr(….
[/javascript]
4.何度も書かない
コードを書くのも楽になります。
[javascript]
var test = ("$div.test");
test.mouseover(….
.mouseout(….
.hover(….
[/javascript]
5.サブクエリを使う
3番にも似ていますが親要素をキャッシュしてから子要素にアクセスする。
[javascript]
var test = $("div.test");
test.find("p").mouseover(…
[/javascript]
6.圧縮する
圧縮する。Webサービスでも様々なものがあるので利用してみるのもいいですね。
JavaScriptを使用する上でよく使うサイト集
この他にも様々なものがありますが手間がかかるものもあるので、そこは各プログラムごとに相談しつつという感じにやっていければいいと思います。
Javascriptの配列の中身の参照方法
以前どこかで見て、コピーしてそのままだったので、元の方のURLがわからないので、大変申し訳ないのですが、大変便利なので。
[javascript]
function printProperties(obj) {
var properties = ”;
for (var prop in obj){
properties += prop + "=" + obj[prop] + "n";
}
alert(properties);
}
[/javascript]
とし、関数を呼び出せば、アラートで配列を表示できます。アラートをwriteにすれば書くことも出来るので大変オススメです。
Dreamweaverのクリッカブルマップのメモ
Dreamweaverのクリッカブルマップの使用法。
ごくたまに凝っているデザインだと使う場合があるので、
その時のためにメモ。
(1)コードビューのやつでデザイナー2とかにする。
(2)そこで画像を選択する。
(3)後は多角形とかを使ってリンクをつくる。
以上です。
メモ程度に。
JavaScriptを使用する上でよく使うサイト集
JavaScriptを使う上で大変役に立つサイト集です。
- Online JavaScript beautifier(ソースを整えてくれます)
- Compress javascript and css. amazing code compression. quick, easy and free!(ソースを小さくしてくれます)
- JavaScript style guide - MDN Docs(コーディングルール集)
- Google JavaScript Style Guide(コーディングルール集)
- PHPとjavascriptの連携
1.Online JavaScript beautifier
これはライブラリなどのjsをいじりたい場合などに、
軽くするために改行や、インデントをとってあるものを、
整形してくれるものです。
2.Compress javascript and css. amazing code compression. quick, easy and free!
こちらは先程とは逆に、ソースの容量を小さくしてくれるものです。
簡単にインデントや改行などをとってくれるので非常に助かります。
3.JavaScript style guide - MDN Docs
JavaScriptのコーディングルールです。
こちらはMozillaのものですが大変参考にさせてもらっています。
4.Google JavaScript Style Guide
こちらも、コーディングルールです。
こちらは英語版ですが、日本語もあるので読んでみてください。
5.PHPとjavascriptの連携
PHPとJavaScriptの連携について書いてあり、
大変参考にさせてもらいました。
以上5つのサイトです。
HTML特殊文字についてのメモ
HTMLの特殊文字をよく忘れて検索してしまうので、メモとして。
『&』は『&』を入力。
『<』は『<』を入力。
『>』は『>』を入力。
『≥』は『≥』を入力。
『 』(空白)は『 』を入力。
おまけのコピーライト。
『©』は『©』を入力。
PDFのページ指定のリンクの方法
PDFのページ指定のリンクの方法
[html] <a href="/smple/sample.pdf=#page=1">1ページ目を表示</a> [/html]
とするとpdfの1ページ目が表示される。
jQueryメモ(parent)
jQueryのメモです。 $(this)でaタグをクリックしてその兄弟要素を指定して消したい場合などに、
[javascript] $(this).parent("li").remove(); [/javascript]
とすると、クリックした兄弟要素を指定でき兄弟要素だけ消えます。