CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス
2021年、CSSのクロスブラウザ対応の現状、SafariやFirefoxで起こる不具合の対応方法
2021年、CSSのクロスブラウザ対応の現状を紹介します。 Flexboxをはじめ、さまざまなCSSの魅力的な機能が主要ブラウザでサポートされ、CSSを書くことよりもデバッグして修正することの方が多いと嘆いたデベロッパーも減ってきたと思います。 しかし、いまだに修正が必要なCSSの問題点もあります。IEがなくなっても、SafariやFirefoxで起こる不具合の対応方法なども解説します。 The State of CSS Cross-Browser Development by Ahmad Shadeed 先日、MicrosoftからIE11サポート終了のお知らせがあり、ユーザーが世界規模のWordPressもIE11のサポートを終了します。これらの情報でIE11のサポート終了の流れは一気に加速しますね。 参考: Internet Explorer 11 デスクトップアプリは 2022年6
Tampermonkey - Chrome Web Store
Change the web at will with userscripts Enhance your browsing experience with Tampermonkey! 🌐🚀 Tampermonkey is a versatile browser extension with over 🔟 million users that enhances your browsing experience by allowing you to run userscripts on websites. Userscripts are small programs that modify page layouts, add or remove features, and automate actions to personalize your web experience. ###
いま起きているWeb標準の進化、HTML5、CSS3、JavaScript 2.0
日本が大型連休に入る少し前の4月23日、W3CはHTML5の新しいドラフトを公開しました。いつも最新のWeb標準化動向を伝えてくれるWeb標準ブログのエントリ「Last Callに向け進むHTML5 | Web標準Blog | ミツエーリンクス」によると、今回のドラフトから仕様書に大きく手が加わり、Webサイトを作る人向け（制作者に関係する要件）と、Webブラウザを作る人向け（実装要件についての要件）ごとに見やすくなるようなスタイルシートが用意されたとのこと。 これまでも何度かこのブログでは、HTML5やJavaScript 2.0などのWeb標準の動向を書いてきましたが、今回は分かりやすいようにその動きをまとめてみました。 HTMLはHTML4でいったん進化が終了し、それ以後はXHTMLで進化していくことになっていました。しかし実際にはXHTMLは期待されたほど普及せず、XHTMLによっ
文字にドロップシャドウの効果をつける--FirefoxとSafariのCSS対応 - builder by ZDNet Japan
text-shadowプロパティを利用すると、文字に影をつけて表示することができる。これまではSafariが対応しているだけだったが、Firefox 3.1（アルファ版）とOpera 9.5が対応した。 また、Firefox 3.1（アルファ版）は本連載の「ボックスにドロップシャドウの効果をつける」で紹介したbox-shadowプロパティにも対応したので、それについても紹介したい。 文字に影をつけて表示する text-shadowはCSS 2で定義されたプロパティだが、CSS 2.1では削除され、CSS 3のTextで復活している。 text-shadowプロパティで文字に影をつけて表示するには、次のような形で4つの値を指定する。 text-shadow: ［横方向のオフセット］ ［縦方向のオフセット］ ［ぼかしの半径］ ［影の色］ たとえば、赤色の文字にグレーの影をつけると次のように表示
FirefoxとOperaにおける「ルビ」のまとめ。
FirefoxとOperaにおける「ルビ」のまとめ。 当Blogでも何度か触れているし結構有名だと思うのだけど、現在も「Firefoxはルビ非対応」と古い情報を垂れ流しているサイトがたくさんあるので、あらためてここにまとめておく。願わくばこれが検索などでひっかかり、参考にしてくれる人がいる事を願う。 FirefoxでもOperaでもルビを扱うことはできる。ちょこっと設定が必要だったりはするが「RubyはIE独自なので対応していない」なんて古すぎる話はもう勘弁してほしい。 1. Firefoxの場合(Mozilla用もあるらしい) Ruby Extensionをインストールする。 XHTML Ruby Support なお余談であるが、Firefoxはそもそも「足りない機能は拡張機能で」対応するタイプのソフトなので、インストールした素の状態で使えないという批判はまったくの見当違いであろう。
Webページ内の画像を保存させない方法
<p style="background: transparent url(/image/blog/2007-12-07-00.jpg) no-repeat scroll 0%;"><img src="/image/site/clear.gif" alt="紅葉" height="135" width="180" /></p> 通常、画像を指定すべきイメージタグに、ダミーの画像ファイルを指定しておきます。 このダミー画像の実体は 1px X 1px の透過GIFで、これに実際の画像サイズを指定して使用します。 そして、これを段落タグ<p>で囲い、この段落タグのstyle属性で本来の画像を背景画像として指定してやります。 加えて、正しく画像を表示させるために、style属性では背景画像のパス指定だけでなく背景画像の並び方など、一通り他の指定もしておきましょう。（ここでも height, wi
スタイルシートによる崩れない 2カラム 3カラム・レイアウト
このウェブサイトは販売用です！ desperadoes.biz は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、desperadoes.bizが全てとなります。あなたがお探しの内容が見つかることを願っています！
Lucky bag::blog: リモートロールオーバーを CSS だけでやってみる
リモートロールオーバー、つまり、離れた部分の画像をロールオーバーで変化させる動作は、JavaScript を使わずに CSS だけででも可能。今は無くなってるっぽいんだけど、一時、adaptive path でも使われていてたやつを参考に、サンプルを作ってみた。 remote.html サンプルの (X)HTML コードは下記の通り。 <div id="rollover"> <ul> <li id="food"><a href="#"><em>焼き肉</em></a></li> <li id="sneaker"><a href="#"><em>オニツカタイガー ファブレ74/0123</em></a></li> <li id="beer"><a href="#"><em>仕事の後のビール</em></a></li> <li id="coffee"><a href="#"><em>缶コーヒー
WEBサイトのリスト・メニュー。ドロップダウンなどのCSSデザイン：Goodpic
This shop will be powered by Are you the store owner? Log in here
はてなブックマーク日記 - ブックマークの HTML レイアウトの変更検討について
はてなブックマークのブックマーク数が多い順に記事を紹介する「はてなブックマーク数ランキング」。3月11日（月）～3月17日（日）〔2024年3月第3週〕のトップ30です*1。 順位 タイトル 1位 大炎上したスクールフォト業界で勤めてたんだが、もう学校写真のカメラマンは限界かもしれない｜所在ない 2位 高等学校段階までの学習で身につけてほしいこと | 東京大学 3位 文科省の公用文作成の考え方って資料、めちゃくちゃ役立つから論文書く人とか社会人になって社外にメールを送るのが苦手って人は読むのをおすすめする。 - Togetter 4位 桐朋高等学校、78期卒業生の答辞に賛辞やまず 「只者ではない」「感動のあまり泣いて10回読み直した」（1/2 ページ） - ねとらぼ 5位 横浜中華街デートで1日過ごせ｜まりにゃ 6位 謙虚なリーダーのもとで心理的安全性が高まりメンバーが本領発揮しやすくなる
Lucky bag::blog: 印刷用 CSS に必要なこと
拙サイトにおいて印刷用 CSS の需要と必要性がどれほどあるのかは微妙だけど、とりあえずは用意していたりする。んで、作成した当時にこうした方が良いかなってな事がいくつかあったんで、何となく書き残しておく。いや、別にネタがないとかそう言うことじゃ (ry 基本的に紙媒体を対象とするもんだから、通常のスクリーン用 CSS を作成する時とは考え方が変わってくる。 不必要な要素を非表示 ナビゲーションやらサイドカラム、フォームなんかは必要ないんで、display: none; にしてプリント用紙を節約。 フォント関連 ポイントで決め打ちする。拙サイトの場合は、本文 10pt にしてある。後は、本文などの長文系は明朝系のフォントを指定した方が読みやすい。 色は使わずモノクロ 余計な色を使ってインクを使わせないって事と、モノクロプリンタのユーザに対しての配慮。そして、なるべくスミ 100% などのベタ
Ocher - フルCSSサイトの超高速構築
マクロメディア集中ゼミ行って来ました（6/15 パシフィコ横浜）。C2セッションにて「CSS完全攻略!!!3ブラウザ対応のWebサイトのつくり方」を聴講。日本におけるCSS提唱オピニオン・リーダーの一人、アンカーテクノロジー神森氏がプレゼンター。 いやぁー内容濃かったですね。あまりにスピーディーでちょっと置いてかれそうなところもありました。実際の内容はセッション題とはやや趣向が異なり、どちらかというとDreamweaverでのCSS Tipsみたいなノリでした。ま、Macromedia主催なので。その中で、超高速フルCSSサイト構築法が紹介されていました。（*勝手に命名） 作り方大公開（らしい） 画面デザインを領域に分け、名前を決めておく。 見出しレベルを確認。 Dreamweaverへテキストをひたすらコピペし、まず段落<P>を作成しまくる。 見出し付けを行う。 メニュー項目のリスト化。
Bridge Word
This shop will be powered by Are you the store owner? Log in here
はてなダイアリー用CSS作成支援
【はてなダイアリー】用のスタイルシートの表示テストのためのHTMLです。 「サイドバー付きの最新日記画面」「日記編集画面」「キーワード表示画面」「コメント入力画面」「日記の設定画面」の表示を1度にチェックすることができます。 以下のファイルを適当なフォルダにダウンロードしてご利用ください。（ダウンロード用アーカイブは面倒なので作りません） hatena_samle.shtml（テスト用HTML） headdf.css（テスト用ヘッダ色指定：青） 画像 ヘッダタイトル用画像1：alisato.gif ヘッダタイトル用画像2：sample.gif ヘッダタイトル用画像1：test.gif ヘッダタイトル用画像1：dot.gif 日記用サンプル画像：ume_xp.gif キーワード用背景画像：keyword.gif
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
“CSS Grid Layout”をサポートした「Google Chrome 57」が正式版に ～脆弱性も修正
Genkyのメモ帳: Safari 3でフォントを強制的に指定する
CodeWeb: ブラウザ別CSSハック一覧表
CSSの謎
Liquid or Fixed - lucky bag