[CSS]さまざまな指定方法によるフォントの見え方を比較 -メイリオ・ＭＳ Ｐゴシック・ヒラギノ角ゴシック | コリス
スタイルシートを使用してフォントサイズの指定を行う場合、いくつかの方法があります。 absolute size キーワードで指定、フォントサイズはUAに依存 ex.)small, medium relative size 親要素に対しての相対指定 ex.)smaller, larger length 正数で指定、使用できる単位は「in, cm, mm, pt, pc, em, ex, px」 ex.)10pt, 1em percentage 親要素に対してのパーセント(%)指定 ex.)100%, 120% この中から、キーワード、em、pt、px、パーセントで指定をし、主要フォントでどのように表示されるかを比較しました。 フォントスタイルは、上から「メイリオ」「ＭＳ Ｐゴシック」「ヒラギノ角ゴシックW3」「Osaka」の順番で、「メイリオ」はWindows Vista、「ＭＳ Ｐゴシック
ウノウラボ Unoh Labs: エラスティック・レイアウトのご紹介
yamaokaです。 エラスティック・レイアウトというwebサイトのレイアウト手法をご存知でしょうか？ 「エラスティック（elastic）」とは、ゴムのように弾力性がある状態のことです。 言い換えると「伸び縮みするレイアウト」になるでしょうか。 webサイトの代表的なレイアウト手法として、次の2つが挙げられるかと思います。 固定幅レイアウト リキッド・レイアウト 固定幅レイアウト 固定幅レイアウトでは、 コンテンツを格納するボックスの幅を以下のように絶対値で指定します。 div#container { width: 800px; } 固定幅レイアウトの場合、ウィンドウや文字のサイズが変更されてもレイアウトの枠は変わりません。 したがって、ウィンドウを大きくすると表示されるエリアが小さくなってしまったり、 文字のサイズを変更すると外枠が変わらないので読みづらくなってしまったりします。 リキ
小粋なインターフェースを実現する25のコード （パート2） - SIMPLE*SIMPLE ～ ウェブ職人のための小粋なネタ帳 ～
「小粋なインターフェースを実現する25のコード | S i M P L E * S i M P L E」の続編が出たようです。 今回もなかなか小粋な技がそろっていますね。新しくサービスを作られている方は参考にされてみては。 ↑ ツリー構造のテーブルを実現。 ↑ CSSでプログレスバー。 ↑ CSSでちょっとかっこいいボタン。 ↑ CSSでドロップシャドウかな。 世界中でこうした知識が共有できるようになりましたね。いい時代になったものです。さて、あとはこれをどういうアイディアで実現するか、ですな。オリジナリティのあるサービスつくりたいなぁ。 » » 25 Code Snippets for Web Designers (Part2)
XHTML CSSの書籍を執筆しました - 3ping.org
(Amazonから買えるようになったもようです) 九天社より出版される「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」の執筆をさせていただき、まもなく発売となるので宣伝させてください。 本書籍はhxxk.jpの真琴さん、lucky bag blogのe-luckさんとの共著で、それぞれが連携しながら得意なパートを担当して書き上げました。大まかな構成は次のようになっています。(詳細なアウトラインは記事下部にあります) XHTML, CSSの基礎知識と管理方法 レイアウト編 Tips&Tecnique ずっと作りたかった構成ができた! CSSはまず『(X)HTMLありき』であり、(X)HTMLの正しい知識を覚えた上で学ぶものです。そこで、まずレイアウトや実線編となるまえに、Web Standardsの考え方や(X)HTMLの基本、プレ
「実践 Web Standards Design」という本を書きました - lucky bag
お知らせというか宣伝。九天社より出版される「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips」の執筆をさせて頂きました。3ping.org の wu さんと hxxk.jp の真琴さんとの共著です。2007 年 2 月 23 日頃 から書店に並び始めるみたいです。Amazon にはまだ載っていないようです。ちなみに、カバーデザインを見せて頂いた瞬間から執筆者の間では通称「ホップ本」（真琴さん命名）ということになってます。たぶん。 書籍名 : 実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips ページ数 : 436 ページ 定価 : 3,200 円 最初に wu さんから共著のお誘いを頂いたのが 2006 年の 5 月頃。6 月に行った打ち合わせ後の著者 3 人での飲みは、気のせいか
hxxk.jp - 実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips が発売となります
記事データ 投稿者 望月真琴 投稿日時 2007-02-20T23:01+09:00 タグ CSS HTML XHTML お知らせ アソシエイト 出版 実践 Web Standards Design 概要 拙著「実践 Web Standards Design - Web 標準の基本と CSS レイアウト &Tips 」の発売に関する情報のページです。 リプライ 14 件のリプライがあります。 hxxk.jp ( のごく一部 ) が書籍化されます ! ブログ 書籍化で Google 検索すると何十万件もヒットするという昨今、時流に乗ってか乗らずか、お誘いを受けて書籍を出すこととなりました ! ......とは言え取り扱う話題がまとまっておらず、また純粋な文章としての完成度も低い hxxk.jp の記事を丸々書籍にパッケージングしたものではありません。 というか単著ではありませんし、あくまで
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
パンくずリスト（Topic Path）を作成する際に使えそうなサンプル8種｜CSS HappyLife
普通のエントリー久々な気がする今日この頃。 今回はトピックパスとかパンくずリストなんて呼ばれてる、ちょっと規模の大きいサイトでは日常茶飯事で見かけるアレのサンプル色々です。 サンプルの前に #main .entryBody #topicPath_01 とかってなってますけど、#main .entryBody はウチのサイトの都合で優先順位上げの為にやってるんで、コピったりする場合はいらない感じです。 #main .entryBody #topicPath_01 { margin:10px 0; } #main .entryBody #topicPath_01 li { display:inline; line-height:110%; list-style-type:none; } #main .entryBody #topicPath_01 li a { padding-right:10
徐々に消える感じの角丸コーナー - sta la sta
Free Fading Corner Images - Bittbox ブログやWebのデザインでは角丸コーナーの人気が高いですね。 こちらのサイトでは、徐々に消える感じの角丸コーナーのイメージファイルとPhotoshop用ファイルを提供してくれてます。 それぞれコーナーの半径やドロップシャドウの有無などの違いによって9種類を用意。太っ腹ですね。 早速このブログでも各エントリごとに導入してみました。 使用したのは6番の角丸コーナー。 あまり主張しすぎない点、ブログに立体感を持たせてくれる点なんかが気に入っています。
CSS セレクタに関するおさらい | WWW WATCH
CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X... CSS を扱う上でセレクタの存在はとっても重要です。特に CSS3 Selectors ではかなり複雑な条件分岐ができるようになっていますので、スマートな (X)HTML、CSS コーディングを行う上で、セレクタを理解しているとそうでないのでは生産性に差が出ます。 CSS3 は現在 Working Draft の段階ですので、まだ正式な勧告はなされていませんが、多くのモダンブラウザにおいてそのほとんどが先行実装されていることから、現状でも利用価値が高いといえます。 ということで、ここでは自分へのメモの意味も込めて、CSS3 で定義されているものも含めた各 CSS セレクタについてリファレンスしてみようと思います。 今回の解説
プログラマでも出来るWebデザイン - Blog.37to.net
home blog labs about contact プログラミング・開発 > プログラマでも出来るWebデザイン (X)HTML CSS テンプレート デザイン 画像 作成： 2007-01-08T01:58:41+09:00 更新： 2009-04-29T09:48:31+09:00 年始早々に大幅リニューアルした当ブログですが、リニューアルのお知らせでも書いた通り、 今回のデザインリニューアルに当たっての作成過程や、使ったツールを書いていきます。 デザインセンスの無い私にとって、今回のリニューアルは良く出来たと自負しているので、 お題はプログラマでも出来るWebデザイン。 前提として、CSSでコーディングが出来て、ある程度HTMLは設計出来る、でもデザインは・・・orz な人を対象にしています。 使用したツール・サイト一覧 作成過程は後半に書くとして、今回使用したサイト・ツールで
角丸に関するあれこれ
最近、というか Web2.0 的デザインなんてものが言われ始めてからというもの、「角丸」 ってやつがとっても人気ですね。(X)HTML、CSS 関連の話題でもよく取り上げられています。 ということで、角丸の作り方をいくつかの種類別に、また、数値などを入力するだけで、角丸のソースを生成してくれる角丸ジェネレータなどをいくつかまとめてみました。 角丸の作り方その1、画像を使う方法 ソースがどうこうとか、まったく気にしないで塗りつぶしの角丸ボックスを作るだけなら、4つの角に配置する画像を用意した上で、下記のような感じにすれば得に難しくもなく角丸完成と。しかもフレキシブル。しかしソース汚い。 <!--HTML--> <div class="left-top"> <div class="right-top"> <div class="left-bottom"> <div class="right-b
CSSベースのフォームテンプレート:phpspot開発日誌
A CSS-based Form Template CSSベースのフォームテンプレート。 フォームをデザインするのって結構面倒だったりしますよね。 フォームのテンプレートがあらかじめ容易されていれば、コピペであっという間にフォームが出来そうです。 しかもCSSベースなのでデザイン変更も容易でHTMLも綺麗ということですごく便利です。 次のような綺麗なフォームのテンプレート。 １枚の中にCSSの定義も全部入っていて便利に使えそうです。 関連エントリ セクシーなCSSホバーボタンを作成するチュートリアル DIVを垂直方向に中央寄せするCSSサンプル CSSを使い、１枚の画像だけでカラフルなグラデーション背景を作る例 CSSの小技集、20個
GNOME 2.16.2リリース MOONGIFT
特集「オープンソース×10年」 予算ゼロからのIT環境整備2014/01/30 特別寄稿：センチメンタル・ジャーニー ~OSSはまだ16だから~2014/01/30 EC-CUBE – オープンソース・Eコマースの雄の進化を見る！2014/01/30 Zabbix Japanに聞いたオープンソース×ビジネスを成功させるための3つの基本2014/01/30 MOONGIFTの運営で大事にしている3つのこと2014/01/30 2007〜8年の大きな変動まとめ！2014/01/30 なぜプレミアム？そこから得られた経験教えます2014/01/30 2006〜09年、各年の人気オープンソース・ソフトウェアベスト52014/01/30 狙われやすいサイトはどんなサイト？オープンソース×セキュリティについてペンタセキュリティシステムズに聞く2014/01/30 aegifが考える企業でOSSを開発す
Flashなしでもここまで作れる！：ITpro
Webプログラミングは，プロはもちろんアマチュアのプログラマの間でも，もはや欠かせない開発ジャンルの一つです。しかし，書籍や雑誌の解説記事のほとんどが，データベースがどうとか，サーバーサイドがどうとか，どうしてもディープな方向に進んでしまう傾向にあります。もちろん，それはそれで大切なことなんですが，いったい何割の人が，その技術を“自分の”ホームページに使っているでしょう。 最近話題の「リッチ・コンテンツ」にしても同様です。例えばFlash。たしかにActionScriptというスクリプト言語を使えば，動く，鳴る，つながると，いいこと尽くめです。でも，いかんせん「Macromedia Flash MX 2004を買ってきてね」とあっては，皆がみな使えるわけではありません。 Part1でも解説があったようにblog（ブログ）の認知度が上がり，利用率も増えて，プロバイダからの提供体制も整ってきて
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
携帯電話向けコンテンツの書き方 - ウェブの作り方
最初に指定しておくと便利なCSS | Tech de Go
Webデザインとグラフィックの総合情報サイト - MdN Interactive - Webデザイン超基本のお作法50選
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記
*LOVE IS DESIGN* - ちょっとしたメモ風のCSSデザイン
