ドットインストール代表のライフハックブログ

1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは、森と申します。 スマートフォン版アメーバピグのWebアプリを担当しています。 「HTML5 Web Applicationのつくりかた」という記事が詳しいので、 この記事ではスマホ版ピグのCSSについてマイページを例にご紹介します。 とても長い記事になってしまいましたが、最後までご覧頂けると嬉しいです。 スクリーンショットで見るCSSプロパティやセレクタ2012年4月現在、SPピグ内のレイアウトはどのページも大体同じなので、マイページとフォーム要素を抜粋して使っているプロパティやセレクタの中から主要なものをざっと並べてみました。 HTML

iPhone 4S遣いが身の回りに着々と増えてますが、うらやましくなんかないんだからねっhakoishiです。 今回は、「あれ、今回はデザイン？」と見せかけてやはりコーディングネタ。 スライスって、コーダーが担当することが多いですよね。 けど、デザイナーほどグラフィックソフトに通じてなくて「もっと効率いいやり方があるんじゃないかなあー」なんてもどかしく思うこと、あるんじゃないですか？ そこで、突然ですがFireworks。 馴染みのない人も多いかもしれませんが、スライス機能がスッゴイんですよ！ 以下、普段Photoshopを使用している人向けに、Fireworksの便利なスライス機能をまとめました。 最初に。 まずは基本動作。 Photoshop同様、スライスツールでドラッグします。 …でも良いのですが、もっと楽な方法があります。 スライスを切りたいオブジェクトを全て選択 ⇒右クリックで「

webデザインの入門書を買おうか迷っている方。 もしもそんな方がいたら、ネット上にはここを押さえておこうよと、webデザイナーが直接良質な記事を仕上げてくれていますのでそちらを是非一度参考にしてみて欲しいなと思いまとめて見ました。 また、その記事で、もっともぐっときた台詞もチョイスすてみました。 どんな想いで記事を書かれているかというのも大事かなと。 こちらもあわせてどうぞ。 Web制作をこれから始める人の為のスキル・HTML・CSS・ブラウザ・写真素材入手の基礎情報 とりあえず時間のない人はこの3つだけでも食べて デザインを勉強したことがない人でもデザインできるようになるかもしれない4つの基本原則 最初、デザイナーは型破りであるというイメージを抱く人も多いのですが、実際の現場では、様々な原則の上にあるルールにのっとり、そのルールを崩す「理由」があります。 例えばそれがセンスと呼ばれること

社内用のメモであるか、全国的に配布する長文のレポートであるかにかかわらず、ドキュメントが読みにくいだけで、あるいはその見た目が悪いだけで、伝えたいメッセージすべてが伝わらないということもあり得る。しかし、本記事で紹介する基本的なデザイン原則を守ることで、読みやすいドキュメントを作成することができるはずだ。 ドキュメントの体裁は、人の嗜好によって左右され、会社によってさまざまな慣習があり、ドキュメント自体の目的によっても変わってくるものの、どのようなドキュメントにも適応できる不変の原則というものが存在している。いや、あってしかるべきである。以下では、Wordドキュメントにありがちな5つの問題を挙げるとともに、それらを避け、より効果的なドキュメントを作成するためのティップスを解説している。 ＃1：フォントの種類が多すぎる 近頃では膨大な数のフォントが利用可能となっている。だからといって、1つの

資料として便利そうなのでエントリー。 IE CSSはスタイルシート適用前にInternet Explorerがそれぞれの要素にどんなスタイルをあてているかをまとめたサイトだ。 しかも丁寧に、IE6、IE7、IE8、IE9毎にまとめてくれている。 実際にはCSSをリセットしてからサイトを作る人も多いかと思うが、IEは昔から広く使われていたので、いわゆる「標準的なインターネットっぽいスタイル」を知りたいときに便利かもしれないですな。 デザイナーさんやWebサービスを作る人は知っておいていいかもですね。

ドットインストール代表のライフハックブログ

ドットインストール代表のライフハックブログ

ドットインストール代表のライフハックブログ

ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi