ヒーローヘッダに使用する幅いっぱいの画像に与えるさまざまなグラデーションのスタイルシートを1クリックで生成できるジェネレーターを紹介します。 グラデーションのカスタマイズや自分の画像をアップロードすることもできるので、出来映えを確認しながら生成できます。
![幅いっぱいの画像に与えるさまざまなCSSグラデーションを簡単に生成できる便利ツール -The Hero Generator](https://cdn-ak-scissors.b.st-hatena.com/image/square/cc8b04a9df6026049886fc0dc151eb9fa1a70c4b/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202002%2F2020050901-01.png)
FlexはFlexboxでやりたいレイアウトを、ビジュアルを確認しながら選択肢を選んで作成、コードをコピーできるシンプルなWebアプリです。設定項目の多いFlexboxは様々なレイアウトに対応できる反面で、覚えなければならない事も多く、正直言って面倒です。使うたびに検索してる、なんて方もいるかもしれませんね。 こちらはそんなFlexboxを、完成形を確認しながら選択肢を選ぶだけでコードを完成出来る、というもの。動作するチートシート、みたいな感じでした。 使ってみる 使い方はとても簡単です。まずは下にスクロールします。アイテムの数やflex-flowを聞かれます。次にwrapやjustify-contentなどを聞かれるので選択肢を選んでいく、という流れ。最終的にできたレイアウトを実装する為のCSSコードをコピーすればOKです。僕の下手な説明を読むより、使ってみた方が早いかも、という程度には
Facebookアプリのテストユーザー作成方法(2016年版)です。 1.はじめに 4年ほど前に「Facebookがテストユーザー作成・編集画面をリリース」という記事で、Facebookアプリのテストユーザー作成方法を紹介しました。 が記事作成から4年半ほど経ち、久しぶりにテストユーザーを作成してみたところ、UIなどが大幅に変更されていました。 ということで本エントリーで2016年現在の手順を改めて紹介します。 Facebookアプリ自体の作成手順は割愛してますので、予め作成しておいてください。 2.テストユーザー作成 自アカウントでログイン後、開発者ページにアクセスして「My Apps」をクリック。 テストユーザーを作成したいアプリをクリック。 左メニューから「Roles」をクリック。 「Test Users」をクリック。 「Add」をクリック。 作成画面が表示されるので各項目を設定しま
MOONGIFTはオープンソース・ソフトウェアを紹介するブログです。2021年07月16日で更新停止しました Web Fontが流行っていますが、日本語はなかなか広まりません。なぜかと言えば、欧文フォントに比べて日本語フォントは文字数が多く、サイズが肥大化する傾向にあるからです。いくら綺麗でもダウンロードに時間のかかるフォントは使えないでしょう。 そのため、日本のWeb Font配布サービスではページ上で使われているフォントだけを抽出してダイナミックにWeb Fontを生成する仕組みを提供しています。それと同等の仕組みを提供するのがJapontです。 Japontの使い方 Japontのデモページです。見ての通り、特徴的なフォントで表示されています。 文字を書きました。テストという文字はWeb Fontが適用されていません。 再読込しました(一部文字を消してしまいました)。テストという文字
ノンプログラマーのためのjQuery生成ツールを作ってみました。よければご活用ください。 ノンプログラマーのためのjQuery生成ツール サンプル表示つき このツールは「7つのサンプルでjQueryを学ぼう!「jQueryが全く分からない人のため」の超初級者向け入門講座」にインスパイアされて作った、初心者向けのお勉強ツールです。 コールバックなど複雑な設定はできませんが、基本的な設定とメソッドチェーンまでできるようにしています。 追記:イベントとAPIをプルダウンメニューで選択できるようにしました。過不足あればご指摘ください。 追記:イベントとAPIのプルダウンメニューでツールチップを表示できるようにしました。ざっくりした内容ですが、これでイベントやAPIの使い方が分かるようになります。 ツールチップを表示 やっつけで作ったので中のコードはかなりひどいです。あしからず。 1.使い方 本エン
個人的に使っているサービスやオンラインツール 有名どころのサービス・ツールが多いのですが、よくお世話になっているので感謝などなどを込めてずらっと紹介します。かなりノンジャンルなチョイスですが、まんま自分のブックマークから選出しているのでご容赦ください。 HiFi Regex Tester - Live JavaScript Regular Expression Tester 正規表現の結果をリアルタイムにチェックしなが記述できるツール。簡単な正規表現は、これでチェックしながら記述することが多いです。 RegExr こちらはFLASHベース。マッチングだけでなく、リプレイスにも対応し、ユーザーが登録したregexpなどを確認できます。高機能気味。 JS Minify!! - ありんく tech-tools JSを最小限のファイルサイズに圧縮してくれます。難読化とも言われる処理ですね。 CSS
Sencha Animatorを使えば、これまでのリッチメディア広告に匹敵するCSS3広告を作成することができます。文字や画像をスムーズに遷移させるアニメーションを作成したり、グラデーションがかかったボタンをデザインしたり、さらに分析用のトラッキングコードを埋め込んだりすることがSencha Animatorの中で行えます。また、これらは全てWeb標準技術を使ってできることです。 これらの標準技術を使えば、現在デスクトップ用のブラウザ向けのリッチメディア広告で使われているほぼ全ての機能は、Apple iOS、BlackBerry Torch、そしてGoogle Android向けに移植・再現することが可能です。 CSS3広告について企画・検討されている広告代理店、広告制作会社の皆様、Sencha Animatorの広告作成者向けオプションについてお問い合わせください。 Contact Us
Lumzy ブラウザ上でサイトのモックアップを光速で作成できるサービス「Lumzy」というのが公開されているみたい。 デザイナーさんであれば、Photoshopでまずデザインを作るより、顧客にどういうサイトを作るか、イメージしてもらうためにモックを作るわけですが、それがブラウザ上で高速にできちゃいます。 ネットブック片手にブラウザさえインストールしてネット環境さえあれば、顧客と相談しながらサイトのレイアウトを作っていっちゃえますね。 サインアップとか無しにすぐに使えるところもGoodで、Flashを使った直感的なUIでモックアップをサクサク作れちゃいます。 ツールを立ち上げると、まずプロジェクト作成画面がでるので適当にいれて「Create Project」します。 作成すると、ボタンとかメニューバー、リスト、データグリッド、コンボボックスなどのありとあらゆるUIパーツが最初からそろっていて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く