なんとなくCSSを使っている人が，CSS中級者になるために （「崩れないレイアウト」のセオリー） - 主に言語とシステム開発に関して
CSSを「なんとなく」知っていて，「なんとなく」使っている， というケースがある。 そういう場合，思わぬところでレイアウトが崩れ， 要素の正確なポジショニングができず， 「なんとなく」ずっと悩み続けることになる。 その原因は，CSSの中級のノウハウが足りない，という点にある。 一発で正確なレイアウトができるようになろう。 そうなれば，CSS中級者だ。 以下は，CSS中級者になるためのノウハウ。 （１） 要素の分類 （１−１） インライン要素とブロック要素 （１−２） 置換インライン要素と非置換インライン要素 （２） 正確なポジショニング （２−１） positionのrelative/absoluteの使い方 （２−２） DOCTYPEスイッチによるボックスモデルの解釈方法の違い （２−３） 要素内の高さ位置と，要素の高さ （２−４） floatの崩れない使い方 （３） 正確なテーブルレイ
円グラフや棒グラフをエクセルじゃない方法で簡単に作成する方法まとめ | 日刊ウェブログ式
グラフ作成と言えばエクセルが思い浮かびますが、エクセルを持ってない、または開くのが面倒ということもあるかもしれません。というわけで、それ以外で簡単に作成する方法をまとめました。 オンラインツールで作る キュートな円グラフ簡単作成サービス おなじみの円グラフ作成ツール。ブラウザ上でものすごく簡単に作成可能。 超かんたん3D円グラフ作成！ こちらは3D円グラフを作成するジェネレータ グラフ簡単作成くん 線グラフ、円グラフ、3D円グラフ、棒グラフなど様々なグラフを作成できる グラフ作成ソフト 円グラフ、３Ｄ円グラフ、２重円グラフ、折れ線グラフ、縦棒グラフ、横棒グラフとかなり広範囲にブラウザ上で作成可能。レーダーチャートや散布図も使用できるので本格的です。 円グラフの自動作成FLASHツール FLASHで表示する円グラフ CSSで作る CSS For Bar Graphs 後から修正が容易に可能な
CSS のみで吹き出し
hail2u.net - Weblog - Pure CSS な吹き出し に触発されて、画像や JavaScript を使わずに CSS だけを使って「吹き出し」を作る方法を僕も考えてみた。 Demo: CSS のみで吹き出し マークアップは 2 重の要素があれば OK。ここではそれぞれ bubble と body というクラスを付与した div と p を例に説明する: <div class="bubble"> <p class="body">Speech!</p> </div> CSS の最低限必要な部分のみを抜き出すと以下のとおり。これは背景が黒いボックスの下に左向きのしっぽを出す場合の例: .bubble { float: left; /* または position: absolute; */ border-left: 10px solid black; border-bottom
ページ送りのサンプル4種+2
ず、随分間が空いてしまった・・・何て言う現実。 気付けば冬間近ですね。 久々の更新が、特別目新しくもなんともないんですが、自分なりのページ送りサンプルを作ってみました。 ホントは最初のだけ有れば事足りてるんですけど、ボリューム感を出す為に4種類+2にしてみました。 サンプルサイトを見る サンプルをダウンロード 地味にサンプル作ってたら時間取られたので、解説は軽めですが続きにて。 今回作っておきたかったのは、センタリングさせたページ送りっす。 とても似たようなエントリーが有るので、下記も参考にしてみるといいかと。 ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。 不特定の数の横に並ぶブロック要素をセンタリングさせる | CSS-EBLOG 各サンプル共通で以下のスタイルが当たってます。 #main ul, #main ul li { marg
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
[CSS]大きい画像をブラウザのサイズに合わせて背景に表示するスタイルシート
CSS-Tricksから、大きい画像を余白を作らずにブラウザのサイズに合わせて、背景に表示するスタイルシートを紹介します。 Perfect Full Page Background Image 下記、それを実装する要件とテクニックを二つ、それぞれポイントをピックアップして紹介します。 実装の要件 前提として、画像のサイズを調整する必要があるため、background-imageプロパティでの配置は不適格とします。 それを踏まえ、以下の条件をクリアさせます。 ページは画像でいっぱいに、余白は無しで 画像の大きさは自動調整 画像の比率は維持 画像はページ中央に 画像はスクロールさせない クロスブラウザ対応 一つ目のテクニックは余分なマークアップが必要で、IE6用にJavaScriptを使用したものを紹介しています。 二つ目のテクニックは、余分なマークアップを無くし、JavaScriptも必要と
【CSS】ページ送りナビゲーションには display:inline-block が超便利 | バシャログ。
こんばんは、ishidaです。 CSS2.1 で定義されている displayプロパティの値、inline-blockの使いどころを探してみたところ、ページ送りにかなり使えそうです。 まずは以下のサンプルをご覧下さい。Yahoo 検索結果のページ送りデザインをまねています。 ページ送りのサンプル 1 2 3 4 5 6 7 8 9 10 次へ> XHTML のサンプルは以下です。とてもシンプルです。 <ul class="pager"> <li><strong>1</strong></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#">6</a></li> <li><a href="#">
[CSS]スタイルシートを自動でIE6対応にするオンラインサービス -ie6fixer
手元のスタイルシートをフロートやネガティブマージンなどIE6のバグを回避する記述を自動生成するオンラインサービス「ie6fixer」を紹介します。 ie6fixer IE6に対応したスタイルシートを生成する方法は、以下の手順です。 「master stylesheet」の欄に、スタイルシートを入力。 「Give me my ie6 fixes」ボタンをクリック。 以上で、IE6のバグに対応したスタイルシートが生成。 IE6のバグに対応している箇所は、現在のところ下記の通りです。 「min-height」は、「height」に変更。 「float」は、「display:inline;」を追加。 「position:relative;」は、「zoom:1;」を追加。 ネガティブマージンは、「position:relative; zoom:1;」を追加。 「overflow:hidden;」は、
[(X)HTML] IE8におけるページの互換モード指定 | Blog | Development Reference
IE8 の正式版がリリースされたので、その特徴のひとつである互換モードの指定について記載する。 IE8のWeb標準準拠 IE は、独自の解釈やタグが多く、他のブラウザと比べてHTMLやCSSのWeb標準から外れている部分が多いとよく指摘されている。この問題の解決のため、IE8 ではWeb標準準拠への対応により力が入れられており、IE8 標準のレンダリングにはWeb標準準拠モードが使用されている。 Web標準準拠モードによる弊害 しかし、Web制作においてはクロスブラウザ対応が基本であり、IE8 リリース前に制作された大抵のサイトでは、IE6 や IE7 の表示に対応するため、IE にだけ有効な CSS の記述を用いるなど、以前のバージョンの IE への対応を行っている。これによって、一部のサイトでは IE8 の Web標準準拠モードでサイトを閲覧すると、 レイアウトやデザインが崩れることが
画像をCSSだけでハイクオリティに縮小サムネイル化する方法:phpspot開発日誌
Tip: High quality CSS thumbnails in IE7 ・Devthought 画像をCSSだけでハイクオリティに縮小サムネイル化する方法が紹介されています。 普通、IEで、img に対して、width, height 指定すると、画像が汚く縮小されちゃってましたが、CSSの指定をしちゃうとそれが解決されるということのようです。 具体的には以下のCSS指定によってそれが可能みたいです。 img { -ms-interpolation-mode: bicubic; } デモページ う〜ん、縮小してもとっても綺麗です。 FirefoxやChromeの場合は何も指定しなくても綺麗に縮小される、っていうのも知りませんでした。 これは、サーバサイドでサムネイルを生成しなくて良くなる場面が出てきて開発者としては手間の削減になりますね。 転送量を考えれば、サムネイルが完全に不要に
[CSS]検索フォームを素敵なデザインするスタイルシート集
検索フォームを素敵なデザインにスタイリングする、クロスブラウザ対応のスタイルシートをCss Finestから紹介します。 <textarea name="code" class="html" cols="60" rows="5"> <form id=”searchform1″ method=”get” action=”" > <input class=”isearch1″ type=”text” name=”keywords” id=”keywords” /> <input class=”ibutton1″ type=”submit” value=”" /> </form> </textarea>
[CSS]サムネイル画像を表示するドロップダウン型ナビゲーション
タブ形式のドロップダウンの子要素にサムネイル画像を表示するナビゲーションのスタイルシートをCSSplayから紹介します。
[CSS]数が多くても同じ領域に表示するアコーディオン型のナビゲーション
第二階層の項目の数が多くても、同じ高さで表示する垂直方向のアコーディオン型のナビゲーションのスタイルシートをCSSplayから紹介します。 Vertical concertina scrolling menu ナビゲーションの子の数が少ない場合はブランク、数が多い場合はスクロールを使用して表示します。 ライセンスは、個人サイトではコピーライトの明記、商用サイトでは寄付をしてほしい、とのことです。 確保するスペースが一定という利点はありますが、ちょっと操作がしにくいです。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フリーで使えるプロ顔負けの美麗CSSサイトテンプレート集:phpspot開発日誌
[CSS]スクリプト無しで、ナビゲーションの背景全体を変更するスタイルシート
caraldo.net - it転職 リソースおよび情報
[CSS]軽快に動作するタブコンテンツを実装するスタイルシート
IDEA * IDEA
CSSの書式 - HTML/XHTMLで使うCSS入門
[CSS]1ピクのラインでリストをかっこよくデザインするスタイルシート