


C言語でテキストファイルを読み込み特定の1行を削除する
ネットで調べましたが、何やら難しいことが書かれていたので今回は非常に単純愚直な方法で実装しました。テキストファイルから1行ずつ読み込み、配列に格納。その後消したい行が格納されているchar配列の先頭文字を \0 にして、これ以外をテキストファイルに上書きするという方法です。 ソースコード #include <stdi
MacのXCode7.0~にHomebrewを使ってOpenCV3.0.0を導入する
Homebrewのダウンロード ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" まず、このコードをターミナルにコピペしてエンターを押せばダウンロードが始まります。 OpenCVのダウ
CSSでホバーすると下からさっと別の背景が広がるエフェクト
CSS3になってからアニメーションの幅が広がりましたよね。今回はちょっと変わったホバーエフェクトです。すごく簡単な仕組みで実装できるので良かったら試してみてください。 デモ Hover! マウスホバーすると下からカーテンのようにアニメーションします! ボタン下層部を作る Hover!
CSSだけでマウスのカーソルを消す
ポインターを消すという操作は普通は必要ないのですが、Canvasをやっていてカーソルが邪魔になったので消す必要がありました。JavaScriptでカーソルを消さなくても、CSSだけでできてしまったので紹介します。 デモ このエリアではカーソルが消えます。 カーソルを消す このエリアではカーソルが
CSS3で作るメニューに使えるスタイリッシュなホバーエフェクト
デモ Menu Menuにマウスをもっていくとエフェクトがでます。以下では、作り方を説明していきます。 基本部分をつくる Menu Menu a { display: block; position: relative; padding: 12px 14px; }
CSSの擬似要素:beforeや:afterのcontent内の任意の位置で改行する
CSSの擬似要素はとても便利ですよね。タグの数をかなり減らせることができてソースコードが見やすくなります。擬似要素を使う際、content 内で改行できたらなと思ったことはないでしょうか。実は改行することはできるのです。その方法を紹介したいと思います。 擬似要素内で改行する 擬似要素のcontent内で改行できる
JSでFisher-Yatesアルゴリズムを使って配列をシャッフルする
今回はJavaScriptを使って説明しますが、どの言語でも変わりません。短いコードで効率のよいプログラムです。ほかのシャッフルアルゴリズムと比べて計算量がO(n)であり、偏りがないことがこのアルゴリズムの特徴です。 Fisher-Yates AFTER: シャッフルする デモを用意しました。
ダウンロード不要で簡単に高品質な画像を使えるWebサービス
Webサイト制作時、一時的に画像を配置したいときってありますよね。いちいちフリー素材サイトからダウンロードして持ってくるのは非常に面倒です。しかし、今回のWebサービスを使えば簡単にハイクオリティな画像を配置することができます! 基本的な使い方 https://unsplash.it/ のあとに
今更だけどWebアイコンフォントFontAwesomeの使い方まとめ
今や多くのブログやWebサイトで使われているWebフォント。その中でも、気軽に利用することができるFontAwesomeの使い方を紹介します。 導入 CSSファイルをダウンロードして読み込んでもよいのですが、もっと手軽にCDNを利用する方法があります。今回はこちらの方法で説明していきます。 公式サイトへアクセス
jQueryでテキストファイルを読み込み改行で分けて配列に格納する
普通はJSONを使った方が便利は便利なのですが、改行で区切っていくだけの場合はテキストファイルの方が効率よく編集できますよね。今回は、改行コードによって、文字列を配列に格納する方法を紹介します。 サンプルのテキストファイル これは僕の好きな食べ物(どうでもいい)です。今回はサンプルとしてこの4行のテキストファイルを配列
CSSでplaceholderの文字色などのスタイルをカスタマイズする
placeholderとは よく検索ボックスでキーワードを入力という文言を目にしたことがあると思います。これがplaceholderです。デフォルトでは、灰色をしていますが、このように紫色に変えたりすることができます。 placeholderのスタイル /* Chrome, Safari
リサイズ完了後に実行できるjQueryプラグイン | jquery.resizeend.js
これまた便利なjQueryプラグインを見つけました。$(window).on('resize') はブラウザ幅を変えている間中実行されてしまいますよね。このプラグインは、ブラウザ幅を変え終わったときに実行させることができます。 ダウンロード https://github.com/nielse63/jquery.resi
現場のプロでも意外と知らないHTML/CSSのクラスについてのテクニック
クラスには日本語も使える .日本語 { color: #fff; } これ意外と知らない人多いんですよね。 先頭が数字のクラス名 普通に指定するとCSSが効かない .1-num { color: #fff; } これだと、文字色は白になりません。 で
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