Flash(swfファイル)の上位にHTMLレイヤーを重ねる方法 | webwedge.jp
※以前のサイトでアップしていた記事の転載です。 通常Flashの上にHTMLのレイヤーを重ねようとしても、Flashの方が上位に表示されてしまいます。 あまりそういう機会も無いかもしれませんが…。 以下の方法を使う事でFlashの上にHTMLレイヤーを重ねる事ができます。 サンプルでは、水色の背景と流れている文字がFlash、黒文字がHTMLです。 HTMLのソース <div id="fla_css"> <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0 width="200" height="100"> <param name="mo
オンラインCSS自動整形 : akiyan.com
/* background-color */ body, div.navigation { background-color : #fff } div.contents { background-color : #e0e0e0 } /* color */ body, div.navigation { color : #000 } div.contents { color : #333 } /* font-size */ div.contents { font-size : 100% } div.navigation { font-size : 80% } /* margin */ div.navigation p { margin : 1em 10% } /* padding */ div.navigation p { padding : 1ex } /* background-color
ウノウラボ Unoh Labs: 水平方向のナビゲーションの作り方
yamaokaです。 水平方向に並んだナビゲーションを作る場合、 皆さんはどのようにマークアップされているでしょうか。 とりあえず必要な項目を羅列してみましょう。 それぞれの項目には矢印の画像を付加するものとします。 == HTML == <p id="navigation"> <img src="arrow.gif">編集 <img src="arrow.gif">削除 <img src="arrow.gif">追加 </p> horizontal_nav_1 posted by (C)フォト蔵 一見よさそうです。 ただ、HTMLの論理的な構造としてふさわしいものでしょうか。 ナビゲーションと言えども論理構造としてはリストの一種なので、リストとしてマークアップするのが適当と言えます。 リストにしてみましょう。 == HTML == <ul id="navigation"> <li>編集<
CSSデザインカタログ
対応ブラウザは Windows：InternetExplorer6，InternetExplorer7，Firefox2，Opera9 Mac：Firefox2，Opera9，Safari2 ですが，ブラウザによって若干表示が異なる部分もあります。 XHTML 1.0 でマークアップしてあります。 DOCTYPEスイッチによる標準モードに対応しています。InternetExplorer6 でXML宣言をし互換モードになった場合にも対応しています。 Netscape7，Mac InternetExplorer5 では期待通りに表示されないものがいくつかあります。 便宜上，分類コード（div011-hp，table010 など）を class名にしてありますが，実際にお使いの際には適切な class名に変更してください。 すでにお使いのCSSファイルに新たにCSSコードを追加した場合，既存
TRANS - 携帯用CSSを書く上で押さえておくべきポイント
先日、diggでVitamin Features » Make your site mobile friendlyというエントリーが上がってきてました。見てみると、非常にうまい具合に携帯向けのCSSやHTMLの書き方などが紹介されていました。僕も携帯向けCSSの書き方には興味があったので、勉強がてら重要なポイントを抜き出して、和訳してみました。 和訳文は次からスタートです。（上記サイトの「mobile」は携帯電話やPDAを含めたモバイル機器が正確な訳ですが、ここでは話を分かりやすくするために「mobile」を全て「携帯」と訳しています。） 基本からスタートしよう。 既に論理的でセマンティックなHTMLを構造化しているんだったら、携帯を含めたどのデバイスでもきれいに、使いやすく、アクセシブルになっています。携帯によっては、WAPに準拠しているかもしれないし、もしかしたらWAP2もいけるかもし
meyerweb.com
What happened was, Brian and I were chatting about W3C GitHub issues and Brian mentioned how really long issues are annoying to search and read, because GitHub has this thing where if there are too many comments on an issue, it snips out the middle with a “Load more…” button that’s very tastefully designed and pretty easy to miss if you’re quick-scrolling to try to catch up. The squiggle-line wou
hail2u.net - Weblog - pre要素へのスタイル指定
idea * ideaでエントリになっていたので、言及されていることだしうちのサイトのことだけちょっと書こうかなとか考えてみたら結構色々あって、エントリのネタになりそうだったのでまとめてみた。どっかにもちょろっと書いたけど。 実際にスタイル指定を書く前に抑えておくべき知識として以下のようなものが挙げられると思う。 ほとんどのブラウザでpreは等幅フォントで表示される ほとんどのブラウザでpreのwhite-spaceはpreになっている フォント・ファミリを指定する場合は最後にGeneric font familiesが必要になる overflow: scroll;では縦横どちらにあふれた場合でも縦スクロール・バーと横スクロール・バーが両方とも出る overflow: auto;ではあふれた方向にのみスクロール・バーが出る Internet Explorerではoverflow: auto
ミスタードーナツでお得なクレジットカードはｄカード！ポイントの3重どりで2.5％ポイント還元の方法【2023年版】 | ベストクリア
ミスタードーナツは、全国に1,200店舗以上を展開するドーナツのチェーン店です。店内でドーナツ作りを行っているため、出来立ての美味しいドーナツをいただくことができます。期間限定のコラボ商品も多く、SNS等でよく見かけますね！ 飲茶メニューも美味しくて人気があります。ドーナツはお土産にもいいですね！ ミスタードーナツで一番お得なクレジットカードは、ｄカード・ｄカード GOLDです。ｄ払いを利用することで、ポイントの3重どりができ2.5％還元を実現できます。 ミスタードーナツでは、クレジットカードは直接利用できませんが、電子マネー、バーコード・QRコード決済など多くのキャッシュレス決済を支払いで利用することができます。クレジットカード おすすめを探している方にもピッタリです。 ミスタードーナツの支払いで利用できる決済方法バーコード QRコードPayPay・au PAY・ｄ払い電子マネー楽天Ed
CSSでデザインされたテーブルレスでクールなフォームサンプル:phpspot開発日誌
Tableless forms consider this a very important step in learning web design the right and straightforward way. CSS is no longer just a way of adding some simple styles to an element in your page. CSSでデザインされたテーブルレスでクールなフォームサンプル。 次のようなフォームのサンプルがダウンロードできます。 HTMLとCSS、画像がセットになっているので、ちょっと編集していろいろと応用できそう。 ログインの横にアイコンが表示されていると直感的かつ、オシャレなフォームになってますね。デザイン面で参考に出来そうです。 関連エントリ ブログのコメント部分やコメントフォームのデザインを色々集めたサイト
lockエラー | 月額200円からのレンタルサーバー JSN
まずは最近知って便利だと思ったCSSの小技をひとつ。 文章の最後に、「※（米印）」などで注釈を入れたいときに、CSSのみで行の開始位置を揃えるのにすごくシンプルなやり方がこれ。 .note { padding-left:1em; text-indent:-1em; } <p class=”note”>※米印を使う場合はこいつが便利。<br /> 改行してもこの通り。ちゃんと開始位置が揃ってる。</p> 「padding-left : 1em;」でまず１文字分右に動かして、「text-indent : -1em;」で最初の行だけ１文字分左に出す、ということらしいです。これ考えた人はえらいっすねぇ。 他には開始位置を揃えるいわゆる「ぶら下げ」をCSSでやる場合、<div>タグの入れ子を使ってもいいが、<dl><dt><dd>の定義型リストを使うのがおすすめ。Definition Listの略で
Internet Explorer 7で使えなくなるCSSハック « Odysseygate.com
前回に続いて、Internet Explorer 7で使えなくなるCSSハックについていってみたいと思います。きっとどこかのサイトがすでに公開してると思うのですが、どうもうまく検索できなかったので…。 参考にしたのは、例によってCascading Style Sheet Compatibility in Internet Explorer 7です。 CSS Filters（おで訳。適当に省略してます） ブラウザーベンダーによってCSSの実装が異なったり、さまざまなバグがあるせいで、CSS標準によっても結局表示がばらばら。結果としてウェブディベロッパーコミュニティはさまざまなCSSハック(MicrosoftはこれをCSS Filterと呼んでいる)を作リ出した。 IE7では、数々の（これらの原因となる）構文バグを修復したので、これまでのバージョンのIEで動作していた、以下のCSSハックは動作
フッターとかの区切り『｜』のサンプル4種｜CSS HappyLife
フッター部分のメニューなどを区切る際のサンプルを適当に。 p要素でやるとこんなヤツです。 Home｜アバウト｜イラスト｜BBS サンプルに使うhtmlは、ul要素を使った下記をベースに使用してます。（サンプルに寄ってid名とか変わりますが） <ul id="sampleFooter"> <li><a href="/">Home</a></li> <li><a href="/">About</a></li> <li><a href="/">Gallery</a></li> <li><a href="/">Blog</a></li> </ul> んでは、いってみますか。 一番書きたかった内容は最後に書いてます。 普通に縦線を書いた感じ 実際の表示です。 Home｜ About｜ Gallery｜ Blog 普通にhtmlに｜を記述しているのでソースは当然下記のように。 <ul id="samp
CSS HappyLife
もう放置して長い当ブログ...なので、Adsenseの自動広告ってのを試してみようかと思ってONにしたら、すごいことになった！ これは中々に酷いですね。 とまぁそれはさておき、すごい久しぶりに個人の趣味っぽい感じのサイト作りました。 - 探そう！好きな恐竜 なんで恐竜！？って感じしますね。 正直、恐竜には全然興味なかった側の人間です。 もう完全にただのお知らせや告知ブログ...！ 初版の発売から4年経ち、ありがたいことに改訂のお話を頂いたので、6月～8月辺りに森田 壮さんと執筆を行い、2017年9月15日に改訂2版が発売しました。 かなり頑張って加筆・修正などを行ったので思ってたより大変な執筆でした。 初版と改訂2版の詳しい違いに関しては、サポートサイト に載せておいたのでそちらを見て頂けるとありがたいです！ 初版と改訂2版の違い | Web制作者のためのSassの教科書 改訂2版 - 公
floatした際に背景が消える件【css tip】 - to-R
親ボックスに背景を適用して、内包する子ボックスに対してfloatを適用した場合、IEでは子ボックスを内包する形で背景が表示されるのに対して、Firefoxでは親ボックスの背景が表示されなくなります。 サンプルとなるhtmlは <div class="parent"> 親ボックス <div class="child"> 子ボックス </div> <div class="child"> 子ボックス </div> </div> とします。 これに対して div.parent{ width:204px; background:#39FF6B; } div.child{ border:1px dotted #000; height:100px; width:100px; float:left; } このようなCSSを適用した場合、以下のような表示になります。 サンプル これはIEがfloatの処理が
もう、class名やid名で悩まないんだからっ！！｜CSS HappyLife
class名やid名って付ける時悩みませんか？ 今でもボクは結構悩むんですが、そんな悩みを解決する為に、人さまのソース覗きまくってよくあるclass名とid名を拾ってきました。 これで、チョットだけ作業効率アップ！？ 2010年6月10日追記： この記事自体、2007年 1月15日に書かれてるんでかなり古いです。 あくまでも参考程度に留めてもらうのが良いかと思います。 今だったら、html5の要素を参考にしたりして付けるのが、今後の事を考えると良いのかなーと思います。 また、善し悪しの判断はせずに公開しているものですが、位置に関するのは仕様変更に弱くなるのでオススメはしません。 全体に使えそうな感じ wrap wrapper top-wrapper wrapperAll frame mframe all-frame container page pagetop all allContent
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
乐山厩荒商贸有限公司
Breadcrumb CSS - Appleに習うパンくずデザインCSS - youmos
Clean CSS - A Resource for Web Designers - Optmize and Format your CSS
WEB制作者のための32個のブックマークまとめ（part2）*ホームページを作る人のネタ帳
lllcolor.com