nayo74のブックマーク / 2012年7月2日

nayo74 id:nayo74

2012年7月2日のブックマーク (4件)

[CSS]フォントのサイズ指定はpx？ em？既存の再検討とこれからのテクニック
フォントのサイズの単位に何を使ってますか？ px？ em？それら2つのよく利用されるテクニックをおさらいし、さらに第3のテクニックも紹介します。 Font sizing with rem [ad#ad-2] 下記は各ポイントを意訳したものです。はじめに pxを使ったサイズ指定 emを使ったサイズ指定 remを使ったサイズ指定はじめにフォントのサイズの単位に何を使用するかは、未だに激しい議論の的となっています。それらのテクニックにはそれぞれ長所と短所があるのも現実です。それらの中で短所が少なく、よく利用されるテクニックは2つあります。 pxを使ったサイズ指定 emを使ったサイズ指定これら2つのテクニックを再検討し、さらにもう3つ目のテクニックを紹介します。 pxを使ったサイズ指定ウェブの初期に、私たちはテキストのサイズを定めるために「px」を使用していました。これは一貫しており
nayo74 2012/07/02
フォント

テクニック

font
リンク
[使える CSS テクニック]CSSを使った見栄えの良い表組み（table） | バシャログ。
第 6 回目は「CSSを使った見栄えの良い表組み（table）」です。 Web サイトのレイアウトがすべて table でコントロールされていた時代がありましたが、今そんなことをしたら嘲笑を買う時代です。本来の「複数のデータを表示･比較の際にわかりやすいよう見せる表組み」のためのテーブルを、CSSを使って見栄えよくしてみましょう。 1. CSS のみで見栄えよくしてみる線と塗りだけで表現する、一番シンプルなテーブルを作ってみます。 [HTML] <table id="table-01"> <tr> <th>本体名称</th> <th>スタンド名</th> <th>スピード</th> <th>持続力</th> <th>精密動作性</th> <th>成長性</th> </tr> <tr> <td>空条承太郎</td> <td>スター・プラチナ</td> <td>A</td> <td>A<
nayo74 2012/07/02
webdesign

HTML

*CSS

table
リンク
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないのでそちらを使ったほうが楽かもしれません。パララックス効果のjQueryプラグインまとめあと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。スクロール量を取得するまずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
nayo74 2012/07/02
css

スクロール

WDパララックス

*webdesign
リンク
Zen-Coding、0.7のすすめ
Zen-Coding、0.7のすすめ 2012-07-01 / 2013-02-27 HTML/CSSのコーディング速度が3倍上がる、といわれるZen-Coding。使いこなしてコーディング速度が3倍になっていますか？ SassとかLessとか流行ってる中、あえてZen-Codingを紹介します。 (Zen-Codingの現在のバージョンは0.7です。古いバージョンを使用している方はアップデートをお勧めします。) 追記 Zen-Codingとは Zen-Codingは様々なエディタに対応しており、Webデザイナーでも導入が容易なのが魅力です。エディタのサポートは、3つの分類に分かれます。公式サポート Aptana/Zend Studio/Eclipse (Win/Mac/Linux) TextMate (Mac) Coda (Mac) Espresso (Mac) Komodo E
nayo74 2012/07/02
zen-coding

コーディング

ツール
リンク
- 2012年7月3日
- 2012年7月2日
- 2012年7月1日