Components · Twitter BootstrapSleek, intuitive, and powerful front-end framework for faster and easier web development. Download Bootstrap GitHub project Examples Extend Version 2.3.2
なんとなくCSSを使っている人が，CSS中級者になるために （「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して
CSSを「なんとなく」知っていて，「なんとなく」使っている， というケースがある。 そういう場合，思わぬところでレイアウトが崩れ， 要素の正確なポジショニングができず， 「なんとなく」ずっと悩み続けることになる。 その原因は，CSSの中級のノウハウが足りない，という点にある。 一発で正確なレイアウトができるようになろう。 そうなれば，CSS中級者だ。 以下は，CSS中級者になるためのノウハウ。 （１） 要素の分類 （１−１） インライン要素とブロック要素 （１−２） 置換インライン要素と非置換インライン要素 （２） 正確なポジショニング （２−１） positionのrelative/absoluteの使い方 （２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い （２−３） 要素内の高さ位置と，要素の高さ （２−４） floatの崩れない使い方 （３） 正確なテーブルレイ
【レポート】ピクセル濃度に依存しないWebページの制作方法 | エンタープライズ | マイコミジャーナル
Ext JS is now Sencha iPhone 4のようなディスプレイピクセル密度が高いデバイスの登場で、WebデザイナやWebデベロッパの関心は、異なるピクセル濃度のデバイスにどのように対応するかといった点に集まりつつある。基本となるテクニックのいくつかはすでにいくつかのブログで紹介されている。 iPhone 4でもPCでも画像を綺麗に表示するCSSの使い方 iPhone 4に対応したWebサイトを作る方法 iPad向けWebアプリケーション開発テクニック これまでマイコミジャーナルで紹介したテクニックは細部のテクニックが多い。そこでSenchaブログに掲載されたResolution Independent Mobile UIを紹介したい。モバイルデバイスにも対応したJavaScriptフレームワークSencha Touchで使われているテクニックの根本をまとめたもので、ピクセル
TypeKit で広がる Web デザインの可能性
今年の 5月頃に発表されて、@font-face 時代の幕開けだぜと期待をふくらませていた Web サービス、「TypeKit」 が正式に公開され、誰でも使用できるようになりました。TypeKit は、権利問題をクリアした多くのフォント一覧から自分の好きなフォントを選んで、簡単なソースコードを Web ページに埋め込むだけで @font-face によるフォントの指定が行えるようになるサービス。今までフォントの関係から画像で処理していた部分をテキストデータとして処理しつつある程度自由にフォントを選べるので、デザイナーにとっては表現の幅が広がるのではないでしょうか？ 今年の 5月頃に発表されて、@font-face 時代の幕開けだぜと期待をふくらませていた Web サービス、「TypeKit」 が正式に公開され、誰でも使用できるようになりました。 Typekit is live ： The
Typekit —大本命ウェブ・フォント・クラウド
ウェブサイトで自由にフォントを使用可能にしてくれるサービス、Typekit が昨日正式にサービスインしました。 まず見てもらいたいのが上の画像。Typekit のホームのスクリーンショットの一部なんだけど、オランダとフィンランドを拠点にするイケてるデザインスタジオ Underware の代表的な見出し書体 Bello 。画像だと「だからどうしたの？」って感じだけど、実際のサイトはテキストとして表示されてます。 そもそも技術的にそんなことが可能になったのは、CSS3 に @type-face というルールが追加され、必要に応じて自動的にフォントをダウンロードして表示するというウェブデザイナー悲願の仕組みがメジャーなブラウザのサポートされるようになったからなんだけど、とは言えまだなかなか普及には至ってないのが現状。その理由は大きく二つ。 ライセンス上、サイトオーナーは商用フォントを勝手に公開出
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
[CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか
外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。 don't use @import 内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。 下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。 @import @import 2つの外部スタイルシートを@importで指定。 <textarea name="code" class="html" cols="60" rows="5">
画像リンクに見えるテキストリンク:お題目うぉっち
2008年05月10日 画像リンクに見えるテキストリンク Google先生はHTMLもスゴイ！と思った一例。 Design patterns for accessible, crawlable and indexable content 題材はGoogleの検索結果の左上にあるロゴ。CSS Spritesが使われているのは前述したとおりだが、この部分にはもっとエレガントな技が使われていた。 CSSのスタイルを外すとよく分かるのだが、実はこの部分はHTML的にはAタグによるテキストリンクとなっている。 該当部分のソース <td class="tc" valign="top"> <a id="logo" href="http://www.google.co.jp/webhp?hl=ja" title="Google ホームへ"> Google <span> </span> </a> </td>
CSSでデザインされたiPhoneサイトのまとめ「CSSiPhone」:phpspot開発日誌
CSSiPhone ? Screens for all your iPhone needs. CSSでデザインされたiPhoneサイトのまとめ「CSSiPhone」。 多数のサイトを見ることで、CSSサイトデザインのノウハウが学べます。 iPhoneサイト作成は、小さいスクリーンの中でいかに情報を表示させるかというのが問われる部分ですが、こうしたページを参考にしていくことでいいものが作れそうですね。 iPhoneサイト作成のときのために覚えておきましょう。 関連エントリ iPhone向けWebアプリを作ろう iPhone用Webページでオブジェクトのドラッグ＆ドロップ、リサイズをジェスチャで行う凄いサンプル iPhoneでのWEBページ作成に「iPhoney」 RememberTheMilkと同期するiPhoneアプリ「Appigo Todo」
Geekなぺーじ：右クリックで保存できない画像、コピペできない文字 (not javascript)
Javascriptなどを使わずに右クリックで保存できない画像の作り方を思いつきました。 もしかしたら、既にwell knowかも知れませんが。。。 あまり実用性はないと思いますが、まあ、ネタの一種だと思ってください。 以下に表示している画像の左半分は右クリックで保存できなくしてあります。 右クリックで画像を保存できないのは、スタイルシート設定で透明な蓋を画像の上に置いているからです。 右クリックは画像に対してではなく、DIVに対して行っている事になっています。 上記サンプルをHTMLをわかりやすく整形したものを以下に示します。 <html> <head> <style> <!-- #myfilter { position:absolute; z-index:2; filter:alpha(opacity=50); -moz-opacity:0.5; width:120px; height
CSSであまり使われていないが使った方がいいフォント8選『8 fonts you probably don’t use in css, but should』 – creamu
DiaryTechnology CSSであまり使われていないが使った方がいいフォント8選『8 fonts you probably don’t use in css, but should』 CSSでフォント指定をちょっと凝ってみたい。 そんなあなたにおすすめなのが、『8 fonts you probably don’t use in css, but should』。CSSであまり使われていないが使った方がいいフォント8選だ。 以下にご紹介。 ・Palatino Linotype / Palatino（WINDOWS 97.09% / MAC 78.86%） ・Tahoma（WINDOWS 96.09% / MAC 72.02%） ・Impact（WINDOWS 95.85% / MAC 88.08%） ・Century Gothic（WINDOWS 85.44% / MAC 42.50
CSS3 Multi-Colum Test Page
The years of travel Mozart's musical ability started to become apparent when he was a toddler. He was the son of Leopold Mozart, one of Europe's leading musical pedagogues, whose influential textbook Versuch einer gründlichen Violinschule ("Essay on the fundamentals of violin playing") was published in 1756, the same year as Mozart's birth. Mozart received intensive musical training from his fathe
Tag Cloudのスタイル - 3ping.org
タグクラウドの必要性についての是非はここでは置いておいて、このアイテムのデザインって色々考えさせられますね。 Vicuna CMSでも真面目に対応しようと重いケツを上げましたので、とりあえずサンプルとなるCSSスタイルを色々と書いてみました。 表示例とCSSファイルを置いておきましたので、気に入った表示があったらどうぞ使って下さい。 2007.10/21 追記・編集 Tag Cloud 10,11,12で.level5のフォントサイズが.level4と同じになってたのを修正 応用編としてTag Cloud 13を追加 単純に該当する記事が多いタグが他より目立てばいいだけなので、大抵のスタイルは大小の区別で表示しているけど、それだけじゃちょっと味気ない気もするので サイズ 色 明暗 彩度 色彩 形 というところでタグの強弱をより強調してみました。 HTMLは以下のような要素とクラス名で作って
MacとWinのモニタ表示文字サイズの違いと格闘す
MacのIE5.2（左）とWinのIE6.0（右）の文字表示の違い （MacOS X およびWindows98。以下同） MacのIE5.2（上）とWinのIE6.0（下）の画像表示は同じだ Appleの新しいブラウザ「Safari」も96dpiの模様 Winでのパーセント、ポイント、ピクセルの関係 （デフォルトが12ポイントで、ブラウザの文字サイズは「中」） 注1） IEのオプション設定「全般」の「ユーザー補助」の「書式設定」で、「Webページで設定されたフォントサイズを使用しない」にチェック入れると、拡大縮小は可能になる。もっとも、ポイント指定が無視されるので、レイアウトが崩れる場合がある。 注2） スクリプトのif文の中の「navigator.userAgent」はブラウザ情報、「indexOf」は文字列の検索で、見つからないときに「-1」が返される。「!=」は「等しくない」の意。
XRAY :: for web developers
These materials are copyright Western Civilisation Pty Ltd. www.westciv.com They are brought to you courtesy of Style Master CSS Editor and Westciv's standards based web development courses. Please see our website for detailed copyright information or contact us [email protected]. XRAY: look beneath the skin I can't get it to work! Assuming you are using one of the browsers in which XRAY currently
ブロックレベル要素の高さを揃えるheightLine.js[to-R]
ブロックレベル要素の高さを揃えるheightLine.js Web標準の日々のグループディスカッションで出たライブラリ案を作っていく企画、第一弾。 ブロックレベル要素の高さを揃えるjsライブラリを作ってみました。 このライブラリは新バージョンがあります。 レスポンシブWebデザインに対応した「jquery.heightLine.js」 CSSでは複数のブロックレベル要素の高さを揃えれないという問題があります。 このheightLine.jsは、複数のブロックレベル要素の高さを揃える事ができ、2カラムレイアウトや3カラムレイアウトのそれぞれのカラムの高さを揃えたり、複数のブロックレベル要素をfloatで配置する際の高さを揃えたりできる、便利なライブラリになります。 設置方法 head要素内にダウンロードしたheightLine.jsを読み込みます。 <script type="text/ja
![ブロックレベル要素の高さを揃えるheightLine.js[to-R]](https://cdn-ak-scissors.b.st-hatena.com/image/square/a9717624309e36a795026e1b70982163687ccca2/height=288;version=1;width=512/https%3A%2F%2Fblog.webcreativepark.net%2Ficon_200x200.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Web Design & CSS Inspiration for the iPhone — CSS iPhone
mixi(ミクシィ)
[CSS3]W3C、Grid Positioning Moduleのドラフトをリリース
MCC Computers Ltd - Making IT simple - Computers , technology and you - Northern Ireland