スタイルシートをめぐる冒険: CSS実験室: clearfixの決定版を作る ―モダンブラウザ編―
floatに起因するレイアウトくずれの多くは、floatをしかるべき場所でクリアすることによって解決する。このことを発見して以来、もっぱら空ボックスにclearを指定するという方法（<div style="clear: both"></div>）を多用してきたが、HTMLにある種の不純物が混じることに居心地の悪さはずっと感じていた（「floatを繰り返すとレイアウトがくずれる」参照）。この気持ち悪さを解消してくれるのが、clearfixというテクニックだ。 基本的な発想は上記の空ボックスによるクリアと同じだが、それをHTMLには一切手を加えず、スタイルシートだけで実現しているところに大きな特徴がある。しかし、ひとくちにclearfixといっても様々なバリエーションがあり、その記述のしかたは微妙に異なる。 例えば、clearfixの提唱者ではないかと類推されるPosition Is Ever
栄光ゼミナール；塾選びガイド
栄光ゼミナールの授業料、サービスなど充実させたコンテンツで作成していますが、やはり一番栄光ゼミナールを知るには、資料請求が一番です。 栄光ゼミナール資料内容 日程と授業料についてのご案内 栄光ゼミナールの夏期講習のご案内 個別指導のご案内。 「今子供たちは・」資料集栄光ブックレット とっておきなＤＶＤ（届くまでお楽しみ） 栄光ゼミナールでは、はじめての方には無料の夏期講習会になります。テキストの教材費は自己負担になりますが、それでも1教科につきたったの2100円。 栄光ゼミナールは特に中学生を対象に向けて圧倒的人気のサービスです。もちろん、それに付随するしっかりとしたサービスがあります。大手の学習塾には、有名講師が授業を100人程度で聞くタイプと少人数制（6人から20人程度）できめ細やかな授業を受けることができるタイプと個人指導で1対1、1対2でもっと自分のペースにあわせることがで
CSSだけでメニューにツールチップヒントを付けるテクニック:phpspot開発日誌
CSS: Menu Descriptions | Mike’s Experiments | MikeCherim.com This is a CSS technique that could be useful if you want to give users accessible added content such as tool-tips, notifications, or alerts, without adding unnecessary clutter to your page. CSSだけでメニューにツールチップヒントを付けるテクニック。 次のようにメニューにカーソルを合わせるとヒントが表示できます。JavaScript不使用なので、JavaScriptが苦手な方も実装可能です。 JavaScriptは使わずにやりたい場合は覚えておきたいテクニックですね。 関連エントリ
optgroup 要素を CSS でひと工夫してみる | WWW WATCH
フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな... フォームの入力コントロールの中で、select 要素によるセレクトメニューは、選択肢の数が一定以上増えると選択したい項目を探し出すのがちと面倒になります。そんな時のために optgroup 要素が存在するわけですが、こいつを使用した上で、CSS をあてて見た目を装飾する方法と、一部ブラウザでの注意点などを簡単にまとめてみました。 基本的なことのみで、すごいかっこいい見た目を実現とかそういうのではありませんので、期待せずにどうぞ。 例えば都道府県などの選択をさせる際を想定すると、マークアップ自体はこんな感じになりますよね。面倒なので全部は書きませんが。 <select name="location"> <optgroup la
CSS Dock Menu
May 08, 2007 331 Comments Tags: Javascript If you are a big Mac fan, you will love this CSS dock menu. It is using Jquery library and Fisheye component from Interface and some of my icons. It comes with two dock position: top and bottom. This CSS dock menu is perfect to add on to my iTheme. Here I will show you how to implement it to your web page. CSS dock menu screenshot Update: I no longer supp
CSSで「折り返す」pre
■ tDiary: この期に及んでspamフィルタを導入していない人は どういう人なのかな。 ツッコミ通知メールを使っていない(ので気づいてない) 自分の日記はRSSリーダに登録してない(ので気づいてない) 単なる面倒くさがり屋さん 未対策の日記は(RSS経由では)読むに耐えないので、どんどん購読先から消えてもらっているのだが。もったいない。せめてここのフィルタくらいは入れてくれないだろうか。簡単だからさ。 追記 書き漏らした「理由」: spamをまだ受けていない(でも予防措置はしておいた方がいいよね) そもそも日記を放置しっぱなしで更新していない(ので気づいてない) ■ CSS: 「折り返す」pre 人が作ったtDiaryのテーマをつらつらと見ていたら、見慣れぬ属性が書いてあった。こんなの。 white-space: -moz-pre-wrap; /* Mozilla */ white-
ふつうに横三角 - ぼくはまちちゃん！(Hatena)
ＣＳＳで横三角。「半キャラずらし」 (インターネット帳面) 今回はお題の通りインターネット帳面でもやってる「ＣＳＳで横三角をやる方法」。２バイト文字の三角記号は▲や▼しかないので横方向を示すことができませんでした。これをなんとかどーにかできんものかと。 ↑こんな記事があって、ちょっと面白かったので、 参考までに、ふつうの横三角のコードも書いておきますね！ » (») « («) ▷ (▷) ▶ (▶) ◁ (◁) ◀ (◀) そうそう、この中でも » って結構使えるよ！ よくサイドのメニューとかで、CSS を使って <li> の背景左端に、三角っぽい画像を設定したりするよね！ でも » をつかえば、画像がなくてもこんな感じ！ » Diary » Bookmark » Fotolife »
KAZUMiX memo
「OpenGL で作る iPhone SDK ゲームプログラミング」、「iPhone ではじめる OpenGL ES プログラミング」共に良い書籍なのですが、iOS SDK 4.2で全く構造が変わってしまった旧SDKのテンプレートをベースにしているため、いきなりつまずいてしまった人もいると思います。気合いでテンプレートコードを読み替えて対応することもできますが、簡単に書籍と同じテンプレートで始めることができます。 iPad用のOpenGL ESテンプレートが旧SDKのまま そう、新規プロジェクトでProductをiPadにした場合のOpenGL ES Applicationテンプレートは、iPhoneと違って構造が旧SDKのままなんです。 このままでは当然ターゲットがiPadになっているので、その辺をiPhoneに変更すればOK! 新旧の構造の違い ES1Render, ES2Render
フッターが素晴らしい19サイトを参考に足もとを見直そう | Web担当者Forum
通常、フッターには基本的なナビゲーションを繰り返して用い、著作権情報やプライバシーポリシーなど「細字部分」にあたるものが書き込まれる。また、標準に基づいたデザインの人気が高まり、フッターにXHTMLやCSSへの準拠を示すバッジが置かれるようになった。 新しいクライアントのために、フッターが完全に不足しているサイトを再デザインしながら、僕がデザインをまとめるとフッターがやる気のない付け足しになってしまうのはどういう具合なんだろうと思った。僕のフッターはたいてい内容が乏しく、デザインも大好評とはいかない。これまでに作った最も内容豊かなフッターはおそらく、ミニサイズのサイトマップとコンタクト情報がちょっとばかり入った、Avatar Financialのものだろう。 こうして僕は興味をもった。ほかのウェブデザイナーはフッターを何に使っているんだろうか？ウェブを回って集めた、フッターが目を引く19サ
Data Tables and Cascading Style Sheets Gallery
Current style: TagBox by TagBox Table design based on the fresh TagBox style.
固定幅ベースの elastic レイアウトサンプル
elastic レイアウトと言っても、固定幅ベースか可変幅ベース（とは言っても min、max-width による半固定だけど）のどちらかからのアプローチになるとは思う。当サイトでは、ここ1年半ほど可変幅ベースの elastic レイアウトを採用しているんだけれども、ちょっと思い立って固定幅ベースの elastic レイアウトのサンプルを 3 つほど作ってみた。 文字サイズの変更に追随する elastic レイアウト 作ったのは 600px（640×480向け）、780px（800×600向け）、960px（1024×768向け）の幅をデフォルトで持っていているレイアウト。それぞれ、だいたいどれくらいの幅を指定すれば良いのか調べたかったってのがサンプルを作った主な理由。ブラウザの表示メニューなどから文字サイズを変更すると、それに追随してレイアウトの大きさも変化する。内包するカラムを黄金比
mezzoblue § css Zen Garden Design List
RSS Feeds For automatic notification when the css Zen Garden updates, there are two RSS feeds available: Official Designs News Updates The Zen of CSS Design Dave Shea & Molly Holzschlag New Riders, 2005 Book Link List Tired of typing in all the links we reference in the book? Check out the book link list. Get it: CA | DE | FR | PL | RU | UK | US
css Zen Garden: The Beauty in CSS Design
A demonstration of what can be accomplished through CSS-based design. Select any style sheet from the list to load it into this page. Download the example html file and css file The Road to Enlightenment Littering a dark and dreary road lay the past relics of browser-specific tags, incompatible DOMs, broken CSS support, and abandoned browsers. We must clear the mind of the past. Web enlightenment
コーディングコンテスト開催決定なのっ！
（4/5に仕様部分修正有り） 以前のエントリーで脳内妄想を炸裂させていた、コーディング大会の件が正式に開催される事が決定となりました。 今回、名称は取りあえずコーディングコンテストで。 何かソコで悩むのに疲れた… 取りあえず、サブタイトル的に勝手につけたのが、 コーディングコンテスト Vol.1 ～Coder's High～ という感じです。（今つけた） と、まぁその辺はどーでもいいっすが今回のコンテストは、CSS Nite LP, Disk 3 "Coder's High"との連動企画として動く事になりました！ 連動だからってLP3に参加しないといけないとか、そういう事はありません。 スイッチの鷹野さん、CYBER@GARDENの益子さん、後デジパの中の人で仕様決めに関するディスカッションをして、ある程度仕様が固まったのでご連絡いたします。 最終的に変更が加わる可能性もありますので、その
てっく煮ブログ - CSS をリニューアルするときに参考にしたいページ
css今回の CSS リニューアルでネタ出しに使ったサイトをまとめておきます。83個のきれいな Wordpress のテーマ集：83 Beautiful Wordpress Themes You (Probably) Haven’t Seen絶対見ておくべき30個の暗めのサイト：30 Dark Designs You Should've SeenCSS による最近のフッターデザイン：CSS-Based Footers: Modern SolutionsCSS による 2006 年の美しいサイト50選：50 Beautiful CSS-Based Web-Designs in 200653個の必須 CSS テクニック53選：CSS-Techniques You Couldn’t Live Withoutかっこいいデザインのサイトがサムネールつきでいっぱいなので、煮詰まったときに見るといろいろ
画像の使用を極力控えてかっこいいCSSデザインをやってみよう
Latest topics 2019.01.22 長々と運営していましたが、本日を以て大会を終了とさせていただきます。沢山の方にご参加いただきましたこと、まことに嬉しく思います。Galleryは閲覧可能ですので、懐かしい気持ちになりつつご覧いただければと思います。 2007.04.15 公式html内に一箇所文字の誤りがありました。詳しくは2007-04-15のメモに書いておきました。要素の変更や構造の変更に変化は無いので、CSSを書く作業には影響がないのですが、気になる方はURIを参照して下さい。 Galleryが開通しました。フォームで選択してぽちっとするとサムネイルが表示されます。サムネイルをクリックすると、CSSデザインが適用された個別ページが表示されます。 よくありそうな質問に、CSSデザインは１人何個でも提出できる旨を追記いたしました。 2007.04.13 よくありそうな質問
いっそのこと画像使わない : 雑記帳 : der Gegenwart
[ Web関係 ] 画像の使用を極力控えてスペースとかボーダーとかのみでCSSデザインする大会とか誰かやらないですか 画像をどのくらい控えるかがポイントになってくるわけだけど、これ、個人差があるから難しいよねぇ。 いっそのこと画像の使用を禁じてしまえば良いんじゃないかと思ったり。企画の発想っていうか、そういうのは面白くて良いと思います。「ご自分で企画立ち上げちゃったらいかがでしょうか？」とか無責任なこといってみるテスト。 追記 企画にのってくれる人は、どれぐらいいるかなぁ。流石に1人だと寂しすぎるので>< もし本当にやるなら参加したいです。実施するにあたって決めた方がいいであろう項目を適当に列挙。 そもそもどういった形式でデザインするのか CSS Zen GardenみたいにHTML文書を固定して、CSSだけ書く 各々、自分のサイトをデザインしなおしてみる とか。これは1が無難かな。HTM
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
フロートとネガティブマージンまとめ:CSS | Tech de Go
lllcolor.com
WEBデザインセンス向上まとめ。カラー統一サイト30×5・計150サイト＋2200以上の無料HTMLテンプレ*ホームページを作る人のネタ帳
