Vue Patterns
GitHub PatternsComponent DeclarationComponent CommunicationComponent Events HandlingComponent Conditional RenderingDynamic ComponentFunctional ComponentRenderless ComponentCompositionPassing Props & ListenersHigher Order Component (a.k.a. HOC)Provider / ConsumerDependency injectionHandling ErrorsProductivity TipsUseful LinksFullstack Vue BookTranslations
空レイヤー名にルールを書くだけで Photoshop の自動アセットが劇的に楽になる - ろくデブログ
Photoshop CC の便利な画像書き出し機能、自動アセット。レイヤー名に必要な情報を入れておくと自動で書き出してくれる。しかし、Ratina対応などで複数サイズの画像を書き出そうとすると hog...
あえてズレを入れるのがミソ！ ウェブのアニメーションを「いい感じ」に魅せるズルいテクニック - ICS MEDIA
アニメーションはゲームだけではなく、ウェブサイトやウェブアプリのUIなど、多くの用途で必要となります。流行りのマイクロインタラクションでもアニメーションは重要視されています。しかし、アニメーションに対して苦手意識を持っている方も少なくないのではないでしょうか。今回は私が普段トゥイーンアニメーションを作る時に使っている、簡単に「いい感じ」に仕上げるズルいテクニックを紹介します。 本記事で扱うのはトゥイーンと言われるアニメーションの種類です。これは、始めと終わりの状態を指定することで、中間の状態を自動的に補完しアニメーションさせる技術。具体的にはCSS TransitionやjQueryのanimate()関数、Adobe Animate CCのトゥイーン機能のことを指します。 本記事のデモはCreateJSで作成していますが、CSS3やjQueryなど他のテクニックでも応用できる内容となって
#Illustrator でフォントを変えるのが面倒くさい
Illustrator で、選択したテキストのフォントを変更する場合、書式メニューや文字パネル、コントロールの文字をカーソルで操作すると思います。 このフォントを変更する行為って、地味にクリック数が多かったり、やたらと長いプルダウンメニュー（ドロップダウンメニュー）から選択しなければならなかったり、フォントを絞り込むためにフォント名を入力したり… 何かとめんどくさいです。 それらの不満を解消するために、ぼくらは自作のフォント変更スクリプトを導入しています。このスクリプトを使うことで、面倒なドロップダウンメニューを表示せずに、ダイアログでフォントを変更することができます。機能は極めてシンプルですが、いろいろな不満が解消できます。 不満点とともに、スクリプトの機能を軽く説明させていただきます。 プルダウンメニューがとにかく使いづらい 書式メニューや文字パネルなどで導入されているプルダウンメニュ
地味に使えるCSS小技のメモ&サンプル集 - かちびと.net
cssの小技的なテクニックが便利なので好きなん ですが、cssそのものが嫌いで覚えられないので カンペ的な記事を作ることにしました。便利な小技 は沢山あるんですが、特に自分が良く使いそうな Tipsをメモします。既に出回っている情報ばかりで 特に目新しい手法はありませんので何も期待でき ないです。 というわけで特にテーマも一貫性も無くて、ただ便利ってだけです。推奨されない方法もあるかもしれませんが、僕は細かいこと気にしませんのでそんな感じです。 内容も既出なのでお詳しい方にはお役に立てないですが、僕の個人的なメモなので適当に流して頂けると幸いです。 floatで並べたリストのセンタリング Sample01 コード .centered { position: relative; overflow: hidden; } .centered ul { position: relative; le
Controlキーを使いこなせばMacの作業効率は恐ろしく上がる! 覚えるべき7つのショートカットキー – 和洋風KAI
みなさんこんにちは！ショートカットキー大好き！するぷ（ @isloop ）です。 最近、スーパープログラマー@akio0911さんと一緒に作業させてもらってるんですが、ふと@akio0911さんのキーボード捌きを見るとなんか独特なので、「一体これはなにをしてるんですか!?」と聞いてみたところ、「Controlキーのショートカットキーを駆使して文字入力してるんです。これ覚えると便利ですよー」と。 試しにやってみたらこれは感動! むちゃくちゃサクサク文字入力がすすむじゃないっすか! というわけで、今回は@akio0911さんオススメのMacの作業効率を恐ろしくあげるControlキーを使った7つのショートカットキーをご紹介したいと思います! カーソルを上げ下げするControl ショートカットキー。 カーソル移動はカーソルキーを使うのが常識ですが、実は以下のショートカットキーを使っても移動でき
github 超入門 - glasses factory
ここ1年くらい、僕はソースコードなどを github で公開しています。 つい先日まで書いていた連載記事 GAE for Flasher のサンプルソースコードや、 東京てら子で発表したデモ、今まで作ったライブラリや便利クラスなど なんでもかんでも github で公開しています。 しかし、プログラムに慣れた人ならともかく、これから AS3 をガシガシ勉強していこう！ といった方や、AS3 自体はガシガシかけても基本的に SVN 等バージョン管理システムを 使わない方にとっては github 自体がやはり少し敷居が高いイメージがあるという話を聞きました。 GAE for Flasher の記事自体、ある程度 AS3 に関する知識のある人を想定していたとはいえ 流石に当たり前のように使い過ぎたかなと反省の意を込めて github 超入門( for Flasher ) を書く
WebサイトをiPhoneに対応させる -レスポンシブ・ウェブデザイン- - EC studio デザインブログ
このところのスマートフォンの広がりにより、デザイン部でもWebサイトのスマートフォン対応の必要性をひしひしと感じています。 実際のスマートフォン対応の取り組みとしてはこれからなのですが、その時のために従来のサイトをスマートフォンに対応させる方法、特に今回は閲覧環境に応じてページレイアウトを柔軟に切り替える、レスポンシブ・デザイン レスポンシブ・ウェブデザイン（Responsive Web Design）（ご指摘ありがとうございます。）に関していまさらながら調べてみたので、大枠的なことをふわっとまとめておこうと思います。 レスポンシブ・ウェブデザインって まず「レスポンシブ・ウェブデザインとはなんぞや」と言うところですが、 Webサイトのページレイアウトを閲覧環境（パソコン、iPhone、Android など）に応じて動的に変更させる手法で去年あたりからよく耳にするようになりました。 ブラウ
[CSS]IE6, 7も考慮した、CSS3で実装するドロップダウンメニュー
IE6, 7でもドロップダウンとしての機能を損なうことなく、そしてCSS3対応ブラウザでは更に見栄えをよくし、ユーザビリティも向上させるスタイルシートのチュートリアルを紹介します。 CSS3 dropdown menu デモページ [ad#ad-2] CSS3非対応のIE6, 7ではCSS3の角丸などは適用されてませんが、ドロップダウンとしての機能は損なわれずに実装されています。 デモページ：IE6での表示 下記は各ポイントを意訳したものです。 HTML HTMLはシンプルで、ドロップダウンはリストの入れ子で実装されています。 <ul id="menu"> <li><a href="#">Home</a></li> <li> <a href="#">Categories</a> <ul> <li><a href="#">CSS</a></li> <li><a href="#">Graphi
あなたのブログの再訪問者を増やす50の方法
私の経験から感じた事を書き記します。 全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。 因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。 １人の再訪問を増やす意味 あなたのサイトの新規訪問者を30000上げる方法なんていうのもあるわけですが、それよりも遥かに重要な事があります。 それは、たった一人の再訪問者を増やす方法です。 何故か？ 手っ取り早く30000人に来てもらう事が重要に見えますか？ そうではありません。 すこし、昔の話しになりますが、私がブログを始めた当時ではツイッターと言うものがありませんでした。 私の一ヶ月目のアクセス数は平均すると2～10セッションくらいです。 そして3ヶ月目も10～100程度。 4ヶ月目にはいり、ようやく1000～2000という具合です。 これは大手の個人ニュースサイトがリンクをくれ
[CSS]ホバー時のエフェクトを自分以外の要素にも適用するチュートリアル
ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するスタイルシートのチュートリアルを紹介します。 下記キャプチャのデモでは、ホバー時に不透明度を3種類適用しています。 Hover on "Everything But" デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 エレメントにホバー時のエフェクトを与えることは簡単です。 ここでは、ホバー時に不透明度が変化するものを例にしてみます。 div { opacity: 1.0; } div:hover { opacity: 0.5; } これで、ホバー時に不透明度が0.5になるようになりました。 ここまでは簡単ですが、ホバー時のエフェクトを実際にホバーされているエレメント以外にも適用するには、どうしたらよいでしょうか？ 例えば隣接した兄弟のdiv要素などに。 まずは、HTMLの基本的な例を見てください。
日本の真の色が光るように 外国メディアも混乱しまくった大惨事のその先で(gooニュース・JAPANなニュース) - goo ニュース
英語メディアが伝える「JAPAN」なニュースが、こんなに重みをもつ事態が起きるだなんて……。東日本大震災とそれに伴う被害に遭われた皆様、大事な人を亡くされた皆様に、心よりお見舞いとお悔やみを申し上げます。ご承知のように震災発生からこちら、海外メディアには「JAPAN」のニュースが溢れかえりました。悲嘆の言葉、応援の言葉、称賛の言葉、そして批判の言葉も。そこから透けて見えたのは、日本と日本人の姿もさることながら、伝える側の恐怖、そして伝える側の地金でした。（gooニュース 加藤祐子） ○最初は日本称賛で始まった 3月11日からこちら、ご承知のようにほとんどの海外メディアのトップニュースは（多国籍軍のリビア空爆が始まるまで）ずっと日本でした。その最中にあって私は、単発の記事がどうだったとストレートニュースとして伝えるならともかく、コラムという形式の難しさを痛感し、原稿を書いては何度も自らボツに
WordPressでのページ表示高速化の色々まとめ:phpspot開発日誌
WordPressは1万3000以上のプラグイン、1300以上のテーマが公式に登録されており、その拡張性から大体のことは出来てしまいます。 但し、弱点があってデフォルト利用だとパフォーマンスがあんまり出ないってことで、アクセスの多いブログでも捌けるようにするには色々工夫が必要ということで高速化に関するページを色々まとめてみました。 15 Ways To Speed Up Wordpress WordPressでのページ表示高速１５の方法。 体感速度をあげちゃう方法が色々と載ってましたので通常のWEBサイト作りにおいての常識も多く含みますが参考までにメモしてみました。 FirebugとYSlowを使ってページを最適化しよう W3 Total Cache を使おう WP Super Cache 等、静的にキャッシュしてそもそもDBアクセスをなくしちゃったりするプラグインを使おうという話 WP
[CSS]IE6, IE7, IE8, IE9の各バージョンの分岐をvalidで処理する方法
CSS Specific for Internet Explorer デモページ（※IE7で表示） [ad#ad-2] デモ紹介 1. 条件付きコメントの利用 2. CSS Hackの利用 3. 条件付きのHTML class デモ紹介 デモページは、下記のように設定されています。 スタンダードブラウザ（IE9, Firefox, Chrome, Safari, Operaなど） 背景色がグレー IE8 背景色がピンク IE7 or IE8互換モード 背景色がグリーン IE6 背景色がブルー 下記はデモページをIETesterで表示したものです。 IETesterの詳しい説明は、「IE5.5, IE6, IE7, IE8の確認が同時にできる -IETester」を参照ください。 デモページ（※IE8で表示） IE9もWin7+IE9で確認したところ、背景はグレーに表示されていました。 [a
iPhoneやAndroid向けのJavaScriptフレームワーク・Wink Toolkitが割と良かったので日本語サンプル作った - かちびと.net
iPhoneやAndroidなどの人気の スマートフォン向けのJavascript製 フレームワーク・wink toolkitを触っ てみました。動作サンプルが豊富 で割と応用できそうだったので日本 語でサンプルを作ってみました。 スマートフォン向けのWebサイトやネイティブアプリに使えそうなJavaScript製のフレームワークです。沢山の動作サンプルがあって、内容もとっても分かりやすかったので（完全ではないけど）日本語サンプルを作成してみました。 スマホ向けのWebアプリ用JavaScript製フレームワークです。 動作サンプルを日本語にしたのでお手持ちのiPhoneなどでサンプルを触りながら記事を読んでいただけると嬉しいです。 [note]お持ちでない場合でも、Safariでご覧頂くと同様の動作確認が出来ます。Chromeでも多少確認出来ました。また、デモ動画もいくつかありますので宜
「WordPressのfunctions.phpを使って出来るカスタマイズ」をまとめたスレ・Best Collection of Code for your functions.php file
いつかやろうと思っていたWPの functions.phpで出来ることのま とめが、海外のWP専門質問サ イトにあったのでこちらをご紹介。 個人的にもかなり役に立ちました。 Q&Aサイトは色々助かりますよね。 WordPressのテーマファイルで使えるfunctions.phpは色々とテーマの機能を拡張するのに大いに貢献してくれます。 このfunctions.phpを使って何が出来るのかは、WebデザインレシピさんのWordPressのfunctions.phpに書いておくといいかもしれないコードいろいろという記事をご覧になってみてください。 今日ご紹介するBest Collection of Code for your functions.php fileというスレッドには79個の回答があります。 WordPressの情報専門のQ&Aサイト・WordPress Answersでのスレッド
WordPressで作ったサイトを最適化するためのrobots.txt
WordPressで構築している当サイトのrobots.txtを見直そうと思い、参考にした記事をいくつか紹介します。 How to Write WordPress robots.txt for SEO robots.txtファイルは、ウェブを探し回る検索エンジンのロボットに制限を与えるものです。 参考：A Standard for Robot Exclusion ロボットは自動化されており、サイトのページにアクセスする前に、そのサイトにrobots.txtファイルの存在を確認します。 WordPressにとっては、たとえば管理系のファイルなど検索エンジンには必要ではないコンテンツをもっているため、robots.txtの設置は大切です。また、WordPressで生成したページはカテゴリフォルダ、毎月のアーカイブ、タグ一覧など複数のページから同じページを見つけることができます。Googleはコ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
「いいね！」するとコンテンツを見る事が出来るファンゲート対応のFacebookページをWordPressで作る手順 - かちびと.net
新着記事
