HTMLとCSSだけで作るFacebookの「いいね！(like)」ボタン : web memo.Ver.2
Facebookを利用するようになって各種サイトにおいてある「いいね！（like）」ボタンを自然に押すようになった。ボタンをおいてないところもlike bookmarkletなんかで押せるから問題ないと言えば問題ないものの、やはりサイトにおいてあった方が目に付くし押しやすいという事実はどうしても感じてしまう。 ところが先日記事ごとに「いいね！」ボタンをおいていたサイトにアクセスしたら、ボタンが消えてしまっていた。話によると「（ページ自体が重いので）軽くするために外してしまった」らしい。確かにいいね！ボタンはiframeかJavaScript（XFBML）を使って表示するしかなく、インラインフレームの読み込み時間も相まって少々重いパーツになってしまっていると思う。 しかしこれで納得してしまっては面白くないので、フレームを使わない簡単なHTMLとCSSだけでブログなどに設置できるいいね！ボタン
CSS Tools: Reset CSS
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're interested. Reset styles quite often appear in CSS frameworks, and the original "meyerweb reset" found its way into Blueprint, among others. The reset styles given here a
)
CSS Compatibility and Internet Explorer
With each new release of Windows Internet Explorer, support for the World Wide Web Consortium (W3C) Cascading Style Sheets (CSS) standard has steadily improved. Internet Explorer 6 was the first fully CSS, Level 1-compliant version of Internet Explorer. Internet Explorer 8 is fully compliant with the CSS, Level 2 Revision 1 (CSS 2.1) specification and supports some features of CSS Level 3 (CSS3).
CSSで犯しがちな5つの誤ち | エンタープライズ | マイコミジャーナル
Nicole Sullivan, a web developer living in California. Webページのパフォーマンスを向上させる方法のひとつに、CSSファイルを最適化するというものがある。CSSはプログレッシブレンダリングをブロックする効果があるため、最適化しないでおくとページのレンダリング時間に影響を与える。Stubbornella ≫ Blog Archive ≫ Top 5 Mistakes of Massive CSSにAlexa Top 1000サイトを調査した結果が掲載されている。CSSに関して使うべきだが使われていないCSSテクニックがあり、その上位5が紹介されている。紹介されているテクニックは次のとおり。 42%がCSSをGZIP圧縮で提供していない。 44%が2つをこえるのCSS外部ファイルを使っている。 56%がCSSをクッキーとともに提供している
もう、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
CSSセレクタの高速化の話し - Webtech Walker
続・ハイパフォーマンスWebサイトを読んでCSSセレクタの高速化の話しが面白かった（というか全然知らなくてちょっとびびった）ので紹介します。 セレクタは右から左に解釈される これは正直知らなくて、結構衝撃でした。 #foo .bar {} これはなんとなく#fooを探して、その中の.barを探している気がしてたんですけど、実は.barを探して、その親要素に#fooがあるかを探すそうです。なので特に#fooが必要なければ .bar {} と書いたほうが高速だということ。 また、以下の様に要素名で指定すると、その要素を全て探します。 #foo a {} これは一度a要素を全て探すので、できればaにclassをふって #foo .anchor {} とするほうが高速のようです。（#fooをとるとより高速） 特にユニバーサルセレクタなどは、 #foo * {} とすると、全ての要素の親要素に対して
少しのコードで実装可能な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
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
法則63 CSSのみでドロップダウン型メニューを作る｜サンプルダウンロード｜Web標準XHTML+CSSデザイン クリエイターが身につけておくべき新・100の法則。 公式サポートサイト
XHTMLソース <ul id="drop_down_menu"> <li><a href="#">メニュー 1</a></li> <li><a href="#">メニュー 2 +</a> <ul> <li><a href="#">メニュー 2-1 +</a> <ul> <li><a href="#">メニュー 2-1-1</a></li> <li><a href="#">メニュー 2-1-2</a></li> <li><a href="#">メニュー 2-1-3</a></li> </ul> </li> <li><a href="#">メニュー 2-2</a></li> <li><a href="#">メニュー 2-3</a></li> </ul> </li> <li><a href="#">メニュー 3 +</a> <ul> <li><a href="#">メニュー 3-1 +</a>
IE・Firefox・Opera・Netscape・Safariで表示可能な半透明CSS/Opacityテクニック - WEBデザイン BLOG
CSS設定でオブジェクトを半透明にできるプロパティがあります。 IEのみのCSSプロパティでしたが、Firefox・Operaでも同じように表示可能にできる方法を説明したサイトがありましたので紹介しておきます。 他にもいくつかのOpacityプロパティを使ったTipsが紹介されていますので、参考に覗いてみてください。 CSS Opacity in Mozilla,IE, and Opera http://www.mandarindesign.com/opacity.html CSS Opacity設定 以下のコードでIE・Firefox・Opera・Netscape・Safariで同等表示がえられます。 filter: alpha(opacity=25); -moz-opacity:0.25; opacity:0.25; IE alpha(opacity=透明度); 100が100％とな
そろそろCSSハックの良し悪しについて考えてみる（書式編） | Blog hamashun.com
関連リンク そろそろCSSハックの良し悪しについて考えてみる（書式編） そろそろCSSハックの良し悪しについて考えてみる（管理編） おまけ付き Re:CSS の用途をわざわざ (X)HTML に限ることはない スターハックに端を発するアレコレ スターハックに端を発するアレコレ まとめ編 フルCSSでサイトを制作する際に、まだまだ避けては通れないのがCSSハックです。 巷には色んなハックが溢れていますが、今回は良いハックと悪いハックを『書式』をキーにして考えてみたいと思います。 なお、ハックはあくまで最終手段であり、使わないにこした事は無いという事を、事前に書いておきたいと思います。 また、一部CSSハックと呼ぶには語弊があるテクニックもありますが、ブラウザ実装の差異に対する技術、といった意味合いで、この記事ではハックで統一しています。 バリデータに通るか否か まず最低条件として、バリデータ
[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">
Learn HTML and CSS: An Absolute Beginner's Guide Article - Part 1
This article was written in 2009 and remains one of our most popular posts. If you’re keen to learn more about HTML and CSS, you may find this recent article on the future of HTML of great interest. So, you’re ready to take the plunge and begin to learn how to build your own web pages and sites? Fantastic! We’ve got quite a ride ahead, so I hope you’re feeling adventurous. This information is an e
第3回 floatプロパティを学習する上での3つのポイント | gihyo.jp
こんにちは、市瀬裕哉と申します。『実践 Web Standards Design』では、floatプロパティとpositionプロパティを利用したレイアウトについての解説を担当しています。私は専門学校にてWebデザインを講義する立場にいるため、書籍に掲載したCSSレイアウトの解説は、私が講義していく中で得られた、生徒達からのさまざまなフィードバックを反映した内容になっています。書籍の発刊からはCSSレイアウトの習得を短期間で実現するための講義に必要な教科書として、実際に現場で利用しています。 本連載（第3回、第4回）では、floatプロパティを利用したレイアウト方法を学習する中で、必要なポイントと基本的なレイアウトの実現方法、その応用までを解説します。 1．ボックスに置き換えて考える CSSで装飾を行う際は、floatプロパティを使う、使わないに限らず、HTML文書の各要素が生成する「ボ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://higash.net/20100731/how_to_make_navi_wo_csssprite.html
IDEA * IDEA