iPhone向けサイト構築 基礎文法最速マスター - EC studio デザインブログ
弊社代表の著書、「iPhoneとツイッターで会社は儲かる」の出版記念と、巷で話題の「基礎文法最速マスター」ブームに便乗して、iPhone（iPod Touch）向けサイト構築における基礎とプラス応用のネタと、参考になるリンク集をまとめました。 2010/11/18追記： iPhone向けサイト制作の書籍を執筆しました！ 既存のデスクトップ向けサイトをモデルにした iPhoneに最適化したサンプルサイトの紹介と コードの解説をしています。 iPhone向けサイト制作の入門書に最適です。 「HTML5＋CSS3で作る 魅せるiPhoneサイト」 基礎編 対象ブラウザはMobileSafariです レンダリングエンジンはSafariと同じwebkitですが、MobileSafariの方にはiPhone向けの一部独自拡張（CSS）があります。検証の際は、通常のSafariのウィンドウサイズを狭くし
Wordpress（ワードプレス）での投稿者別顔アイコン表示方法 - EC studio デザインブログ
以前にリクエストをいただいていたWordpressでの 投稿者別顔アイコン表示方法を紹介したいと思います。 顔アイコンを表示させると投稿者別の投稿がわかりやすくなり、 興味がある記事が探しやすくなったりします。ぜひお試しください。 アイコンに名前をつける まずはアイコンを作成して、名前をつけます。 この名前をつける時ですが、ユーザー名（ログインID）をつけてください。 ユーザー名はWordpressの管理画面内の「ユーザー」から確認してください。 画像をフォルダにいれる 作成したアイコンを画像フォルダの中にいれます。 （このブログではテーマの中のimagesフォルダにいれています） WordPressのテーマテンプレートにタグを入れる 顔アイコンを表示させたいテンプレートに Wordpressのテンプレートタグを挿入します。 顔アイコンの切り替えはthe author loginというテン
iPadに最適化したサイトがつくれるかもしれない5つの方法（基本編） - EC studio デザインブログ
<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="ipad.css" type="text/css" /> /* 好ましくない例 */ これを使うことで横幅1024px以下のデバイスでアクセスされた場合に、ipad.cssを読み込むということはできるんですが、PCの場合でもこの程度の解像度のものはありますし、なおかつ利用しているブラウザが最近のものであれば、このコードを理解してしまいます。 つまり、「iPadだけ」に適用させるということは実質できないということになります。 この点はご注意ください。 デバイスの幅に左右されないリキッドレイアウトにする 前述のユーザーエージェントの話に次いで、レイアウトの話です。 iPadのデバイスとしての画面サイズはポートレート（縦向き）であれば 横
Fireworksで立体的なアイコンを作る方法 - EC studio デザインブログ
サイトや広告バナーをつくる際に、イメージアイコンを使うことがよくあります。 ただ、配布されているイメージアイコンを使用する場合、 「形を少し変えたい！」 「複数のアイコンを組み合わせて使いたい！」 など、サイトなどの雰囲気に合うよう、手を加えたくなる時があります。 ただ、データの加工が不可だったり、加工するのに時間がかかったり… 時間短縮のために配布素材を使ったのに意味がなかった！なんてこともあります。 そんな時はイメージアイコンを 最初から自分で作る！ というのも1つの方法です。 今回は、Fireworksを使って簡単に立体的なアイコンを作る方法を ご紹介したいと思います。 作業は単純。 パスの合体 パスの切り抜き 拡大縮小 の繰り返しです。 1.形をつくる 楕円を2つ描きます 楕円の上に四角を重ねて合体させます 合体したパスの上にさらに四角を重ねて切り抜き、余分な部分をカットします 合
Fireworksを使いこなそう！整列でアウトラインがぼけない方法 - EC studio デザインブログ
Fireworksをつかっていると、 「オブジェクト（パス）の整列をすると、アウトラインがぼやける！」 こんな現象がおこったことはありませんか？ しかも、一度ぼけるとCtrl+zでも元に戻らないという、やっかいなバグ。 今回は、 「整列つかってもアウトラインがぼけない！」 そんな方法をご紹介します。 アウトラインがぼけてしまうバグは、「中央揃え（センター寄せ）」を使うと 高確率でおこります。 そのため「中央揃え（センター寄せ）」の使い方を工夫するだけで バグに遭遇しなくなります。 ぼけてしまう整列の方法 整列させたいオブジェクト達をいきなり 「中央揃え（センター寄せ）」すると高確率でぼけてしまいます。 ぼけない整列の方法 整列させたいオブジェクト達を、「下揃え」または「上揃え」に整列させます。 その後、オブジェクトを「中央揃え（センター寄せ）」にします。 するとアウトラインがぼけません！
自動化のすすめ（FireworksCS3バッチ処理編） - EC studio デザインブログ
こんにちは、赤堀です。 今回は弊社一押しのソフト「Fireworks」についての記事です。 以前に自動化のすすめ（フォトショップのバッチ処理編）という記事を書きましたが、 実はFireworksでもバッチ処理ができちゃいます！ Fireworksでバッチ処理をおこない、 楽々自動化処理をおこなって効率化を目指しましょう。 簡単！これで楽々効率化！テキスト置換！ せっかくデザインを作りこんで完璧な状態に仕上げたのに テキストの変更…書体の変更…手作業では大変なのに… ということになったことはないですか？？ Fireworksのバッチ処理では、「バッチ処理による検索と置換」を おこなうことができます。 バッチ処理でできる検索・置換は ・文字列の検索・置換 ・フォントの検索・置換 ・カラーの検索・置換 ・URLの検索・置換 ・非Web216色カラーの検索・置換 です。 文字列の修正がはいってもフ
HTML5を今すぐ使うためのコツや情報をまとめてみました - EC studio デザインブログ
この数カ月でHTML5のサイトが国内にも増えてきました。先日10周年を迎えた EC studio のサイトもHTML5で制作しています。マークアップの面でのHTML5の導入となりましたが、難しいと思う以上に勉強になることが多くありました。（今も改善を続けています。） http://www.ecstudio.jp/ 個人サイト以外でHTML5を導入するのをためらっている人が多いと思うので、今からでも使っていくためのコツやノウハウをまとめてみました。 新要素をJavaScriptで生成する HTML5の新要素はIEでは未知の要素です。そのため記述していてもDOMツリーが構成されなかったり、CSSが適用されないという問題が生じます。 そこでdocument.createElement(要素名);により、ブラウザ（ユーザーエージェント）にとって未知な存在の要素を生成し、認識させることができます。
Zen-Codingのショートカットをまとめてみました - EC studio デザインブログ
前回の記事ではZen-Codingの導入方法について解説しました。 今回はZen-Codingの機能とそれを実行するためのショートカットの解説をします。 ※2010/02/22現在の最新バージョン「Zen Coding for Aptana v0.6.0.1」を対象にしています。 なおAptana（Eclipse）の場合だとAptanaの方の機能に多くのショートカットが割り当てられているので、利用する環境によってはショートカットを変更する必要があります。Zen-Codingのデフォルトのショートカットが機能しない場合は、記事最後にまとめる変更方法を参考にしてください。 Expand Abbreviation（省略コードの展開） Win：Ctrl+E mac：Command+E Zen-Codingの主な機能のひとつです。
知らない人は損してる？コーディングが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
2010年の海外のウェブデザイントレンド - EC studio デザインブログ
WebDesignerWallより、2010年のデザイントレンド予測の記事がありましたので、その中身を見ていきたいとおもいます。 「2010年のウェブデザインはより面白く、実験的なものが増える」とのこと。 CSS3やHTML5への注目が集まり、新しいビジュアル・機能を持ったウェブデザインを試しているサイトが増えてきています。 ビジュアルの傾向でいいますと、手書きスケッチ、大きな背景のサイトというのは減少傾向にあり、一方でセリフ書体のフォントを使ったデザインや、テクスチャーを使ったサイトが人気のようです。 またCSS3（と、実装してくれているブラウザ）のおかげで、角丸やRGBAプロパティを使った半透明表現、ドロップシャドウ効果などもたくさん簡単に使えるようになってきています。 そして特に海外では顕著ですが、スマートフォン向けのデザインを提供するサイトも増えてきています。 実際にそれらのトレン
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
