CSSでマルチカラムレイアウト
はじめに 本連載では、「クロスブラウザに対応したデザインテクニック」をテーマに、保守性や互換性に優れたXHTML+CSSの書き方を紹介していきます。 今回は、本連載の総まとめとして、CSSでマルチカラムレイアウト（段組レイアウト）を実現する方法を紹介します。CSSでマルチカラムレイアウトを実現する方法はいろいろありますが、今回は、最も基本的な方法として、前回の記事で解説した「floatプロパティ」および「positionプロパティ」を利用した、「フロート型」と「ポジショニング型」のレイアウトテクニックを紹介します。同時にページレイアウトで起こりがちな問題とその対処方法についても扱います。 対象読者 XHTMLとCSSの基本を理解している方。 Web標準サイトの実践的な作り方に興味のある方。 必要な環境 （X）HTMLやCSSを記述するエディタと、それを確認するブラウザがあれば、特別な環境は
日記 | ヨモツネット
blog移行しました。新しいblogで更新を続けています。 XMLェ… text ja 2012-07-08 http://www.yomotsu.net/wp/?p=603 XMLェ… 日々の出来事2012年7月8日日曜日 ブログ作りなおそうかなーと思って、この Webサイト をみなおしてたら、Web ページのメタ情報としてダブリンコア (RDF) を混在させていたことを思い出した。バリデーターにかければ、グラフも取り出せて みたいな感じになる。でも結局あまり意味なかったです多分。いまは OGP とかありますしね。 Web ページは XHTML にしてたけど、ブログのコメントで参照先のない数値参照とか混ぜられると XML パースエラーになるし、XML だから他の語彙混在できるけど、RDF くらいしか混ぜてなかったし、XHTML 意味なかったです多分。いまは HTML に SVG 混在でき
floatボックスが親ボックスを突き破る問題 - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 floatボックスが親ボックスを貫通して表示される問題について。いわゆるclearfixに関するアレコレ。 親ボックスの中に「box_A (float:left;)」と「box_B (float:right;)」があるとする。OperaやFirefox等のモダンブラウザで見てみると、中身（floatボックス）の高さが親ボックスに反映されていないことが判る。ちなみに上記のソースは以下。 <div style="width:140px; padding: 10px; border:1px solid #666; color: #333;"> <div style="flo
[css]floatの回り込み解除を親要素で処理
Captcha security check aoina.com is for sale Please prove you're not a robot View Price Processing
1px欠けの角丸ボックスをCSSだけで作る方法｜web bibo
スタイルシートだけで1px欠けの角丸を作る方法です。この角丸を使用することでシャープすぎるボックスを少し柔らかい印象にすることができます。 HTML 下記の通りHTMLを記述します。 <div class="outer"> <div class="inner">1px rounded corners</div> </div> ボックスにボーダーを付けない場合 .outer { margin: 0px 1px; padding: 1px 0px; background: #0cc; } .inner { margin: 0px -1px; background: #0cc; } ボックスにボーダーを付ける場合 .outer { margin: 0px 1px; background: #E4F2FF; border-top: 1px solid #B1C6D9; border-bottom:
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にならないのでこれも解決法が示されて
RedLine Magazine : 半透明ボックスに関するメモ
半透明ボックスに関するメモ ※2008年2月8日、IE6でinputボタンが押せない件について追記しました。 半透明ボックスに関してのメモ。 デザイナからの要望はこんな感じ。「よくあるタイプのコンテンツ部分の背景に単色ベタの土台を置くようなデザインじゃなくて、今回は背景画像を活かしたデザインにしたい、テキストやら写真やらの中身を入れるボックスだけ半透明にして見せたい背景画像をうっすら表示させたい。」 今回やっかいだなと思ったのが、コンテンツ部分が全面そういう風に背景の上で半透明になっているのではない点。タイトル画像が入る部分やそれぞれのセクションの余白部分は半透明ではなく、素の背景が見えるというもの。文章にするとややこしい・・・つまりこんな感じ↓。(背景とか色合いとか変だけどあくまでサンプルだから気にしないでください・・・。) 半透明のボックスって中身も半透明になるんだよね CSSだけでボ
RedLine Magazine : CSSで半透明ボックス
CSSで半透明ボックス そろそろCSS3のプロパティで各ブラウザに先行実装されてるものを使ってみようかということで、今回は「opacity」を使って半透明ボックスでもやってみようかと。 いつものごとく実験ページ >>Redline Magazine 半透明ボックスサンプル ↑葉っぱの画像が背景画像でその上の黄緑（#9c0）のボックスが半透明になってるボックスです。 CSSソースはこんな感じ。 div.alphabox{ width:400px; height:600px; background:#9c0; filter:alpha(opacity=30); -moz-opacity:0.3; opacity:0.3; } 「filter:alpha(opacity=30);」部分がIE用の指定。 値は0～100。ここでは透明度30%という事でopacity=30を指定している。 ただ、こち
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集:phpspot開発日誌
CSSでリストを整形するなら覚えておくべき８つのリストデザインサンプル集。 リストデザインというと、CSSの整形方法によって様々な見せ方が可能ですが、ソースコード＆チュートリアル付きがまとまったエントリが公開されています。 リストデザインの際は、いつも単調になりがち、という方は覚えておくと、ちょっと変わったデザインも作れそうですし、テクニックを駆使してまったく新しいデザインを考えることも出来そう。 それでは以下にそのデザインされたリストのサンプルをご紹介。 1. サイトのナビゲーション風にデザインされたリスト 2. 番号付き＆番号の横に縦のラインがはいった見やすいリスト 3. 矢印画像を使ったリスト 4. iPhoneスタイルのクールなボックスリスト 5. ツリーっぽい形式にできるリストデザイン 6. 複数行にしてテキストっぽく表示できるテキストリスト 7. ワンラインにして、カンマを付与
[CSS]ネガティブマージンの理解を深め、活用するテクニック集
スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。
色々な要素にstyleをあてる - ぼくはまちちゃん！
全国のマークアップエンジニアの皆さん、こんにちは！ こんにちはこんにちは！！ 今日も元気にスタイルあててますか…！ ぼくはめっきりあててませんけど！ でもたまにはマークアップしたりスタイルあてたりしなきゃ、どんどん不健康になっちゃいますよね！ だから今日はぼくも久しぶりにCSSでも書いて、どんどんスタイルをあてていっちゃおうかなー、なんて気分です！ だけど、せっかくスタイルあてるんだったら、普段ほったらかしされがちな控えめな子をクローズアップして、ちょっぴり目立たせてあげたいですよね…！ はい！ そんな感じで今日は、<head>の中とかに書かれちゃっているような要素たちにスタイルをあてて遊んでみようかと思います！ … head … display: block、 title … display: block、 meta … display: block っと … …… …できた！ こんな感
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
