SVGで画面全体に斜め線や曲線を引く
SVGで画面全体に斜め線や曲線を引く 一昔前だと単純な斜め線とか円をバックに置きたいときは画像で作ってましたが、最近ではわりとSVGを使うことが多いようです。 SVGの良いところはベクターなので画面全体に配置しても荒くなったりしないとか、コードで作成できるので後々アニメーションなどもできたりします。 ここでは単純な図形ですが画面全体に表示する方法をご紹介します。 投稿日2015年09月29日 更新日2015年10月14日 準備 まずはSVGをHTML内に記述する方法です。 HTML <div id="wrap"> <div class="description"> ここにコンテンツが入ります。 </div> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="
ブラウザやOSを判別するjQueryプラグイン「PgwBrowser」
ブラウザやOSを判別するjQueryプラグイン「PgwBrowser」 「PgwBrowser」はクライアント情報を取得して、ブラウザやOSを判別できるjQueryプラグインです。 投稿日2014年10月20日 更新日2014年10月20日 [動作環境] jquery 1.8 PgwBrowser 1.2 プラグインのダウンロードと準備 プラグインのダウンロードはGitHubから Pagawa/PgwBrowser ダウンロードした読み込みます。 html <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <script src="pgwbrowser.min.js"></script> 使い方 「browser.group」でブラウザの種類、「browser.ma
D3.jsでCSVから簡単な棒グラフ描いてみる
D3.jsでCSVから簡単な棒グラフ描いてみる 最近はWebでグラフとかを表示する場合、画像じゃなくてSVGとかCanvasでインタラクティブ的な要素も入ってたりするとクールなようです。 で、そのまま自力でやろうとすると色々大変なのでライブラリを使ったりするわけですが、今回は色々ある中でD3.jsを使用してみます。 投稿日2014年04月21日 更新日2014年04月21日 SVGの基礎 基本的にSVGはD3.jsが吐き出してくれますが、基本的なことは把握しておいた方が良い事がありそうです。 htmlに下記を記述します。 <svg width="500" height="300"> </svg> svgタグはimgタグと同じで「width」「height」を指定します。 SVGのコードはsvgタグの間に記述していきます。 ちなみにsvgのサイズはcssでも指定できます。画像と扱いは同じです
PhpStormだけでファイル監視してSASS/SCSSをコンパイルする
PhpStormだけでファイル監視してSASS/SCSSをコンパイルする 前のバージョンまではちょっと設定が複雑だったので使用していなかったのですが、PhpStorm7になってSASS/SCSSなどプリプロセッサファイルの監視がかなり簡単になっていたのでご紹介します。PhpStorm7での解説ですが、WebStormなど他JetBRAINS製品でもほぼ変わらないはずです。 投稿日2014年02月14日 更新日2014年02月14日 準備 PHPStormでファイルの監視はしてくれますが、コンパイル自体は別途環境が必要になりますので、SASSならRuby＆Gemを予めインストールしておきます。 下記記事を参考にしてください。 WindowsにCompassをインストールしてSASS/SCSS環境を構築する File Watchersの追加 メニューの「File」→「Settings..」でS
ワンポイントに使えるCSS3マウスオーバーアニメーション5種
ワンポイントに使えるCSS3マウスオーバーアニメーション5種 ちょっとしたワンポイントに使えそうなCSS3オンリーのマウスオーバーアニメーションです。 IEは10以上で動きます。 投稿日2013年10月30日 更新日2013年10月30日 ベースHTML ベースのHTMLです。っていっても基本aタグだけです。 html <a href="#" class="btn01">BUTTON</a> 1.くるくるって回るアニメーション くるくるっと２回転するアニメです。 くるっと１回転の場合は「rotate」を360にすればOKです。 css .btn01 { color: #fff; text-decoration: none; background-color: #dda0dd; display: block; width: 150px; height: 150px; line-height:
JSのMVCフレームワークbackbone.jsやってみた
Posted: 2013.08.21 / Category: javascript 最近 JavaScript のMVCフレームワークが増えてきていますが、WordPress にも採用されてちょっと気になっていた backbone.js を使ってみました。 ダウンロード Backbone.js を下記URLからダウンロードします。 また Backbone.js は Underscore.js, jQuery に依存しますので合わせてダウンロードしましょう。 Backbone.js Underscore.js Backbone.js 1.0.0 Underscore.js 1.5.1 jQuery 1.8.2 を使用します。 ダウンロードしたら読み込みます。 html <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2
Gitでバージョン管理しよう（ひとりGit編）
Gitでバージョン管理しよう（ひとりGit編） まったくバージョン管理したことない人にお送りする、ひとりGit入門記事です。 というか書いている人が超初心者なので、すごく間違えていることろがあるかもしれませんがご了承ください。 投稿日2012年10月24日 更新日2012年10月28日 なぜバージョン管理システムが必要なのか たとえば「index.html」というファイルを大幅に修正したかったとします。 もとの「index.html」は残しておきたいので、「index1.html」とリネームしてみたり、もしくはバックアップフォルダにコピーするなどの方法が考えられます。 しかし、それだと後で見返したときに何のファイルどんな修正をしたファイルなのかわからないですよね。 そこで登場するのがバージョン管理システムなわけです。 初期設定 バージョン管理を始める前にGitの初期設定をしましょう。 まず
GoogleMapをとりあえずさくっと表示したいときのjavascript
GoogleMapをとりあえずさくっと表示したいときのjavascript GoogleMapはカスタマイズでさまざまなことができますが、コーポレートサイトで使用するときはほとんどピンを立たせてウィンドウを表示させるくらいなんじゃないかなと。 さくっと表示させたいときはiFrameでいいんじゃね？ というつっこみ聞かなかったことにしてとりあえずJavascriptでコピペで使えるコードです。 投稿日2011年09月07日 更新日2012年01月31日 html divに適当にidを割り当てます。 ここではgmapとしました。 html <div id="gmap" style="width: 590px; height: 400px;"></div> javascriptはheadの最後か、bodyを閉じる直前とかいつもの位置に入れましょう。 javascript <script type
CSS3で作るシンプルなマウスオーバーアニメーション5種
Posted: 2011.06.15 / Category: HTML&CSS / Tag: CSS3, アニメーション css3はアニメーションもできてしまうわけですが、ここではわりと簡単につくれるマウスオーバーアニメーションをご紹介いたします。 Chrome、Firefoxで動作確認しております。 css3マウスオーバーアニメーションの基本 マウスオーバーアニメーションの前に通常のマウスオーバーをみてみましょう。 たとえばリンクの文字色をマウスオーバーしたときに変更したい場合はhover疑似クラスでcolorを指定しますよね。 css a { color: #3399FF; } a:hover { color: #FF6600; } これをアニメーションさせるには「transition」というプロパティを追加します。 transition: プロパティ名 時間 アニメーション方法 ;
自作のjQueryスクリプトをプラグイン化しよう
Posted: 2011.06.13 / Category: javascript / Tag: jQuery, Plugin 自作したjQueryコードは作成した本人なら簡単にパラメーターの調整などを行いカスタマイズできると思いますが、Webに公開して他の人に使用してもらう場合はなかなかむずかしかったりしますよね。 そこでプラグイン化をすることで誰でも簡単に扱えるようにしてみましょう。 外部ファイル化 たとえば「#hide-btn」をクリックすると「#view」がフェードアウトして消えるという簡単なスクリプトがあります。 jQuery script $(function() { $('#hide-btn').click(function(){ $('#view').fadeOut(1000); }); }); まずは外部ファイル化しましょう。 jQueryプラグインは「jquery.プラ
jQueryで長くなったページを分割してボタンで切り替える
jQueryで長くなったページを分割してボタンで切り替える 長いページの場合、アンカー名をつけてページ内リンクをする場合があると思います。 でも、やっぱりページ別けしたいかな、でも同じ内容だし別けちゃうのもな、、、そんなときのためにjQueryを使用してわりとそのままのマークアップでページを分割してボタンで切り替える方法をご紹介します。 投稿日2011年05月25日 更新日2011年05月25日 ページ内リンクしたマークアップでページ分割する 「section」ごとにページを分割します。 それぞれにidを割り振り、そのidに飛ぶように「nav」にはリンクを付けます。 普通のページ内リンクですね。 html <ul class="nav"> <li><a href="#c1">1</a></li> <li><a href="#c2">2</a></li> <li><a href="#c3">
html5のcanvasで簡単な図を描いてみた
html5のcanvasで簡単な図を描いてみた やらなくては、やらなくてはと思ってはいてもなかなか手を出せないhtml5ですが。 そろそろ本当にやらなくてはいけない状況になってきているようです。 で、html5とひとことで言ってもいろいろあるわけですが、とりあえずcanvasからはじめてみようかなと。 投稿日2011年05月17日 更新日2011年05月17日 canvasってなに？ いまさらここでcanvasの説明をする必要はないと思いますが、Flashや画像ソフトを使用しないでhtml（javascript）だけで図などを描画するための技術です。 またアニメーションをさせたり、写真画像の加工などもできるらしいです。 ここでは簡単な図形の描画しかやりませんが…… ベースhtml 今まではxhtmlをメインで書いていましたが、html5になるとちょっと書き方が変わるらしいです。 html
jQueryでテーブルに連番idの列（カラム）を追加する
Posted: 2011.04.22 / Category: javascript / Tag: jQuery テーブルで何かのリストを作成するとき、連番idを割り振りたいときがたまにあります。 しかし、htmlで直に1.2.3…と書くのは大変だし、後で3番を削除したいとなった場合すべて打ち直さなくてはいけないので泣きそうになりますね。 そんなときはjQueryが簡単に連番IDを割り振ってくれます。 連番idカラムを追加するシンプルな例 たとえばこんなテーブルがあります。 html <table id="sample"> <tr> <td>果物</td> <td>オレンジ</td> </tr> <tr> <td>果物</td> <td>パイナップル</td> </tr> <tr> <td>野菜</td> <td>キャベツ</td> </tr> </table> jQueryは次のようになり
jQueryのAjaxを使用して外部htmlを読み込む
Posted: 2011.04.04 / Category: javascript / Tag: Ajax, jQuery Ajaxとは画面遷移なしで、データを取得したり表示したりできるあれです。最近のWebアプリケーションでは必須な技術らしいです。 知識としては知っていたものの実際使ったことがなかったので、かなり今更感が高いですが挑戦してみます。 Ajaxはサーバー側のプログラムの方が重要な気がしますが、ここでは静的なhtmlファイルを使用します。 まずは読み込まれる側のhtmlファイルを作成します。 load.html <li>読み込めたかな？</li> 読み込まれる側は「li」だけです。「load.html」という名前で保存します。 次は読み込む側です。 index.html <ul id="sample01"></ul> <p><a href="#" id="button01">ボ
リッチなユーザーインターフェイスを簡単に実装できる「jQuery UI」
リッチなユーザーインターフェイスを簡単に実装できる「jQuery UI」 jQueryUIはドラック＆ドロップなどのアクション、アコーディオンやダイアログなどのグラフィカルなユーザーインターフェイス、フェードインアニメーションのエフェクトなどがセットになったjQueryのプラグイン群です。 またプラグインの他にも高品質なテーマファイルもセットになっているので、あまりオープンにしないサイトの管理画面でしたら、そのまま使用しても問題ないのではないかなと。 投稿日2011年03月21日 更新日2011年04月02日 jQueryUIのダウンロード jQueryUIトップページからダウンロードしてもいいですが、テーマファイルのビジュアルを確認してからダウンロードした方がいいと思いますのでこちら。 jQuery UI – ThemeRoller 左ナビゲーションの「Gallery」タブを選択して、好
Snow Leopard(10.6)にMacPortsでPHPを開発環境を構築してみた
Posted: 2011.02.15 / Category: Mac / Tag: MacPorts MacPortsを使用すればターミナルからコマンドを打つだけで、PHPやMySQLなどのオープンソースをインストールしてくれるらしいです。 MacでPHPを開発するにあたりMAMPPとどちらにしようかと悩みましたが、MacPortsを使用した方が色々小回りがきくらしいのでこちらにしました。 MacPortsをインストールすることろからはじめ、PHP&MySQLがいちおう動いているよね。というところまでやってみます。 MacPortsのインストール まずはMacPortsをインストールしなくては始まりませんね。 下記サイトで配布されています。 MacPorts 「“dmg” disk images for…」から対応OSのバージョンを選択してdmgファイルをダウンロードします。 インストール
Photoshopで画像のロゴデータを白抜きで背景画像と重ねる方法
Photoshopで画像のロゴデータを白抜きで背景画像と重ねる方法 このバックに白抜きでロゴを重ねたい、でもアウトラインデータがない！ そんなときのためにPhotoshopを使用してわりと簡単に画像データから白抜きで背景画像と重ねる方法をご紹介します。 投稿日2011年02月10日 更新日2011年04月02日 色調補正を駆使して白黒の画像にする。 「色調補正」→「白黒」か「グレースケール」でおおまかな白黒画像を作成。 こまかいことは「トーンカーブ」とか「レベル補正」で調整します。 次に「色調補正」→「諧調反転」で黒バック白抜きにする。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
