タグ

ブックマーク / designcolor-web.com (4)

  • サイトをスマホ対応した時に意識したこと5つ - Design Color

    もくじ サイト幅はリキッドレイアウト&リンク領域は大きめに 動画やGoogleマップも画面サイズに応じて伸縮するように なるべく画面遷移をしないように PC版のデザインでも見れるように 最後までスクロールした後のことも考える 1.サイト幅はリキッドレイアウト&リンク領域は大きめに サイト幅は基的には320px想定で作っています。ですが、一言で「スマホ」といっても様々な解像度がありますよね。特にAndroidとか!しかも、スマホを横向きにするとまた解像度が変わってきます。 なので、ある程度どのサイト幅でも対応できるようにリキッドレイアウトで画面サイズに応じてサイト幅が変わるようにしています。 また、スマホは指で操作するため、リンク領域はなるべく大きめにするよう心がけました。(とはいえ、タグやはてブのリンクまでは大きくできなかったのですが)一部を除いては基的にはリンク要素は「44px以上」

    サイトをスマホ対応した時に意識したこと5つ - Design Color
  • 「CSS Nite LP, Disk 25」参加レポート&Photoshop CS6の新機能「CSSをコピー」とCSSPsを比較 - Design Color

    CSS Nite LP, Disk 25」参加レポート&Photoshop CS6の新機能「CSSをコピー」とCSSPsを比較 2015 1/12 アクセシビリティ (C)田中舘 一久 中根雅文さん、山和泉さん、植木 真さんによるセッションです。 テーマは「アクセシビリティ」。 「アクセシビリティ」とは Webアクセシビリティとは、基的には、障害者がWebを利用できることである。もっと具体的にいうと、Webアクセシビリティとは、障害者がWebを知覚し、理解し、ナビゲーション(訳注:広義には、Webサイトのページ間やページ内を移動したり見てまわったりすること)し、インターラクション(訳注:Webに入力したり情報を受け取ったりしてWebを利用)できることである。 ウェブアクセシビリティ基盤委員会 / WAIC: Web Accessibility Infrastructure Commi

    「CSS Nite LP, Disk 25」参加レポート&Photoshop CS6の新機能「CSSをコピー」とCSSPsを比較 - Design Color
  • とっても幻想的な泡のスクリプト!実装方法やサンプルを紹介 - Design Color

    はじめに 「あくちー(@actywav)さん」といえばとってもポップなデザインのサイト「actyway」の中の人です。あの有名なブックマークレット「ソーシャルてんこもり」など、便利系から面白系まで幅広いプログラム情報などが満載のブログです! 今回は、そんなあくちーさんの良記事のひとつ「まるでサイダーみたい!炭酸飲料みたいに気泡が上がってくスクリプトでシュワワのアワワ! : actyway」に沿ってお伝えします! カスタマイズ方法 泡の動き(Javascript) 泡スクリプトのベースは先日Web系ブロガーさんの間でブームを巻き起こした「雪スクリプト」をベースにしているそうなので、そちらを参考に変更しました。 クリスマスに使いたい!雪のパーティクルをチラチラ降らすスクリプトを作ってみよー : actyway そして泡のソースコードはこちら。自分好みにカスタマイズするなら、主に下記のハイライト

    とっても幻想的な泡のスクリプト!実装方法やサンプルを紹介 - Design Color
  • 初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color

    はじめに 先日ちょうどAdobe Creative Cloudを申し込みました。 Photoshopをまっさらな環境にする必要があるため、今回はまさに新品状態のCS6/CCの画面で解説をします! もくじ 定規などの単位はpxで統一 「自動選択」で図形からレイヤーを選択する 「バウンティングボックス」を表示して選択や変形をしやすくする 「ピクセルにスナップ(エッジを整列)」で端がぼやけるのを解消 レイヤーコピー時に「〜のコピー」とつけないようにする スライス書き出し時に「images」フォルダを作成しないようにする 【CS6/CCの場合】カラーテーマをグレーにする 【CS6/CCの場合】切り抜きツールを「クラシックモード」にする 起動画面。か、かっこいい…! CS6/CCはUIが黒いのですね。ちょっと慣れない。 従来のグレーにする方法も後ほどお伝えしますので、どうぞおつきあいください! 1.

    初めてPhotoshopでWeb制作する前にやっておくといい設定8(CS6/CC含む) | Design Color
  • 1