CSSでリストの最初だけborderなどのスタイルを打ち消すベストな方法
Webデザインがよくできるという人でも意外と使ってしまっているのがCSSの打ち消しです。CSSの設計上、打ち消しというのはあまりよくありません。none とか 0 とか初期のスタイルをわざわざ書いているからです。そこで、できるだけ打ち消しをしないコーディングの一例として今回の方法を紹介します。 多くの人がやっている打ち消し
CSS3で作るマウスホバーするとぼよーんとアニメーションするエフェクト
CSS3を使って滑らかにアニメーションするエフェクトです。以下のデモでは、ボタンを例にしていますが、画像などにも使えるエフェクトとなっています。サイトのワンポイントとして導入してみるといいかもしれません。 デモ Button ボタンにマウスをもっていくとぼよーんとアニメーションします。 HTML
CSSで文字列をドラッグして選択したときの色や背景色を変更する
意外と多くのブラウザに対応しているテクニックです。IE9+とモダンブラウザで使用可能です。こういった細かいところもしっかりとカスタマイズしてあるサイトを見るとほっこりします。 テキスト選択時の色を指定できる 通常は、文字を選択するとこんな感じの色ですよね。 テキスト選択時の色を指定できる .
c++で処理時間の計測をする
基礎の基礎ですが、ある関数の処理時間を計測したかったので <ctime> ライブラリの clock() を使って実装しました。 処理時間の計測 #include <iostream> #include <ctime> using namespace std; class Tim
jQueryで複数のjsファイルをまとめて動的に読み込む
大規模なサイトを作る際は目的別にjsファイルを分けて作業します。ツールを使ってそのファイルを統合してもよいのですが、分けてあった方がわかりやすいですよね。そこで、jQueryでまとめて読み込む部分を実装すれば楽になれると思ったので紹介します。 htmlファイル <!DOCTYPE html> <html
jQueryで文字や記号で囲まれた文字列を正規表現を使って置換する
最近、正規表現の勉強を始めて、まずよく使いそうな文字や記号で囲まれた部分を置換するというプログラムを書いてみました。 【 】で囲まれた文字列を消す 【１】サンプル ２．テキ【スト】 【３．テス】ト こんな感じのマークアップだったとします。 jQueryで一括置換 $('.text').each(
WordPressでオリジナルSNSボタンを設置するときに注意すべきこと
やっぱりオリジナルテーマでブログをやるなら、公式のSNSボタンは使わないですよね。デザインに統一性がなくなってしまいます。今回は、オリジナルTwitterボタンを設置するときの注意点を紹介します。 つぶやけない記事がある Tweetボタン Tweetボタンのリンクはこんな感じで書きますよね。これをWordPressの
簡単にURLクエリパラメーターを取り出すことができるjQueryプラグイン | purl.js
よくECサイトを作るので、URLクエリパラメーターをいちいち split() を使って取得していくのですが、毎回毎回面倒でした。そこで、いいプラグインがないか探したところ、ぴったりのものがあったので紹介します。 ダウンロード Purl (A JavaScript URL parser) v2.3.1 URLの指定 まず
jQueryでフォームが空の状態でエンターを押したときsubmitを無効にする
楽天goldでamazon風に検索できるトップページを作ったときのメモです。普通、input要素はエンターを押すと自動的にsubmitボタンが押される仕組みになっています。でも、検索フォームに何も文字を入れていないのに、エンターを押したら勝手にsubmitされてしまうのはユーザービリティーを考えるとよくないですよね。そこで、jQueryを
JavaScriptやjQueryで関数のオーバロードを擬似的に実装する
JavaやC++では関数のオーバロードを当たり前のように使っていますが、JavaScriptでは一切使っていませんでした。というか、JavaScriptでオーバロードするという考えさえ思いつきませんでした(笑)。どうやら、JavaScriptでは関数のオーバロードは無いようですが、擬似的に実現する方法はあるので、それを紹介したいと思いま
CSS3のメディアクエリをjQueryでも使えるようにする
CSS3メディアクエリ便利ですよね。これを使ってjQueryで条件分岐したい場合もあると思います。特にレスポンシブデザインのサイトなんかだと使う機会も多いと思います。単純に思いつくのが、メディアクエリと同様にブラウザ幅をjQueryで取得して条件分岐すればいいのでは...なんて考えると思います。が、それだとブラウザによって誤差が出てしまう
C++でOpenCVを使って疎密探索によるテンプレートマッチングを実装する
OpenCVにおける基礎ともいえるテンプレートマッチングのプログラムです。初めてOpenCVというものに触れたので、完成するまでにすごい時間がかかりました。 入力画像とテンプレート画像 ちょうど左目のあたりの画像をテンプレートとしています。 ソースコード #include <opencv2
c++でstring型文字列のそれぞれの文字が半角か全角かを判定する
英数字だけだったらこんな判定は必要ないのですが。英数字と日本語が混ざった文字列の長さを取得するときなどにも応用ができるので、覚えておいて損はないと思います。 ソースコード #include <iostream> #include <Windows.h> using namespace std;
CSSだけでハイクオリティーなモーダルウィンドウを作る
すごく時間かかりましたが、ついに完成しました！ とりあえずPC版のみの対応です。JSを一切使わずCSSだけでモーダルウィンドウを作ることができました。モダンブラウザ向けなのでブログに組み込んだりできます。よくネットに載っている方法は:targetを使った方法です。これだとモーダルウィンドウを表示する度に履歴に追加されるので戻るときにまた
CSSのposition:fixedで高さが不明な要素を上下左右中央揃えにする
今回は、幅は分かってるが高さがわからない要素を上下左右中央揃えする方法を紹介します。高さが分かっていればネガティブマージンで上下左右中央揃えにできますが、高さが分かっていなければできません。では、方法を説明していきます。 ソースコード .box { display: tab
C++で文字列ではなく文字char型を整数int型に変換する
String型の文字列をint型に変換するやり方はわかりますが、それだと１文字の場合変換できません。char型をintに変換することはなかなかないので知らない人も多いと思います。 ソースコード 方法としては、ASCIIコード表を用いて変換します。ASCIIコード表の48～57は文字の'0'～'9'に対応しています。これを利用し
C++で整数や小数の桁数を文字列に変換してからカウントする
ネットで検索してもなかなか載っていなかったので、自作しました。載っていないということはこれくらいできて当然ということなのでしょう（笑）。 ソースコード 考え方は単純で、まず入力された小数（または整数）を文字列に変換します。次に小数点の位置（'.'）を見つけてそれより前は整数部、それよりあとは小数部というように分けて桁数をカウン
CSSで作るホバーすると波紋状にリングが広がるエフェクト
CSSで簡単に波紋エフェクト作れないか考えていたところ、いいアイデアが思い浮かんだので紹介します。ホバーするとリングが波のように広がって消えます。 ソースコード ハイクオリティーなエフェクトとなっています。 HOVER HTMLはこんな感じでシンプルなマークアップです。 .button { di