CSSでダークモード対応、メディアクエリ「prefers-color-scheme」の使用方法と注意点
iPhoneやAndroidでもダークテーマが採用され、ダークモードに対応するWebサイトやスマホアプリが増えてきました。 ほんの数行のCSSのみでダークモードに対応する方法と注意点を紹介します。 Dark mode in a website with CSS by Tom Brow 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 CSSのみで対応するWebサイトのダークモード ダークテーマでお勧めのテキストと背景のカラー ダークテーマではカラーの彩度は下げる ダークモードについてさらなる情報 CSSのみで対応するWebサイトのダークモード まずは、私のサイトhttps://tombrow.com/を見てみてください、ダークモードとライトモードがあります。表示されるモードはデバイスの設定に従います。 https://tombro
画像を一切使わずにCSS3だけでドラえもんを描いてみた！ - 裏技shop DD
昨日の画像を使わずにCSS3だけで作ったサイト「NetaGear」に引き続き、本日もCSS3の記事です。ここ最近の私のマイブームはCSS3で色々やってみることなんですが、CSS3を使えば画像なんて使わずに絵が描けるんじゃない？という疑問を抱き実際に作ってみました！ 今回作成したのは日本人なら誰もが知っている国民的キャラクターの「ドラえもん」です。使うものはXHTML+CSS3だけで一切の画像は使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。 CSS3で作ったドラえもんの完成品！ CSS3 ドラえもん 最近のドラえもんというより、大山のぶ代さんが声をやっていた頃のドラえもんの方が好きなので、そっちをイメージして作りました。注意事項としてはGoogle Chromeとfirefoxで閲覧してください。Operaでは一部CSS3に対
LimeChatのテーマ作成で遊ぶ、WebKitのCSS3
iPhoneの購入と同時にWebKitを触り始めたのですが、CSS Level 2と3の一部の機能を、何の不安も無く使える製作過程に感動しました。ちょっと未来のテクニックを先取りして発見しちゃったような気分にもなりました。 (中略) MacのLimeChatがWebKitを使っていて、CSSで自由にテーマを編集できることを思い出し、ひとつ実験的なものを作ってみました。:after, :beforeプロパティから、WebKitが独自に先攻実装しているCSS3のAnimation、Transition, Transformプロパティ、IE6がくたばれば使える透過PNGを使ったエフェクト、新たな色の値のRGBAプロパティバリューなど、CSSの記述も今まで馴染みの無い不思議な感じになってたりするので、興味のある方はテーマを使ってみて下さい。 Mac OSX LimeChat ver.1.0 用テー
HTMLからCSSのベースを作ってくれるサービス – creamu
テーブルなどをHTMLで組んだ後に、CSSコーディングを簡略化したい。 そんなときにおすすめなのが、『Primer』。HTMLからCSSのベースを作ってくれるサービスです。 HTMLをペーストして、「PRIME IT」ボタンを押すと、idやclass名からCSSのベースを作ってくれます。 プログラマが作った素のHTMLにスタイルを当てていくときなどに使えるかもですね。 インターフェースがシンプルで、アイコンがかわいかったりするので一度見てみてください。 Primer あけましておめでとうございます。今年もよろしくお願いいたします。 今年は初の東京での年明け。浅草に初詣に行ったりおせちを食べたりで楽しい感じです。 勢いでwiiとニュー・スーパーマリオブラザーズを買いました。めちゃおもろいです。
CSSグラデーションのちょっとしたテクニック #2
前回のエントリのような応用するための基本というものではなく、CSSグラデーションはこういう使い方もできるよ的なもので３つ。普通のグラデーションの作り方はcss gradients in Firefox 3.6とかで。#3はない。 以下プレビュー画像のリンク先がデモ・ページになっているのでそちらも参照のこと。もちろん対応ブラウザのFirefox 3.6とSafari 4やChrome 4以降でないと動作デモは確認できない。 Vista風のテカってるボタン ありがちだけど作れたらなかなか便利そうなので挑戦してみたら、意外に簡単だった。実はdoubleなborderが重要で、これが無いとちょっと間抜けな感じになる。コード的には難しいことはなく、上半分にrgb(138, 138, 138)からrgb(102, 102, 102)、下半分にrgb(36, 36, 36)からrgb(0, 0, 0)と
IE6、IE7、IE8におけるCSSの違いまとめ | エンタープライズ | マイコミジャーナル
IE? - IE6, IE7 and IE8 Net Applicationsの報告によれば、2009年9月におけるブラウザシェアはIEが65.71%で過半数のシェアを確保している。バージョンごとにみるとIE6 24.42%、IE7 19.39%、IE8 16.84%となっており、IE6、IE7、IE8のシェアが拮抗しつつあることがわかる。これまでのシェア変動から推測すると、今後数ヶ月の間は3つのバージョンのIEが似たようなシェアを持った期間が続くことになる。IEが第一シェアだといっても、結果的に3つのバージョンに対応する必要がある。 この状況は、特にCSSのサポートという面で厄介な状況を生み出している。IE8はCSS 2.1への高い準拠を実現しているが、IE7はそうではない。IE6はサポートしている要素やプロパティがさらに少ない。またIE7やIE6は対象の要素やプロパティをサポートしてい
【CSS】覚えておいて損はない CSS の定番テクニック BEST 5 | バシャログ。
ネットで検索をすると CSS のテクニックが山ほど公開されていますが、実際に商用サイトの制作をしていて個人的に利用する頻度が高いテクニックの BEST 5 をご紹介します。 ちょっと凝ったデザインのサイトをコーディングする時に、これらのテクニックに助けられることが多いです。どれも覚えておいて損はないものばかりです！ IE6 でも min-height を使う 例えば、異なる高さのブロックを float しつつ底辺のラインを揃えたい時などに、「IE6 が min-height に対応していたら楽なのに！」と思うことがありますが、以下のテクニックを使えば IE6 でも min-height（相当）の適用が可能になります。 [CREAMU]CSSでmin-heightをクロスブラウザにする最も簡単な方法『Easiest cross-browser CSS min-height』 IE6 に mi
便利だがあまり使われないCSSプロパティ5つ | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Craig Buckler氏がSitePointにおいて5 Rarely-Used CSS Propertiesのタイトルで、便利であるにもかかわらずあまり使われないCSSプロパティを5つ取り上げて紹介している。紹介されているCSSプロパティは次のとおり。 text-transformプロパティ: 文字の大文字小文字を切り替える。capitalize(単語の先頭だけ大文字)、lowercase(すべて小文字)、uppercase(すべて大文字)、none(なにもしない) letter-spacingプロパティおよびword-spacingプロパティ: 文字間の空白の幅(letter-spacing)および単語間の空白の幅(word-spacing
WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル:phpspot開発日誌
WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル 2009年04月15日- PHP Tutorials Examples Embedding PHP In CSS WEBデザイナーな方向けのPHP入門によさそうな、CSS内でPHPで使うサンプル。 CSSファイルをPHPとして実行して共通の値を変数にして使うというチュートリアルが公開されています。 PHPは知ってるという方には当たり前すぎるかもしれないですが、WEBデザイナーの方が最初に入門するにはよいかも。 ステップ1 AddType application/x-httpd-php .css .htaccess等に、AddTypeを追記して、.cssファイルがphpとしてサーバ側で処理されるように指定 ステップ2 <link rel="stylesheet" href="style.php" media="
CSSでイケてるデザインサイトリンク集
（ ´∀｀）＜ CSSでイケてるデザインサイトリンク集 Contents About Link Internet Explorer , Mozilla 向き 2ちゃんねら向き 一気に見たい人向き（サムネイル版) 現在このリンク集は、更新していません。その後のスレッドはCSSでイケてるデザインサイトリンク集2を参照してください。 About このページは、にちゃんねるのWeb制作板の「CSS でイケてるデザインサイト」スレッドの 登場サイトをまとめたものです。 選考基準 選考するにあたり以下の基準を満たすものを掲載した。 テーブルでのレイアウトを使用していない 正しい HTML で記述されているもの その他、参考になるもの このサイトについて 問題がある人はメールください リンクは自由に（報告不要） まとめたぞという固定ハンドルが書いてます Netscape 4.x は今すぐ窓から投げ捨てろ
CSSによる段組レイアウトのフレームワーク - lucky bag
CSS による段組レイアウトを実現するには、float プロパティか position プロパティのどちらかを使った方法を選択することになると思うのだけれども、 float 派の自分としては position を使った方法の利点・欠点を知っておかなければと思ったんで、float で作ったのと同じように position でも段組レイアウトを作ったみた。せっかくだから、それらレイアウトをまとめた CSS フレームワークを公開します。 CSS による段組レイアウト ちなみに、各レイアウトの詳細な説明はありません。それについては、いつか何かで解説します。 また、このフレームワークは自由に使って頂いて構いませんが、それによって生じる問題についてのサポートは行いません。 ただし、こういう状況では崩れるよという報告や、逆にこうすると良いよというアドバイスが頂けるのであれば、ぜひお願いします。 という非
AdSense広告をCSSでWeb2.0風にするテンプレート２９種類 - GoogleMania | グーグルの便利な使い方
AdSense広告をCSSでWeb2.0風にするテンプレート２９種類 管理人 @ 6月 26日 04:20pm AdSense Web 2.0 Magazine: 29 Different Google Ads Styleにて、AdSenseのテキスト広告をCSSでWeb2.0風にするテンプレートが、２９種類も公開紹介されています。 これまで、背景に馴染ませるしかなかったテキスト広告が、立派なサイトのデザインの一部になります。 どうやって、デザインを変えるかというと、AdSenseのコードを変更するのは違反ですので、CSSを使ってその周りの背景に手を加えます。 利用方法 次のテンプレート一覧ページで好みのテンプレートを選びます。 Web 2.0 Magazine: 29 Different Google Ads Style 「View Code」リンクをクリックすると、それぞれのテンプレー
栄光ゼミナール；塾選びガイド
栄光ゼミナールとほかの塾との授業料、サービスなどさまざまなポイントについて比較しています。栄光ゼミナールの授業料、サービスなど充実させたコンテンツで作成していますが、やはり一番栄光ゼミナールを知るには、資料請求が一番です。 栄光ゼミナール資料内容 日程と授業料についてのご案内 栄光ゼミナールの夏期講習のご案内 個別指導のご案内。 「今子供たちは・」資料集栄光ブックレット とっておきなＤＶＤ（届くまでお楽しみ） 栄光ゼミナールでは、はじめての方には無料の夏期講習会になります。テキストの教材費は自己負担になりますが、それでも1教科につきたったの2100円。 栄光ゼミナールは特に中学生を対象に向けて圧倒的人気のサービスです。もちろん、それに付随するしっかりとしたサービスがあります。大手の学習塾には、有名講師が授業を100人程度で聞くタイプと少人数制（6人から20人程度）できめ細やかな授業
澳门威尼斯-威尼斯人官网娱乐场
澳门威尼斯是一个不陌生那个的娱乐项目,威尼斯人官网娱乐场提供资讯网站以及其他服务的综合网络游戏服务商,澳门威尼斯拥有的效果比原版已经升级了太多,包括沟通能力、创造性和解决问题的能力以及基本知识等几方面一直保持领先。
今押さえておくべきWeb制作に役立つ37個のブックマークまとめ*ホームページを作る人のネタ帳
WEB制作に役立つWebサービスやツール等、合計37のブックマークまとめ。 とりあえず全て無料をあつめました。 Webサイト作成のお供にFLASH関連 Wink デスクトップのマウスの操作を含めた動きを全てFLASHへ変換するソフト。 途中注意書きを追加したり、要らない部分のカット等も出来ます。完成したムービーに次へボタンをつけたりも出来ますし、ローディングバーもつけれます。 使い方 2.0にバージョンアップ その他使いやすいデスクトップを動画にするキャプチャ マニュアル作成が１０倍楽になるソフトがありました Flashできれいなパイチャートや円グラフを無料で作る いまはやりの丸グラを作るのにフラッシュの知識がなくても簡単に作れるツール。 動画をまとめて配信するフラッシュコンテンツの作成 各種動画サイトの複数映像をまとめて表示するツール。 役立つWEBサービス 白地図、世界地図、日本地図が
サービス終了のお知らせ
平素より「PHPプロ！」をご愛顧いただき、誠にありがとうございます。 2006年より運営してまいりました「PHPプロ！」ですが、サービスの利用状況を鑑みまして、2018年9月25日（火曜日）をもちましてサービスを終了させていただくことになりました。 サービス終了に伴いまして、2018年8月28日（火曜日）を持ちまして、新規会員登録ならびにQ&A掲示板への新たな質問、回答の投稿を停止させていただきます。 なお、ご登録いただいた皆様の個人情報につきましては、サービス終了後、弊社が責任をもって消去いたします。 これまで多くの皆様にご利用をいただきまして、誠にありがとうございました。 サービス終了に伴い、皆様にはご不便をおかけいたしますこと、心よりお詫び申し上げます。 本件に関するお問い合わせはこちらよりお願いいたします。
CSS font-familyプロパティについて一言 - Hatena::agenda
ユーザースタイルシートで、例えばbody{ font-family : "メイリオ" } という意味の指定をした場合、本文のフォントはメイリオになるようにCSSを書こう。これは何も特別な処置を要求するものではない。ウェブデザインの基本を守っていれば既に達成しているはずだ。すなわち「本文に異なるフォントを混在させない」という鉄則である。この場合、font-familyの指定はしないか、あるいはbodyセレクタに一回のみ記述すると良い。意味もなくpに指定して優先度を上げたりしないように注意して欲しい。というのも、ユーザースタイルシートとは何もCSSとは限らない。ブラウザのフォント設定だってユーザースタイルシートを変更する行為だし、そのような利用者はCSSよりも遥かに多いと思う。そしてブラウザのフォント設定がどの程度の優先度を持つかは、そのブラウザによるとしかいえない。CSSを書けるなら、bod
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブデザインのクオリティをアップする7つのポイント | コリス
http://youmos.com/news/css_server_side_pre_processor
WEB制作者のための32個のブックマークまとめ（part2）*ホームページを作る人のネタ帳
