[B! 技][webサイト] rie141のブックマーク

レスポンシブなウェブデザインをする際に役立ちそうなこと（主にスマホ対応）のまとめ

レスポンシブにデザインしたサイトを作った際に役立ったこと（主にスマホ対応）を備忘録的にまとめてみます。いろんな方が同じような内容をまとめていますし、基本的なことも多いですがお役に立てばうれしいです。メディアクエリの指定方法小さいディスプレイから指定する場合と、大きいディスプレイから指定する場合があります。どちらにせよ、PC用、タブレット用、スマホ用と分けることが多いようです。まずは大きいディスプレイから指定する方法です。 /* デフォルト：1024px以上用（PC用）の記述 */ @media screen and (max-width: 1023px) { /* 1023px以下用（タブレット用）の記述 */ } @media screen and (max-width: 767px) { /* 767px以下用（タブレット／スマートフォン用）の記述 */ } @media scre

rie141 2014/06/12

リンク

簡単で便利すぎ！WEB制作を「楽」にする無料ツールまとめ

作成：2013/01/28 更新：2014/11/01 Tool > Webサービスフリーソフト、無料ツールなのにここまで使える前回、無料素材をご紹介しました。今回は無料で使える「ツール」をまとめます。フォント、画像、配色、htmlからエディター・アフィリエイトリンク作成補助まで。エンジニア速報は Twitter の@commteで配信しています。もくじ１．フォント２．画像編集３．ロゴ作成 / ネタ４．配色５．HTML5 ６．CSS ７．ブラウザチェック８．エディター９．アフィリエイトリンク作成１０．フォーム作成１．フォント PCにインストールされているフォント一覧をプレビュー Font picker イラスト等に使われているフォントを調べる WhatTheFont Windows上のテキストをくっきり、見やすく表示。 gdipp - ｋ本的に無料ソフト・フリー

rie141 2014/06/09

リンク

「深津貴之氏に学ぶ、スマホUI/UX講座〜iOS7についての考察とfladdictデザイン論〜」に参加してきました。 | DevelopersIO

「デザイン = かっこ良くすること」だとは限らない。デザインとは? 設計複雑な問題を整理して解決することわりとエンジニアリングに近い文章を書く練習をすれば読みやすい文章を掛けるようになるのと同様に、勉強すれば人を困惑させないデザインは作れる。ヒューマンインターフェースの原則インターフェース = 接点、境界面、接触面、接合面、仲立ち、橋渡しヒューマンインターフェース = 人とモノをつなぐものヒューマンインターフェースの原則 = アプリがユーザーとコミュニケーションをする時の原則 1.必然性のあるビジュアル機能と外見が調和しているか？ TPOにあわせた格好をさせるユーザーとコミュニケーションを取るドレスコードみたいなもの(例:ゲーム:楽しく、ツール:信頼性ありそうな) 機能に最適な外見を与えることで... 使い方がつたわる。とっつきやすくなる 2.一貫性アプリ全体でル