覚えて良かったCSSテクニック « zaru blog
ここ最近、覚えてよかったなーと思ったCSSテクニックをまとめてみる CSSテクニックは時代とともに変わっていくけれど、ここ1年ほどスタメンレベルで使うCSSテクニックが絞られてきたので、ここらでちょっと個人的にもまとめておこうかと。 liボックス 幅：190px マージン：15px liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 liボックス ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。ダミーテキスト。 <li>にはクラスを指定せずに、左右にぴったりくっ付くように配置が可能。 <style type="text/css"> #box1{ width: 600px; } ul{ width: 615px; margin: 0 -15px 0 0; overflow: hidden; _zoom: 1; font-size:7
HTML5用のリセットCSS（正式版？） - IT-Walker on hatena
今年も明けましておめでとうございます。 白石です。 正月明けからイッパイイッパイです。 で、いきなり本題。 HTML5用のリセットCSS（どのブラウザでもデフォルトの見た目が同じになるよう、強制的に表示を調整するCSS）と言えば、昔HTML5Doctorで紹介されたやつが有名です。Google Codeでプロジェクトがホスティングされてもいます。 でもこのCSS、ちょっと悩ましいことに中途半端なんですよね。例えば、HTML5ではあらゆる要素にhidden属性を指定することができるのですが、「hidden属性のついた要素は非表示にする」と言ったスタイル指定が行われていなかったり。 で、完全なものはないのかというと、あります。それも仕様書の中に。これは、HTML5仕様が正式に「提案」しているものです。 でもどう見てもHTML5DoctorのCSSのほうが有名ですよね。 で、みんながその中途半端
IE 6とIE 7のためのCSSハック16選（1/3） - ＠IT
有限会社タグパンダ 喜安 亮介 2009/11/17 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） Webブラウザ別CSSハック一覧表 前回の「IE 6で泣かないための、9つのCSSハック」では、仕様通りの正しいコーディングを行っているにもかかわらず、Internet Explorer（以下、IE） 6で見ると、レイアウトがズレてしまうなどのさまざまな問題を解決するための9つのテクニックを紹介しました。 今回は、IE 6とIE 7のためのCSSハックのテクニックを下記に分けて紹介します。 IE 6をハック（IE 6のみに効く、もしくはIE 6のみに効かないハック） IE 6のみに効くハック スタ
とっても使えるoverflowプロパティ。その使い方色々。
光の4戦士を買ったんすが、売り文句通りレトロな感じがしていいですね。 まぁまだ2, 3時間程度しかやってないんで、これからどうなるか分かりませんが時間を見つけてやって行こうかと。 さて、以前からoverflowプロパティは使い勝手が良いというか、使う場面が多いプロパティの一つですが、考えてみると色んな事に使ってるなぁ～と思ったので自分が良く使うのをまとめてみました。 あんまoverflowプロパティを使った事が無い方は、ビックリですよ！ これで、ソコの可愛いアナタもoverflowプロパティの虜になる事間違い無し！！（わかんないけど サンプルとかは以下よりどうぞ。 サンプルサイトを見る サンプルをダウンロード 基本的に、全てoverflow: hidden; の指定を足す事で解決したり実現出来る感じです。 01 clearfixみたいに使う まずは以前の「clearfixを使わないでやるに
IE 6で泣かないための、9つのCSSハック (1/3) - ＠IT
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック＆フィルタTipsをお届けします（編集部） 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE（Internet Explore）のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
CSS Browser Selector
Clever technique to help you on CSS hacks. Last updated: November 02, 2010 (v0.4.0) CSS Browser Selector is a very small javascript with just one line which empower CSS selectors. It gives you the ability to write specific CSS code for each operating system and each browser. EXAMPLE The JavaScript support is disabled on your browser. Please, enable JavaScript and refresh this page. The color of th
知っておきたい使えるCSSテクニック25 – creamu
Web Developer plusで、知っておきたい使えるCSSテクニックが紹介されています。 いくつかご紹介しますね。 ・テキストハイライト時の色を変更する SafariやFirefoxでテキストを選択した時の色を変更できる。コードサンプルは以下 ::selection{ /* Safari and Opera */ background:#c3effd; color:#000; } ::-moz-selection{ /* Firefox */ background:#c3effd; color:#000; } ・プリント時にページを指定箇所で分割する 以下のクラスを指定することで印刷時のページを分割できる .page-break{ page-break-before:always; } ・テキストの代わりに画像を表示する よく見られるSEOテクニック。ユーザーには画像を見せ、検索エ
[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート
ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"
overflow-y:scrollな要素を一番下までスクロールする - ぼくはまちちゃん！
こんにちはこんにちは…！ 突然だけど今日はちょっぴりテンション低めに、 要素のスクロールについてのお時間なんです…！ ぺろ ぺろぺろ ぺろぺろ ぺろぺろ ぺろぺろ <div style="height:4em; overflow-y:scroll"> <ul id="peroZone"> <li>ぺろ</li> <li>ぺろぺろ</li> <li>ぺろぺろ</li> <li>ぺろぺろ</li> <li>ぺろぺろ</li> </ul> </div> <input type="button" value="ぺろライン追加" onclick="add()" /> ↑なんかこういうやつがあって…、 ボタンを押すたびに、ぺろぺろエリアの一番下に行が追加されるような仕掛けを作りたいとき…・。 <script> function add() { // 行を追加するよ var peroZone = doc
hail2u.net - Weblog - floatで並べたリストのセンタリング
ページング・ナビゲーションなどでリスト項目をfloat: left;で横に並べるというのは割りと良く使われると思う。並べること自体は特に難しいわけではないが、その並べたリスト全体をセンタリングしようとするとちょっとややこしい。display: inline-block;を使う手法やdisplay: table;を使う手法という黒魔法的(私見)な手法で実現可能だが、position: relative;でもいける。 ややこしい理由は簡単で、センタリングでよく使われるtext-align: center;やmargin: 0 auto;といった手法が通用しないから。検索するとすぐ出てくる比較的メジャーなdisplayで頑張る方法もわかりやすいし悪くはないのだけど、同一セレクタ内で複数のdisplayを駆使する必要があることやzoomマジックなどを併用する必要があることからコードがややこしくなる
［柔軟すぎる］IEのCSS解釈で起こるXSS
［柔軟すぎる］IEのCSS解釈で起こるXSS：教科書に載らないWebアプリケーションセキュリティ（3）（1/3 ページ） XSSにCSRFにSQLインジェクションにディレクトリトラバーサル……Webアプリケーションのプログラマが知っておくべき脆弱性はいっぱいあります。そこで本連載では、そのようなメジャーなもの“以外”も掘り下げていきます （編集部） なぜか奥深いIEのXSSの話 皆さんこんにちは、はせがわようすけです。 第1回「［これはひどい］IEの引用符の解釈」と第2回「［無視できない］IEのContent-Type無視」でInternet Explorer(IE)の独自の機能がクロスサイトスクリプティング（XSS：cross-site scripting）を引き起こす可能性があるということについて説明してきました。 第3回でも引き続き、IE特有の機能がXSSを引き起こす例ということで、
CSS技研：ノート風の罫線にテキストをレイアウトする - builder by ZDNet Japan
ノート風の罫線に揃えてテキストをレイアウトしようとする場合、一昔前であれば各行を<span>でマークアップしたり、テーブルを利用するなどしていた。 しかし現在は、CSSを駆使することで<p>や<div>でシンプルにマークアップしてテキストをレイアウトすることができる。そのため、ブログの記事のデザインなどにも有効に活用することが可能だ。 今回のサンプルは、次の4点をポイントにして作成した。 テキストの各行を罫線に揃えてレイアウトする テキストの分量に合わせて罫線を過不足なく表示する 見出しや段落を追加しても行がずれないようにする ブラウザの文字サイズの設定を変えても行がずれないようにする
自分のプロパティの書き順とか
サポートサイトのオープンのエントリーからまったく書いてないという現実。 いつまで新年の挨拶をしているのか。。。ブログ読んでます！って話を聞くと心が痛い今日この頃。 そして、PC漁ってたらとても懐かしいモノが出てきたので、記念上げ！ これは2006年頃に運営してた個人サイトなんで、デジパ入る前くらいのです。 CSSも覚え始めな感じが、infoの文言から伝わってきますね～。 IE7で崩れまくってるとか、もう笑うしかない（笑） ちなみに、デザインやイラストもボクですから！ こんなデザインだから鷹野さんに女性っぽい言われるんですね・・・ 何気に、このデザイン昔のエントリーでグローバルナビをサンプルに使ってたり。 さて、前置きはこのくらいで、主題に。 Twitterでブログのネタが無いってぼやいてたら、RedLine Magazineの中の人がプロパティ（宣言）の書く順番が気になるからそれネタにして
content.css - mozilla.org Base Styles
/* mozilla.org Base Styles * maintained by fantasai * (classes defined in the Markup Guide - http://mozilla.org/contribute/writing/markup ) */ /* Suggested order: * display * list-style * position * float * clear * width * height * margin * padding * border * background * color * font * text-decoration * text-align * vertical-align * white-space * other text * content * */ /* TOC: Random HTML Styl
これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20:phpspot開発日誌
皆さん、新年あけましておめでとうございます。 今年も読んでいただき、ありがとうございます。 では、早速ですが記事のご紹介。 20 Ultimate CSS Tutorials That Will Help You Master CSS | DWSmg.com これさえやればCSSをマスターできるかもしれないCSSチュートリアル＆サンプル20。 全部、そのメカニズムについて覚えたらかなりCSSに詳しくなるのは間違いなさそう。 Advanced CSS Menu カーソルを合わせたときにメニューがCSSオンリーで切り替わる CSS Based Navigation こちらも同様。JavaScriptレスでメニューを切り替えます CSS Fancy Menu CSSとJSを使ってFlashばりのアニメーションメニューを作成 Expandable CSS Tabs Tutorial テキスト長に応
IEにおいてfilter:alpha(opacity)を設定しても、currentStyle.hasLayout=falseだとが透明にならない。 - Enjoy*Study
IEで不透明度を変更するために下記のようなコードを書いたのですが、対象のエレメントのスタイルによって、不透明度が変わらない場合があることに気がつきました。(IE6、7共に) element.style.filter = 'alpha(opacity=50)';だめだったのは、div要素に対して background-colorだけを指定したもので、これに対してwidthまたはheightを追加指定すると、ちゃんと不透明度が効いてきます。 なお、JavaScriptではなくcss上でfilterの指定を行っても同様でした。(width,heigthがないと効かない) script.aculo.us(v1.7.0)ではどうしているんだろうと、ソース(effects.js)を眺めてみたところ、Element.setOpacityでは特に考慮しているような処理は見当たりませんでした。(その先のpr
JavaScriptを使わずCSSのみでシンプルなツールチップ実装:phpspot開発日誌
Easy CSS Tooltip | Kollermedia.at JavaScriptを使わずCSSのみでシンプルなツールチップ実装。 CSSの a:hover を応用して、次のようにシンプルなツールチップを実装するサンプル。 コードは以下のようにシンプルにかけます。 <html> <head> </head> <style> a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/ a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;} a.tooltip:hover span{display:inline; position:absolute; background:#fffff
アイコンやサムネイルの横にタイトルと概要文があるような時。
とりあえず、暑いっす。えぇ。 ここ最近の暑さにやられ気味なhirasawaです。そんなやられ気味な状況なので、HappyLifeも夏っぽくしてみました。 あと、弊社のベトナム事業部の女性マネージャーがブログを開始しました。 ベトナムに興味がある方や女性マネージャーに興味がある方、更新率も高いので、ぜひに。 さて、そろそろ本題に。 こんな感じで、アイコンとかサムネイルがあってその横にタイトルと概要文があるような、そんなデザインってよく見かけるかと。 今回は、これの組み方の一つとしてサンプルを用意してみました。 サンプルの確認は以下より。 サンプルを見る こういうデザインの場合、どうやって組もうか結構悩むんです。 何に悩むって、この画像をどうやってマークアップするか。 今まで多かったパターンは、基本的には定義リストを選んで、ddに入れたりしてましたが、コレだとリンクを画像とdtに張る必要があっ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
＼(^o^)／ - HTML5 CSS3 DEMOっ アニメーション - ＼(^o^)／