７日間でWindows 10 アプリ開発者になる方法 - Visual Studio 日本チーム ブログ - MSDN Blogs
Visual Studio のインストール前に、システム要件を満たしているか確認してください。必要なシステム要件はエディションによって異なります。 Visual Studio 2015 のインストール時に、インストールの場所や種類を選択する画面が表示されます。 ・インストールする場所をデフォルトから変更したい場合には、ここで任意のインストール場所を指定します。 ・インストールの種類は、「標準」 と 「カスタム」 の 2 択となります。今回は、「カスタム」 を選択してみましょう。 [次へ] ボタンで 「機能の選択」 を行います。 今回は、「ユニバーサル Windows アプリ開発ツール」 チェックボックスにチェックを入れて [次へ] ボタンでインストールを進めます。インストールが終了すると、画面上に「セットアップが完了しました。」メッセージが表示されます。 2 日目 言語とテンプレート UW
Web制作にあると便利な10の日本語版各種チートシート - かちびと.net
チートシート（Cheat seat）とはカンペの事です。 まとめてシート化し、そばに置くことで その情報を何回も探さなくてもいいように した便利な発想ですが、多くのチートシートは 英語で分かり難いかも、と思ったので 日本語に変換されたWeb制作にあると 便利な各種チートシートを１０個ほど集めてみました。 SEOチートシート SEOのチートシートです。Daily SEOmoz Blogに掲載されたDanny Dover氏の エントリをWeb担で取り上げ、日本語化されています。 SEOチートシート（PDF） cssチートシート textdropさんによって日本語化されたcssのチートシートです。 これは助かります。 cssチートシート（PDF） ブラウザショートカットチートシート らばQでエントリされたブラウザ（IE、FireFox、IE7）のショートカットの チートシートでしたが、PDFファ
Wordpressのテーマを自作＆カスタマイズするのに見ておきたい厳選９記事 | びーおーぷんどっとねっと
別に自分で作る必要ないんだけど。 世の中には沢山の素敵なWordpressのテーマが無料で配布されているんだけど。 それでも自作してみたい、ちょっとカスタマイズしてみたいという誘惑にかられるのはなぜだろう。 そして実行しないのはなぜだろう。 ということで、Wordpressのオリジナルテーマを自作したり、カスタマイズするのに参考になるサイトをまとめておくことにする。 これらの記事を実行すれば間違いなくオリジナルのテーマが手に入る。 WordPressのテーマを自作する ワードプレスのテーマの自作方法がわかるサイト。カスタマイズしたい人も目を通しておくと、仕組みが理解できるかも。 WordPress入門 (全23回) – プログラミングならドットインストール WordPressのオリジナルテーマ作成フロー・基本マニュアル – かちびと.net はじめてWordPressのオリジナル
フォームやボタン、テーブルなどの複数エレメントに対応したCSSフレームワーク・Maxmert
フォームやボタン、タブやテーブルなどなど、複数のエレメントに対応したCSSフレームワークのご紹介です。見た目も分かりやすくシンプルで、個人的にとっても好みだったのでメモも兼ねてご紹介します。 なかなか良さそうだったので。様々なUIをデザインするためのCSSフレームワークです。独特なclass名が他のフレームワクーに無い特徴、とのことです。 配布サイト上でマークアップも作り出せます。最初にエレメントをD&Dしてから色やサイズをエレメントにD&Dすれば変更され、右側にマークアップが表示されます。 ↑ フォームとかテーブルとか ↑ ボタンとかタブとか ↑ ラベルやらドロップダウンやら 他にもいろいろ。ライセンスは Apache License v2.0だそうです。 Maxmert
ファビコンに動的な円グラフを実装できるJSライブラリ・Piecon
ファビコンに動的な円グラフを実装 するJavaScriptライブラリ・Piecon のご紹介。ユニークなライブラリで すね。以前、ファビコンでテトリス を実装するライブラリを見かけまし たけど、今後増えるのかな。 なかなか面白い。ファビコンに動的な円グラフを表示させるスクリプトです。非依存型なのでPiecon単体で動作します。 ファビコンとして表示された円グラフは時間と共に変化させる事が出来ます。 Sample コードPiecon.setOptions({ color: '#ff0084', // グラフの色 background: '#bbb', // グラフの空部分(empty)の色 shadow: '#fff', // 外側の円のボーダー色 fallback: false // タイトルバーのパーセンテージの切り替え設定 });ライブラリを読み込んで上記のようにセッティングします。
手軽にデザインを変更できるCSS3ボタンを作る為のフレームワーク・CSS3 Buttonize Framework
軽量なフレームワークだよ！とのことです。デザインもシンプルで個人的に好みでした。何と比べて軽量なのかな？ サンプル適当ですみませんけどサンプルです .button { font: 14px/36px "Droid Sans", sans-serif; height: 36px; border: 2px solid #333; padding: 5px 14px; margin: 0 6px; text-shadow: 1px 1px 1px #FFF; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; -moz-box-shadow: 1px 1px 6px rgba(255, 255, 255, 0.3); -webkit-box-shadow: 1px 1px 6px rgba(255, 2
シンプルなWebサイトインターフェースを実装する為のフレームワーク・ink
シンプルなインターフェースを構築する為のキット、inkのご紹介です。フレームワークの一種ですかね。ナビゲーションやレイアウトなどの雛形の様な物が用意されています。 開発が楽になるように、という名目で作られたっぽいです。便利なフレームワークは数多にあるので選択肢の一つとして。
イメージファイルをzipにしてアップロードするとCSSスプライト用の画像とCSSを自動生成するツール・SpriteMachine - かちびと.net
CSSスプライト用の画像とCSSを 自動で生成してくれる、という Webツールのご紹介。作るのは 結構面倒なのでこうして自動化 してくれると楽で助かりますね。 CSSスプライトで使いたい画像を1つのフォルダにしてZIPにしてアップロードすると即座に1枚の画像にし、CSSも発行してくれます。 ZIPをドラッグ&ドロップすれば即座にCSSスプライト用の画像とCSSが入ったファイルをDLします。数によるかもしれませんけど一瞬で出来るのは凄いです。 img.spritemachine_foo { width: 450px; height: 72px; background: url(sprite.png) 0px 0px no-repeat; } img.spritemachine_bar { width: 16px; height: 16px; background: url(sprite.pn
Twitter Bootstrapのリソースを大量にまとめたサイト・The Big Badass List - かちびと.net
人気のフレームワーク、Bootstrapを使う際に役立つリソースを大量に集めているWebサイト・The Big Badass Listのご紹介です。現在でも200近くのリソースがまとめられています。既に利用されている方は覗いてみては。 Twitter Bootstrapのリソースまとめサイトです。人気のフレームワークならではのリソース量ですね。 左の影マッチョが気になりますが、それくらい凄いまとめなのでしょう。現在180以上のリソースがまとめられています。 フォームとかデザインとかモックアップとかRubyやPHPにBootstrapを統合する手段とかなんでも揃ってます。 覚えておいて損は無いのでは。また、新たなリソースの情報提供も受け付けてるみたいです。以下よりご利用下さい。 The Big Badass List
960グリッドシステムをjQuery-Mobileと併用する為のスタイルシート・jquery-mobile-960
どこかで使うかもしれないと思って メモがてらシェア。スマートフォンに サクッと対応させるjQueryプラグイン のjquery-mobileに960グリッドシス テムを取り入れることが出来るcss、 jquery-mobile-960です。 なんだかタイトルが謎ですが語彙が無いだけなので気にしないでください。jquery-mobile-960はライセンスがMIT。商用もOKで無料で配布してくれています。 jquery-mobile-960は、960.gsをjQuery-Mobileを使ったレイアウトにも使うためのcssです。2カラム、3カラム、イメージギャラリーなどに使えそうな4カラムレイアウトなどもも思いのまま。 少し大きいですけど全画面キャプチャ↓ 実際にiPhoneで確認 縦の場合。 横の場合。 使い方<link href="http://code.jquery.com/mobile
画像を使わず、CSS+jQueryで絵文字を作れる・JQuery CSS Emoticonsがちょっと素敵だｗ
これはちょっと面白いｗ画像を使わず、cssとjQueryだけで顔文字を作ってしまったみたいです。発想が単純だったのでうまく応用出来れば楽しいものが出来あがりそうな予感もしますな。面白い事考える人がいますね・・ｗ CSS+jQuery（と、もちろんHTML）のみで、画像は一切使われていません。ちょっとこの発想なかったです。ユニークですけど、割と使い勝手がいい気がする・・気のせいかなｗ 一見よく見かけるアイコンだと思うんですけど、これ、全部cssとテキストとjsで作られています。 からくり こういう発想。単純だけど思いつきませんでしたｗなので、以下のようにテキストとして選択できます。 :Ｄとか:ｐを縦にして、グラデーションのかかった黄色い枠を作れば完成ですね。 コード<link href="stylesheets/jquery.cssemoticons.css" media="screen"
キーワードを入力するだけで自動で該当する候補をキーボードで操作可能なテーブル内に表示するjQueryプラグイン・jQuery ComboGrid - かちびと.net
オートコンプリート機能でキーボードで操作できる コンボボックスを出してくれる、というjQueryの プラグイン・jQuery ComboGridのご紹介です。 なかなか高機能なプラグインですね・・・文字を 入力するだけで自動で候補をテーブルとして 出してくれます。ページの切り替えはキーボード で操作可能です。 使う頻度は少なそうですが、とても見やすく、ユーザーの操作も少なくて済み、直感で操作が分かるようなUIでもあるので覚えておくとどこかで役に立つかもしれません。IE6や7でも動いてくれますが、IE6はcssで調整が必要です。 こんな感じで入力フィールドにaと入力しただけで候補がコンボボックス内に表示されました。このボックスはajaxで呼び出しており、キーボードで次のページに移動したり、その場で表示する候補の数を増やす、要素のソートなども出来ます。 jQueryUIを使っているのでこのよう
レスポンシブWebデザイン対応のCSSをカラム数やマージンを指定してダウンロードできる・34Grid
昨日に続き今日も似たような内容 ですが。グリッドレイアウトの レスポンシブWebデザイン対応の CSSフレームワークですが、こちら はグリッドのカラム数やマージン を指定できます。 どんどん便利になりますね。最近同じ内容の記事ばかり書いてて自分がスパマーみたいな気分になってきましたが気にしないようにします。 グリッドレイアウト x レスポンシブなフレームワーク。DL前にカラム数などをカスタマイズ可能です。 カラム数などを入力してダウンロードします。逆に、数値を入れないとダウンロードできない様になっています。 デモファイルです。ウィンドウをリサイズするとそのサイズを上部に表示してくれますので調整しやすいのでは。 以下より利用できます。 34Grid
簡易的なワイヤーフレームを手軽に作成、URLも発行してくれるWebサービス・Wireframe.cc
ワイヤーフレームを手軽に作れる、 というWebサービス。ユーザー登録 も不要です。URLが発行されるので 教えるのも丁度いいかも。ただ、 凄く高機能、というものではない のでイメージを伝える、みたいな 用途になりそうです。 個人的には軽量でユーザー登録不要、直感で作成出来る点、URLが発行される、という点が気に入りました。 こんな感じ。ドラッグで範囲を決めてエレメントを選定するだけ。メモも残せます。 背面、前面設定なども出来ます。 機能はシンプルながら、最低限欲しい物は揃っていて、操作性も良い感じです。URLさえ分かれば誰でも編集できてしまうので、場所の離れた方とのレイアウトの打ち合わせ等、簡易的な用途として使うのもいいかもしれないです。 Wireframe.cc
ここから始めるモバイルパフォーマンス。手軽な画像最適化ツール7選 | DECONCEPTER
ユーザーがページ表示に待てるのは2秒までと言われている。WEBサイトパフォーマンス最適化の話は多数上がっており、画像サイズやJavaScript・CSSの最適化、HTML上の外部リソースの読み込み順序、CDNの利用、DNSルックアップを減らす、HTTPリクエストの数を減らす、コンポーネントを圧縮するなどなど対応し始めたらキリがない。 実際の案件でしっかり最適化を行えているWEB製作者の方は意外に少ないのではないだろうか。今回は最適化のコトハジメとしてまず手軽に誰でも行える画像最適化に使えるツールを挙げてみたいと思う。 ローカルアプリケーション ImageOptim（Mac向け） ドラッグアンドドロップだけでJPEGやPNGの余計なメタ情報を削ってサイズダウンしてくれるアプリ。オフラインでがっと使えるのがうれしいマストツールだ。 ImageOptim — make websites and
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SASS/Compassで構築されたCSSボタンライブラリ・「Buttons」 - かちびと.net
レスポンシブWebデザイン対応のWebサイトを構築する為の軽量フロントエンドフレームワーク・「skel.js」 - かちびと.net
タブやフォームなどのUIもレスポンシブWebデザインに対応させた960グリッドシステム搭載のCSSフレームワーク・Gumby Framework
class名を変えるだけでデザイン変更可能な、css3で作られた沢山のボタンを公開しているWe Love Buttons - かちびと.net
MetroライクなTwitter Bootstrap用デザインテーマ･Cosmo - かちびと.net
