5分でわかるCSSグラフィック
知って得する、Webブラウザ上で利用できるグラフィック関連技術。アニメーションや3Dが表現できる「CSS3」をハックしよう CSSで多彩な表現が可能に 本連載では、Webブラウザ上で利用できるグラフィック関連技術を、読み切りの形で、なるべく分かりやすく紹介していきます。第1回である今回はWebの基本技術の1つであるCSSで実現するグラフィック表現を取り上げます。 従来のCSSはWebページのフォントやレイアウトを整える機能がほとんどで、「グラフィック技術」というには物足りないものでした。しかし、CSS3と呼ばれる近年の拡張によって、アニメーションや3D表現を含む多彩な画面効果が実現できるものに進化しています。 この記事は、そうしたCSS3のグラフィック関連機能の基本的な使用方法をまとめて学習することを目的としています。 ベンダプレフィクスについて CSS3の多くの機能はまだ規格策定段階のも
JavaScriptでDOMに挑戦
HTMLをドキュメントオブジェクトとして扱うための約束事「DOM」を、JavaScriptを通して使うことで、HTMLの好きな部分を読み書きすることができます。 連載の前回、「第6回 配列とオブジェクトでデータをまとめる」では、配列とオブジェクトの基本的な扱い方を説明しました。扱うデータの量が少ないうちは、普通の変数だけでなんとかなってしまいますが、データの量が増えれば増えるほど、配列やオブジェクトのありがたみが分かります。 特に、配列に入れたデータを、ループで一気に処理する快感が分かるようになれば、初心者卒業といってもいいでしょう。 それでは、前回の課題の答え合わせをしてみましょう。平均点の求め方は、配列のサンプルでやっていたので簡単すぎたでしょうか。解答サンプルでは、成績の一覧と平均点を同時に表示するようにしてみました。 <html> <body> <script type="text
Chromeを最強化するオススメ拡張機能11
人気ブラウザー『Google Chrome』。拡張機能は数多くあるけれど、まず最初に入れておきたい11の拡張機能を紹介。すべてフリーで導入することができる。快適かつ最強にパワーアップしたChromeを使いこなそう！ ●関連サイト Google Chrome 『Incredible StartPage』 スタートページをカスタマイズ！ シンプルなクロームのスタートページを、機能的な画面にする拡張機能。ブックマークやウェブアプリ、最近閉じたタブが見やすくなる。 ●関連サイト Incredible StartPage バージョン 1.4.3 作者 www.visibotech.com 『Chrome用TooManyTabs』 大量タブを開くときに絶対必要な拡張機能！ 大量のタブをサムネイルで一覧で表示、目的のタブを簡単に選び出せる。並び替えや検索機能もあり、タブを閉じるのがめんどうな人にオススメ
Indexed Database APIによるデータベース(7/7):JavaScriptによるHTML5プログラミング入門 - libro
※プログラムリストが表示されない場合 AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。 ●プログラム・リスト● <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Sample</title> <style> h1 {font-size: 14pt; font-weight:bold; background-color:#DDF; padding:3px; }
fx4b7: [indexedDB] JSInst.js 修正完了 : typeOf 'aki_mana'
とはいえ、今は非公開です。 IDBを使う上で気をつけなければならない点として、一部のメソッドが setVersion().onsuccess なコールバックでしか利用できなくなったこと。 次の３つがそう。 * db.createObjectStore() * db.removeObjectStore() * store.createIndex() ストアの取得法は前回エントリに示したとおり。 var st = db.transaction( db.objectStoreNames, openStoreMode ).objectStore( storename ); openStoreMode については、４つ定数が用意されてる。 * IDBTRansaction.READ_WRITE(0) * IDBTRansaction.READ_ONLY(1:default) * IDBTRansac
![fx4b7: [indexedDB] JSInst.js 修正完了 : typeOf 'aki_mana'](https://cdn-ak-scissors.b.st-hatena.com/image/square/da78a05937633f7a2b4b2219826151c370cd607b/height=288;version=1;width=512/https%3A%2F%2Fparts.blog.livedoor.jp%2Fimg%2Fusr%2Fcmn%2Fogp_image%2Flivedoor.png)
複数選択できるselect要素で選択した項目を分かりやすく表示するjQueryプラグイン・bsmSelect
フォームのselect要素で複数選択 可能なフォームをユーザーが利用 しやすくする為のプラグインです。 現在選択中の項目を分かりやすく 表示してくれます。 multiple属性を使った複数選択可能なselect要素はとても便利ですが、ユーザーが使いにくく、利便性向上は課題の一つです。その利便性を向上させてくれるのがbsmSelectです。 複数選択すると下部に選択中の項目が表示されます。削除も可能。IE7などでも動作しました。 動作サンプルです。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script> <script type="text/javascript" src="jquery.bsmselect.js"></s
dfltweb1.onamae.com – このドメインはお名前.comで取得されています。
このドメインは お名前.com から取得されました。 お名前.com は GMOインターネット(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込みです。
デザインで勝負して相手の印象に残ることを目指した名刺あれこれまとめ
何の変哲もない名刺だと「どの名刺が誰のものだったかな……」と顔と名前を覚えてもらえないこともしばしば。そこで名刺の色や形を工夫して相手にインパクトを与え印象づける、というのは誰にとっても必須戦略の一つ。自分で実際に作るときに以下のようなデザインもありなのだということを知っておくといろいろと役立ちます。 30 new business cards – Best of march and april 2012 – Blog of Francesco Mugnai 01.Cartão Bigode カイゼルひげがで～んと名刺上を陣取っています。 猫にも威厳が……。 02.Tiny. グリーンの部分が通常の名刺の大きさです。一緒にお仕事するようになったら大きい名刺を渡すよ、のこと。 03.Teal Davison Identity 側面に色を付けて複数枚の中から見つけてもらいやすいように。 04.
手軽に小説やマンガを公開 電子書籍投稿＆編集プラットフォーム「upppi」 - はてなニュース
パピレスは4月17日（火）、電子書籍投稿＆編集プラットフォーム「upppi（ウッピー）」のベータサービスを開始しました。EPUB形式などの電子書籍の投稿機能、作品への評価やコメントの投稿機能、投稿した作品の改訂機能やバージョン管理機能などを提供します。利用は無料です。 ▽ 電子書籍投稿・編集プラットフォーム upppi（ウッピー） :: 小説投稿・漫画投稿・イラスト投稿＆閲覧無料 ▽ 株式会社パピレス −ニュース・リリース− パピレス、電子書籍投稿＆編集プラットフォーム『upppi』（ウッピー）の公開を開始〜EPUB等電子書籍の投稿＆改訂＆バージョン管理機能を提供〜 「upppi」は、小説やエッセイ、マンガや写真集など、さまざまなジャンルの電子書籍を投稿し、公開するサービスです。投稿できるファイル形式はEPUB、テキスト、JPGです。テキストはブラウザ上で直接入力することもできます。 公開
最近リリースされた使えるフリーフォント11「11 Extremely Useful Fresh Free Fonts」
TOP > Design , Font > 最近リリースされた使えるフリーフォント11「11 Extremely Useful Fresh Free Fonts」 グラフィックでもWEBでもデザインにおいて、書体選びというのは非常に重要で、書体一つで大きくそのデザインが左右されます。それだけに選べる書体はできる限り揃えておきたいもの。今日紹介するのは最近リリースされた使えるフリーフォントをまとめたエントリー「11 Extremely Useful Fresh Free Fonts」です。 Silverfake スタンダードというよりはクリエイティブによった、個性的な書体が全部で11個集められています。今日はその中からいくつか気になったエントリーをピックアップして紹介したいと思います。 詳しくは以下 Nougatine ゴシック体をベースにしたクリエイティブな書体。それぞれのアルファ
[JS]テキストでも画像でもリストでもテーブルでも、長いコンテンツにスクロールバーを加えるスクリプト -Scrolite
デモページ：p要素 Scroliteの使い方 外部ファイル スクリプトとスクロールバー用のスタイルシートを外部ファイルとして記述します。 <script src="lib/jquery.min.js" type="text/javascript"></script> <script src="lib/jquery.scrolite.min.js" type="text/javascript"></script> <script src="lib/jquery.mousewheel.js" type="text/javascript"></script> <link rel="stylesheet" href="styles/jquery.scrolite.css"></link> HTML HTMLは基本的にはそのままです。 jQueryのセレクタで指定するために、classを加えると便利
サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」:phpspot開発日誌
Chrome ウェブストア - BuiltWith Technology Profiler サイトに使われている技術が丸裸になるChrome拡張「BuiltWith」。 サーバに何を使っているとか、PHPを使っているかとか、jQueryとかのライブラリや、Analyticsが入っているかといった情報を一括で表示してくれるChrome拡張。 サイト上でボタンを押すだけで解析することが出来ます。なんだか恥ずかしいですがこういうツールで調べられちゃうので気をつけましょう ヘッダやソースを見れば当然ながら調べられる情報なんですがボタン一発で調べられるっていうのは便利ですね 関連エントリ Vimの分かりやすいチートシートを見れるChrome拡張「Vim Help」 PHPのエラーなんかをブラウザで確認できるChrome拡張「php-console」 ChromeをiPhoneシミュレーターにできる拡
プログラムの理論とはなにか - きしだのHatena
プログラムには、手続きを記述するという側面と、式を記述するという2つの側面があります。 そして、それぞれの基礎理論としては、チューリングマシンとラムダ計算があるので、プログラムの理論としては、この2系統を勉強する必要があると思います。 ラムダ計算というのは、式によってどのような計算ができるかという理論です。式による条件分岐はそれほど難しくなく、Yコンビネータなどの不動点定理で、式によって繰り返し処理が行えるということが証明されたので、どのような計算でもできるということになっています。 チューリングマシンの理論とは、どのような手続きがどのような性質をもつかという理論です。プログラムの性質というのは、ある出力を行うプログラムが、入力に対してどのように時間がかかるか、どのようにメモリを使うかというものです。そしてこれがアルゴリズムの理論になります。 ところで、ぼくはブログで「アルゴリズムを勉強す
アルゴリズムの勉強のしかた - きしだのHatena
この記事で、アルゴリズムの勉強はアルゴリズムカタログを覚えることじゃないよということを書きました。 プログラムの理論とはなにか アルゴリズムの勉強というのは、スポーツで言えば腕立て伏せや走り込みみたいな基礎体力を養うようなもので、「ソートなんか実際に自分で書くことないだろう」とかいうのは「サッカーは腕つかわないのに腕立ていらないだろう」とか「野球で1kmも走ることなんかないのに長距離の走り込みいらないだろう」とか言うようなものです。 Twitterでアルゴリズムの勉強とはなにかと尋ねられて、「アルゴリズムの基本的なパターンを知って、それらの性質の分析のしかたをしって、いろいろなアルゴリズムでどのように応用されているか知って、自分が組むアルゴリズムの性質を判断できるようになることだと思います。 」と答えたのですが、じゃあ実際どういう本で勉強すればいいか、ぼくの知ってる本からまとめてみました。
紀伊國屋書店 Kinoppy for iPhone,iPad,Android｜紀伊國屋書店BookWebPlusの電子書籍アプリKinoppy(iOS&Android)
お金が急遽必要になったとき、お金借りる方法をどれだけ知っていますか？ 世の中にはお金を借りる様々な方法があります。それらを知っているのと知っていないのとでは、人生が大きく違うと言っても過言ではありません。 令和の時代、生きていくには情報が最も大事と言われています。 情報を持っている人、仕入れるのが早い人がお金を稼ぐことができると言われているのです。 お金を借りるのもそれと同じです。金利を安く国から借りたり、申込の当日に即日融資で借りれるカードローンで借りたり、全ては情報で選択されることでしょう。 この記事は、さまざまなお金を借りる方法についてメリット・デメリットと共に、初めての人でもわかりやすく書いていきます。 簡単にお金を借りる方法ならカードローンがおすすめ 結論的な事を書きますが、お金を借りる簡単な方法は「カードローン」で借りることです。 多分、100人にお金を借りる方法を聞けば、60
IndexedDB API - Web API | MDN
IndexedDB は、ファイルや blob を含む大量の構造化データをクライアント側で保存するための低レベル API です。この API はインデックスを使用して、高パフォーマンスなデータの検索を行うことができます。ウェブストレージは比較的少量のデータを保存するのに有用ではありますが、構造化された非常に多くのデータを扱うには不十分です。IndexedDB が解決策を提供します。ここでは、完全な API リファレンスと使用ガイド、ブラウザーの対応の詳細、および重要な概念の説明へのリンクを提供します。 メモ: IndexedDB API は強力ですが、シンプルな用途にはとても複雑に見えるかもしれません。シンプルな API が好ましいのであれば、関連情報の節にある IndexedDB をプログラマーにとって扱いやすくするライブラリーを試してみてください。 IndexedDB は SQL ベース
JavaScriptでJPEGをエンコードするというクレイジーな発想が実現:phpspot開発日誌
JavaScriptでJPEGをエンコードするというクレイジーな発想が実現されました。 使い方も非常に簡単で、次のようにオブジェクト指向になっています。 // インスタンス作成 var myEncoder = new JPEGEncoder([quality]); // エンコード実行 var JPEGImage = myEncoder.encode(CanvasPixelArray,[quality]) また、このベンチマーク結果がおもしろいです。Safari・Chrome速いです。 以下のページを参照してください。 A JPEG Encoder for JavaScript [bytestrm]
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
米英で話題騒然：ホログラムで蘇った2パック
世界中のネットワーク仮想化をたくらむ：ベンチャー企業「ニシラ」
IndexedDB : silverlight3でgamesのブログ
バナー作成に困ったときにみるバナーまとめサイト
新着記事
http://direct.ips.co.jp/default.cfm
【php】便利なコメント部分切り替え（デバッグ、設定切り替えなどに） at softelメモ