タグ

cssに関するGOONEEのブックマーク (49)

  • CSS3 Transitions Collection 30

    CSS3 Transitions Collection 30 Safari4で閲覧してください。Chromeは3Dがきかないので対応してないのもあります。Firefox, IE, Operaなどでは閲覧できません。

    GOONEE
    GOONEE 2010/07/16
    CSS3トランジションまとめ。
  • Firebugの使い方 | THE HAM MEDIA

    Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会(SaCSS)にて発覚!使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ!」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない!という人も勉強会の時に多かったように、実際にも多いはず! Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ!と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認

    Firebugの使い方 | THE HAM MEDIA
  • swapcss

    JavaScriptCSSを切り替えて文字サイズを変更する方法 styleswitcher.jsをつかって、CSSを切り替えて文字サイズを変更する方法を書きます。 このページ自身がサンプルページになってます。 1.JavaScriptをダウンロード A list apartの記事の下部にあるDownload styleswitcher.jsをクリックして、ファイルをダウンロードしてください。 これをHTMLのheadタグ内に貼り付けます。 また、私は残念ながらJavaScriptコーダーではないので、JavaScriptを書くのにjQueryを使っています。 書ける人はダウンロードする必要はないです。 もっていない方はjQuery家サイトでダウンロードしてください。 Downloadをクリックすると、jquery-1.2.6.min.jsというのが出てきますが、これでOKです。 今

    GOONEE
    GOONEE 2010/05/16
    いまさら文字サイズ変更
  • CSSでフッタ位置を固定する

    2007.06.19 CSSでフッタ位置を固定する フッターの位置を(position:fixed)使わずに固定する方法。 コンテンツ量が多いときは、スクロールした一番下に表示する。 コンテンツ量が少なく、スクロールが発生しない場合は画面の下にフッタが表示される。 この方法を使えばコンテンツの量が少なくてもフッターの位置が固定できる。 フッタ高さ分だけマージンを確保 HTMLソースを見ればわかるが、ブランクの<div class=”push”>とフッタ領域の高さが同じになっている。画面サイズを小さくしたときに、この部分でフッタの表示位置をうまく調整している。 注意点 フッタコンテンツがCSSで指定した高さよりも大きくなる場合はレイアウトが崩れてしまう。 この点に注意すれば、問題なく表示できます。 →実装ページ 【CSS】 * { margin: 0; } html,

    GOONEE
    GOONEE 2010/02/19
    フッタの位置を下で固定。コンテンツ量が少ない場合の対応。
  • NLOG - FC2 BLOG パスワード認証

    ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.

    GOONEE
    GOONEE 2010/02/18
    JSで開閉。
  • Dreamweaverでテンプレート機能を使ったまま、現在ページのメニューに色を付ける | Igaloglog

    グローバルメニューで、現在のページのカテゴリメニューの色を変えたいとします。 基的に、開いているページのカテゴリメニュー<li>にclass="self"みたいなクラスを付けてあげればいいんですが、これがDreamweaverのテンプレート機能を使っていたとしたら、そううまくはいきません。なんせ各カテゴリごとにいじれませんからな。 で、<li>にclass="self"付けたいからといって、仕方なくテンプレート外したり、メニュー周り編集可能領域にしたりすると、そこいらで修正が発生したときに非常に面倒くさい。なんとかならんもんか。 というわけで、Dreamweaverでテンプレート状態でありながら、現在のページの<li>にクラスをつける方法を。 Dreamweaverの「オプション領域」というものを使います。 「オプション領域」とは、作成したドキュメントにコンテンツの表示・非表示を

    GOONEE
    GOONEE 2010/02/15
    下層ページのメニューだけ反転。
  • duree dpe

    Par la rédaction Rédigé le 2021-05-25 Les diagnostics de performance énergétique dpe doit être affiché pendant toute sa durée de validité de 10 ans l'affichage doit être visible par le locataire. Dans le diagnostic je pense que tout est résumé une super équipe sur laquelle nous pouvons compter à tout moment de surcroit très sympathique. De la performance énergétique dpe logement tous les cas à par

    GOONEE
    GOONEE 2010/01/19
    CSSの辞典てきな。
  • css-lecture.com

    GOONEE
    GOONEE 2009/11/17
    いちばん上だけライン消すとか、横に並べるのクラス変えずに済むとか。
  • flashの上にhtmlを重ねる | おぎやす広辞苑

    意外と簡単です。 ってか通常(sslじゃない方)のmixiのログイン画面ってそうなってますね。 そして、今やマインディアのトップページもそうなっています。 http://mindia.jp/top flash側 とりあえずflashのwmodeがデフォルト値だと、z-indexが無視されて最前面をキープしてしまうらしいです。 なので、flashのwmodeをopaqueかtransparentに設定してやるんだそうで。 まぁ、実際にソースを見ながらやってみましょう。 下はマインディアのトップページのソースから抜粋したものですが・・・。 の部分はDreamweaverでFlashを挿入すると出てくるソースですね。 そのままFlashを

    GOONEE
    GOONEE 2009/11/14
    FLASHの上にpngを重ねる。
  • Switch Display Optionswith CSS & jQuery - by Soh Tanaka

    Image Name Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfolk that. Woman kickin', work yer last dogs, rattler hee-haw mobilehome stew trailer driveway shootin'. Image Name Askin', jehosephat come pudneer, sam-hell, in lament had. Cabin tax-collectors spell, chitlins spittin' watchin' hootch me rightly kinfo

    GOONEE
    GOONEE 2009/11/13
    リスト表示とテキスト表示切り替え。
  • IE7 だけに対応する CSS HACK: Rongo-Rongo

    GOONEE
    GOONEE 2009/11/02
    ie7だけ対応。
  • CSSでのブラウザー事のフォントサイズや表示の統一について | CSS Lecture

    GOONEE
    GOONEE 2009/10/27
    ブラウザ間差異解消。
  • 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ブラウザということもあり、世の中の多くのユーザー

    GOONEE
    GOONEE 2009/10/09
  • [CSS]簡単にCSS3の新しいプロパティを楽しめるチュートリアル

    CSS3の新しいプロパティで、Firefox, Safari, Chromeなど現在のブラウザで実装を実現できるスタイルシートのチュートリアルをWeb Designer Depotから紹介します。

    GOONEE
    GOONEE 2009/09/18
  • CSS で外部リンクにだけアイコンを表示

    当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いて... 当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いてみますよ。 で、今回はエントリーなんかでリンクを張るときに、当然外部サイトへのリンクと、自分のサイト内へのリンクが混在することになるかと思いますが、このとき外部リンクだけに 「外部リンクですよ」 とわかるようなアイコンを表示させてみたいと思います。 まずは、アイコンを用意しますね。こんなやつ↓ あとは CSS を書くだけですが、ここは 2段階に分けて考えます。どういうことかというと、まずはすべてのリンクにアイコンをつけてしまって、そのあとで、サイト内リンクのみアイコン

    CSS で外部リンクにだけアイコンを表示
    GOONEE
    GOONEE 2009/02/11
  • 3G端末(FOMA・WIN・3GC)のモバイルサイトのコーディング&デザイン - livedoor ディレクター Blog(ブログ)

    こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G(FOMA・WIN・3GC)端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末(FOMA・WIN・3GC)がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末(PDC・P型・C型など)を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運

    3G端末(FOMA・WIN・3GC)のモバイルサイトのコーディング&デザイン - livedoor ディレクター Blog(ブログ)
  • MOONGIFT: » Web開発者は必須!様々なバージョンのIEを収録した「Internet Explorer Collection」:オープンソースを毎日紹介

    Webサイトを構築する際に、どのバージョンのブラウザまでサポートするかが問題になりやすい。最新のバージョンだけであれば良いのだが、不特定多数へのサービス提供となればそうもいかないだろう。 様々なバージョンのIEが立ち上げられる IEの場合で言えば5.5以降を対象とする場合が多いように思う。だがそんなバージョンのIEを簡単に用意できるだろうか。そこで使いたいのがこのソフトウェアだ。 今回紹介するフリーウェアはInternet Explorer Collection、様々なバージョンを収録したIEだ。 Internet Explorer Collectionで提供されるバージョンは1.0/1.5/2.01/3.0/4.01/5.01/5.5/6.0/7.0/8.0となっている。8.0β版まで収録されているので、今後を見越した上でのテストが実行できるようになる。 なぜかインストーラーはVista

    MOONGIFT: » Web開発者は必須!様々なバージョンのIEを収録した「Internet Explorer Collection」:オープンソースを毎日紹介
  • [CSS]スタイルシートに「if」を使った条件式が利用できる -Conditional-CSS | コリス

    ブラウザごとのスタイルシートの記述に、ifを使った条件式が利用できる「Conditional-CSS」を紹介します。 Conditional-CSS デモ デモ画面にIE, Fx, Op, Safariの各ブラウザでアクセスすると、それぞれ用の画像が表示されます。 条件式に利用できるものは、下記のようになっています。 browser IE - Internet Explorer Gecko - Gecko based browsers (Firefox, Camino etc) Webkit - Webkit based browsers (Safari, Shiira etc) Opera - Opera's browser IEMac - Internet Explorer for the Mac Konq - Konqueror IEmob - IE mobile PSP - Pla

    GOONEE
    GOONEE 2008/08/13
  • アルファ画像を扱うalphafilter.jsライブラリ[to-R]

    アルファ画像を扱うalphafilter.jsライブラリ IE6でアルファ画像(透過png)が使えないことにより、コーディングの作業量が大幅に増します。 そこで、IE6で透過pngを扱うjsライブラリを作ってみました。 設定は簡単、head要素内に条件付きコメントを利用してalphafilter.jsで読み込むだけ。 読み込みを高速化させるためdefer属性をの記述を忘れずに行ってください。 <!--[if lte IE 6 ]><script type="text/javascript" defer="defer" src="./alphafilter.js"></script><![endif]--> 透過にしたい画像にclass属性でalphafilterと入れるだけで、なんとIE6でも透過画像の使用が可能になります。 <img src="./sample.png" class="a

    アルファ画像を扱うalphafilter.jsライブラリ[to-R]
    GOONEE
    GOONEE 2008/07/24
    ie6でも透過PNGを使えるようにするjsライブラリ
  • (X)HTML on Flash

    z-indexを使うことでFlashの上に要素を重ねられるよ ただ重ねるだけだとFlashはz-indexを無視して最前面をキープするよ wmodeをopaqueかtransparentにしてあげるとz-indexが効くよ (対応ブラウザのみ。IE6でも透かしたい人はalphafilter.jsとかを使おう!)

    GOONEE
    GOONEE 2008/07/24
    FLASHの上に透過PNGを重ねて表示する方法