CSS3 Transitions Collection 30 Safari4で閲覧してください。Chromeは3Dがきかないので対応してないのもあります。Firefox, IE, Operaなどでは閲覧できません。
CSS3 Transitions Collection 30 Safari4で閲覧してください。Chromeは3Dがきかないので対応してないのもあります。Firefox, IE, Operaなどでは閲覧できません。
Webサイト制作をしている方には、必需品なんじゃないかと思われるくらい便利なFirefoxのアドオン『Firebug』。HTMLやCSSのコーディングを担当している人の多くはいれているアドオンですね。 Firebugを入れて使っている人は多いようなのですが、意外と知られていない機能が盛り沢山だったということが、先日の勉強会(SaCSS)にて発覚!使っているといっても、一部の機能に限られてしまっているようなのです。 もちろん「そんな機能知ってるよ!」というくらい使っている人も多いと思います。しかし、そんなに使いこなせていないや、活用できていない!という人も勉強会の時に多かったように、実際にも多いはず! Firebugの使い方をもう少し知っていると、Webサイトの制作の時に便利だ!と思える場面が多々でてくるので、是否今回ご紹介する機能は抑えておき、活用してみてください。 HTML&CSSの確認
JavaScriptでCSSを切り替えて文字サイズを変更する方法 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です。 今
2007.06.19 CSSでフッタ位置を固定する フッターの位置を(position:fixed)使わずに固定する方法。 コンテンツ量が多いときは、スクロールした一番下に表示する。 コンテンツ量が少なく、スクロールが発生しない場合は画面の下にフッタが表示される。 この方法を使えばコンテンツの量が少なくてもフッターの位置が固定できる。 フッタ高さ分だけマージンを確保 HTMLソースを見ればわかるが、ブランクの<div class=”push”>とフッタ領域の高さが同じになっている。画面サイズを小さくしたときに、この部分でフッタの表示位置をうまく調整している。 注意点 フッタコンテンツがCSSで指定した高さよりも大きくなる場合はレイアウトが崩れてしまう。 この点に注意すれば、問題なく表示できます。 →実装ページ 【CSS】 * { margin: 0; } html,
ブログ パスワード認証 閲覧するには管理人が設定した パスワードの入力が必要です。 管理人からのメッセージ 閲覧パスワード Copyright © since 1999 FC2 inc. All Rights Reserved.
グローバルメニューで、現在のページのカテゴリメニューの色を変えたいとします。 基本的に、開いているページのカテゴリメニュー<li>にclass="self"みたいなクラスを付けてあげればいいんですが、これがDreamweaverのテンプレート機能を使っていたとしたら、そううまくはいきません。なんせ各カテゴリごとにいじれませんからな。 で、<li>にclass="self"付けたいからといって、仕方なくテンプレート外したり、メニュー周り編集可能領域にしたりすると、そこいらで修正が発生したときに非常に面倒くさい。なんとかならんもんか。 というわけで、Dreamweaverでテンプレート状態でありながら、現在のページの<li>にクラスをつける方法を。 Dreamweaverの「オプション領域」というものを使います。 「オプション領域」とは、作成したドキュメントにコンテンツの表示・非表示を
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
意外と簡単です。 ってか通常(sslじゃない方)のmixiのログイン画面ってそうなってますね。 そして、今やマインディアのトップページもそうなっています。 http://mindia.jp/top flash側 とりあえずflashのwmodeがデフォルト値だと、z-indexが無視されて最前面をキープしてしまうらしいです。 なので、flashのwmodeをopaqueかtransparentに設定してやるんだそうで。 まぁ、実際にソースを見ながらやってみましょう。 下はマインディアのトップページのソースから抜粋したものですが・・・。 の部分はDreamweaverでFlashを挿入すると出てくるソースですね。 そのままFlashを
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
有限会社タグパンダ 喜安 亮介 2009/10/8 Webブラウザごとのレンダリングエンジンの違いにより起こるレイアウトの表示ずれ問題に泣かされるWebデザイナのために、Webブラウザごとに使えるかどうかの表を交えながら問題を解決するためのCSSハック&フィルタTipsをお届けします(編集部) 最も多く使われているのに……、いや、だからこそ 多くのWebデザイナの悩みの1つは、レイアウトの表示ずれ問題だと思います。これは、各Webブラウザが採用しているレンダリングエンジンの違いから起因している場合が多いです。その中でも、最もWebデザイナ泣かせのWebブラウザなのは、マイクロソフトが開発しているIE(Internet Explore)のバージョン6です。 IE 6は、発売開始当初のWindows XPにデフォルトでインストールされていたWebブラウザということもあり、世の中の多くのユーザー
当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いて... 当サイトの各カテゴリーごとのエントリー数を見ていたら、(X)HTML / CSS に関するエントリーがとっても少ないことに気がついたので、CSS ネタでも書いてみますよ。 で、今回はエントリーなんかでリンクを張るときに、当然外部サイトへのリンクと、自分のサイト内へのリンクが混在することになるかと思いますが、このとき外部リンクだけに 「外部リンクですよ」 とわかるようなアイコンを表示させてみたいと思います。 まずは、アイコンを用意しますね。こんなやつ↓ あとは CSS を書くだけですが、ここは 2段階に分けて考えます。どういうことかというと、まずはすべてのリンクにアイコンをつけてしまって、そのあとで、サイト内リンクのみアイコン
こんにちは。『Cure』や『livedoor 歌詞』を担当しているモバイルディレクターの吉沢です。 つい最近、PC サイトのディレクターが初めてモバイルサイトの開発を担当するという機会がありました。 どの情報を伝えれば初めてモバイルサイトを担当する人にもスムーズに進められるのか、PC とモバイルで一番特徴のあるコーディングとデザインについて、これだけ覚えておくと簡単な3G(FOMA・WIN・3GC)端末用モバイルサイトが作れてしまうノウハウをご紹介したいと思います。 【01】対応端末について こちらの記事にもあるとおり、3G 端末(FOMA・WIN・3GC)がアクセスの9割を占めているため、これからオープンさせるサイトの対応端末は、3G 端末で十分そうですね。 サイトの内容にもよりますが、下位端末(PDC・P型・C型など)を対応端末として含めてしまうと、機能や容量制限などに悩まされ、逆に運
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
ブラウザごとのスタイルシートの記述に、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
アルファ画像を扱う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
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く