font-family CSS フォント
Updated 2013.11.05 / Published 2007.02.02 font-familyプロパティは要素内の文字の表示書体となるフォントを指定します。値にはフォント名、または総称ファミリ名を指定します。総称ファミリ名が指定された場合は、UA の環境設定に指定されているフォントが自動的に選ばれて、そのフォントで表示されます。 値 <フォント> <総称ファミリ> inherit 初期値 UA の設定に依存 適用対象 すべての要素 継承 する メディア visual フォント名の指定は複数指定が可能で、各フォント名をカンマ（,）区切りで指定します。複数指定した場合は、ユーザの利用している環境（コンピュータ）にインストールされているフォントが指定順に優先して反映されます。また、"ＭＳ Ｐゴシック" のようにフォント名にスペースを含む場合は、フォント名の前後をシングルクォーテーショ
Pretty checkboxes with jQuery | Aaron Weyenberg
I'm Aaron and I make stuff that goes on the internets. We can be Twitter buds, and my feed is here. Stuff I've posted about lately Twitter film branding Facebook IE beer summit visualization cinematography Popular Tags IE howto jQuery Facebook cinematography beer summit visualization Helvetica marketing freebie Tropicana Wordpress packaging design branding film Twitter Learn how you can send me to
Слухові апарати в Києві - Купити слуховий апарат в Україні, ціни, відгуки
Кількість каналів: 8 Ступені втрати слуху: I ступінь (26 - 40 дБ), II ступінь (41 - 55 дБ), III ступінь (56 - 70 дБ), IV ступінь (71 - 90 дБ) Тип обробки сигналу: цифровий
Justify elements using jQuery and CSS : Janko Jovanovic
When creating a web form you have to make a functional and visually aligned layout. The simplest way to do this is to place elements in a table or by fixing width of labels. Tables stretch its cells according to width of largest element in a column. That way you can have aligned form. Fixing label width will also also allow you to have a hard-coded but aligned form. But… But what if you don't want
各ブラウザでのフォーム（inputボタン）の位置や大きさを合わせる｜web bibo
フォームは各ブラウザによってボタンの大きさやマージンの取り方など、千差万別です。私としては少しぐらいの差は気にならないタイプですが、デザイン的にフォームの大きさや位置が決まっていて揃えておかないとレイアウトが崩れるといった状況も出てくると思います。そういう時に参考になる書き方があるので紹介します。 CSS form { position: relative; margin: 0; padding: 0; width: 320px; height: 64px; background-color: #CCCCCC; } form p { position: absolute; top: 12px; left: 32px; margin: 0; padding: 0; width: 256px; height: 24px; } p .search { position: absolute; bo
ひと味違ったページ内スクロールをjQuery Easingプラグインで実装する jQuery.easing.scroll.js :: 5509
ひと味違ったページ内スクロールをjQuery Easingプラグインで実装する jQuery.easing.scroll.js サンプルを見る (IE6では確認できません jQueryを使うとかなり簡単にページ内スクロールが実装できるのですが、さらにjQuery Easingプラグインと合わせるとなかなか面白い動きができたりします。 というわけで誰でも簡単に導入できるようにプラグインにしました。以前にslideScroll.js(jQueryプラグイン版）というページ内スクロールの記事を書きましたが、悲しいことに断然こちらのほうがおすすめです。動きが滑らか…そして自分の好きな動きから選べます。 今回はソースの解説もしてるので、興味のある人は見てみてください。 ページ内スクロールプラグインなのに、7KBもあるのはEasingプラグインの容量が5KBだから…これを機に他のアニメーション部分でも
ありそうでなかった？要素をふわっと表示させるjQueryプラグイン whatInOut :: 5509
Windows7のウィンドウのようにふわっと表示・非表示させることができます。ふわっとと、whatをかけ･･･（ｒｙ 色々な環境で試せてないので、バグというか予期しない動きは多いかもしれないです。twitterかコメントで報告もらえれば対応できる範囲で対応します。 ふわっとするためだけにeasingが必要になるいけてない仕様なんですけど、easingを別のところでも使ってカバーしてください（！）それかeasing関数を書いてもらえると･･･ Live demo Download demo files 導入方法 1. jQueryとeasingプラグイン、whatinoutを読み込む。 3. 実行する $()で対象にする要素を指定します。実際に使う場合は、ふわっと表示させたいときにwhatIn()、ふわっと消したいときにwhatOut()、ふわっとスライドインしたいときにwhatSlideI
数値を3桁ごとに区切って表示しよう
リーマンショック以来、我が社の売り上げは14142135円となり、約30%の減少となっています。この事態を打開して、年内には17320508円まで回復させなければなりません。 そのためには、やはり創業者の直系の方々を是非役員にお迎えして社内の団結力をたかめなければなりません。
新JavaScript例文辞典
このページはJavaScriptの例文／サンプルを掲載しています。なお、対象としているのは基本的にWeb標準ブラウザ (Firefox, Safari, Google Chrome, Operaなど) としているため標準仕様から外れているInternet Explorer 6～8では動作しないものがあります。Internet Explorer 8より前のバージョンに関しては以前のJavaScript例文辞典を参照してください。このサイトではInternet Explorer 8以降には、ある程度対応しています。IE9からはCanvasなどHTML5関連APIにも対応しています。 iPhone/iPadおよびAndroid 4もHTML5に対応しています。ただし、Android 2.xに搭載されている標準ブラウザでは対応していないAPIが多いため、ほとんど動作しません。 カテゴリ内のページの
フォーム要素の制御｜jQuery plugin｜Ajax｜PHP & JavaScript Room
Ajax Username Check - Using Jquery!〔入力したユーザー名が存在するかチェック（PHP+jQuery）〕 autohelp〔フォーム要素クリックでヒントテキスト表示〕 focus fields〔テキスト入力欄にフォーカスが当てられた時に目立たせる〕 jQuery AlphaNumeric〔英数字の入力制限〕 jQuery controlled Dependent (or Cascading) Select List 2〔Select要素から連動プルダウンを自動生成〕 jQuery Impromptu〔ダイアログ、入力プロンプトのカスタマイズ〕 jQuery MultiSelect〔複数選択型プルダウンを扱いやすくする〕 jQuery plugin: Validation〔完璧なフォームの入力チェック〕 jquery.combobox〔Select要素からコン
幅を固定しないでfloatをする « (X)HTML+CSS Tips « XHTML+CSS Webサイト制作Tips « ScuderiaWeb
低価格、短納期、高品質なWebサイト制作|ScuderiaWeb Webサイト制作をご検討中の方へ。ScuderiaWebが低価格・短納期・高品質なWebサイトを制作いたします。 floatでdivを2つ横並びしたときに、片方しか幅を指定せず、もう片方の幅はautoにする方法です。 通常、floatで横並びを実現する際は、両方のdivの幅指定が必要ですが、例えばブログのサイドバーのみ幅を指定して、記事部分はブラウザの解像度によって幅を変更したいといったときなどに活用できます。 サンプル 片側のみ200pxに固定し、もう片方の幅は指定していないサンプルです。 幅を固定しないでfloatをするサンプル（別ウィンドウで表示） コード (X)HTML <div id="side"> サイド </div> <div id="contents"> コンテンツ </div> CSS div#side {
CSSで「最低」の高さを指定する方法
コーディング時、テキストの量に合わせてCSSで「最低」の高さを指定する方法。備忘録として。 min-heightがIEで動作しないので、ハックとして「height:auto !important; 」を記述。 ＜CSS表記＞ .takasa { min-height:100px; height:auto !important; height:100px; } 最近購入した一冊。今迄専門書が少なかった欧文組版に関して解説されている書籍です。欧文の組版に関しては日本人なので不安な所だらけでした。最近少しづつ読んでいます。目から鱗の一冊です。 【内容紹介】『欧文書体』『欧文書体2』に続く、「タイポグラフィの基本BOOK」シリーズ第三弾。デザイナー、編集者、企業担当者向けに、実務的な欧文の組み方を指導した本。 実際にコンピュータ上で欧文を組んでみる練習問題や、欧文を組むときの具体的な
CSS/初期設定 [外部スタイルシートの分け方例] - ソラトモラボ/空友スタジオ
外部スタイルシートの分け方例 基本的な骨格部分：base.css、common.css 左右二段or三段とか、構造的な部分 ヘッダーやフッター、見出し部分について 全ページに使い回しできるような部分的なフォントのサイズやカラー指定 module.css パーツとして独立できる箇所に。バナーや新着情報、TOPICS、カテゴリの一覧など トップページ用：top.css 更新頻度が高く、下層ページと大きくレイアウトの異なることが多いトップページは、別ファイルが便利。 その他、CSSファイルを追加するときは、サイトマップを見ながらコンテンツの”カテゴリ”ごとに慎重に増やすようにする。あっちこっちのファイルで作業するより、ひとつのファイルで「検索」を利用しながら追加No.修正するほうが効率が良い。 ブラウザが持つスタイルのリセット＋便利スニペット YUI：Yahoo User Interface
CSS/YUIでフォントサイズを揃える [YUI ライブラリに梱包のfonts.css] - ソラトモラボ/空友スタジオ
YUI ライブラリに梱包のfonts.css ブラウザ間のフォントサイズの差異を最小限のハックで吸収してくれます。 日本語フォントでもかなり有効です。 16px の line-height を持つ13px のarial フォントサイズを100%として、それぞれのピクセルサイズについてパーセントサイズが割り出されており、それが表で公開されています。 たとえば、arial 16px に相当するサイズで表示させたい場合、公開されている表から font-size:123.1%; と指定します。 tableタグに指定されている font-size:inherit は、IEが標準モードの時フォントサイズや Line-height を継承しないバグ回避用 あと、厳密には文法違反だけれど下記のようなハックもYUI fonts.css に含まれている
ルービックキューブ型のロゴの作り方 / ウェブデザインライブラリー
投稿日：2008年2月5日 レベル：上級者 ソフトウェア：Illustrator Step1 ： 正方形を作成 Step2 ： リフレクト Step3 ： 回転 Step4 ： アンカーポイント Step5 ： 拡大縮小ツール Step6 ： キューブを配置する Step7 ： 立方体をコピー Step8 ： 完成
Photoshopでデザインスタジオのヘッダーを作る方法 / ウェブデザインライブラリー
Home ＞ フォトショップ講座 ＞ Photoshopでデザインスタジオのヘッダーを作る方法 Photoshopでデザインスタジオのヘッダーを作る方法 投稿日：2009年03月17日 レベル：中級者 ソフトウェア： このチュートリアルでは、デザインスタジオのヘッダーを作ってみたいと思います。 Step1 ： はじめに Step2 ： 選択範囲を作って下部にバーを作成する Step3 ： リンク用のテキストを作成する Step4 ： 選択範囲を作って上部のバーを作成する Step5 ： 完成
Photoshopでビジネス向けウェブサイトのコラージュ画像を作る方法 / ウェブデザインライブラリー
Home ＞ フォトショップ講座 ＞ Photoshopでビジネス向けウェブサイトのコラージュ画像を作る方法 Photoshopでビジネス向けウェブサイトのコラージュ画像を作る方法 投稿日：2009年01月06日 レベル：初心者 ソフトウェア： このチュートリアルでは、Photoshopでビジネス向けウェブサイトのコラージュ画像を作ってみたいと思います。 Step1 ： はじめに Step2 ： ぼかしフィルタを使い色を調整する Step3 ： 会議の写真と背景を調和させる Step4 ： 斜めの格子を作りタイトルを入力する Step5 ： 完成
Photoshopで金属的な3D文字を作る方法 / ウェブデザインライブラリー
レイヤースタイルに行き、グラデーションオーバーレイを適用してください。 グレーと青の組み合わせを選択してください。 次に、文字レイヤーを複製し、それをラスタライズしてください。 そして、「フィルタ」-「描画」-「逆光」に行き、文字の中心の上方にこの効果を適用してください。 不透明度を35％にしてください。 2つの文字レイヤーを選択してください。 それらを1つに結合して、「変形」-「遠近法」で変形してください。 そして、自由変形を使って、下の画像のようにしてください。 レイヤーを複製し、最初のレイヤーの後ろに置いてください。 それでは描き始めましょう。 そのために、長方形選択ツールを使います。 次の数ステップで描くどの部分に対しても、新しいレイヤーを開いてください。 どのレイヤーに対しても異なった照明効果を与えなければならないため、常に新しいレイヤーを開くことはとても重要です。 「S」という
PhotoshopとImagereadyで素早く動く文字のGIFアニメを作る方法 / ウェブデザインライブラリー
Home ＞ フォトショップ講座 ＞ PhotoshopとImagereadyで素早く動く文字のGIFアニメを作る方法 PhotoshopとImagereadyで素早く動く文字のGIFアニメを作る方法 投稿日：2010年03月09日 レベル：初心者 ソフトウェア： このチュートリアルでは、素早く動く文字のGIFアニメを作る方法を紹介します。 Step1 ： はじめに Step2 ： テキストレイヤーを作成 Step3 ： モーションブラーレイヤーを作成 Step4 ： ImagereadyでGIFアニメを作成 Step5 ： 完成 このチュートリアルは、一般的なアニメーションの作成方法ではありません。 Adobe Photoshop / Imagereadyは、今回のチュートリアルのような小規模アニメーションのために使われます。 通常のテキストレイヤーとモーションブラー（移動して
Photoshopで箱庭を撮影したように加工する方法 / ウェブデザインライブラリー
投稿日：2010年08月24日 レベル：初級者 ソフトウェア： このチュートリアルでは、箱庭を撮影したように加工する方法を紹介します。 Step1 ： はじめに Step2 ： ぼかしを加える部分を選択する Step3 ： ぼかし（レンズ）を加える Step4 ： さいごに
フォトショップ 使い方マニュアル web2.0風な光沢感のあるロゴ
カテゴリーリスト テクニック (14) 素材(画像) (10) 基本 (7) 素材(ブラシ) (7) 素材(スタイル) (4) 参考サイト (3) 素材（カスタムシェイプ） (3) 素材（ＥＰＳ） (2) 素材（パターン) (1) 素材(PSD) (1) 最近の記事 キラキラ光る星効果 人気のキラキラお星様★ 星のようなキラキラブラシ デコレ文字風加工 高解像度のblur画像20点 高品質ひだ付き布（シルク調） ビジネスマンのシルエットシェイプ 光沢感のあるボタン２１個 メタル テクスチャ ハートと翼のベクターファイル 最近のコメント 美麗なプリーツ付きカーテン素材！？ Aldon Smith Jersey 2013年01月29日 16時07分 キラキラ光る星効果 Aldon Smith Jersey 2013年01月29日 16時07分 床に反射するテキスト Torrey Smith J
CGTipsブログ【快描部屋】:MacOSのようなクリスタル調のアイコンの作り方【円形】 - livedoor Blog（ブログ）
2009年02月06日 MacOSのようなクリスタル調のアイコンの作り方【円形】 いまさらなのですが、MacOSXで流行ったアクア調のクリスタルアイコンの作り方を解説します。 CGTipsサイトなら無くてはならない項目のような気がして...。 遅ればせながら掲載します。後発なのでそれなりのクォリティーは目指したいと思います。 円形の丸いアイコンにします。 まずは今回の完成画像から。↓こんなのを作ります。凄く簡単に解説しますね。 使用ソフトはPhotoshop。バージョンは特に気にしなくても良いかと。レイヤー効果が使えることを前提にしてますが、photoshopに詳しい方ならレイヤー効果を使わずにフィルタなどの組み合わせでも同じ効果が得られます。 では早速はじめます。まずはphotoshopを起動して、適当に800x600などの新規ファイルを作ります。 web用途の場合は100%ではなく、2
色彩心理学に学ぶ Webサイトの色選び / ウェブデザインライブラリー
投稿日：2010年12月28日 レベル：− ソフトウェア： このチュートリアルでは、色彩心理学の観点からWebサイトの色選びについてご紹介します。 Step1 ： はじめに Step2 ： 広告における色の使い方とは Step3 ： 色彩心理学の歴史 Step4 ： 色の意味 クリエイティブ/アーティスティックの分野でプロフェッショナルになるつもりなら、色について理解する必要があります。 今回は、色彩心理学について取り上げることにします。 色は印象に影響を与えます。 住む世界によりますが、色の認知は自分たちの文化が伴います。 どこにも行ったことがないとしても、色の「意味」は時代とともに変わります。 今日においては、精神科医は色についての普遍の真理や、 「psyche（従来の心理学では色が印象に影響を与えるという考えは認められていない）」への影響について特定することができます。 色
Photoshopで街を手のひらにのせる方法 / ウェブデザインライブラリー
手のひらに載せる画像を追加します。 クリップアートを選んでキャンバス上にのせます。 私のクリップアートを使うこともできます。 それから楕円形選択ツールでドラッグしながら「Shift」キーを押して正円の選択範囲を作ります。 「Ctrl」＋「Shift」＋「J」キーを押して選択した箇所を新規レイヤーに切り出して作業したレイヤーを削除しますが、これでは使い物になりません。 そこで切り出した箇所を35％程度小さくします。 OKです。 では、「選択範囲」−「選択範囲を読み込む」を選択して「フィルタ」−「変形」−「球面」で次のように設定します。 すると次のようになります。 「Ctrl」＋「D」キーを押して選択範囲を解除します。それからシャープツールでシャープを当てます。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
FancyForm - Javascript checkbox replacement
http://www.designwalker.com/2006/12/form.html
5509.me
5509.me
新着記事
新着記事