レスポンシブ対応の縦長ページ、ランディングページ、プロダクトページ、ポートフォリオ、ブログなど、今時のかっこいいエフェクトを備えたHTML5+CSS3の無料のテンプレートを紹介します。 単に使うだけでなく、デザインやHTML5/CSS3の勉強としてスキルアップにもいいですね。
JavaScriptを書いていたらブラウザがくっそ重くなる症状に出くわした。あぁ、噂のメモリリークですわ。 先人の知恵に頼るマン。それっぽい記事が見つかる。 javascriptのメモリリーク対策(随時更新) - Qiita Shibu’s Diary: JavaScriptのメモリリークを10倍速で発見する Taming The Unicorn: Easing JavaScript Memory Profiling In Chrome DevTools Writing Fast, Memory-Efficient JavaScript - Smashing Magazine angularjs - How to catch memory leaks in an Angular application? - Stack Overflow 上の記事はProfiles + Take Heap
デザインをする際に、IllustratorやPhotoshop、Sketchが使えるといった、小手先の技術はもちろん大切ですが、そもそも「良いデザインとは何か」という概念的なことを知っておくのは大切です。 そこで、今回は、ノンデザイナーでも押さえておくべき、デザインの原理原則がわかる8つの記事を簡単な説明とともにご紹介します。 企画書の作成、簡単なモックアップをつくる際にも役立つものばかりです。 配色技法 デザインをしていて「良い配色」が思い浮かばない… なんて時に読むと考えがまとまる記事です。 「良い配色」という、なんとなく持っている概念を、論理的に説明したい時には重宝します。ドミナントカラー、トーンイントーン、カマイユなど7つの配色技法を、具体的な例を用いて説明しつつ、配色によってもたらされる効果を知ることができます。 → 配色に悩んだときに、きっと役立つ7つの配色技法【基本】 配色パ
*Photoshop(フォトショップ)*は豊富な機能を持つことから、画像修正だけでなく様々なデザイン現場で使われています。次々にデザインの幅が広がる新機能も増えています。反面、あまりにも機能が多いため初心者にとっては上達が難しいソフトでもあります。同じAdobe社のイラストレーターと比べても、プロでさえ使ったことがないツールがあるという声をよく耳にします。 そこで今回は、Photoshopの練習にも最適なチュートリアルをまとめて紹介します。かっこいいデザインやおしゃれな表現がたくさんあり、写真編集の練習素材として活用できるでしょう Photoshop(フォトショップ)チュートリアル一覧 1.手軽にレトロな写真に加工する方法 https://blog.spoongraphics.co.uk/tutorials/how-to-create-a-washed-out-vintage-matte-
ヘッダ、フッタ、ナビゲーション、見出しなど、Webページでよく使う各コンポーネントやエレメントごとに国内・海外の素晴らしいデザインを集めているギャラリーサイトを紹介します。 眺めているだけで、さまざまなインスピレーションをもらうことができます! ヘッダのデザイン フッタのデザイン ナビゲーションのデザイン 見出しのデザイン いろいろなパーツのデザイン ヘッダのデザイン
大学を卒業して新卒で会社に入社したときはブラインドタッチどころかパソコンのパの字も知らないレベルだったのですが、入社してすぐに「Lotus 1-2-3(ロータス ワン・ツー・スリー)」という表計算ソフトの研修に放り込まれて、あまりの訳の分からなさに半泣きで研修を受講したことを思い出しつつ、最近ふと「Excelを使いこなせるようになりたいなー」と思い立って独学でExcelを勉強できるサイトや動画を探してみたので、備忘録を兼ねてまとめてみたいと思います。 1. Office Onlineトレーニング support.office.com 2. 100Excel www.100excel.com 3. Be Cool Users 2007 www.becoolusers.com 4. aoten(アオテン) エクセルスナックテクニック | 動画を見る | エクセル・ワードの使い方ならaoten(
【無料で学べる!】独学でプログラミングが学習できるサービス10選 最近、世界各国でプログラミングの注目度が上がってきています。 これは、日本でも同じでここ最近、無料のプログラミングスクールみたいなものが ものすごく増えてきました。 自分自身も、開発スキルはまだまだ未熟ですが、 独学で学びながら無料のスクールに通っています。 学生でプログラミングを学びたいと思っているけど、無料じゃないと難しいという人が多くいるのではないでしょうか。 そこで、無料でかつ独学で学べるプログラミングサービスを紹介します。 あと、大体のサービスが初心者向けに作られているのでもう挫折もしないはずです。 僕自身も大学1年の時にプログラミングを学ぼうと思って挫折しましたが、 今は続けられているので初心者の人にはオススメです! 1. teratail(テラテイル) teratail 開発言語:HTML/CSS, JavaS
フォーム周りでCSSを使ってスタイリングしていく際に、個人的によくど忘れしてしまうものや便利だと思うプロパティやスニペットをまとめました。 全体的に普段からCSSをよく触っている人にとっては特別目新しいものはないかと思いますが、まだCSSを触り始めて間もない方やこれからCSSを触ってみようという方は覚えておくと便利だと思うのもいくつかあるので参考にしてみてください。 紹介している内容はブラウザ(特にIE9以下)によっては使用できないものや表示確認ができないものもいくつか含まれています。 各要素のデフォルトスタイルを削除 フォームで使用するinputやtextareaなどの要素はブラウザやデバイスによって見た目は異なりますが、予めボーダー・グラデーション・角丸といったスタイルが適用されています。 特にこだわりがなければこのまま使用したり、多少手を加えるだけということもありますが、異なるブラウ
画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。 アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、大きく進化しました。 ※1との互換性はありません。 Vegas 2のデモ Vegas 2の使い方 Vegas 2のデモ デモでは写真画像をブラウザや要素の背景としてフル表示し、スライドショー機能を伴ったコンテンツを楽しめます。 Doc -Animations 表示方法にも多彩なエフェクトが用意されています。 Vegas 2の使い方 Step 1: 外部ファイル 当スクリプト・スタイルシートとjQu
生まれながらにして、装飾やデザインのセンスがある人はいます。スキルを習得して、後天的にデザインセンスを磨く人もいます。そして、どちらにも該当しないのが私たち普通の人。そんなデザイン初心者向けの、基本テクニックをお伝えしましょう。 以下に紹介する装飾のルールと原則は、とってもシンプルなので、誰にでも利用できるはず。カタログみたいな家とまでは行かなくても、人に見せたくなることうけあいです。 奇数の法則 写真の構図を決めるときの三分割法はご存知でしょうか。奇数を基調とするデザインは、調和と視覚的な面白さを生み出すと、デザイナーのCecilia Walkerさんは言います。 奇数に並べられた、またはグループ分けされた物は、偶数の組み合わせよりも魅力的で記憶に留まりやすく、効果的です。 バラバラの高さ、形、質感でグループ分けするのもオススメ。その際、グループ内に多少の共通点が必要です。矛盾しているよ
「幸せになるにはどうすればいいか?」「どうすれば従業員に一生懸命仕事をしようと思ってもらえるか?」「身の回りの現実とそうでないものをどうすれば見分けられるか?」 すべての答えがすでにわかっているという人もいるかもしれませんが、TEDトークのこれまでの人気動画トップ20を見れば、おそらく考えが変わるでしょう。ビル・ゲイツやスティングをはじめとするスピーカーたちが共有する、この世の最高水準の考え、最高だと証明された方法、洞察力に満ちた内容の動画がTEDのウェブサイトにはあります。そのどれもが素晴らしく一見の価値があります。 そんなハイレベルな中にあって、ひときわ輝くトークはどんなものでしょうか? いくつか例をあげてご紹介しましょう。面白くて、刺激的な考え方だけでなく、これまでの偏見や思い込みも覆されるはずです。これまで真実だと思っていた下記の5つのことは、TEDトークによって揺るがされるでしょ
WordPressには数多くのテーマファイルがありますが、それらとは少し違ったアプローチのテーマ「Layers」を紹介します。 ページ作成にはHTML/CSSの知識は不要で、レイアウトやウィジェットを組み合わせてかっこいいページを直感的に作成できます。 Layers Layers -GitHub ライセンスはGPL 2.0 Licenseで、商用利用、修正、配布などが無料で行えます。 通常のテーマファイルはデザインが完成していて、画像やテキストを配置しますが、Layersはベースとなるレイアウトが数種類あり、そこにコンポーネントやウィジェットを自由に組み合わせてページを作成します。 ページのデザインを見ながらカスタマイズできるテーマという感じです。 組み合わせるのは簡単で、下記ページで動画で公開されています。
Dropboxは非常に優れたクラウドストレージサービスですが、機能をフルに使いこなすにはクライアントアプリをローカルにインストールしておく必要があります。でも『Google Chrome』を使っている人なら、もうDropboxのアプリは不要になるかもしれません。 Chrome用の山ほどある便利な機能拡張の中には、Dropboxユーザー向けに機能を追加するものもあるのです。Chromeにこれらを追加しておけば、それだけでDropboxクライアントの役割をほとんど果たしてくれるくらいになっています。 『Dropbox For Gmail』 こうしたChromeの気の利いたアドオンの中でも特筆すべきは、Dropboxが自前で公開したばかりの『Dropbox For Gmail』です。皆さんお馴染みのGmailで、作成したメールにDropboxのファイルを添付したり、添付で送られてきたファイルをD
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く