色色 [:iroiro] - 「言葉」からカラーパレットを自動生成しよう！
色色[:iroiro]とは、「言葉」からカラーパレットを生成するサービスです。
![色色 [:iroiro] - 「言葉」からカラーパレットを自動生成しよう！](https://cdn-ak-scissors.b.st-hatena.com/image/square/af968f100788dea6e8fc8badabc54f2003dd7bb9/height=288;version=1;width=512/http%3A%2F%2Fsynthsky.com%2Firoiro%2Fimgs%2Firoiross.jpg)
初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
Webデザインをパーツで参考にできるサイトまとめ
こんにちは、工藤です。 Webデザインの際、パーツで悩んでしまうことがよくあります・・。 今回はパーツ毎にまとめてくださっているサイトをご紹介します。日本語サイトが多めです。 パーツ全般を集めているサイト ブブンデザインアーカイブ http://bubundesignarchive.jp/ Croppy http://croppy.org/ MephoBox http://box.mepholio.com/ メインビジュアル関連 WEBデザインのメインビジュアルまとめ http://mainvisual.net-king.com/ MAIN VISUAL collection http://mvisual-collection.dslrs-journal.info/ 見出し関連 見出しデザイン.com http://midashi-design.com/ Typography For He
Microsoft Expression Web 4とExpression Design 4の無料版が公開されてた – ウェブアラカルト
いつの間にか、Webサイト作成ソフト「Microsoft Expression Web 4」と、ベクターグラフィック作成ソフト「Microsoft Expression Design 4」の無料版が公開されていました。 ・Microsoft Expression Web 4 Webサイト作成ソフト(Webオーサリングツール)。 入力の自動補完機能もある。 ただし、色んなブラウザで表示確認が出来る「Expression SuperPreview Remote」機能のベータ版は、2013年6月30日をもって提供終了となっています。 注意点としては、上記サイトで普通に「Download」ボタン(赤いやつ)を押すと、英語版がダウンロードされてしまうので注意。日本語版のダウンロード方法は、このページの下部に掲載しています。 ・Microsoft Expression Design 4 ベクターグラフ
SVGをもっと活用するために使いたい·svg.js MOONGIFT
svg.jsはアニメーションやイベント駆動型のSVGを実現するライブラリです。 SVGはまだ広く利用されているとは言いがたいですが、ビットマップではなくベクターデータなので拡大してもきれいなど特徴が多数あります。今回紹介するsvg.jsはSVGを使ったアニメーションを実現するライブラリになります。 デモです。単純なオブジェクトの生成、移動、中央寄せが簡単に指定できます。 クローンして重ね合わせ。重心の判定、傾けるのも手軽です。 X軸、Y軸のずらし。塗りつぶし。 枠だけを描く、グラデーション（線形、円形）。 クリック、マウスオーバー、画像マスクもできます。 クリックしたオブジェクトだけ色を変更します。 さらにアニメーションも自在に。 プラグインによる拡張もサポート。 svg.jsを使えばアニメーションはもちろんのこと、画像を重ねて表示したり、マウスイベントによって形状や色を変更したりすること
CSSアニメーションでページを紙芝居の様に切り替えるデモ:phpspot開発日誌
A Collection of Page Transitions | Codrops CSSアニメーションでページを紙芝居の様に切り替えるデモ。 迫力のある全画面切り替えをCSSで実現しており、そのアニメーションの種類も豊富で良いサンプルになっています。 デモとして学習用にもよさそうですが、Windows8っぽいプレゼン資料なんかを作る際にも使えそうです デモページ 関連エントリ Yahooが作ったピュアCSSのUIライブラリ「Pure」 エレメント上にラベルを付けるためのCSS「Label.css」 Flashみたいに美しいCSSテキストアニメーションデモ HTML/JS/CSSでAndroidアプリ風UIを作るフレームワーク「Fries」 自鯖に設置してHTML、CSS、JSをブラウザ上で開発して遊べる「Editr」
普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」:phpspot開発日誌
ParamQuery jQuery Grid Plugin 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 ありきたりなカッコいい、とはいえないような以下のテーブルがあったとします プラグインで初期化すれば、ソータブル、エディタブル、なクールなテーブルに早がわり これは5,6年前でいえば魔法だと思う方は少なくないでしょう。 関連エントリ レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」 テーブルをグラフに変換してくれるjQueryプラグイン レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table So
その場でデータを編集。BootstrapやjQuery UIに対応した·X-editable MOONGIFT
X-editableはBoostrapやjQuery/jQuery UIで使えるIn-place Editorです。 表示されている内容を編集する際にその場ですぐに編集できるようにするのがIn-place Editorです。それをBootstrap、jQuery UIなどに対応させたのがX-editableになります。 こんな感じでポップアップで編集できます。 エラー表示にも対応。 カレンダーでの入力。 選択式も可能です。 インラインで編集もできます。 こちらはjQuery UI版。 この場合も選択式などが使えます。 X-editableは単純な文字列入力の他に、選択やテキストエリアでの入力にも対応しています。入力チェックも可能で、エラーの際にそのまま表示を残せます。純粋なjQueryにも対応しているのでWebサービスに組み込んでみるのはいかがでしょう。 X-editableはJavaSc
2万個以上のPNG形式画像のアイコンを見つけることができる「PNG Factory」
フォルダアイコンやAppleアイコンなどスタンダードなものから、NARUTO、スーパーマリオシリーズ、サウスパークまで、あらゆる種類のアイコン2万個以上の中から好みのPNGアイコンを選択してダウンロードできるのが「PNG Factory」。アイコンセットの種類や作者・カラーなど、検索条件も変えることができ、商用利用可能なアイコンだけを探しだすことも可能です。 PNG Factory - You want cool icons ? We have some ! http://www.pngfactory.net/ アクセスした時はフランス語で表示されているので、トップペー左上の「en」から英語表示に変えます。 トップページの下部には「BROWSE」「SEARCH」「SHERE」という3つのボタンが表示されています。まずはBROWSEをクリック。 すると、アップロードされた順にアイコンがずらっ
HTML5 開発者向け iPhone 5 / iOS 6 での変更点等まとめ
iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 iOS 6 がリリースされましたがアップデートされましたか？私はマップアプリをよく使うのですが、早速アップデートした方々の、マップがぁぁという叫びにびびってまだアップデートできておりません… で、まだ私の手元の iPhone 4S では iOS 5 が元気に動いている今日この頃ですが、iPhone 5 / iOS 6 における変更点などを、開発者向けにまとめた海外記事がありましたので、簡単にですが日本語にしてご紹介。対訳ではなくて、内容だけ伝わるようにかなり変更していたり、省略もしていますので、詳しくは原文をご確認ください。 原文 iPhone 5
無料で商用可のちょっと手書きっぽい日本語フォント「やさしさゴシック」
作成した印刷物やデジタル・コンテンツについて商用・非商用にかかわらず無料で使用できる「やさしさゴシック」は手書きっぽいかわいいデザインで、アルファベット、ひらがなのほか、漢字まで使うことができるため、デザインのお仕事をしたり個人でフリーペーパーを作成するときの表現の幅が広がります。 やさしさゴシックのフォントダウンロード | フォントな、情報。オープンソースの安心フリーフォントのダウンロード http://www.fontna.com/blog/379/ ◆ひらがな、漢字 ◆アルファベット（大文字） ◆アルファベット（小文字） ◆カタカナ（全角） ◆カタカナ（半角） また、やさしさゴシックフォントには、ちょっと太め（ボールド）のフォントもあります。 やさしさゴシックボールドのダウンロード | フォントな、情報。オープンソースの安心フリーフォントのダウンロード http://www.font
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」:phpspot開発日誌
テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 2012年05月08日- tablecloth.js テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」 $('table').tablecloth() と記述で簡単にテーブルをカッコよくスタイリングできます。テーマも選べる模様。 ソート可能にしたり、ストライプなデザインにしたりといったカスタマイズも可能。 実装できるデザイン例。Twitter Bootstrap と組み合わせたテーマ２種類とその他２種類のテーマがデモとして表示されています 意外と手間取るテーブルデザインですが、こうしたものを参考に美しくデザインしたいものですね 関連エントリ CSS3でクールな角丸テーブルを作る例 シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイ
広告等に使えそうなjQueryプラグインいろいろ
広告表示などにうまく使えそうな jQueryプラグインのまとめです。 諸事情で調べたのでついでに メモしておきます。応用すれば 画像を使ったものは全て広告に 使えますが、その中でも特に 良さそうだったものを中心に。 広告に使えるというか、クリック率を高めそうとか目立たせるとかそういう類のプラグインになります。曖昧なまとめですが個人的なメモになりますのでご了承下さい。順不同です。 Cycle Plugin 省スペース内で画像を切り替えるプラグインです。エフェクトもいつくか選べます。 Cycle Plugin jQuery.popeye こちらも省スペースに置けるギャラリー。マウスを乗せるとキャプションが出てそこにリンクも貼れます。 jQuery.popeye Step Carousel Viewer シンプルなカルーセルです。複数の広告をまとめて表示するのに使いやすそう。 Step Caro
ダミーテキスト生成
「すぐ使えるダミーテキスト」が暗号化通信（https）に対応しました。 2018年6月現在、移行のテスト中でどちらでもアクセスできます。 【2018年6月12日更新】移行テストが完了し、https に強制転送されるようになりました。
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
フォントサイズを変える「大・中・小」ボタンを実装する方法
知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか？という質問をいただきました。 CSSとJavaScript（場合によってはJSのみ）で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し
少しのコードで実装可能な20のCSS小技集
2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください！ ↑私が10年以上利用している会計ソフト！ コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね！ 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox
やる夫が企業サイトのSEOに挑戦するようです αSEO
1 ：以下、名無しにかわりましてαSEOがお送りします：2010/04/01(木) 00:00:00.01 ＿＿＿ ／ ＼ ／⌒ ⌒ ＼ 今日から新しい会社に出社だお ／ （●） （ ●） ＼ これで3年間の無職生活からはおさらばだお！ | （__人__） | ＼_ ｀ ⌒´ __／ やる夫を雇ってくれたのは水産物を売っている会社 /´:::／ﾍ;;;/∨::＼::::::::｀ヽ ここでやる夫はWebマスターとして働くんだお！ i:::,::>:::i/;;;;i /:::::::く:::::::,::::::ﾍ ｛:::i::ヽ::i;;;;;;;/:::::／::::::::i:::::::::｝ 2 ：以下、名無しにかわりましてαSEOがお送りします：2010/04/01(木) 00:00:00.02 ＿＿＿＿＿ ／.::::::
近未来に頻繁に使われるであろうCSS3サンプル１０:phpspot開発日誌
10 examples of futuristic CSS3 techniques 近未来に頻繁に使われるであろうCSS3サンプルがまとまっていました。 本ブログで以前に紹介したものも多いですが、まとまっていて便利そうだったのでご紹介。 吹き出しをCSSオンリーで実装 シャドウ＆グラデーション付きの立体ボタン 枠付き写真をCSSで実装 ポラロイド写真風 角丸ファンシーなフォーム実装 立体的なドロップダウンメニュー MacOSのインタフェースをCSSで実装 近未来においては、こうしたものを組み合わせつつ更にJavaScript等とも組み合わさって今では信じられないインタフェースになっていそうな気がします。 １９９０年代後半の時代を振り返ってみると、あの当時当たり前だったサイトが一部のサイトで見られるものになるような、同じような状態になっているのかも。 関連エントリ CSS3等を使ったサンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
(現在作業中)ブログをレスポンシブデザインに適応させるためにしていること : つねづね思ふこと 〜 ゲームやアニメの紹介を中心 に、あと気がついたときにプログラムネタも書いてます