D3.js の Data-Driven な DOM 操作がおもしろい
D3.js は「ビジュアライズ用のライブラリー」だと紹介されがちなんだけども、意外にも D3.js にはグラフを描画する機能がない。 D3.js のトップページには次のように書いてある。 D3.js はデータからドキュメントを生成するためのライブラリーです。D3 は HTML, SVG, CSS を使ってデータに命を吹き込みます。Web 標準を重要視しているので、独占的なフレームワークに縛られません。強力なビジュアライズ用のコンポーネントと data-driven な DOM 操作手順を組み合わすことで、モダン ブラウザーの能力を最大限に活用できます。 D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG
無料でHTML5を使った広告やアニメーションが直感的に作れる「Google Web Designer」ベータ版でアニメーションを作ってみました
iOSはFlashに対応していないため、これまでウェブデザインには限界がありましたが、そんなウェブデザインの幅を広げるであろう、動くHTML5広告を制作できるツール「Google Web Designer」ベータ版がGoogleから公開されました。非常に直感的に使えるツールとなっており、アニメーションやイメージギャラリーも簡単に作れるということなので、実際にアニメーションなどを作ってみました。 Google Web Designer http://www.google.com/webdesigner/ 実際に作成したアニメーションは以下のような感じです（動いていない場合はブラウザを更新して再読み込みすれば再度動きます）。 まずは「Download Web Designer Beta」をクリック。 利用規約が表示されるので、「Agree and Download」をクリックしてダウンロードを
自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」:phpspot開発日誌
Editr - HTML, CSS, JavaScript playground 自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」。 いつでもどこでもブラウザがあれば開発ができるスタイルにするための鯖設置型エディタ。 コードハイライト機能がついているため、編集もしやすく、編集結果もすぐ見られるので学習用にもいいかもしれませんね。 関連エントリ Flipboard風エフェクトをブラウザ上で実現するためのjQueryプラグイン「flip」 前ブラウザのブラウザハックまとめ「Browserhacks」 ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 CSSのブラウザ対応状況が一発で分かる「BrowserSupport」 ブラウザ上での音声再生に使えるシンプルプレイヤー「Audio5js」
HTML5＋CSS3の「カンタン装飾設定」で今風デザイン
基本的にグラデーションや角丸はジェネレータからコピペして設定できるので、作業自体は簡単です。HTML5＋CSS3サンプルを使って表現してみましょう。 （1）装飾のキモは「グラデーション・線・角丸・影・テクスチャー」 前回HTML5＋CSS3の「レイアウトを自在に使いこなす」では、限られたいくつかのCSSプロパティを組み合わせて、さまざまなレイアウトができることをお見せしましたが、今回はそれに装飾を加えていきます。 いざ装飾しようとすると、どこから手を付ければ良いのか迷ってしまうかもしれませんが、アイコンなどの絵を除けば、装飾の要素は「グラデーション」「線」「角丸」「影」「テクスチャー」くらいなものです。それらを整理して組み合わせることで、全体として一体感のあるデザインに仕上げられます。 「それが難しいんだよ！」というお叱りの声が聞こえてきそうですが（笑）、以下の2つを見比べてみましょう。上
イマドキのIDE事情(124) HTML5/CSS3対応エディタ「BlueGriffon」を試してみる
BlueGriffonとは? BlueGriffonはFirefoxに搭載されているGeckoエンジンを使用したHTMLエディタで、NvuやKompoZerといったGeckoベースのHTMLエディタの後継にあたる。ソースコードとWYSIWYG編集を切り替えながら編集を行うことができる。最大の特徴は、HTML5やCSS3に対応しているという点だ。 BlueGriffonはマルチプラットフォームで動作し、WebサイトのダウンロードページにはWindows、Mac、Ubuntu用のインストーラが用意されている。Webサイトは英語のみだがインタフェースは最初から日本語に対応している。 BlueGriffonを使ってみよう 実際にBlueGriffonの機能を見てみよう。まずはHTMLの作成時に「ファイル」メニューの「新規作成ウィザード」で使用するHTMLのバージョンなどを指定してHTMLを作成でき
Goodbye friends!
Hello all. After 14 years of existence, it's time to wave goodbye to BlueGriffon. There are many reasons for that, some related to technology (for instance Mozilla killing XUL), some related to me (my will to change and move to something else after so many years), and some others related to corporate context (I'm fed up with running a small company). It's been a wild ride of two decades (Netscape,
Google HTML/CSS Style Guide
Revision 2.1 This style guide contains many details that are initially hidden from view. They are marked by the triangle icon, which you see here on your left. Click it now. You should see “Hooray” appear below. Hooray! Now you know you can expand points to get more details. Alternatively, there’s a “toggle all” at the top of this document. This document defines formatting and style rules for HTML
PhoneGap | Projects
Slot Dewa 505 adalah platform situs slot gacor 77 yang menghadirkan teknologi terbaru dan desain permainan yang inovatif. Dengan link scatter hitam yang selalu diperbarui, situs ini menjanjikan keseruan yang tidak pernah habis dan potensi kemenangan yang besar. Bayangkan saja, bermain slot sambil ditemani fitur-fitur canggih yang bisa membawa Anda pada jackpot impian!
株式会社ジラフィー(Giraffy)
会社情報 事業内容 ソフトウェアシステム開発 クール、セキュア、標準準拠をポリシーに、ソフトウェアシステムの開発を行っています。 Web などのインターネット技術を中心とした豊富な開発経験と高い技術力で高品質なソフトウェアをお届けします。 Webサイト制作 Webサイトのデザイン、HTML/CSSコーディング、WordPress などの CMS への組み込みも行います。 既存のWebサイトへの問合せフォーム等の追加も承ります。 スマートフォン向けアプリケーション開発 iPhone や iPad、または Android など、スマートフォン用のアプリケーションの開発を承ります。 その他 BlackBerry 用テーマ Self Shortener (WordPress プラグイン) 会社概要 社名
テーブルにスクロールバーをつける
<div style="height:100px; width:300px; overflow-y:scroll;"> <table border=1 height="100" width="300" bgcolor="#9999ff"><tr><td> 表示したいテーブル </td></tr></table> </div> overflow-y:scroll （テーブル横にスクロールバーの表示） overflow-x:scroll （テーブル下にスクロールバーの表示） overflow:scroll （テーブル横・下にスクロールバーの表示） overflow-y:auto （内容に応じて横にスクロールバーの表示） overflow-x:auto （内容に応じて下にスクロールバーの表示） overflow:auto （内容に応じて横・下にスクロールバーの表示）
CSS3 Button Generator – This site was closed.
LR icons https://en.lricons.com/ CSS Button Creator https://cssbuttoncreator.com/ Button Maker https://css-tricks.com/examples/ButtonMaker/ CSS Button Generator for your pleasure http://www.dextronet.com/css-buttons-generator/ 2.5dBUTTON http://noht.co.jp/2_5dbutton CSS3 Typeset Style Generator http://www.sciweavers.org/i2style Button X https://www.bestcssbuttongenerator.com/ CSS button generator
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
Twitter の bootstrap を使ったメモ
ドキュメント自体が bootstrap で作られていて、それがサンプルも兼ねていてそっから少しいじったメモ。以下、bootstrap の version 1.2.0 での話です。 使い方 bootstrap を使用しようとすると２通りの方法があります。 1. less.js を使用し less ファイルを読み込む方法。(こんな感じ)(※1) 2. css をファイルを読み込む。github に置かれています。 (※1)sass 的なやつです。less ファイルをコンパイルして css ファイルを作ることもできます。 これは npm でインストールする必要があるので node 環境が必要になってきます。 less と sass が分からない場合は”CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較“がわかりやすかったです。 画面上を16カラムで分割されていて、そこをどう使うかでレ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.stylish-style.com/index.html
ウェブ制作者に必ず役立つ！iOS, HTML5, CSS, jQuery, WordPress, .htaccessなどのチートシートのまとめ
HTML5 Boilerplate: The web’s most popular front-end template
csspop.com
通过检测，正在跳转........
面倒なボタンデザインをCSSで簡単に！コピペで使えるCSS3ボタンデザイン
GitHub - sergeche/eclipse-zencoding: Native Zen Coding plugin for Eclipse
