こんにちは、デザイナーのサリーです。モックアップ素材って便利ですよね。 制作の素材としてはもちろん、デザインをはめてイメージを固めたり、プレゼン用資料に使えば短時間で質の高い資料を作ったりできちゃいます。 ということで今回は、そのままでもかっこいいアップル製品のモックアップ素材をまとめました。 Apple Responsive Screen MockUps Apple Responsive Screen MockUps 洗練された印象を受ける、リアルなモックアップです。レスポンシブデザインに最適なデバイスが揃っています。iMac、MacBook Pro、MacBook Air、iPad、iPhoneの4デバイスをダウンロードできます。 Free Apple devices mockup Free Apple devices mockup ※現在このページは表示できません。 こちらもリアルな
グーグルフォームはすごく便利なのですが、レイアウトが固定されてしまうのが不便だったので、スプレッドシートをデータベースにして使用したりしていました。 しかし、グーグルフォームのHTMLを直接変更することでレイアウトを自由にカスタマイズできるみたいです。 質問項目が増えると大変そうですが、スプレッドシートをデータベース化するよりかは汎用性がありそうです。 グーグルドライブでフォームを作成 ライブフォームを表示 ライブフォームを右クリックでページソースを表示 formタグがあるあたりから利用規約のあたりまでのソースをコピー 適当に編集 グーグルフォームを送信後にグーグルのページに飛ぶのを回避するため、iframeを埋め込みました。 →手順 また、フォーム送信後に別ページに飛ばすためonsubmitに転送するスクリプトを追加しました。 レイアウト変更 結婚診断
基本的に、ファイルのアップロード等で使用するフォーム要素として 『input』要素の『type="file"』がありますが、 ファイル選択ボタンや、ファイル名表示エリアの位置やデザインは 基本的にブラウザ依存で、中々デザインを当て込むのは困難です。 デフォルトで適用されるデザインは、 IEやFirefoxはファイル選択ボタンがファイル名表示エリアに対して右側ですし、 ChromeやSafariはファイル選択ボタンがファイル名表示エリアに対して左側です。 ファイル未選択字のデフォルトメッセージ(『ファイルが選択されていません』等)も 言葉が異なっていたり、そもそも表示が無い等まちまちです。 これだけブラウザによって異なれば、 そのままデフォルトで使用すると 他のデザインとのバランスが悪くなったりして、 どうしてもデザインを入れたいパターンが出てくる場合があります。 また、ブラウザ依存のデザイ
Access your support options and sign in to your account for GitHub software support and product assistance. Get the help you need from our dedicated support team.
今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクションも目立ちましたね。 1ページコンテンツ用のスクロール関連 パララックス スクロール関連 スクロールで定位置関連 その他スクロール操作・補助関連 スクロールバー関連 レスポンシブ関連 エフェクト関連 ナビゲーション関連 レイアウト関連 画像ギャラリー関連 画像拡大・配置・キャプション関連 コンテンツスライダー関連 カルーセル関連 アニメーション関連 フォーム関連 コンテンツのツアー関連 テキスト関連
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
非デザイナーエンジニア(Rubyist)の私が、一人でこんなWebアプリを作ってみました。 まだβ版ですが、Pocketやfeedlyの未読コンテンツの中から、 重要度が高いものだけをリマインドしてくれるサービス「Reminderr」です。 Reminderr:http://www.reminderr.me/ 要するに、私自身のPocketとかRSSがカオスになっているので、 その中で重要なものだけ教えてほしかったので、 自分で作っちゃえ!って思って作りました。 そのときに使った便利ツールたちをまとめておいたら便利そうだったので、 今回使ったもの+αを全てまとめてみました。 紹介するツールたちを駆使すれば、 非デザイナー&デザインセンス0の私が、 1週間程度でこれくらいのアプリをリリースできるので、 他のエンジニアにも便利なツールがいっぱいあると思います。 Bootstrap系 Boots
カラーコードを指定するとき、#FFFFFFという表記のほかに、 R:255 G:255 B:255という表記をすることがあります。 これは、16進数と10進数の表現の違いによるものです。 このツールは、16進10進変換のための補助ツールです。 ■使い方■ 1.変換元進数のテキストボックスに半角で数値を入力します。 2.変換したい方向の矢印のある「変換」ボタンを押します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く