CSS3の制作をぐっと楽にする厳選20のオンラインツールCSS3アニメーションをはじめ、グラデーションやシャドウやボーダー、テキストやボックスをかっこよくしたり、レスポンシブデザイン用のグリッド、セレクタの使い方など、スタイルシートの制作時に役立つオンラインツールを紹介します。 Animate.css classを付与するだけで、さまざまなCSS3アニメーションが実装できます。 初っ端からオンラインツールじゃないですが、簡単にCSS3アニメーションが利用できるということで。
約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 | バンクーバーのうぇぶ屋
先日このブログをリニューアルさせて頂いた旨をご報告させて頂きましたが、今回のリニューアルの主目的だったレスポンシブデザイン化について、とにかく効率優先で作業させて頂いた時のリソース関連や情報を一度僕自身の忘備録として抜粋してまとめさせて頂こうと思います！以前別のブログを作った時もそうですが、基本僕はとにかく効率重視派です。細部に渡る美しいデザインや、ガリガリのプログラミング。標準に法ったコーディングとかはその道のスペシャリストが仲間内に居るので、今回も僕は効率化に焦点を当てています！ ご紹介させて頂くのは主にFacebookやTwitter周りで共有させて頂いてきたリソースばかりですが、実際に使ってみると見えてくる注意点や、戸惑った部分、周りのデザイナーにも知っておいて欲しい部分等が見え隠れしてきたので、まずはその辺りを中心に、作業ステップ毎に簡単にご説明させて頂こうと思います。 僕と同じ
人はなぜ角丸に魅かれるのか、その理由と角丸の効果的な使い方
ウェブのインターフェイスだけでなく、現実の世界でもたくさんの角丸を目にします。角丸は一時のトレンドではなく、デザインのスタンダードと言ってもよいでしょう。 そんな角丸がなぜ好まれるのか、どう使えばよいのか、ウェブページにどのように実装するのかなどを紹介します。 Rounded Corners and Why They Are Here to Stay 下記は各ポイントを意訳したものです。 角丸は目に、そして脳に優しい< 角丸のイメージは安心 -Appleのこだわり 角丸はいつ使用するべきか 角丸の実装：CSS3< 角丸の実装：古い方法 終わりに 角丸は目に、そして脳に優しい ビジュアル認知の権威：Jürg Nänni教授によると、『鋭角の長方形は同じ大きさの楕円より認知するのに努力を必要とする。人間の目は円形のものをより速く捉えることができる。」と述べています。 鋭角と角丸の視線の流れ 鋭
GIF、JPG、PNGの違い - SEO Japan｜アイオイクスのSEO・CV改善・Webサイト集客情報ブログ
画像を保存する際にGIFかJPG、またはPNGどの形式で保存するのかというのかウェブデザインを始めた人が最初に迷う疑問の1つですよね。正直、私もドット絵やイラストならGIF、写真やグラデが多い画像であればJPG、PNGはサイズ重視で画像の劣化を避けたい時や正直良く分からない時、、程度の知識しかない人間ですが、今回親切にもその違いを解説してくれた記事があったので紹介したいと思います。 — SEO Japan 例えば、ロゴをJPG形式で受け取ったときなど、私はいつも私の中の何かが死に絶えるような気持ちになる。実際、それは私にとって非常に大きな出来事なのだ。なぜなら、画像に適したファイル形式を選択することは、Webデザインにおいて非常に重要なことなのだから。 JPG形式の場合、画像を再保存するたびにクオリティが下がってしまうことをご存じだろうか？PNGとGIFは”可逆圧縮(ロスレス圧縮：loss
Webデザインの現場で使えるPhotoshopテクニックまとめ9つ - W3Q
Photoshopの秘法 発掘キャンペーン - ... / 画像を拡大してもできるだけ画質を下げないPhot... / ちょっとぼんやりした画像をくっきりさせるPhot...他...全9件
WEB制作の参考に。バナー作成のちょっとしたコツ : ニュースタイル
いろんなウェブ広告がありますが、まだまだバナーは主流のひとつです。WEBデザイナーはもちろん、企業サイト担当者などバナーに関して悩むことは多いです。バナー引用元リンク：クリックされるバナー広告を学ぼう！C-teamから学ぶバナー作成術 ブログ名：カッシーのWEBる。
人と違うデザインのサイトをスクラッチで作るならHTML KickStartをベースにするといいですよ！ | Chrome Life
This domain may be for sale!
web design lab
NYのデザイン学校でグラフィックデザインを学んだ後、同じくNYにあるWeb制作会社にてインターンからグラフィックデザイナー兼Webデザイナーへ。同時期に米国永住権(グリーンカード)を取得。その後某旅行会社系のWebクリエーター兼社内インフラ担として働いた後、結婚を機に約12年に渡るアメリカ生活を終え日本に帰国。日本では某携帯キャリアの社内Webクリエーターとして勤務。Web系に携わる前はホノルル空港でGreeterとして働いていた経験や、アメリカ国内の衣料品を中心としたアパレル系のバイヤー経験もあり(某通販サイトで３ヶ月連続売り上げTop3を達成、最高順位２位という微妙な感じではあるが...)。趣味はお酒を飲みながらの家でまったり音楽鑑賞と自転車やバイクで行くキャンプやアウトドア系全般。そうそう食べ歩きもね。更新情報はXかFacebookで配信してるのでフォローして確認してみて。
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
サイトのレイアウトを決めるのがだいぶ楽になるグリッドシステム色々 | バンクーバーのうぇぶ屋
本当に最近はあっちを見てもこっちを見ても様々なグリッドシステムを名乗るサイトが登場してきました。PSDをダウンロードするタイプのものからCSSを吐き出してくれるものまで。 僕の面倒くさがりも来るところまで来たらしく、気が付けばブックマークの中身にグリッドシステムという名前のフォルダが出来上がる始末。 使ってないものも多いですが、今日はその中からいくつかご紹介できればと思います。 960 Grid System まずは王道の960Grid System。もはや説明なんぞいらんでしょうと思えるほど、WEB屋の間で当たり前になってきてる気がするGrid Systemですね。僕が初めてGrid Systemという名前を聞いたのもここでした。 僕はPhotoshopもFireworksもどっちも使う派なのですが、テンプレートとしてそろっていることはもちろん、HTML、CSS、Photoshop、Fi
Appleから学ぶウェブデザインに役立つ10のチップス
10 Lessons on Design We Can Learn From Apple [ad#ad-2] 下記は各ポイントを意訳したものです。 #1: Simple Is Better #2: 商品写真の使い方 #3: コントラストを効果的に #4: 簡単に妥協しない #5: Flashから離れる #6: フレンドリーに #7: グリッドの活用 #8: Learn moreコンテンツ #9: 一貫性 #10: ただのコマースサイトにしない #1: Simple Is Better 派手なデザインの「購入する」ボタンやグラフィックが満載のウェブページほど嫌なものはありません。それは取り散らかされただけの下品なページです。 Apple Store Appleのページは「less is more」の好例で、派手な広告やプロダクトであなたを攻めたてることはなく、むしろあなたが見るべき一つのもの
スマートフォンサイトを考えるときに役立ちそうな情報まとめ | Web Tips Blog
最近、色々とスマートフォンの情報を集めているので、その情報を整理してみました。今後5年でモバイル契約数の過半数に達するという予測もあり、今後急速に対応が進むことと思われます。スマートフォンはＰＣともモバイルとも違うので、また独自のユーザービリティやアクセシビリティを考えないといけないようですね。 私が調べてた中で有用そうな情報をまとめています。スマホサイトの基本からマーケティングデータ、デザイン・構築、その他とカテゴリ別にご紹介します。 スマートフォンサイトの基本に関する情報 そもそもスマートフォンサイトって？という人向けです。最適化ってなんだよ？というところからわかります。ＰＣサイトとはやはり色々違いますね。 Webサイトのスマートフォン対応 7つの基本ルール (2011.1.31 Web担当者Forum) PCサイトや携帯サイトとは異なるノウハウが求められるスマートフォン対応サイトの７
タブやスクロール、ツールチップなど、Webサイトで良く見かける機能を1つのファイルで実装可能にする国産jQueryプラグイン・Laquu.JS - かちびと.net
たまたま見かけて便利そうだったので シェア。良く使われるドロップダウン メニューやページスクロール、タブや ツールチップなどを1つのjsファイルで 実装可能にする国産のjQueryプラグイン です。制作が楽になるのでLaquu、と いう名みたいです。 国産のプラグインなのでドキュメントも日本語です。英語が苦手な方でも手軽に使えるのではないかなと。また、無駄な装飾も無いので既存サイトに落とし込んだり、シンプルなフレームワークとしても良いかもしれません。 以前ご紹介したsimplelibと同様にパッケージ化されているので選択肢が増えた印象です。 シンプルで装飾も自由に出来るのでなかなか汎用的ではないかなと思います。ライセンスもMITなのはありがたいですね。 備わっている機能 機能はこんな感じ。どれも良く探している機能じゃないかなと思いますが、これらの機能を1つのjsファイルで使うことが出来る、
並べた画像を敷き詰めて超カッコよくするjQueryサンプル:phpspot開発日誌
Automatic Image Montage with jQuery | Codrops 並べた画像を敷き詰めて超カッコよくするjQueryサンプル。 <img>を単に並べるだけであとはブラウザの幅に応じて画像を次のように並び替えてくれちゃうデモとスクリプトのダウンロードが可能です。 画像間の調整や背景色の調整等が行えるようです。 デモページはこちら ブラウザサイズを変更しても画像を再計算して表示しなおしてくれます。 背景を黒にするとよりオシャレな感じです。 関連エントリ 異なる幅・高さの画像も超綺麗に整列させるjQueryプラグイン「Atteeeeention plugin」 ブロックサイズ内に画像を綺麗に収めるjQueryプラグイン「CJ Object Scaler」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBデザインが素敵なサイト教えろ：キニ速
Components · Twitter Bootstrap
フリーのCSSメニューテンプレートとチュートリアル集 | Webデザインブログフィード
ローディング画像作成ジェネレータ
新着記事
創造力と遊び心がくすぐられるHTML5でつくられたウェブサイトのまとめ