jQueryで数字並べを作ってみた

JavaScript 作ってみた jQuery

勉強がてら空いてる時間になんとなく作ってみました。
jQueryのバージョンは1.5.2
最初"position"で配置、入れ替えなど判定するように組んだのですがやっぱりやめて、アプローチをかえ要素自体の並び順で判定するようにしました。
ブロックが動くときのアニメーションだけ仕方なく"position"にて動かしています。

数字並べ ＞

続きを読む

オリアンティ(Orianthi) × スティーブ・ヴァイ(Steve Vai) の「Highly Strung」がちょっとカッコいい

雑記


偶然動画を発見！
最近音楽には疎くなってきたけど久しぶりにちょっとかっこいいなと思ったのでpickup!

オリアンティはマイケルジャクソンの件でかなり有名になりましたね。PRSには憧れます ＞＜

スティーブヴァイは言わずもがな。
この動画ヴァイのほうがエロい。。


続きを読む

Firefox4のブックマークツールバーをマウスオーバーで「表示・非表示」切り替えできる機能を作ってみた

CSS 作ってみた Firefox


ノートPCを使っているとWEBページの縦幅をなんとかして確保したいですよね＞＜
便利なブックマークツールバーですが必要ないときは非表示にしておきたい、しかしショートカットでの表示切り替えは正直面倒くさい！そんな方にぴったりの物を作ってみました！
Firefox4でブックマークツールバーをマウスオーバーで表示・非表示を切り替えることができる機能です。
アドオンの拡張機能としては用意していないので直接ファイルを修正する必要がありますが非常に簡単なので是非使ってみてください。

条件
・Firefox4のみで表示確認しております。
・"表示 > ツールバー > タブ表示を上部に表示"にチェックを入れてください。
・"表示 > ツールバー > ブックマークツールバー"にチェックを入れてください。

続きを読む

正規表現について

正規表現

多くのテキストエディターやプログラム、Exelなどでも使えるこの正規表現。かなり便利ですよね。
これを知っていると知らないとでは作業時間に大きく影響してきますので「正規表現はこういうことが出来る」と覚えておくといいと思います。

基本部分

基礎部分です。
正規表現は特別な意味を持つ文字と、通常の文字列を組み合わせて記述します。












正規表現説明
*直前の文字の0回以上に一致
+直前の文字の1回以上に一致
.1つの任意文字(A, B, C, ...) (\nを除く)
?直前の文字の0回または1回に一致
{n}直前の文字がちょうどn回に一致
{n,}直前の文字がn回以上に一致
{n,m}直前の文字がn回以上,m回以下に一致
[xyz]xかyかzの何れか1文字に一致
\w英数文字かアンダーバーを表す(a〜z,A〜Z,0〜9,_)
\d数値文字を表す(0〜9)

続きを読む

jQueryをキャンセル（無効）する方法

JavaScript jQuery


jQueryを無効にするってどんな状況だ？っと思ってしまいそうですが書いておきます。
規模の大きなサイトだとすでに導入されているjQueryのバージョンが古すぎるなんてことがあるかもしれません。テンプレートの構造上そのjQueryを読みこまざるをえなく新しいバージョンを二重に読み込ませるとコンフリクトを起こす、しかも古いバージョンだと使いたいライブラリが対応していなく、一から作っている時間も無い＞＜という場合の助け舟になるかもしれません。


キャンセル用jQuery

$ = jQuery = null;
続きを読む

CSSの疑似クラスと疑似要素

CSS


リンクの設定とclearfix以外ではあまり使うことが少ないと思われますが覚えておくと意外と便利です。


疑似クラス

  • :link・・・・・・ 未訪問リンクのスタイル
  • :visited ・・・・ 訪問済みリンクのスタイル
  • :hover ・・・・・ カーソルが重なった時のスタイル
  • :active・・・・・ アクティブ時スタイル
  • :focus ・・・・・ フォーカス時のスタイル
  • :lang()・・・・・ 指定された言語のスタイル
  • :first-child ・・ 最初の子要素のスタイル
  • :target・・・・・ ターゲットとなる要素のスタイル


疑似要素

  • :first-letter・・ ブロック要素の一文字目
  • :first-line・・・ ブロック要素の一行目の文字列
  • :before・・・・・ 要素の直前に生成内容を挿入
  • :after ・・・・・ 要素の直後に生成内容を挿入
続きを読む