IDEA * IDEAドットインストール代表のライフハックブログ
Webfactory : Weblog : CSSのみでアコーディオンメニュー
CSSnewbleでCSSのみでアコーディオンメニューを作るという面白いアイデアが紹介されていました。特に難しいこともなく簡単な記述でアコーディオンメニューっぽいものを作ることが出来ます。実際にどのような動作をするのかはCSSnewbleでのサンプルを見るとわかると思います。今回はこれをページのレイアウトに利用した全画面バージョンを作ってみました。 使用したhtmlとCSS <div id="accordion"> <div id="part1"><h1>div#accordion div#part1</h1><p>CSSのみでアコーディオンメニュー</p></div> <div id="part2"><h2>div#accordion div#part2</h2><p>CSSのみでアコーディオンメニュー</p></div> <div id="part3"><h3>div#accordio
Create a Lightbox effect only with CSS – no javascript needed | Emanuele Feronato
Get the most popular Phaser 3 book Through 202 pages, 32 source code examples and an Android Studio project you will learn how to build cross platform HTML5 games and create a complete game along the way. Get the book You may call it Lightbox, or Greybox, or Thickbox, but it’s always the same effect. When you are on a page, and click on a photo or trig some event, a Lightbox is an effect that fade
SEO業者ですら感動する驚異のCSSテクニック - 不定期更新 SEOコラム
急にお金が必要になってしまいました。キャッシングをするのに、レイクかモビット、どっちを利用するか迷っています。借りるならどっちがお得ですか？ お得という点から言えば、初めてならレイクがよりお得です まず、それぞれの特徴を見ていきましょう。レイクは銀行系で、総量規制の対象外、１万円からお借入可能で、最大500万の限度額、年率4.5～18％、200万まで30日間無利息、または5万までなら180日間無利息、初めてのお借入なら有利な条件ですね。届く封筒は「新生銀行」の名称です。 一方、モビットは消費者金融で、総量規制の対象となります。限度額は500万、年率4.8～18％です。特に無利息期間の指定はありません。WEB完結型なら、審査の電話が入りません。 最高・最低金利だけで見ると、レイクのほうがお得に見えます。また、期間無利息などの点からも、初めての方はレイクのほうがお得な印象です。 反面、新生銀行
target疑似クラスを用いて、CSSのみでLightBox風UIを実現する方法 - Webtech Walker
DesignWalkerさんのScriptを使わないCSSエフェクト、Tipsいろいろというエントリーの中に、「Scriptを使わないLightbox」というのがありました。本当にCSSのみで実現させていて、すごいなぁと思ったのでやり方を紹介します。 実装にはtarget疑似クラスを用います。IEとOperaがサポートしていなので、まだまだ実用的ではないと思うのですが、CSS3レベルのセレクタをうまく使えばこんなこともできるんだなーと感動しました。 具体的なコードは以下のような感じ。 <div id="thumb01"> <a href="#large01"><img src="sample_s.jpg" alt="sample" /></a> </div> <div id="large01" class="lightbox"> <a href="#thumb01"><img src="s
Powerful CSS-Techniques For Effective Coding — Smashing Magazine
Sometimes being a web-developer is just damn hard. Particularly coding is often responsible for slowing down our workflow, reducing the quality of our work and sleepless nights with pizza and coffee laying around the laptop. Reason: with a number of incompatibility issues and quite creative rendering engines it sometimes takes too much time to find a workaround for some problem without addressing
IE6でよく遭遇するCSSのバグとその解決方法 | コリス
Dave Woodsのエントリー「IE6 -CSSのバグとその解決方法」から、IE6でよく遭遇する３つのCSSのバグとその解決方法の意訳です。 IE6 - CSS Bugs and Fixes Explained IE6で、マージンが２倍になってしまうバグ IE6で、hasLayoutプロパティによって起こるバグ IE6で、小さい高さを指定した場合に起こるバグ IE6で、マージンが２倍になってしまうバグ IE6で、フロートした要素のマージンが２倍になってしまうバグと解決方法の紹介です。 下記のコードで、IE6はマージンが20pxになります。 sample:バグ #navigation{ float: left; width: 200px; margin-left: 10px; } #content{ float: right; width: 500px; margin-right: 10p
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』
IE6以下をWeb標準に準拠させるライブラリ『IE7.js』 多くの人が待ちに待ち望んだライブラリ。やはりすごい人はすごいものを作るんですね。 このライブラリを読み込むことによりIE6以下でもIE7と同じようなXHTM/CSSの解釈を行ってくれます。 ただし完全にIE7と同じような形にするのではなく、より近い形ということです。 現在公開されているバージョンはversion 2.0 (beta)ということで、まだ実務で使うのは難しいかもしれませんが、MITライセンスで公開されておりますので正式にリリースされればweb制作の現場を変えてしまうライブラリです。 設置方法 Google コードのie7-jsより直接読み込むことが可能です。 以下の要素をhead要素内などに記述します。 <!--[if lt IE 7]> <script src="http://ie7-js.googlecode.c
高さの異なるカラムをそろえるスタイルシート
高さの異なるカラムをそろえるスタイルシート ネタ元：高さの異なるカラムを揃えるスタイルシート[コリス] 高さの異なるカラムをそろえるのがはやっているようですので、色々考察。 高さの異なるカラムをそろえる一般的な手法は、親要素の背景に画像を設定し、高さが揃っているように見せかける方法です。 まず、高さがバラバラの場合のサンプル。 次に、高さをそろえたサンプル。 こちらの方がネタ元より若干、汎用性が高い。 例えば、カラムの下を角丸でそろえることも可能です。サンプル ネタ元ですが、ネガティブマージンを使った手法でボックスの領域を超えて背景画像を表示する形で、高さをそろえているように見せかかけています。 図解するとこんな感じ、 『カラムの内容領域の高さ』に対して、『padding-bottomにより背景画像の表示領域を拡大』し、『カラムの実際の高さ』は、『margin-bottomにより縮小』させ
mersy’s lab » Blog Archive » 印刷用のprint.cssを当てたページは別ページで
======================================== 2008.3.24 印刷用cssについて別エントリー。 ======================================== ボタンとかリンクをクリックしたら、印刷用のスタイルを当てたページをさくっと開くのは実は簡単じゃない？ 現在見てるページのHTMLをそのまんま別ウィンドウもしくはページ移動で表示させて、そこに印刷用のcssを当てるってのはできないのか？？ target=”_blank”はなんとなく使いたくないから、ここもjavascriptでってことか？？ cssの切替だけならまだしも、その内容をどっか別のページでとなると、別ページ作らないといけないのかなぁ？？ それはさすがにめんどいから現実的じゃないが。 何となく始めてみたら意外と奥が深かった。。 うーん。。。 とりあえずj
bodyに設定しておくと便利な3つのポイントとおまけ｜CSS HappyLife
CSS（スタイルシート）でbodyに設定しておくと便利な5つのポイント - デザインウォーカー | DesignWalker - ロサンゼルスで働くウェブデザイナーの日記を読んで、ボクなりな最初に指定して置くと良いポイントを上げたくなったので書いちゃいます。 むしろこのサイトの方向性的に有った方が便利だよなーと。 書くきっかけを頂き、感謝いたします。 ちなみに、最初に指定しておくポイントってそれぞれだと思うので、一つの参考として読んでいただければ幸いです。 最初にbodyに指定しておくと便利だと思う3つを。 body { background:#FFF url(../img/share/bg.gif) no-repeat left top; font-family:Verdana, "ＭＳ Ｐゴシック", sans-serif; font-size:80%; } じゃあ、詳細について色々書
CSS TIPS
CSS TIPSについて web標準が騒がれだしてからかなりの時間が流れました。 既にspecer.gifなどを使ったテーブルレイアウトなどのレガシーな手法は過去の遺物となり、(X)HTML+CSSで作成されたサイトが主流となりつつあります。 当サイトは『レイアウトを行う際にどうしてもうまくいかない。』に回答出来る、そんなサイトになりたいと思っています。 HTML+CSSで作成する10の理由 構造とデザインの分離ができる プログラミングの作業が簡単になる SEO効果が高い アクセシビリティが高い メンテナンス性が高い サーバー容量、転送速度の確保が安易になる ユーザーが自らの見やすいデザインに変更できる ページ表示の高速化 XMLなどの新しい技術との親和性が高い はやってるから もっと詳しく見る HTML+CSSを学ぶ為には？ 当サイトではCSSでレイアウトする為のテクニックを中心に紹介し
CSS Nite Vol.7: Web制作現場の対立を解消する！ XHTML CSSガイドライン作り [1]
このスライドは誰でもアクセスできます スライドのURL http://www.cybergarden.net/cssnite07/ スライドシステム (モダンブラウザ向け) W3C® HTML Slidy (XHTML+CSS+JavaScript) 自己紹介 (1) 益子 貴寛 (Takahiro Mashiko) サイバーガーデン代表。Webプロデューサー。 大学院在学中の1999年5月に「CYBER@GARDEN」を立ち上げる。一般企業に勤務後、2003年5月に独立。 自己紹介 (2) 著書 『Web標準の教科書─XHTMLとCSSで作る“正しい”Webサイト』 『伝わるWeb文章デザイン100の鉄則』 『XHTML+CSSスタートアップガイド (仮)』 が毎日コミュニケーションズから7月出版予定 (現在、執筆中) 矢野りんさんとの共著がMdNから出版予定 (現在、執筆中)
CSS関連リソースへのリンク
スタイルシートの解説・対応状況・バグ説明・回避法などを扱っているサイトへのリンクをまとめています。 ※「Netscape Communicator 4.7xが強制終了してしまうCSS」へのリンクを修正しました。（2004-08-23） W3C CSS1仕様書 CSS2仕様書 CSS2.1草案 CSS3概要草案 CSSモバイル1.0候補 水無月ばけらのサイト ばけらの CSS リファレンス CSS Laboratory とほほのWWW入門 とほほのスタイルシート入門 ZSPC CSS2対応状況ガイド TokiMeki Network SS Introduction [ Correspondence Condition of CSS ] - T.M.N. 三日坊主＋＋の部屋 注意点,ブラウザ振り分け 文字化け対策 掲示板のOpera6に関するスレッド from DFJ ホームページ作成 ブラウ
CSS とはなんだろうか（CSS リファレンス）
last modified: 03rd/Aug./2004; お知らせ 独自ドメイン 'nextindex.net' を取得しました。最新版は次の URI からどうぞ。 http://www.nextindex.net/ Preface 本稿は、 CSS に関する包括的な解説を提供する事を目的としています。より入門的なスピード・ラーニング も用意しましたので併せてご利用ください。 CSS2.1 が勧告候補になっています。これに先立ち、CSS2 のプロパティについて整理する観点で、リライト中です。クロスブラウザの観点では、MS I.E.6.0、Opera 7.x、Mozilla 1.7, Firefox 1.x をターゲットとしています。デフォルトで日本語が表示できない W3C の Amaya は除外しました。 Properties Index 'azimuth' 'background'
スタイルシートを分けて管理する方法をまとめる - 2xup.org
comment 2006-10-17T21:15:00+09:00 お好みの言語が英語で無い場合は、日本語でどうぞ。 In this PDF file, the order of the set format rule and property's appearing was announced. This time, the method of separately managing the CSS file used on the site is announced. Why is CSS divided? I think that most reasons are the improvements of the work efficiency. The access to the revision part becomes early They are combined and co
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.stylish-style.com/csstec/basic/b-table-deco.html
[CSS]チェックしておきたい50のCSSのテクニック | コリス
ちょっと便利なCSS Tips いろいろ - DesignWalker
CSS Optimizer (CSS最適化ツール)-CSS TIPS