タグ

**cssに関するirasallyのブックマーク (60)

  • IE 6, IE 7, IE 8 が退場した未来 - latest log

    Internet Explorer の自動アップグレードについて | TechNet 長かった… 当に長かった… やっと、IE 6, IE 7 が居なくなるのですね… uupaa.js ver 0.8 に埋まっている処理から情報を抜き出し IE 6, IE 7, IE 8 が居なくなった未来では何が可能になるのか抜粋してみました。 IE8 でやっと使えるようになる機能 一部は IE 6 や IE 7 でも使えるのですが、対応が限定的だったり不具合が多かったりと、安心して使えなかった機能も含まれています。 display: inline-block display: table, table-cell など position: fixed; E:active {...} E:focus {...} E::first-child {...} E:lang(C) {...} E::after

    IE 6, IE 7, IE 8 が退場した未来 - latest log
  • 画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD

    昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない?という疑問を抱き実際に作ってみました! 今回作成したのは日人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品! CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対

    画像を一切使わずにCSS3だけでドラえもんを描いてみた! - 裏技shop DD
  • 少しのコードで実装可能な20のCSS小技集

    2019年5月17日 CSS CSSハックに続き、このCSS小技集も私のブックマークにずらりと並んでいたので、整理も兼ねて記事にしてみました。CSSのお勉強を始めたばかりの頃にブックマークしておいたものも多数。。ということで初心者さんからベテランさんまで参考にしてみてください! ↑私が10年以上利用している会計ソフト! コードはサンプル内の「HTML」や「CSS」タブをクリックしてくださいね! 少しのコードで実装可能なCSS小技集 シリーズ 【第2弾】少しのコードで実装可能な20のCSS小技集 【第3弾】少しのコードで実装可能な15のCSS小技集 まずはCSS基礎編 1. divを中央揃えにする ほとんどのサイトが基準となるdivを画面の中央揃えに設定しています。左右のmarginをautoにして中央揃えに。 See the Pen Center Div by Mana (@manabox

    少しのコードで実装可能な20のCSS小技集
    irasally
    irasally 2010/04/15
    サイトが綺麗
  • IE共通の9つのCSSバグをそれぞれ解決する方法:phpspot開発日誌

    IE共通の9つのCSSバグをそれぞれ解決する方法がNettutsにて紹介されています。 どれも、なんでだろうと頭を悩ましそうな問題なので解決法を知っておくと簡単に対処できそうです。 1. センタリングが効かない問題 margin: auto を指定した場合の期待する結果 IEの場合以下のようになりますが↑にするための解決法が書かれています 2. 横に並べたいリストが階段状になってしまう IEの場合以下のようになってしまいますがこの解決法も記載されています 3. ダブルマージンフロートバグ マージンの指定が期待通りに出ている例 ↓ IEの場合、margin: 30px 0 0 30px;  で定義した値が正しく適用されない例も解決法があります 4. heightの高さ指定が効かないバグ height:2px を指定した場合の想定する表示 IEはなぜか2pxにならないのでこれも解決法が示されて

  • [CSS]ネガティブマージンの理解を深め、活用するテクニック集

    スタイルシートのmarginで使用する「ネガティブマージン(マイナスマージン)」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。

  • よいCSS開発を行うための8のTIPS:phpspot開発日誌

    8 methods to bring your front end coding to rockstar levels | StylizedWeb.com よいCSS開発を行うための8のTIPSとして、当たり前かなと思うことから、なるほどというものがあったので以下にご紹介。 ・IDやクラス名にはより意味のあるものをつけよう たとえば、boxとかwrapperとかcontainerとかは一般的ですね。 一般的なものをつけておけばそれが何なのかすぐに分かるし、協業の際にも便利。 全体のラッパー以外にも、headerとか、content とか footer とか固定で使っておくと一貫性が出ていい感じですね。 まあ当たり前の人には当たり前なテクニックかも。 ・閉じコメントをつけて構造を分かりやすく <div id="header" class="section"> <div id="header-

  • [CSS]外部スタイルシートの指定は@importとlinkでどちらがいいか

    外部スタイルシートの指定は@importとlinkでどちらがいいかと、書籍「ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール」の@importはパフォーマンスに悪影響を与えることについてのフォローアップを紹介します。 don't use @import 内容は、IEでは@importで外部スタイルシートを指定すると、パフォーマンスに悪影響を与えるので使用しないでください、というものです。 下記は、外部スタイルシートを@importとlinkを組み合わせて、それぞれのパフォーマンスを比較したもので、キャプチャはそのサイトのものと、参考に当環境でIE7/Fx3(XP)を検証したものです。 @import @import 2つの外部スタイルシートを@importで指定。 <textarea name="code" class="html" cols="60" rows="5">

  • Google ChromeのCSS 3対応状況 - builder by ZDNet Japan

    EDRトップランナー対談:後編 セキュリティ戦略を転換せざる得ない背景と EDRのような手法が必要な理由に迫る ともにDXを推進する コンテナ化されたワークロードを管理 継続的な価値を生みだす「協創」への挑戦 オラクルスペシャリストが語る! 多くの企業で利用されるオラクルDBの課題 アセスメントの重要性とコスト最適化 時代はサーバ仮想化からコンテナへ あらためて整理したい企業ITにおける コンテナ活用の基礎と採用メリットを紹介 身近な改善の第一歩! ニューノーマルな働き方を前提にした これからの時代のWi-Fi環境構築のポイント ライバル同士がタッグを組む理由 マイクロソフトとヴイエムウェアが連携し パブリッククラウドへの移行を支援 クラウドネイティブの実現 モダンインフラの構築・運用の課題解決へ コンテナの可能性を広げるVMware Tanzu 単純なインフラ製品の販売ではない DX、コ

    Google ChromeのCSS 3対応状況 - builder by ZDNet Japan
  • 正式版完全対応! Internet Explorer 7 CSS攻略法 (1) 01 はじめに IE7日本語正式版のCSS実装を検証する | クリエイティブ | マイコミジャーナル

    Internet Explorer 7日語正式版 Internet Explorer 7(IE7)の日語正式版がリリースされた。現在はまだダウンロードしてインストールする必要があるが、2007年4月をめどに、Windowsの自動アップデートで「優先度の高いアップデート」として配布される予定だ。「IE7ではWebページの表示が崩れる」といった問題が出る場合、それまでには対応を済ませておきたい。 そこで稿では、IE7 beta2のCSS実装検証を元に、IE7日語正式版における変更点やバグをまとめる。また、IE6以下との下位互換やモダンブラウザとの互換性を保ちながらバグを回避する方法、CSSハックについても検証する。 新規対応機能一覧 未対応機能一覧 修正済みバグ一覧 未修正バグ一覧 CSSハック一覧 参考 CSS実装徹底検証! そこが知りたいInternet Explorer 7 なお

  • リアルな資産運用の結果をお見せします。海外投資が調子良い!

    「私のリアルな海外投資の結果をお見せします」を運営している管理者です。お越しいただきありがとうございます。 投資全般が好きな私は国内株式や海外への不動産投資や株式・定期口座など多くの投資をしています。 情報収集で多くの投資ブログを閲覧していますが、圧倒的に「投資に失敗している人」が海外投資を批判する内容の記事が多いことに驚きました。 海外投資に失敗している方の特徴はどれも中間業者の選定に間違いがあると感じています。そう海外投資には必ず資産を運用する会社があってこの運用会社の投資の腕にかかってるのです。この選定さえきちんとすれば確実に海外投資はよい結果が期待できます。投資なのでリスクは必ずありますがそのリスクを極力少なくする私の経験を交えて情報を配信したいと思います このサイトは「将来の日は大丈夫だろうか?」「国家破たんもあるの?」「日に資産を置いても全然増えない!」でも海外投資は怖いし

    リアルな資産運用の結果をお見せします。海外投資が調子良い!
  • Web DeveloperでCSSとHTMLを編集してみよう - builder by ZDNet Japan

    前回の「Web Developerでウェブサイトを構築・デバッグ」に引き続き、今回もウェブ開発向けのFirefoxアドオン「Web Developer」の基機能を紹介する。 CSSHTMLの編集 Web Developerの大きな特徴に、ファイルそのものを書き換えることなくHTMLCSSの編集結果をプレビューできるという機能がある。 例えばCSSの場合、ツールバーから[CSS]−[CSSを編集する]を選択すると、現在のページが使用しているCSSがサイドバー(表示場所は変更可能)に表示される。これを変更し、上部の[適用]アイコンをクリックすると、その内容が表示中のページに反映される。 元に戻すには[リセット]アイコンをクリックすればよい。もちろん、編集したCSSをローカルのファイルに保存することもできる。

    Web DeveloperでCSSとHTMLを編集してみよう - builder by ZDNet Japan
  • FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 - builder by ZDNet Japan

    スタイルシートでボックスの横幅や高さを指定すると、中身のコンテンツがボックスに収まらない場合がある。収まらないコンテンツをどのように表示するかは、overflowプロパティで指定することが可能だ。今回は、このoverflowプロパティを紹介したい。 また、overflowに関連したoverflow-xやoverflow-y、text-overflowプロパティも紹介する。これらはInternet Explorerが独自拡張したプロパティだったが、CSS 3での採用が進むとともに他のブラウザでもサポートされるようになっている。 overflowプロパティ overflowはボックス内に収まらないコンテンツの表示方法を指定するプロパティだ。CSS 2から定義されているプロパティで、主要なブラウザであるFirefox、Safari、Opera、Internet Explorerはすべて対応してい

    FirefoxとSafariのCSS対応--ボックスに収まらないコンテンツの表示方法 - builder by ZDNet Japan
  • contentプロパティでコンテンツを追加する(3):FirefoxとSafariのCSS - builder by ZDNet Japan

    いま求められるID管理:前編 有名コンサルが一堂に会し語り合う いま必要なサイバーガバナンスのありかた 新OSのWin11はどう進化したか ビジネス上の役割、開発の要因と Win11が目指した5つのポイントを紹介 現場主導のデジタル変革 ビジネス変革のための“ITの民主化” そして 変わるIT部門の役割 オリジナルコンテンツが満載! 意外と知らないNutanix HCI の情報を集約 読めばわかる!いまHCIが注目される理由 ビジネスの推進には必須! ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス サステナビリティの今と未来 企業戦略としてのサスティナビリティ推進 世界の通信インフラを支えるコルトの取組み データ活用は次のステージへ トラディショナルからモダンへ進化するBI 未来への挑戦の成功はデータとともにある 高い従業員満足度と安心・安全 新時代にむ

    contentプロパティでコンテンツを追加する(3):FirefoxとSafariのCSS - builder by ZDNet Japan
  • フォームのインタフェースデザイン(4)--チェックボックスとラジオボタンのデザイン - builder by ZDNet Japan

    フォームのチェックボックスとラジオボタンのデザインに関連するCSS 3のセレクタには、前回紹介した:checkedと:defaultの他に、:indeterminateというセレクタがある。今回は、この:indeterminateセレクタを紹介する。また、JavaScriptを利用して、セレクタに未対応のブラウザで同等の処理を行う方法を簡単にまとめておきたい。 なお、フォームのインタフェースデザインに関連したCSS 3の基的なセレクタは、今回紹介する:indeterminateが最後となる。 グループ内に選択した項目がないラジオボタンのデザインを設定する フォームでは、name属性の値が同じラジオボタンをグループとして扱う。:indeterminateセレクタを利用すると、グループ内に選択した項目が1つもない場合にデザインを適用することが可能だ。 たとえば、次のサンプルではラジオボタンを

    フォームのインタフェースデザイン(4)--チェックボックスとラジオボタンのデザイン - builder by ZDNet Japan
  • [CSS]アイデア満載のスタイルシートのテクニック30選 | コリス

    Six Revisionsのエントリー「30の卓越したCSSテクニック」から、CSSHTMLだけで実装するエクセレントなテクニックをいくつか紹介します。 30 Exceptional CSS Techniques and Examples

  • DOM 2 Style の JavaScript オブジェクト - IT戦記

    CSS のデータを扱う JavaScript を書きたくて作った いろいろと使えそうなので晒しておきます まだ、インタフェースだけですよ>< var JSCSS = {}; // http://www.w3.org/TR/DOM-Level-2-Style/stylesheets.html#StyleSheets-StyleSheet JSCSS.StyleSheet = function(type, disabled, ownerNode, parentStyleSheet, href, title, media) { this.type = type; this.disabled = disabled; this.ownerNode = ownerNode; this.parentStyleSheet = parentStyleSheet; this.href = href; this

    DOM 2 Style の JavaScript オブジェクト - IT戦記
    irasally
    irasally 2008/04/25
    読んでみよう
  • [CSS]IE6でよく遭遇する6つのバグとその解決方法 | コリス

    CSS Trickのエントリーから、IE6でよく遭遇する6つのバグとその解決方法の紹介です。 IE CSS Bugs That’ll Get You Every Time ボックスモデルのバグ マージンが二倍になってしまうバグ min-width, min-heihgtと同等の指定 Stepdownバグ hover擬似クラスをa要素以外にも対応 透過PNGを透過表示に対応 ボックスモデルのバグ <textarea name="code" class="css" cols="60" rows="5"> div#box{ width:100px; border:2px solid black; padding:10px; } </textarea>

  • CSS, JavaScript, ActionScript, PHP, SQL, ASPなどのチートシート集

    WebTeckerのエントリーから、CSS, JavaScript, AJAX/JavaScript Frameworks, ActionScript, PHP, SQL, ASP, C# and VB.NET, C++などのチートシートを紹介します。 Programing Cheat Sheets ActionScriptのチートシート ActionScript Cheat Sheet Ajax/JavaScript Frameworks Prototype Cheat Sheet Scriptaculous Cheat Sheet(PDF) MooTools Cheat Sheet jQuery Cheat Sheet YUI Cheat Sheet

    CSS, JavaScript, ActionScript, PHP, SQL, ASPなどのチートシート集
  • The Lightbox Clones Matrix « planetOzh

    This tool lists a number of javascript scripts designed to embed various objects in HTML pages, such as images, flash animations, movies and iframes. Comparison of various scripts that display images and other objects in somehow cool CSS popups

    The Lightbox Clones Matrix « planetOzh
  • Firefox 3が対応するwidthプロパティの新しい値 - builder by ZDNet Japan

    アプリケーションモダナイズ 求められている背景にあるビジネスの今 そして、成功の鍵を握るDevOpsの真の意味 エンドポイントセキュリティの転機 情報セキュリティ戦略が問われる今 重要インフラ事業者としてANAが考えること 単純なインフラ製品の販売ではない DX、コンテナプラットフォームの実証など 自社の取り組みで得られた知見を顧客に提案 対談:クラウド時代のネットワーク DX推進の要であるクラウド活用 レガシーなネットワークがボトルネックに 現場業務のデジタル化を促進 リモートワークが生んだ課題をアプリで解消 ベネッセのデジタル変革を紹介 次の一手はこれだ! ZDNet×マイクロソフトが贈る特別企画 今、必要な戦略的セキュリティとガバナンス みんなが使うMySQLの企業活用 なぜ有償サポートがあったほうが良いのか? 有名テクノロジー企業もOracleに頼む理由 コンテナをエンプラITに!

    Firefox 3が対応するwidthプロパティの新しい値 - builder by ZDNet Japan