これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
知らないうちに事故ってるかも…！Photoshopカラー設定を「全部」見てみよう
事故る、はホント 「編集」メニュー＞カラー設定、触ったことはありますか？もし初期設定の「一般用 – 日本2」のまま使っているとしたら、今までの仕事のなかに、色が違ったまま納品していたものがある、かもしれませんよ…WEBでも印刷でも同じです。 全ての内容を知っておくと、何かあったときにすぐ原因が分かるようになる、かもしれません。 全部の項目を見てみましょう。 「高度なコントロール」以外の設定を保存（※1）したプリセットを選びます。 印刷向けは「プリプレス用 – 日本2」、WEB向けは「WEB・インターネット用 – 日本」をベースにカスタマイズしましょう。 内容を理解していれば、カスタムすることで作業効率がもの凄く上がります。逆に、理解しないでいじると大変なことになります。 カスタムした内容は「.csf」ファイルとして保存され、InDesignやIllustratorでも同じ設定を使用できます
Web制作に必ず役立つIllustratorのチュートリアルやスライドのまとめ
ひと昔前までは「IllustratorはDTP」といった感じでしたが、Illustratorのバージョンアップによる機能強化に伴い、徐々にイラレでWeb制作をおこなう人が増えてきました。 ベクターっぽいスタイルのフラット、ベクターデータのSVGなどの影響もあるかもしれません。 Illustratorを使って、Web制作をする時に役立つ環境などの設定方法や注意点をはじめ、レイアウトやエレメントの作り方、スライスの便利技、時短テクニックなどのチュートリアルやスライドを紹介します。Illustratorで一番ネックとなる「にじみ」の理由とその解決方法も勉強になります。 Speed Design with Illustrator 翻訳版：Illustratorでインターフェイスをデザインする時に役立つ時短テクニックのまとめ ウェブやアプリなどのインターフェイスをデザインする時に役立つ14の時短テク
Photoshopでの作業がはかどる！ウェブデザイン（特にスマフォ）用の効果的な環境設定のまとめ
Photoshopでウェブページやスマフォページのユーザインターフェイスをデザインする時に、最も良い結果がでる最適な環境設定を紹介します。 最後の「作業のパフォーマンスを向上させる設定」はウェブデザインに限らず、Photoshopの動作がもっさりしている人は見直してみてください。 How To Set Up Photoshop For UI Design 下記は各ポイントを意訳したもので、画像は当方のPhotoshop日本語版です。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。海外の多くのブロガーからあのブログでの無断翻訳・転載の声を聞くのでご注意ください。 環境設定はiPhone用を例にしていますが、基本的なポイントは全てのウェブデザイン作業に適用できます。 新規ドキュメントの設定 スナップの設定 テキストの設定 光源の設定 グリッドの設定 画像を書き出す時の設定 R
完璧に分かる！コーディング一連の流れと知識(HTML5+レスポンシブ+WordPress)
作成：2014/01/27 更新：2015/08/07 Web制作 > 前回、Web制作の一連の流れを書きましたが、今回は少し掘り下げて「コーディング」についてのフローをまとめます(HTML5+レスポンシブ+WordPress)。会社によって違うと思いますが、ざっくりとしたコーディングの流れと気をつけておきたいことをメモしています。 エンジニア速報は Twitter の@commteで配信しています。 もくじ コーディング前の準備 １．仕様書の確認 ２．入稿データの確認・スケジューリング HTML5 マークアップ ３．テンプレート作成 ４．条件付きコメント ５．GCF＋キャッシュクリア ６．OGP記述 ７．ファビコン ８．アウトライン作成 ９．バリデーターをチェック CSS の設定 １０．ノーマライズスタイル レスポンシブデザイン設計 １１．モバイルファーストを基準に設計 １２．プログレッ
not found
2012年05月23日22:21 【速報】SoftCASでついにB-CASカードすら必要なくなる カテゴリテレビ Tweet SoftCAS（B-CASカードをエミュレートするプログラム）がついに出ました。これをダウンロードすれば、B-CASカードをクラックどころかB-CASカード自体が不要になります。 ここからダウンロード http://www.wazoku.net/softcas.zip 解凍するとwinscard.dllというファイルがあります。 TVTestのフォルダに置くだけで地デジ難視対策放送が見れる謎のファイルがアップロードされる（リンク切れ） と同じ事ですが、 1. winscard.dllをTVTest.exeと同じディレクトリに放り込む 2. TVTest.exeを起動し設定->一般->カードリーダを「スマートカードリーダ」に設定 3. TVTest.exeを再起動 s
第7回 環境設定を見直そう（3）
環境設定の最後、スタイルシート（CSS）まわりに関してご紹介します。 ■［HTMLタグの代わりにCSSを使用］ 「CSSレイアウト」、つまり、書式やレイアウトなどのビジュアル情報を(X)HTMLファイルでなく、CSSファイルに記述するワークフローの場合、Dreamweaverを使っていて困るのは、フォントサイズや文字のカラーなどをプロパティインスペクタ側でいじってしまった時、各ページにCSSの記述がエンベッドされてしまう点です。 数ページ程度のものを作る場合には各ページにCSSを記述する制作方法は許容できますが、多ページから構成する「サイト」を形成する場合、ページによってCSSなどの書式が統一されていないという状況が生じてしまいます。 ［環境設定］の［一般］カテゴリでは、［HTMLタグの代わりにCSSを使用］というチェックがあり、デフォルトではオンになっています。 このオプションがオンにな
YouTube埋め込み時に便利なパラメータ 10＋ - NxWorld
サイトにYouTube動画を表示したいと思ったとき、イベントを絡めるといったようなカスタマイズをしてとかになるとAPIを使用したりになると思いますが、とりあえず表示するだけであればiframeで簡単に埋め込むことができます。 そんなときに知っておくと便利なパラメータ10種類を自分が使用頻度が高いと思う組み合わせ3つと併せて紹介します。 はじめに どのように表示されるかわかりやすいように実際にこのページに動画を埋め込もうかとも考えたのですが、ページがかなり重くなってしまうので以下ではコードのみ紹介しています。 実際の表示を確認したい場合は、適当な動画で「JSFiddle」などのツールを使ったり、テスト用のHTMLなどを用意して表示確認を行ってください。 YouTubeの動画を埋め込む方法 単純に動画を埋め込みたい際は、上のキャプチャのように動画下にある「共有 > 埋め込みコード」から表示に必
「iOS 7」を安心して使いたい人のための“セキュリティ対策10選”
「iOS 7」を安心して使いたい人のための“セキュリティ対策10選”：iPhoneから個人情報が丸見え!?（1/4 ページ） ←・見づらい？ 使いづらい？ を解消：「iOS 7」にまだ慣れない人のための“基本ワザ10選” iOSは比較的セキュリティの高いモバイルOSとして知られるが、設定によっては思わぬ危険が潜んでいる。特に最新の「iOS 7」は、ユーザーの手間を減らす便利な新機能が多数加わった半面、ロック画面から個人情報が漏れやすく、セキュリティに対する一層の注意が必要だ。 ここでは、iOS 7を安心して使いたい人へ、10の対策を紹介しよう。 （1）ロック画面を回避できない「iOS 7.0.2」にアップデートする iOS 7のダウンロードは2013年9月19日（日本時間）に始まったが、その直後に特定の操作でロック画面のパスコード入力を回避できてしまう問題が発覚した。 そこで、アップルはこ
間違いだらけのPhotoshop｜CMYK変換に関する二つの「デマ」を検証する
これはまずいんじゃ？と思った、WEBで見かけた二つの「TIPs」について。 CS5/CS5.5以降はCMYK変換精度が上がっている、というデマ 書いてあるところによってCS5だったりCS5.5(Ps 5.1)だったりします。これ検証してみました。 結果、有意な差は認められません。Ver.7以降、同じプロファイルを使って同じ設定で分解する限り変化はありません。 検証方法 同一AdobeRGB画像をMac版CC、CS6、CS3/win版7、6それぞれでJapanColor2001Coated知覚的(黒点補正オンディザオンAdobe(ACE)で変換し、CC上で重ねて差の絶対値＋トーンカーブで強調 1%程度の誤差は出ますが、それはCCで同じ分解した2枚を重ねても出ます。 ACEのバージョンでがらっと変わったのか？とも思ってドキュメント検索したりしましたが、それらしきものが出てきません。 Photo
[JS]スクロールに加速やバウンドなど30以上のエフェクトを与え、位置補正もできるスクリプト -AnimateScroll
「Easing Effect」には3つのデモがあります。 「easeInOutBack」一旦逆にスクロールし、目的地をちょっとだけ通りすぎて戻って到着。 「easeOutBounce」目的地につくとバウンドで到着。 「easeOutElastic」はeaseInOutBackを素早くした感じです。 AnimateScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に記述します。 <head> ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="animatescroll.js"> </head> Step 2: HTML（スクロール先の設定） スクロール先の要素にidやclassを付与します。 ※ペー
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ
最近になって急に盛り上がってきているZen-Codingをみなさんご存知ですか？ Zen-CodingはHTML/CSSをショートカット＋スニペットで簡略化してコードを書くことができるライブラリです。 独立したテキストエディタソフトではなく、既存のHTML/CSSエディタにプラグイン的に導入するものです。 Zen-Codingというのもがどういうもので、どんなすごいものなんだ、というのはこちらの動画を見てください。 ※音が出ますのでご注意ください。 Zen Coding v0.5 from Sergey Chikuyonok on Vimeo 一体何がおこわれているのか？という感じだと思われますが、今回の記事ではこのZen-Codingの導入方法と使い方の一例を紹介します。 Zen-Codingに対応しているエディタは色々あるのですが、今回は弊社の開発環境しているAptana Studio
Web向けの作業を行うときのチェックリスト - DTP Transit
Illustratorで既存の書類を、そのままWeb向けとして作業する場合、次の操作を行います（新規にスタートするときには、ドキュメントプロファイルで「Web」を選択すると、このリストの多くはクリアされます）。 カラーモードをRGBに（［ファイル］メニューの［ドキュメントのカラーモード］→［RGB］） 単位をピクセルに（環境設定の［単位］タブ、またはルーラー上でcontrol+クリック） ピクセルプレビューをオンに（［表示］→［ピクセルプレビュー］） ピクセルグリッドに整合をオンに（［変形］パネルのパネルメニュー内の［新規オブジェクトをピクセルグリッドに整合］にチェックをつける） ラスタライズ効果設定で解像度を72dpiに（［効果］→［ドキュメントのラスタライズ設定］） 環境設定の［キー入力］を「1px」に設定 これにより、shiftキーを押しながら矢印キーを押すと10ピクセル移動します。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
div内で下揃え - CSSブログ～ホームページ制作会社 gravity works（グラビティ・ワークス）のCSSについての知識と備忘録
https://503dg.jp/mojigumi-nyu-mon/