CSSmaticは、4つのCSSツールを集約したツールサイトです。グラデーション、角丸、ノイズテクスチャ、ドロップシャドウを作成出来ます。 CSSmatic
webmobileは、みんなが知りたいスマホ・通信ガジェットの使い方を発信しているレビューサイトだよ♪ webmobile(ウェブモバイル)は、大好きなPixel/iPhone/MVNO/amazonについて、気づいたこと・困った事の解決など経験したことを発信しています。 運営歴はかれこれ10年以上です。 私が初めて買ったスマートフォンは、auから発売されたSHARP製IS03。今でもデザインの良さに感銘を受けます。 今のメイン機はGooglePixelとiPhone15ProMAXです。 昔はASUS製ZenFoneにはまり、新製品が発売されるごとに買っていました。 MVNOのお店に我が子と訪ねる旅、楽しかったなぁ♪ ご縁あって、UQコミュニケーションズ本社に行くこともありました。 UQモバイル公式グッズをたくさん手に入れる機会がありました。 東京新宿にあるLINE株式会社に招待して貰っ
WEB制作会社って実際儲かるの?これから先もやっていけるの?その疑問に答える! 2013.02.26 | 相談 | 考える。 どうもWP-Dパープルです。今日は表題の件、WEB制作会社は実際に儲かるのか?そして、これから先もやっていけるのか?という質問サイトなどでよくある疑問について、WP-D執筆陣が答える!ということで、そのまとめです。WP-D執筆陣の多くは実際にWEB制作会社勤務、もしくはフリーランスとしてWEB制作を行なっているので、この疑問について各々思うことがあるようです。 ※今回は完全に匿名にするために、アイコンや色を変えています。実際のカラーとアイコンのカラーのつながりはありません。 ※アイコンにはfont-iconを利用しています。本来可愛い動物のアイコンが表示されているはずですが、もし下記の吹き出し左のアイコンがアルファベットで表示されている場合は、何度かリロードしてみて
「Remind Me」はいつでもどこでも素早くToDoを管理できる拡張機能です。拡張機能内にToDoが備わっており、ウェブブラウジング中にぱぱっと項目のチェックや追加を行うことができます。期限や重要度の設定もできますよ。また、Gmailとの連携もできるのでGmailユーザーにはさらに便利なものになります。 以下に使ってみた様子を載せておきます。まずGoogle ChromeでRemind Meへアクセスしましょう。そして、Google Chromeに拡張機能をインストールしましょう。TODO機能を使うにはGoogleアカウントもしくはFacebookアカウントが必要となります。 このように拡張機能のポップアップウィンドウからTODOを追加したり確認したりできます。Gmailとの連携をすれば、Emailの内容をTODOに取り込むことができます。なかなか便利ですね。TODO管理を拡張機能で行い
HTML5+CSS3は「メニューの作り方」を覚えるだけ!:にわかデザイン(1)(1/3 ページ) Photoshopなどの画像処理ソフトを使わず、CSSでできる表現の幅が広がっています。にわかデザイナーになれる、簡単Tipsをお伝えします。 Web製作の現場では、予算の都合上Webサイトのデザインをデザイナーに発注できず、エンジニア自身が担当しなければならないことがままあります。昨今は「Twitter Bootstrap」などのCSSフレームワークを使って、そんな状況に対応している方も多いと思います。確かに、Twitter Bootstrapはリッチなデザインや機能を持つパーツがそろっていて、素早くレイアウトを組み上げるには便利です。しかし、そのためには独自の指定方法やお作法をそこそこ知っておかなければならないのも事実です。 であるならば……、CSS自体を覚えてしまうというのも1つの手では
ドメイン別にスタイルシートを当てる方法。 iframe[src*="youtube.com"]{ width: 500px; height: auto; } iframe[src*="nicovideo.jp"]{ width: 320px; height: auto; } 例えば、YouTubeの外部プレイヤー(iframe)の横幅は500にしたいけど、ニコニコ動画の外部プレイヤーは320にしたいときは、上のように書くと上手く動作します。 a[href*="wayohoo.com"]{ color: red; } a[href*="goryugo.com"]{ color: blue; } ちなみに、aタグをドメイン別に指定する場合はこのようになります。(wayohoo.comは青色、goryugo.comは赤色とする場合) タグ名[属性名*="URL"]{ /* CSSの中身 */ }
スマフォやタブレットのように、下に引っ張るとページをリフレッシュするjQueryのプラグインを紹介します。 Hook.js 最上部に戻ってからの上方向スクロールでもリフレッシュするようです。 普通のページではリフレッシュするシーンがあまりないですが、何かに使いたいな、、、 Hook.jsの使い方 実装は簡単で、2ステップです。 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <link rel="stylesheet" href="hook/hook.css" type="text/css" /> <script src="hook/hook.js"
最近のトレンドのぼやけたブラーの背景に載せたり、美しい写真の背景にも映える半透明のパネルやテキストを簡単に作成できるPhotoshopのスタイルを紹介します。 素材はレイヤースタイル・aslファイルでダウンロードできます。
Makeappiconは、アップロードした画像をスマフォ用のアプリアイコンのサイズにしてくれるジェネレーターです。画像は画面上にドロップすればアップロードできます。 Makeappicon
[CSS] CSS Filter Effects – CSSフィルターのコードジェネレーター Pocket Tweet CSSを使ったフィルター効果を、設定と結果をリアルタイムで見ながら指定する事のできるオンラインツール。サイト内には各種スライダーがあり、これらを調整する事でサンプル写真に効果が反映されます。指定できるのはブラーやグレースケール、ドロップシャドウ、セピア、ブライトネス、コントラストなど、一通り指定する事ができます。フィルター指定については常時CSSコードが更新されるので、これをコピペする事で自サイト内の写真コンテンツに反映する事ができます。CSSフィルターって種類色々あるからこうしたツールは便利ですね。 CSS Filter Effects
[CSS] CSS Beautifier – CSSを整形してくれるオンラインツール Pocket Tweet CSS記述をサイト内にコピペする事で、コードフォーマットを綺麗に整形してくれるオンラインツール。これCSSが汚い俺的になかなかナイスです。インデントの付け方や大括弧の位置などをコード内において統一したフォーマットに書き換えてくれます。サイト上部にあるのが現CSSをペーストするためのウィンドウ、下部にあるのがリアルタイムに生成される綺麗なCSSコードの書き出しエリアです。綺麗なCSSってなんか「綺麗なジャイアン」みたいな感じしますよね。しませんかそうですか。 CSS Beautifier
Icons DB - free custom icons ピクトグラムアイコンの検索に便利な「IconsDB」 フリーのピクトグラムアイコンを探してICO,PNG,GIF,JPG等でダウンロードが可能。 cloudで検索してみた例。目的の物を簡単に発見出来ます 関連エントリ ソーシャルサイトのピクトグラムアイコン112個セット WEBサイト制作に使えるベクターアイコンセットx25 スマホ用のアプリアイコンのりサイズを一発で作成できる「Makeappicon」 ゲームに使えそうな960種類以上のアイコンセット「Game icons」 手書き風だけどリアルなソーシャルメディアアイコンセット15 Windows8風デザインのソーシャルアイコン96個セット「Simple Icons」 分かりやすいフリーのスマホ用ジェスチャーアイコン12種類
Threesixty-slider by creativeaura プロダクトを360度回転させられるjQueryプラグイン「Threesixty-slider」。 画像をドラッグ&ドロップやコントロールボタンのクリックで回転させられます。 自動で回転させられる再生ボタンを付けることも可能 実装コード例。画像のパスや拡張子、prefixなどで複数の画像を設定してまわせる模様。 元画像のかっこ良さもあって、入れてみたいなぁという気になっちゃいますね 関連エントリ プロダクト画像を360度回転させられるようにするjQueryプラグイン5つ スマホタッチでくるくる回転させられるjQueryプラグイン「Touchy」。 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」
twitter facebook hatena google pocket スマホでも画像ギャラリー的なことやりたいですよね。 jQueryプラグインのTouchSlider -- JavaScript slide contentを利用するとスマホでスワイプ形式のスライドギャラリーを導入することができます。 もちろんPCでも動作しますので、レスポンシブ・ウェブデザインにも良いかもしれません。 sponsors 使用方法 TouchSlider -- JavaScript slide contentからファイル一式をダウンロード。 <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="jquery.touchslider.js"></scri
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く