[CSS]ユーザーがクリックしやすいリンクのリストを作成するチュートリアル
Keep Margins Out of Link Lists 下記は各ポイントを意訳したものです。 HTML：スタイルシート無しの状態 CSS：リンクをブロックレベルに CSS：さらによい実装方法 [ad#ad-2] HTML：スタイルシート無しの状態 HTMLは非常にシンプルです。 文字数の異なるテキストリンクをリスト要素で実装します。 HTML <ul> <li><a href="#">リスト1</a></li> <li><a href="#">リストリストリスト2</a></li> <li><a href="#">リストリスト3</a></li> </ul> デモページ（当方作成） リストのアイテムはブロックレベル、リンクはインラインレベルになり、リンクのクリックできる領域はテキストの長さに依存するため、小さく窮屈なものになっています。 CSS：リンクをブロックレベルに a要素をブロ
[CSS]幅は可変で高さは異なるカラムの高さを等しくするスタイルシートのまとめ
幅は%で指定した可変、高さはそれぞれ異なるカラムを使ったレイアウトで、スタイルシートを使用してカラムの高さを等しくする今までの方法から、これからの方法までを紹介します。 Fluid Width Equal Height Columns [ad#ad-2] 下記は各ポイントを意訳したものです。 Doug Neiner メソッド Nicolas Gallagher メソッド Using Tables One True Layout メソッド Flexbox メソッド メモ 訳者注 各デモは「:nth-child」を使用しているため、モダンブラウザのみ期待通りに表示します。詳しくは「メモ」を参照ください。 Doug Neiner メソッド 「Doug Neiner」メソッドは、CSS3グラデーションからアイデアを得た方法です。 [css] .five-columns { background-i
[CSS]横スクロール時にヘッダやフッタが切れてしまう時の解決方法
ヘッダやフッタがブラウザの横幅より広い際に、横スクロールするとヘッダとフッタが切れてしまうのを解決する方法を紹介します。 これはIE6などの旧式のブラウザだけでなく、Firefox3.6やChromeでも起きる現象です。 How to Resolve a Fluid Header/Footer Problem When the Window is Resized デモページ（不具合版） ※キャプチャはFirefox3.6（不具合の確認は横幅を小さくして） この現象が起きる条件は下記のようになります。 ヘッダとフッタのサイズは指定されていない。 →横いっぱいに広がる。 コンテンツエリアのサイズは指定されており、「margin:auto;」で中央に配置。 ブラウザのサイズはコンテンツエリアのサイズより小さい。 →ブラウザに横スクロールバーがでる。 期待される表示は、下記のようにコンテンツが中央
ウェブレイアウトの過剰なボックスやボーダーを取り除くスタディ
ボックスやボーダーはウェブレイアウトでコンテンツを組み立てるためによく使用される便利なパーツです。 しかし手軽に使用すると、過剰になってしまうこともあります。そんな過剰になってしまったボックスやボーダーを取り除くスタディを紹介します。 A Mild Case Of Borderitis 下記は上記の記事を意訳したものです。 ウェブデザインにおいて、ボックスやボーダーはコンテンツを組み立てるためによく機能します。しかしながら、そのボックスやボーダーがある一点に過剰に集まってしまうことがあります。
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
Fancy Inset CSS Image Borders | Evan Byrne' Writings
Overview In this article we will explore how to add a nice, styled, inset double border to any image. This effect works in all modern browsers and degrades gracefully for Internet Explorer. The objectives of this tutorial are: Add two separately styled inset borders to an image. Use as little CSS and HTML markup as possible. Use only valid CSS and HTML. Degrade to original style for IE. Work on im
CSSだけで実装するアイコン付きのセクシーなツールチップ作成チュートリアル:phpspot開発日誌
Sexy Tooltips with Just CSS CSSだけで実装するアイコン付きのセクシーなツールチップ作成チュートリアルが公開されています。 アンカータグ等にカーソルを合わせた際、次のようなツールチップをアイコン付きで表示することが出来ます。 人によっては、JavaScript 使っててもいいという方もいると思いますが、実装する際には一番実装しやすい方法を選べばよいとして、CSSの学習教材として使えそうですね。 関連エントリ 画像なしで実現するCSS吹き出しツールチップ実装サンプル色々 タブ、ツールチップなどクールなＵＩコンポーネント実装jQueryプラグイン「jQuery TOOLS」 スタイリッシュでカスタマイズ性のあるツールチップjQueryプラグイン「qTip」
CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
テーブルを見やすく、使いやすくするためのアルティメットガイド
ウェブページでデータをみせるテーブルを見やすく、使いやすくするためのスタイルや機能性などUIパターンを紹介したアルティメットガイドをJanko At Warp Speedから紹介します。 Ultimate guide to table UI patterns 下記は各ポイントを意訳したものです。 テーブルの「（エクセルでいうところの）行と列」の表記は、「横列と縦列」に統一しています。 はじめに 1. 列を交互にスタイリング 2. 列をフルに 3. テーブルのセクション 4. ソート 5. フィルタリング 6. ページネーション 7. スクロール 8. 固定されたヘッダ 9. ヘッダのないテーブル 10. 拡張可能な列 11. 列のアクション 12. マルチプルな列のアクション はじめに テーブルは構造化されたデータをみせるものです。そして、その目的はデータを読みやすくし、走査しやすく、簡単
上級スタイルシートレイアウトサンプル|2カラム左サイドバーレイアウト
左サイドバー可変幅サンプル ユーザビリティとアクセシビリティを考慮したCSSレイアウト。 サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：。 サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：。 サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サンプルレイアウト：サ
３列段組みレイアウト（サイド固定横幅コンテンツ可変横幅編） - 小池啓仁 ヒロヒト応援ブログ By はてな
解説第十一弾です。 本コンテンツは、以下のページのHTML/CSSソースを解説しています。 CSS段組レイアウト雛型（レイアウトテンプレート） http://d.hatena.ne.jp/chaichanPaPa/20090214/1234611010 サンプルページ http://chaichan.lolipop.jp/src/sright.htm 今回は、３列両サイドバー固定横幅コンテンツ可変横幅のレイアウトです。 これは、シリーズで解説している２列右サイドバー固定横幅コンテンツ可変横幅の応用です。 前回の３列パーセント指定横幅のように簡単にはいきません。 とりあえず、以下がサンプルです。 サンプルページ（３列両サイドバー固定横幅コンテンツ可変横幅） http://chaichan.lolipop.jp/src/both2.htm ◆ポイント解説 まずは、ポイントのhtml構造とCSS
高さの異なるカラムを揃えるスタイルシートのサンプル
記事ページ column2 高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。 高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高さの異なるカラムを揃えるスタイルシートのデモ。高
テーブルをcssで立体的にアレンジする
テーマ：【テーブルをcssで立体的にアレンジする】使用：【XHTML/CSS photoshop 透過png】 それでは早速やってみます。 >使用するhtmlはこちら。 <table> <caption><span></span>テーブルのデザインアレンジ</caption> <tr> <th></th> <th>セレス</th> <th>パラス</th> <th>ジュノー</th> <th>ベスタ</th> </tr> <tr> <td class="row">火星</td> <td>opposition</td> <td>square</td> <td>trian</td> <td>trian</td> </tr>(ーーーー以下くりかえし) </table> caption { padding: 2px 0 2px 8px; margin-bottom: 5px;
各プロパティの値を初期値にする、initial_value.css
前回のエントリー「とっても使えるoverflowプロパティ。その使い方色々。」の補足で、Dreamweaver使ってコーディングする場合、デザインビューを使ってるとその部分が選択できない問題が有ったと思います。（確認しているのはVer8） 一時的に、宣言を取れば普通に選択できます。 さて、ちょっと必要になったんで、各プロパティを初期値にするCSSを書いておきました。 使いどころとしては、ごちゃごちゃ複雑になってきたCSSが何か当たってて変だったりする時や、取り合えず初期値に戻してみたい時ですね。 他に、ブログサービスとか使ってると、良く分かんない場合が有るのでそんな時にも活用できるかもしれません。 ダウンロードしたい方は以下よりお願いします。 initial_value.css DLするのとほぼ同じのを貼り付けておきます。 selectorsName { background-attach
IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌
IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px; で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて
CSS で table に斜線を引く方法
CSS で table に斜線を引いてみました。下の表の左上の斜線に CSS を使ってます。 サンプル（クリックすればサンプルページに移動します） Windows XP + IE6 / IE7 / Firefox3 / Safri3 / Google Chrome で確認しています。 ポイントは以下です。 th 要素に position: relative; 斜線を引く要素（ここでは span）に position: absolute; を設定。 斜線（border）を適用する要素の前に を設定。 がなかったり、要素の後方に があると、th のスタイルが隠れてしまう。 クロスブラウザにするため、font-size や line-height など、いくつかのプロパティを設定。 HTML <table summary="data"> <thead> <t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
borderプロパティを使用した華麗なる四つのエフェクト | コリス
IDEA * IDEA
CSSセレクタ簡易対応表｜CSS HappyLife
【インフォシーク】Infoseek ： 楽天が運営するポータルサイト