vw, vh, vmin, vmax という単位があるのをつい最近知りました。 随分昔からあったものらしいですが、大変便利なものだったので書いておこうと思います。 上記4つの単位はそれぞれブラウザのビューポートに対する (割合) パーセンテージを指定する単位です。具体的な定義は次の通りです。 単位 説明 vw ビューポートの幅に対する割合 vh ビューポートの高さに対する割合 vmin vw と vh の小さい方に対する割合 vmax vw と vh の大きい方に対する割合 活用例 iPhone6 を例にするとビューポートの幅が375px。このとき100vw が 375px、1vw は 3.75px 相当のサイズになります。 画面サイズ幅一杯の正方形な要素が作りたい時とか { width: 100vw; height: 100vw; } であったり、画面いっぱいのモーダルも、親要素に影響さ

【スタイル】は東京都渋谷区でホームページ制作を行うウェブ制作会社です。ウェブサイト制作、SEO対策、ウェブマーケティングなどを承っています。良質テンプレートでの格安ホームページ制作プランもあります。

「CSS Sprites（CSSスプライト）」についてまとめます。 すでにいろんなサイトで紹介されてるので、検索すれば制作手順から何から何までたくさんヒットしますが、それ故、どの方法が一番ベストなのかってのがいまいち不確かだったので、個人的にまとめ直してみることにしました。 TwitterやFacebookのスプライト用画像 CSSスプライトは、サイトの読み込みを高速化する目的で使われているCSSの小技です。TwitterやFacebookなどでは、ちっこいアイコンとかマークを表示するのに使われてますね（2012.8現在）。 具体的には「サイト内で使用するたくさんの画像（パーツ）をなるべく一枚画像にまとめて、サーバへのリクエスト回数を少なくする」という事をやってます。 画像とCSSだけで高速化が実現できるので大変お手軽なのですが、CSSスプライト用の画像を用意するにはちょっとした工夫が必要

こんにちは、デザイナーの王です。 今回の記事ではCompass使いになるための必要最小限の知識から応用まで、体系的にひと通り紹介していきます。 全くの初心者でも問題ありません！ はじめに結論を言うと、CompassでCSSを書くと 早い！ 見やすい！ メンテしやすい！ コード量がぐっと減る！ 一度使い出したら最後、もう元には戻れない！ 一体どこまで便利なのかずらずら書くよりも、百聞は一見にしかず！ 簡単なプロジェクトを通して、各特徴について紹介した短いデモ動画を用意したので、まずはこちらを見てください！ Compassとは？ Compassを語る前に、まずは「Sass」を知っておく必要があります。なぜなら、CompassはSassを元に開発したフレームワークだからです。 Sassとは では「Sass」とは何かと言うと、正式名称は「Syntactically Awesome Style Sh

[大阪] プログラマー向けデザイン勉強会で発表させていただきました。 http://connpass.com/event/3086/ --- [あわせて読みたい] KSSで作るパターンライブラリ by @machida https://speakerdeck.com/machida/kssdezuo-rupatanraiburari 【アイコンを200こ描いた振り返り！】アイコンから知るデザインのヒントby @awayuki http://www.slideshare.net/awayukin/awayuki-pmd01-share ビジュアルデザインまでのデザインワーク by @yokotak0527 http://www.slideshare.net/YokotaKenji/ss-26460108

We love Web Design & Technology. We are a small team, but we possess a highly skilled work force. Our goal is to produce great work with positive energy. Let’s enjoy creating together. Hello everyone! We are Letters Inc. Our Team is a company that designs interesting & unique websites. To tell the truth, we are starting to receive world wide attentions and we want more! Nice to meet you. We value:

“つくる”を広げる Spread creation to the world つくるヒト・つくるコト・つくるモノの素晴らしさを もっと世の中に広めたい まだ見ぬ「つくる」に出会い感動したい オンライン・オフラインのボーダーを超えて 世界中の人が新たな創造にアクセスできる機会をつくりたい そして、わたしたち自身も クリエイターとして新しい創造にチャレンジし続けたい アークフィリアは、“つくる”を広げるクリエイティブカンパニーを目指します

最近、個人的に最も注目のTwitter Bootstrap。 レスポンシブWEBデザイン対応（つまり、スマホサイト対応）、ページレイアウト、ボタンデザイン、UI、ナビｰゲーションメニューの制作、特にデザインに関しては決まったスタイルから設定していけばいいので、開発時間の短縮に大いに役立ってくれています。 これまでは、サイトを一から立ち上げるときに、使っていたのですが、どうやら、Wordpressでも使えるようで、対応プラグイン見つけました。 WordPress Twitter Bootstrap CSS こちらをインストールして、動作確認や使い方を確かめてみました。 インストールと設定１．Wordpressのプラグイン管理メニューで、「Twitter Bootstrap」で検索すると、「WordPress Twitter Bootstrap CSS」がヒットしますので、インストールして、有

はじめに 今、Twitter Bootstrapが一部のエンジニアで人気です。 Twitter BootstrapはWebデザインが得意ではないエンジニア向けにTwitter社が開発／提供するCSSフレームワークです。このTwitter Bootstrapを利用すると、簡単にTwitterっぽいデザインのWebサイトを作成できます。 そこで、これからTwitter Bootstrapをはじめてみようと思うエンジニアの人たち向けに、役立つ記事の数々をまとめてみました。 このエントリを書こうと思ったきっかけは、以下のスライドでした。とても分かりやすく、はじめて知るようなサービスなども網羅されており、とても参考になりました。 Twitter bootstrap入門 #twtr_hack jQueryプラグイン徹底活用 プロのデザインアイデアとテクニックposted with amazlet at