2014/01/16
ワンランク上のWEB表現を目指すなら！HTML/CSS/JSの必見テクニック満載「Top Pens of 2013」
Sponsored by
CodePenというWEBサービスをご存知でしょうか。
CodePenは、HTML/CSS/JavaScriptコードをシェアすることができるWebサービスです。
WEBデザインの最先端な表現が世界中から公開されていて、初心者には役立つこと必至ですし、熟練者には刺激になることうけあいです。
そんなCodePenさんは毎年、閲覧回数の多かったコードを「Top Pens」として特設コーナーで発表してくれています。
これを見るだけでも勉強ならびにインスピレーションを受けると同時に、今後のWEB表現のトレンドをつかむうえでもとても役立ちます。
WEBにかかわるお仕事をされているなら、見ておいて損はないと思いますよ！
jsdo.itのように、フォークしたり、編集することも可能です。
2013年、もっとも人気のあったHTML/CSS/JavaScriptコードのトップ100がわかる「Top Pens of 2013」
「Top Pens of 2013」は、HTML/CSS/JavaScriptコードをシェアすることができるWebサービスCodePenが、2013年中に閲覧回数の多かったコードを「Top Pens」として発表している特設コーナーです。
正直、おっそろしいほどハイクオリティーな表現ばかりなので、1つ1つみているだけで日がくれてしまいそうです。
でも、見ちゃうんですよね。
勉強になるし、楽しいから。
気に入ったのがあったら、ひたすら「模写して」練習するだけですね。
素晴らしいWEBサービスです。
100-91位
90-81位
80-71位
70-61位
60-51位
50-41位
40-31位
30-21位
20-11位
10-1位
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
-
0 -
-
0 -
0 -
0
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
-
ユーザーを魅了するcodrops作成のマウスオーバーエフェクト21
CSS3対応のブラウザーが増えているおかげで、マウスオーバーエフェクトにも凝った演出を施しているサイ
-
-
プログラミング・コーディングの作業効率UP!ミスを激減させる見やすいフリーフォント18
プログラミングやコーディングするとき、どんなフォントを使っていますか？ 私の場合、Coda 2とい
-
-
CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」
CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。 表現力豊
-
-
レスポンシブWEBデザイン対応のメニューが作れるチュートリアル17（ソースファイル付き）
レスポンシブWEBデザインを行ううえで重要になってくるのがメニューをどのようにするかということではな
-
-
WEBデザインの勉強・参考に！プロがPhotoshopで作成したWEBサイト用無料PSDフリーテンプレート80
WEBデザインを勉強するうえで大切なのが、自分でいいなあと感じたデザインをそのままマネしてつくってみ
-
-
CSSボタンのコピペに!CSSでつくられたボタンのコードが100以上コレクションされている「CSS Buttons」
CSSボタンの参考やコピペに使える、とても参考になるCSSボタンのコードがコレクションされているサイ
-
-
グラフィックデザイナーのためのオンラインポートフォリオ作成方法
グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか？ 持っていない
-
-
CSSグラデーションをとっても簡単に生成するツール「Gradientoo」
CSSでグラーデーションを表現する場合、最初からコードを書くのは結構たいへんですよね。 そんなとき
-
-
ナビゲーションだけが90以上！ナビゲーションメニューのプラグインやチュートリアルのコレクションサイト「NavNav」
ナビゲーションメニューのプラグインやデモ、チュートリアルが90以上コレクションされたサイトをご紹介し
-
-
今さら聞けない！作業時間を短縮するChrome用ショートカットベスト・コレクション
ブラウザはChromeを使ってます。 そのChromeでサイトを制作したり、ブログを書いたりしてい