Flipsblog.jpサイトデザインをする上で、デザインがワンパターンになったり、煮詰まったりすると思います。そんな時、Instagram を使わない手はありません世界中のインスピレーション溢れるアート系の発信やデザイン系のイメージがたくさん参照できます本記事ではデザインのヒントになること間違いなしの海外のアートデザイン系の Instagram アカウントをご紹介します。
コピペで実装！CSS3でオシャレなデザインのサンプルコード47選
2015年7月14日の記事を再編集しています。 CSSの新しいバージョンであるCSS3は、アニメーションなどの新機能が追加となったことで従来のCSSよりもグッと便利になりました。CSS3を使えば今までよりも様々な表現ができ、ホームページを魅力的に演出してくれます。 しかし「使ってみたいけれども難しそう……」という方も多いのではないでしょうか。そんなCSS3初心者の方には、サンプルコードを活用することをオススメします。コピペするだけでCSS3を使ったテクニックを取り入れることができますので、試してみましょう。 今回は、CSS3でオシャレなデザインのサンプルコードをまとめてご紹介します。 CSS3で実装できるオシャレなサンプルコードまとめ 1. HTML5＋CSS3でデザインしたtableのCSS＆HTMLサンプルソース5点｜株式会社LIG https://liginc.co.jp/web/h
フォームはラベルの配置場所で使いやすさが全然変わる！ユーザーが利用しやすいフォームを徹底考察 | コリス
あなたのフォームは、ユーザーが簡単に利用できますか？ もし簡単でないなら、フォーム入力を完了するのも予想以上に難しいとも言えます。 ユーザーが入力しやすく、そして入力内容の確認も簡単なフォームについての考察を紹介します。 Why Infield Top Aligned Form Labels are Quickest to Scan by anthony 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 フォームは入力前、入力後の分かりやすさが大切 最近のフォームで見かける問題 1つ目：ラベルとフィールドを上から順番に配置した場合 2つ目：ラベルをフィールドの内側に配置した場合 3つ目：ラベルをフィールドの内側のトップに配置した場合 ラベルの配置を内側トップに変えるとどうなるか ラベルを内側トップに配置するのが機能するフォームとは まと
フロントエンドの実装から見る第四十七回衆議院選挙 開票速報ページまとめ - 暮らしの技術
700億円ほどのお金がかかっているといわれ，why-kaisan.comなんてサイトも作られ巷を賑わせた第四十七回衆議院選挙の投票日が今日でした．投票日と言うことはその後に来るのは開票で，開票と言うことは開票速報がはじまるわけです． 報道各社を見てみますと，各々工夫を凝らした開票速報ページを用意しておりまして，これがなかなかおもしろいということで，その比較でございます． まとめ 長いので先にまとめです． まずテレビと新聞で圧倒的に態度が違います．テレビはあくまで番組の補助だったり宣伝が目的．ウェブページではあまり情報を出したくない様子です．一方新聞各社は トップページ上段，ファーストビューのど真ん中を思いっきり使い，文字通り全面展開といったパターンが多い． フロントエンドの実装から見ると，基本的にグラフが必要な場面ではCSS，日本地図が必要な場面では「画像+mapで部分リンク」か「要素の絶
ITエンジニアの価値を貶める『人月商売』の功罪 - paiza times
Photo by oatsy40 今回のpaiza開発日誌は片山がお送りします。 SIerについて語られる際に「人月商売」についての問題点が良く取り上げられますが、「人月商売」がエンジニアにとってどのような問題点があるのでしょうか？ その点について今回は少し整理してみました。 ■人月とは何か 「人月」について誤って認識している人々が多い。人月とは見積りとスケジューリングに使われる仕事の単位である。「コストは実際に人数と月数の積に比例する。が、進捗はそうではない。したがって、仕事の大きさを測る単位としての人月は、疑うべき危険な神話なのだ。人月とは、人と月とが互いに交換できるという意味だからである。」 人月の神話―狼人間を撃つ銀の弾はない 人月の神話―狼人間を撃つ銀の弾はない (Professional Computing Series) 作者: フレデリック・P,Jr.ブルックス,Frede
Webで生きていくなら絶対にあった方が良い道具のまとめ[改訂版]
こんにちは。enjiです。 Web屋として７年程生き抜いているのですが、その中で「本当にこれは便利だ！もし、環境が変わっても、もう一度買ってしまう。」と断言できる道具やサービスをご紹介致します！ほんの少しでも、役に立つ情報があれば幸いです。 photo credit: Grafix Guru via photopin cc 書類を全てデータ化するScanSnap S1500 これはもう、絶対にに買うべき商品です。 紙をスキャンしてPDFや画像データに変換します。 今まで、どんどん溜まっていた紙の資料等が スキャンしてポイなので散らかっていた紙が無くなり、デスクを綺麗に保てます。 EverNoteやDropboxに自動で送る機能もあるので 大事な契約書、説明書、名刺などなんでもホイホイデータにしておけば いつでも確認できて便利です。 迷っているなら即、買いです。本の自炊もできますよ。 htt
![Webで生きていくなら絶対にあった方が良い道具のまとめ[改訂版]](https://cdn-ak-scissors.b.st-hatena.com/image/square/b792ceab25163d511322e761b62b3251283ef3a6/height=288;version=1;width=512/http%3A%2F%2Frentalhomepage.com%2Fwp-content%2Fuploads%2F2013%2F06%2Fmedium_322458462-e1373186659782.jpg)
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
色々信じられないクオリティでWEBサイトが作れるSquarespaceが結構ヤバイ！ | バンクーバーのうぇぶ屋
「なんじゃこりゃぁあ！！」 とりあえず、コレ見た時の第一声でした。本当は昨日日本から帰ってきたばかりだったので、セミナー旅行の報告記事書くつもりだったんですが、それより先にこの興奮を伝えるのが先かなと思ったので即刻共有記事〜！ 以前『ヤバイくらい簡単にプロフェッショナルなサイトが作れるStrikingly.com』の記事を書かせて貰いました、これはこれでWEBページを作る上ではこれ以上は無いんじゃないか位の楽さとクオリティでした。 しかし、今回はWEBページというよりは完全にWEBサイトを劇的に簡単に作れるという意味でのヤバさ、あとショッピングカート機能、ブログ、その他様々なページを作って運営することが出来る「Squarespace」をちょっと簡単にご紹介させて頂きましょう！ このサイト自体は僕の記憶が確かなら以前に見たことがある気がするんですが、それにしてもその時はこんなヤバさは感じて無
GoogleのアイコンなどのデザインガイドラインをGoogleのデザイナーが公開中
ChromeやGmailのアイコンはシンプルであり、一度使うと見るだけでそのアイコンが何を示すのかわかりやすくデザインされているのが特徴的です。そんな企業秘密とも言えそうなGoogleのアイコンやロゴのデザインガイドラインをGoogleのグラフィックデザイナーであるロジャー・オドン氏がBehanceで公開しています。 Google Visual Assets Guidelines - Part 1 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidelines-Part-1/9028077 Google Visual Assets Guidelines - Part 2 on Behance http://www.behance.net/gallery/Google-Visual-Assets-Guidel
レスポンシブ対応サイトを作成する超軽量のスクリプト -skel.js | コリス
スタンドアローンで動作する19KBの超軽量スクリプト。 さまざまなレイアウトに対応できるグリッド。 表示サイズごとのブレイクポイントの設定も簡単。 resetやbox-modelなどの有用なCSSのショートカットを用意。 プラグイン機能も備えているので、拡張にも対応。 skel.jsのデモ デモはシンプルな構成のページが表示が用意されています。 まずはデスクトップサイズとして、幅1200pxで表示してみます。 デモページ：幅480pxで表示 skel.jsの使い方 jQueryや他のスタイルシートなどを用意せずに、すぐに利用できます。 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 <script src="skel.js"></script> jQueryもスタイルシートも他のファイルは必要ありません。 Step 2: スクリプトのセットアップ スクリプトのセ
いい加減、<script src="http://.. と書くのはやめましょう - DQNEO起業日記
外部サイトのJSファイルを読み込むときに、こういう書き方するのはやめましょう。 <script src="http://example.com/js/jquery.js"></script> 理由 あなたのサイトが、いつの日かSSLに対応することになったとき、そのscriptタグがバグの原因になります。 ご覧のとおり、HTTPSページの中でHTTP要素を読み込もうとすると、ブラウザによっては安全装置が働いて読み込んでくれないのです。 上の例ではjQueryの読み込みに失敗していますが、エラーメッセージ「Uncaught ReferenceError: jQuery is not defined 」を見てもHTTPS/HTTPのプロトコルが原因だとはすぐ気づかないので、わかりにくいバグになってしまいます。 結論 JSファイル(とかCSSとか画像とか)を読み込むときは、"http:"の部分を省
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Search the Collections - National Museum of Asian Art
和文フリーフォントの最上位でしょ！グーグルとAdobeが作った「源の角ゴシック」をゲットすべし * prasm（プラズム）
デザインに赤十字マークは使用禁止！ 不当な使用は法律違反で罰則を受けるかも | 初代編集長ブログ―安田英久
http://www.nijilog.info/2014/05/09/178
Google Design
あたし、このデザインを納品したら故郷に帰って結婚するんだ。vol.05｜株式会社アクトゼロ｜クリエイティブブログ
Web制作会社に飛び込んだ新入社員にとりあえず読ませたいスライド