レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 : 森のコーディング
2月10 レスポンシブでcssとjsのブレイクポイントがズレて困るときの対処 カテゴリ:javascriptiphone/ipadサイト Tweet レスポンシブデザインのサイトを作っていて、 ブレイクポイントの設定はcssのmedia-queryでやることが多いと思う。 でも動的な処理がからむ部分で変更があるときはjsでも切り替えを行う。 window.resize() とかで。 んで、今回、cssとjsで両方で同時に切り替わるようにしていたのだけれど、 どうやらwin端末だと切り替えのタイミングがズレることがわかった。 css → 768pxで切り替えたい → @media screen and (max-width: 768px) → ちゃんと768pxで切りかわる js → 768pxで切り替えたい → if($(window).innerWidth() < 768){ → 78
CSS Lint
Errors (All) | (None) Beware of broken box sizing Require properties appropriate for display Disallow duplicate properties Disallow empty rules Require use of known properties Compatibility (All) | (None) Disallow adjoining classes Disallow box-sizing Require compatible vendor prefixes Require all gradient definitions Disallow negative text-indent Require standard property with vendor prefix Requi
この新卒採用サイトがすごい！2016年度イケてる企業まとめ20選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、さんぺーです。 私は2015年度卒業予定のLIGの内定者だったのですが、うかつにも留年をして2016年度卒業となりました。本当にありがとうございます。 今年はアルバイトとしてLIGで働くことになりましたが、必ずしもLIGにもう一度採用されるとは限らない身の上です。最近は漠然とした不安を抱えて「2016年度卒業の学生のための採用ページ」を眺めているのですが、2016年度は特にユニークなものが多いことに気がつきました。 というわけで、今回はもう一度就活生になった私がグッと来たサイトをまとめてみます。普段からネットを舐めるように見ているIT/Webパーソンの方もお楽しみいただけると思います。 それでは、行ってみましょう＼(＾ω＾＼Ξ／＾ω＾)／ リクルートホールディングス RECRUIT革命｜リクルートホールディングス 2016年度新卒Web採用サイト http://recruit-
Googleの提唱する「マテリアルデザイン」の事例を集めまくって無料で素材のダウンロードまで可能な「MaterialUp」
Googleが開発者向けイベントGoogle I/O 2014で発表した新しいUX体系が「マテリアルデザイン」です。アニメーションやカードデザインなどを使い、「合理的な余白と動きを使った統一理論に基づいたもの」と定義されていますが、このマテリアルデザインの優れたウェブサイトやモックアップを毎日最大12個展示する「MaterialUp」は、「優れたマテリアルデザインとは何か」が一目で分かる上に素材のダウンロードまでできる便利なウェブサイトになっています。 The Best Of Material Design, daily – MaterialUp http://www.materialup.com/ マテリアルデザインとは何か？ということは、以下の記事から読むことが可能です。 アニメーションを使ったGoogleの新UXデザイン「Material Design」とは？ - GIGAZINE
光を効果的に使用したPhotoshopのチュートリアル集：Part 15
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
サイトデザインのアクセントに使える6つのPhotoshopのチュートリアル | コリス
aFreeArtworkにエントリーされている、サイトデザインのアクセントに使える6つのPhotoshopのチュートリアルを紹介します。
[JS]液体が流れるように画像を少しずつ表示するスクリプト -Liquid Image FX
Flashを使用せずに、液体が流れるように画像を少しずつ表示するスクリプトをWeb Reflectionから紹介します。 JavaScript Liquid Image FX demo 上記のデモでは、Firefoxのロゴが左から順に上下左右から液体が流れるように画像を少しずつ表示します。 また、動きを組み合わせたデモもあります。
ノンデザイナーのための25のグラフィックデザインのコツ | POSTD
>このコツを大いに活用してグラフィックデザインに挑戦してみてください！ ソーシャルメディア向けのデザインからイベント用の招待状まで、どんなデザインであろうと使えるグラフィックデザインのアプリはたくさんあります。 ペアリングフォントやスケールから行揃えやホワイトスペースまで、デザインの世界は複雑な面を持ちます。この25のグラフィックデザインのコツが、創作過程のあれこれを通してあなたの手助けになるでしょう。 各項目をイメージした画像をクリックして、 独自のデザイン に編集してみましょう。楽しいデザインを！ 01. フォント頼みをやめて、書体を制限してみる このデザインを編集してみる シンプルかつ効果的なグラフィックデザインのために読みやすいフォントを使いましょう。いくつもの書体を使用したデザインは読みづらいものです。統一されたフォントを使うようにしましょう。 ここではAileronのフォントフ
CSSで泥沼にはまらない3つのアプローチ｜『プロとして恥ずかしくない 新・WEBデザインの大原則』発売記念イベント
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
HP作成の初心者でワイヤーフレームの作り方をよく知らない人へ
本気でweb制作を仕事にしたいなら 現場で通用する実践的なスキルを身につけましょう。 【独学 vs スクール】メリットとデメリットを比べて、おすすめの学習方法もお伝えします。 続きはこちら 今回は、web制作時によくある悩み「ワイヤーフレームの作り方がわからない」を解決します。 意外に、ワイヤーフレームの作成方法を詳しく教えてもらう機会は少ないですよね。 そのため、以下のような悩みを抱える人が多くいます。 ワイヤーフレームが何かを知っているけど、いまいちうまくまとめられない。 ワイヤーフレームを作るときの手順が合っているかどうか自信がない。 webサイトの制作過程において、ワイヤーフレームの時点で失敗していると次の工程のデザインも絶対うまくまとまりません。 ワイヤーフレームは、家を建てるときの設計図と同じ役割をします。 適当に作った設計図をもとに家を建てたら、当然、住みにくく崩れやすいもの
見事なカラースキームを採用しているウェブサイト12選
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
Flexboxで決まり！ | Webクリエイターボックス
2017年5月25日 CSS FlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトが組めちゃう素敵ボックスです。前々からあった技術ですが、ブラウザーによって書き方が違ったり、仕様がころころ変わったりと、イマイチ一歩踏み出せない感があったFlexbox。しかしようやくモダンブラウザーでの利用に難がなくなり、実務にも充分使えるようになりました。今回はそんなFlexboxの魅力と使いドコロを、デモ付きで紹介していこうと思います！ ↑私が10年以上利用している会計ソフト！ 対応ブラウザー Can I use…で紹介されているように、現行のモダンブラウザーでは問題なく利用できます。ただし、Safari用に -webkit- のベンダープレフィックスが必要です。IEについては11から正式に対応。IE10にも対応していますが、書き方が
フリーランスWebデザイナーという職業も無くなる4つの理由 デザイン会社 ビートラックス: ブログ
全ての事柄のデジタル化が進む中で、Webやインターネットの重要性が年々高まっている事は間違いないだろう。それに伴い、関連する業種や職業に対する需要が高まるのは必然と考えられる。 例えばWebやアプリを製作する為のデザイナーやエンジニアは、紙媒体や組み込み型ソフトウェア向けのそれに比べても必要性が格段に高いとされ、キャリアアップをする場合は新しい技術の習得が求められる。 その一方で、以前に「アメリカでWeb制作会社が存在出来ない5つの理由」で説明させて頂いたとおり、実はこちらサンフランシスコ、シリコンバレー地域では、”Web制作” をメインのビジネスとしている会社はかなり少ない。 むしろ、数年前からビジネスのコアを変換させなければ生き残れない時代に入って来たと言っても間違いないだろう。 絶滅するフリーランスWebデザイナーという職業それでは、フリーランスのWebデザイナーはどうだろうか？We
webデザイナーならチェックしておきたいフリー素材がピックアップされた「50 incredible freebies for web designers」
TOP > Design > webデザイナーならチェックしておきたいフリー素材がピックアップされた「50 incredible freebies for web designers」 日々、次々と新しい素材がアップされており、膨大な数の中からどれを選ぼうか迷ってしまうこともあるのではないでしょうか？そんな中今回紹介するのは、webデザイナーならチェックしておきたいフリー素材がピックアップされた「50 incredible freebies for web designers」です。 CSS3/jQuery Panel いろいろな種類のフリー素材が紹介されており、どれも使ってみたくなるクオリティの高いものばかりが揃っています。 詳しくは以下 Flat Text – icon sets フラットテイストのアイコンセット。シンプルかつミニマルなデザインなので、さまざまな種類のサイトで使
シンプルなHTMLで実装することにこだわったレスポンシブ対応の汎用性に優れたフレームワーク -Turret
シンプルなHTMLでセマンティックに実装することにこだわった、アクセシブルでレスポンシブ対応のサイトをより簡単に制作するためのフレームワークを紹介します。 MIT Licensesで、個人でも商用でも無料で利用できます。 Turret Turret -GitHub Turretの特徴 Turretはアクセシブルで、セマンティックで、レスポンシブ対応のサイトをより簡単に制作するためのフレームワークです。 レスポンシブ対応 読みやすいマークアップを使い、レスポンシブ対応のグリッドやエレメントを汎用性に優れたclassを使って実装しています。 Design First 直感的なユーザインターフェイスのために、文字の定義とカラーパレットにフォーカスしています。 No JavaScript スクリプトは使用せず、LESSベースでネイティブのWeb要素を採用しています。 セマンティック マークアップは
アニメーションのエフェクトを巧く取りいれたウェブサイトのまとめ
アニメーションのエフェクトをダイナミックに、またはさりげなく取りいれたウェブサイトを紹介します。 Joshua Sortino hanging up the moon Jessica Caldwell
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
28歳、女性、未婚、年収300万円――サイトの方向性を決める「ペルソナ」
CSSのすごいアイデアが満載！実用的なものからスゴ技までスタイルシートのテクニックのまとめ
Hackery, Math & Design — Acko.net
TECH PROjin
