Stylus入門
Stylus入門 StylusはSASSやLESSのようなCSSメタ言語。某所で話題にあがったのでどんなことができるのか一通り触ってみました。 実行環境ですが通常はnode.jsなどのインストールが必要です。私の場合、CodeKitを利用しているので特になにもインストールせずに利用できました。 stylus用のファイルをstylus/○○.stylとして保存すると、css/○○.cssと書き出されます。それではざっくりと基本機能の紹介します。 Selectors（セレクタ） stylusはPythonようにインデントベースの記述を行います。 .hoge color blue font-weight bold と記述すると以下のようなCSSが出力されます。 .hoge { color: #00f; font-weight: bold; } このように基本的に括弧やセミコロン、コロンなどは省略
CompassでデータURI スキーム
CompassでデータURI スキーム Sassの拡張機能であるCompassを利用するとCSS スプライトだけでなくデータURI スキームも簡単に作成できます。Compassすごい。 次のようにinline-image()で画象フォルダ内のbase64エンコードしたい画象を指定します。 .dataUriImage{ background-image: inline-image("sprite/a.png"); width:50px; height:50px; } そうするとCSS内に次のように画象がbase64エンコードされたデータURI スキームで出力されます。 .dataUriImage { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAABHNC
CompassでCSSスプライト
CompassでCSSスプライト Sassの拡張機能であるCompassを利用するとCSS Spriteが簡単に利用できるのでやり方をメモ書きレベルで書いておきます(SassもCompassも詳しくないのでおかしいところはツッコミを入れてください)。 まずはCompassで監視している画象ディレクトリ内(config.rbのimages_dirで設定しているディレクトリ)に任意のディレクトリを作成して、 CSSスプライトで利用する元画像を入れておきます。 今回は画象ディレクトリは「img」CSSスプライト用のディレクトリは「sprite」とし、元画像は以下の画象です。 a.png b.png c.png 次にscss内で@importでCSSスプライト用のディレクトリとファイルを指定します。 @import "sprite/*.png"; これをコンパイルするとimgディレクトリに「spr
jQueryを良くする25のTIPS
jQueryを良くする25のTIPS ネタ元：Improve your jQuery - 25 excellent tips ちょっと多いですが、かなり良いTIPSがまとまっています。 Google AJAX Libraries APIを利用しよう Google AJAX Libraries APIを活用すればすばやくライブラリを読み込むことが出来ます。 <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> 直接読み込むことも出来ます。
[書評]Webデザイナー/コーダーのための HTML5コーディング入門
[書評]Webデザイナー/コーダーのための HTML5コーディング入門 CSS3デザイン プロフェッショナルガイドの出版記念セミナーでWebデザイナー/コーダーのための HTML5コーディング入門をいただいたので読んでみました。 本書はHTML5の入門書で、HTML5で追加された様々な要素や目的が変更された要素について解説がされています。 それぞれの要素を簡単なサンプルを元に、利用例や利用してはいけないパターンなどが解説されているのでひと通り読むだけでHTML5のマークアップのお作法を学ぶことができます。 巻末のリファレンスはかなり便利で、各要素がどういった要素の親要素になれるのか、子要素になれるかがまとめられています。 HTML5って最近よく聞くけどよくわかってないという方には、最初の一冊としてオススメです。 関連エントリー [書評] HTML5+CSS3で魅せるiPhoneサイト [書
![[書評]Webデザイナー/コーダーのための HTML5コーディング入門](https://cdn-ak-scissors.b.st-hatena.com/image/square/bd25c3f7ec41dcce84681ada5ed4a3845060b266/height=288;version=1;width=512/http%3A%2F%2Fimages.amazon.com%2Fimages%2FP%2F4767811074.09._PB_PT-2_OU09_SCMZZZZZZZ_.jpg)
スマートフォンサイトをデザインする上で知っておくべき10のTIPS
スマートフォンサイトをデザインする上で知っておくべき10のTIPS iPhoneやAndroidのスマートフォンの仕様を知らないけどデザインしなくちゃいけなくなったというデザイナーさんに知っておいてもらいたい10(+1)のTIPSです。 1.実機で確認する 当たり前のことですが作成したデザインを実機で確認して下さい。スマートフォンとPCでは目からの距離やDPIが違いますので、PCでは十分に見れたからといって実機で確認すると文字が小さすぎることなどがよくあります。書きだしたJPGをFTPでアップして確認してもいいですし、メールでスマートフォンに送って確認してもいいです。個人的にはDropboxで転送するのが手軽でおすすめです。 2.横幅は320pxもしくは640pxでデザインする スマートフォンでは基本横幅が320pxで表示されるのでデザインする際も320pxでデザインしましょう。ただ、Re
Androidでfont-weight:boldを適用する方法
Androidでfont-weight:boldを適用する方法 Androidでは日本語にfont-weight:boldが適用されません。 <p style="font-weight:normal">ノーマル normal</p> <p style="font-weight:bold">ボールド bold</p> このHTMLをAndroidで確認すると次のようになります。 日本語だけ太字になっていないですね、デフォルトのフォントにbold体がないらしいんですが、デバイス毎にフォントも変わるのでfont-familyでは回避できず。 対策としてはfont-weightの代わりにtext-shadowを利用して太字にします。 <p style="text-shadow:1px 0 0 black">ボールド bold</p> ただ、この方法だとiPhoneでは太字になるけどAndroidで
新著「Webデザイン・フォーラム」が発売されました
新著「Webデザイン・フォーラム」が発売されました 執筆に参加させてもらった書籍「Webデザイン・フォーラム 10人のプロが教える原則と経験則」が3月11日に発売されました。 Web制作に必要な知識が次のような感じでFAQ形式解説されています。 CHAPTER 1 Web制作の基礎知識とワークフロー Q1 制作をはじめる前に心がけることはありますか？ Q2 Web制作の基本ワークフローを教えて！ Q3 ペルソナやユーザーシナリオって何？ Q4 デザイン作業をはじめる前にやっておくべきことは？ Q5 サイトマップとは何を指しますか？ Q6 デザインの方向性が決まらない！手がかりが欲しい！ Q7 ラフはクライアントが描くの？自分で描くの？ Q8 ラフを描くツール。現場では何を使ってる？ Q9 標準的な画面サイズと適正な表示サイズを教えて！ Q10 iPhoneやAndroid、ケータイ向けサイ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
