Browsershots
No active screenshot factories. Please try again later. What is Browsershots? Browsershots makes screenshots of your web design in different operating systems and browsers. It is a free open-source online web application providing developers a convenient way to test their website's browser compatibility in one place. When you submit your web address, it will be added to the job queue. A number of
ウェブデザイナーに人気のある有料・無料のフォント ベスト10
世界14ヵ国のウェブデザイナーにアンケートをとった、人気のある有料・無料のフォント ベスト10を紹介します。
cssとは？使い方と学び方の基礎まとめ - プログラミング学習の窓口
プログラミングの基礎であるhtmlを勉強していると、必ず出てくる言葉がcss。 現代のwebサービスにおいて、htmlとcssはいわば兄弟のようなもので切っても切れない関係と言えるでしょう。 では、cssとはいったいどういうものなのでしょうか。 簡単に言うと、Webページの文字の色や大きさ、背景、配置といった見た目を設定する言語の一種です。 静的ページも動的ページも見た目の部分の多くはこのcssで制御されています。 もしcssを詳しく学ぶなら、独学もいいですがプログラミングスクールがおすすめです。費用は当然かかりますが、アドバイスがもらえることと、学習スケジュールが管理されるので、強制的に頑張れる仕組みが作れるのもメリットと言えるでしょう。 The post cssとは？使い方と学び方の基礎まとめ first appeared on プログラミング学習の窓口.
[CSS]読みやすさのポイントは縦のリズム、見出しのレベルがひと目で分かるようにスタイルするチュートリアル
読みやすいウェブページの大切なポイントの一つは、縦のリズムです。ウェブにおける縦のリズムはfont-size, line-height, margin(padding)の3つの要因からなっています。 この3つの要因とデザインを組み合わせ、見出しのレベルがひと目で分かるようにデザインされた見出しを実装するスタイルシートのチュートリアルを紹介します。
Javascriptを使ってここまでできる！凄い動きのサイト10選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。マラガの海の贈り物SEKOです。 フラッシュを使えばサイトはダイナミックな動きを実現しますが、今回はフラッシュでなくてもJavascriptで凄い動きのサイトを集めてみました。 是非参考にしてください。 Javascriptを使った、凄い動きのサイト10選！ MoMA MoMA 円が時系列で表現されております。クリックするとグリンっとまわる動きは気持ちがいいです。ただサイト自体がけっこう重いですね。。 DUB FIRE DUB FIRE マウスを右や左に動かすとサイト全体が動きます。広がりがあり、操っている感もあり、こちらも操作が気持ちいいサイトです。 Volkswogen Volkswogen メインスライドの動きが綺麗です。スクロールで車を操作する年表ページやフォトギャラリーにも楽しい動きが沢山含まれています。 Secret Study Secret Study DUB F
アメリカでWeb制作会社が存在出来ない5つの理由 | freshtrax | btrax スタッフブログ
恐らくWeb制作会社として続けていたら、とっくに潰れていただろう。 昨日、アメリカでのWeb制作会社、及びWebマーケティング会社の事情について聞かれた。昨今の市場と自社の状況をふまえ思わず上記の通り答えてしまった。 我がbtrax社は創立当初は”ごく普通”のWeb制作会社として業務をスタートした。 それから数年はサンフランシスコのオフィスでアメリカの会社に対してサイトを作る、ただそれだけの会社であった。 その後、市場の変化を中心に様々なファクターが理由で気がつけば現在のクロスボーダーを特徴としたサービスデザインや、ブランディングをサービスの中心にする様になった。 恐らく日本ではいまだビジネスとして成り立っている、Web制作・システム開発・Webマーケティング業務であるが、残念ながらここアメリカでは一つの企業としてそのようなサービス”だけ”で生き残って行くのはかなり不可能に近いと思っている
2年の実務で使いやすさを追求した、便利でシンプルなワイヤーフレームのPSD素材 -RafalTomal WireframeKit
右半分 ライセンスは特に無しとのことで、個人でも商用でも無料で利用でき、修正して他の人と共有しても構わない、とのことです。 あなたがしたいことは何でもしてくれ！、と。 ワイヤーフレームの使い方としては、このワイヤーフレームと新規ドキュメントを並べてPhotoshopで開き、必要なエレメントをドラッグで移動して利用するだけです。また、エレメントのカラーはブラックになっているので、不透明度を調整し容易に背景を変更することができます。カラーを変えたい時には、レイヤーの四角いアイコンをダブルクリックしてください。 注意するポイントは、ワイヤーフレームであまりに多くのディテールを作らないことです。
Webデザインのスキルを磨こう！Webサイト模写のススメ
2014年8月17日 Photoshop, Webデザイン 先日、Webデザイナーになってもうすぐ2年がたつというMさんから、「どうすればデザインのスキルを磨くことができるのか？」という旨のご相談を頂きました。今回は彼女の相談メールでもふれられている、デザインのスキルアップに有効なWebサイトの模写のやり方について掘り下げてみようと思います！ ↑私が10年以上利用している会計ソフト！ 頂いたご相談メール 実は最近スランプぎみになっていて、サイトデザインを作成してもなぜかダサい、野暮ったいデザインになってしまいます。 デザインスキル向上させるために、いいデザインのサイトを模写するといいときいて模写もしてみたのですが、ぴったり一致するように作るのに意識がいってしまい、あまりデザインスキルが上がったと実感できないでいます。（模写したデザインを自分のオリジナルで活かせない） もし模写するときはどう
[CSS]斜めのダイヤモンド状のグリッドを実装するスタイルシート
画像やスクリプトを使用せずに、スタイルシートだけで斜めのダイヤモンド状のグリッドを実装するチュートリアルを紹介します。 デモページ：480pxで表示 実装 実装の準備 CSS3をサポートしているか判別するためにModernizeを使用します。 実装にはSassを使用します。 ダイヤモンド一つ まずはダイヤモンドを一つ実装してみましょう。 HTMLはdiv要素をa要素で囲みます。 <a href="#" class="diamond"> <div class="content"> Diamonds Are Forever </div> </a> CSSは下記のようになります。 * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } $diamondSize: 190p
一歩先に進むためのレスポンシブデザインのガイドライン
ウェブサイトをデスクトップ・タブレット・スマートフォンなど、クロスデバイス対応のレスポンシブデザインにする際、サイズを小さくしたりシンプルにするだけでなく、ユーザーの使い勝手を考慮した一歩先に進むためのUIデザインのガイドラインを紹介します。 UI Design Guidelines for Responsive Design 下記は各ポイントを意訳したものです。 はじめに デスクトップ タブレット スマートフォン おわりに はじめに レスポンシブデザインが誕生した時、ウェブ制作のコミュニティではそれを解決するための方法をすぐに考えだしました。多くのウェブサイトがレスポンシブに対応した今、そこから一歩先に進む時です。コーディングに注意を払うことは簡単ですが、いくつかのスクリーンサイズのためにデザインが犠牲になることがあります。 レスポンシブデザインの多くのリソースは基本をカバーするだけで、
[JS]Appleのプロダクトページのような1ページのスクロールコンテンツを作成するスクリプト -One Page Scroll
デモページ：3番目のパネルを表示 各パネルへの直リンクやURL表示にも対応しています。 One Page Scrollの使い方 Step 1: 外部ファイル head内にjquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="jquery.onepage-scroll.js"></script> <link href='onepage-scroll.css' rel='stylesheet' type='text/css'> </head> Step 2: HTML mainはコンテナで、各パネルはse
印刷とは異なるウェブならではの基本的な5つのデザインルール
僕もこの記事のように印刷からウェブに移行した組ですが、最初は印刷とウェブではルールが違うので戸惑いました。もちろん、印刷時代の知識も役にたったものが数多くあります。 なぜフォントのサイズが小さいとよろしくないのか、サイドバーはなぜ右側なのか、ナビゲーションはなぜ上部なのか、印刷とは異なるウェブならではの基本的な5つのデザインルールを紹介します。 5 Design Rules No Blog Should Break 下記は各ポイントを意訳したものです。 はじめに 本文は大きいサイズで、分かりやすく 右側のサイドバー クリーンなカラー 上部のナビゲーション 常に画像を使用する はじめに はじめに 印刷デザインの世界からウェブデザインに入った時、いくつかのミスをしていました。一番大きなポイントは、新聞や雑誌のようにはウェブは使わないということです。紙を読む時とスクリーンを見る時では、どのくらい
これは便利！レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes
これは便利！レスポンシブで変化するエレメントを一元管理できるワイヤーフレーム作成ツール -RWD Wireframes
Gitを使ったデザイナーとプログラマの協業について話してきた #P4D #phpcon2013 - 納豆には卵を入れる派です。
常連プログラマがほぼ Rubyist しかいないP4Dなのですが、なぜかPHPカンファレンスで枠をいただいたとのことで、デザイナーとGitについて話し合ってみようという企画に参加してきました。 「生煮えぷるり」をプログラマとデザイナーの間で行ったり来たりさせる話 Pull Request 4 Designers - GitHubを使ったプログラマとデザイナーのイテレーティブな開発フロー// Speaker Deck GitHubを使った、実際のプログラマとデザイナーの協業の様子を見てもらおうということで、私がお手伝いさせていただいている、[https://forkwell.com:title=Forkwell] と [https://jobs.forkwell.com:title=Forkwell Jobs] での開発の様子を例にお話させていただきました。 補足とか 「生煮えぷるり」という
hr要素のデザインサンプル 12 - NxWorld
hr要素は罫線を表示させるもので、話題を変えるときの目印となる区切り線などとして用いられます。 どのブラウザでも完璧に同じ見栄えをとなると背景画像とかがやはり手っ取り早いし無難なんですが、やろうと思えばCSSだけでも結構いろいろとできるので、備忘録兼ねてhr要素をスタイリングしたものをまとめてみました。 ここで紹介しているものは、ブラウザによっては（特にCSS3を用いているもの）ちゃんと表示されません。 また、多用する人も多いと思う破線や点線もブラウザによっては多少見栄えが違ったりするので、使用する際はあらかじめ注意が必要になります。 はじめに ここで紹介しているものは、すべてHTMLは<hr />のみです。 また、それぞれのhr要素にはデフォルトスタイルとしてあらかじめ下記のようなスタイルを指定してあります。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインの勉強にもなる、CSSで実装するパンくずのまとめ
ダウンロードしておきたいフリーのデザインフォントのまとめ -2013年10月
アイデアの宝庫！CSS3を使ったUI表現・テクニック集
流行に乗っていいの？フラットデザインの落とし穴
見出しやパラグラフのフォントサイズや行間をemベースで簡単に設計できるオンラインツール -Em Baseline Generator
