CSSセレクタ20個のおさらい
CSSセレクタって意外と分かっていなかったりするので勉強ついでにまとめてみました。比較的実用的かなと思うものを20個紹介していきます。いい復習になればと思います。 CSSセレクタはスタイルを適用する対象を指定するものです。普段何気なく使っているclassやidなどもセレクタの１つです。 属性や要素といった堅苦しい用語が出てきますので図で簡単に説明します。 私のように基礎から勉強していないと、要素や属性と聞いてもピンときませんが、知ってみるとなんてことはないですね。 また、IEが対応しきれていないCSS3のセレクタもありますが、IE6～8でもCSS3セレクタが利用できるツールの決定版「Selectivizr」 で紹介したようにCSS3セレクタはie対策も容易なのでぜひお試しください。 SelectivizrはCSSを外部ファイルで指定した方がいいのですが、今回のサンプルはCSSを外部ファイル
スマホ対応の新潮流「レスポンシブWebデザイン」とは？ (1/3)
スマートフォンの普及を背景に、「レスポンシブWebデザイン」（Responsive Web Design）という制作手法が海外で注目を集めている。レスポンシブWebデザインとはどのようなアプローチなのか？ 実例で解説する。 ウィンドウサイズを基準にデザインを調整 レスポンシブWebデザインとは、デバイスごとに複数のデザインを用意するのではなく、ブラウザーのウィンドウサイズに合わせてデザインをフレキシブルに調整する制作手法だ。モバイルサイトの制作では、デバイスやスクリーンサイズごとにページを振り分ける方法が一般的だが、レスポンシブWebデザインではHTMLはそのままに、CSS3のメディアクエリーを利用してスタイルシートだけでデザインを変更する。 レスポンシブWebデザインは、2010年5月、米国のイーサン・マルコッテ氏によって提唱され、海外では企業サイトを含む多くのWebサイトで採用されてい
もうfont-familyで悩まないための2行 « CSS « Snippet-Editor.com
body, textarea { font-family: "メイリオ", "ＭＳ Ｐゴシック", sans-serif; } input, select { font-family: Arial, "ＭＳ Ｐゴシック", sans-serif; } この2行のスタイルシートで、Windowsではメイリオフォント（なければMS Pゴシック）、Macではヒラギノ角ゴシック（Firefoxのみ例外時あり）で表示することができます。 実際に適応すると、 Windows 7、またはVistaではメイリオで表示され Windows XPではMS Pゴシックに Windows XPで、且つメイリオを自分でインストールした人はメイリオに Mac OS Xではヒラギノ角ゴに（Firefox以外のMac用ブラウザでは日本語で書かれたフォント指定が無効になるため） と、なります。なお例外として、 MacにMS
たった一行を追加するだけでIE6/7/8をCSS3対応にする -CSS3 PIE
IE6/7/8でもCSS3の角丸、ボックスシャドウ、グラデーション、マルチバックグランドなどを使えるようにするbehaviorスクリプトを紹介します。
| test
mameshibankさん 豆柴日和 amecustomさん アメブロを魅せるブログデザインに変身。ブログ作成方法、カスタマイズ、裏技スキンカスタムCSS編集方法公開！ jade-taさん 脚本家によろしく。 nisishowさん リフォームで地域社会に貢献 ringo417-maさん ★ 月に負け犬 ★ cairさん 広報＆IR担当のオフィシャルブログ shikamaさん 千葉の東京寄りでホームページ制作＆企画・運用中！ saijoさん 経営に終わりはない nina-yuanbeauteさん 芳村仁奈オフィシャルブログ「Nina's Diary」Powered by Ameba frontier-ceo-bossさん フロンティア社長 オフィシャルブログ Powered by Ameba ohtias-ceoさん ソーエネ×オーチアス社長 alfortさん 念ずれば花ひらく「会社経営」
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ブラウザということもあり、世の中の多くのユーザー
[JS]ホバー時に光源が移動するエフェクトがかっこいいスクリプト
マウスのホバー時に、光源がカーソルに追従するエフェクトがかっこいいスクリプトをcoders.meから紹介します。
CSSの実装状況で変わるボックスのデザイン方法
Web制作において、対応しなくてはいけないブラウザの中には、未だしぶとくIE6が残っています。IE6が2001年に登場したことを考えると、もう8年もその時代の「縛り」を(健気に)守りながら作っていることになるんですね。 いま良く使われているCSSのテクニックも、ほとんどはこの「縛り」の範囲内で有効な手法なわけですから、突然2001年にタイムスリップしてサイトを作る事になったとしても、今も昔も変わらない１つの古文書に従えばいいので、きっと活躍できます。 しかしたまらん、流石に疲れた。 ボックスひとつができること CSSでは、文書を構成する各要素は、ボックスという矩形領域に置きかえられ、それらの持つプロパティを操作して装飾します。つまり、ボックスはページデザインを構成する最小単位と言えるわけですね。 そこで今回は、最小単位となる1つのボックスに対して、どのような装飾手法が有効かという点を、CS
My CSS Menu – Search and Browse Better
Search Engine Optimization known as SEO sets major importance for trafficking. It is all about having views, engagement levels and the popularity of your site or content. Before the internet was available to everyone newspapers, magazines and journals continued to rule the importance of a piece of content. With SEO emerging, content rules changed. Google is the most visited site which implies the
5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプル:phpspot開発日誌
A Simple jQuery Stylesheet Switcher 5分で実装可能なページの文字サイズ変更＋クッキーに保存サンプルが公開。 ページで、小・中・大のように文字サイズを変えられるようにしておくと便利ですね。 asahi.com の導入例 実装方法が、微妙に面倒という場合もこのサンプルを使えば簡単に実装できる筈です。 文字サイズに限らず、CSSを丸ごと変えてしまえるので、スタイルを変更して保存ということも簡単に出来ます。 デモページ HTMLは、次のように、href は # ですが、rel属性に付け替えたいcssを指定しておきます。 <ul id="nav"> <li><a href="#" rel="/path/to/style1.css">Default CSS</a></li> <li><a href="#" rel="/path/to/style2.css">Larg
人気ホームページが作れる簡単作成講座 （ホムつく講座）
ホムつくメールマガジン ～プロが明かす～ これが人気ホームページの裏側だ！ （「まぐまぐ」にて殿堂入りしました） ホームページ作成を一人で頑張るのもいいですが、仲間と一緒に頑張りませんか？ 人気ホームページの作り方やホームページ運営者の生の声などの情報を発信していますので、ぜひあなたも購読してみてください。
ウノウラボ Unoh Labs: CSSによるデザインワークと相性のよいHTMLって？
yamazakiです。最近だいぶあたたかくなってきましたね。おかげで日中眠くて仕方ないわけですがいかがお過ごしでしょうか。 ウノウに入る以前も含めてそれなりに長いことHTMLとCSSを書いてきたわけですが、今回は試みに、「だいたいこういうところに気を使われたHTMLだと、CSSでのデザイン適用やレイアウトがやりやすいな」というこれまでの経験則を簡単ですがまとめてみたいと思います。 まあ、このあたりはCSS書く人とHTML書く人の間でちゃんとルールを決めておけばいいだけの話なので、そもそも何の役に立つのか疑問といえば疑問ですが（笑 たとえばユーザがCSSを書いてスキンを作れるようなサービスを作る際、どういったHTMLにするかを決める、みたいな時には少し参考になる、かもしれません。 ID、クラスを適切に割り振って、要素がCSS側から一意に特定できるように たとえばグローバルナビゲーションとカ
Blueprint : CSSのフレームワーク
Raging Thunderbolt. Blueprint 0.4 released blueprintcss - Google Code Blueprintとは、いわゆるひとつのCSS のフレームワークです。ライブラリはbutton.css、grid.css、reset.css、typography.cssの4つのCSSで構成されていて、圧縮版のcompressed.css、ライブラリをインクルードするためのscreen.css、印刷用のprint.cssなどが同封されています。それぞれのCSSはその名の通りで、button.cssはボタン用のCSS、grid.cssはグリッドデザイン用のCSS、reset.cssはいわゆるブラウザのデフォルト設定をリセットするためのCSS、typography.cssはタイポグラフィティ用のCSSです。 わりとシンプルな構成のCSSで、Typograp
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]ブラウザのサイズに合わせてスタイルシートを変更する方法