ユーティリティファーストCSSのススメ〜なぜ、セマンティックなclass命名は失敗するのか？｜菱川拓郎
弊社では全ての新規サイトの構築で、CSSフレームワークをtailwindcssに切り替える意思決定を行い、実際に1年くらいが経過しました。「案件によって、tailwindが向いてそうなものは使う」ではなく「全ての案件で使用」です。使えば使うほどメリットの大きさを感じていますが、同時にtailwindcssの世界観が世間の常識とあまりにも違うため、社内のスタッフには少なからず戸惑いがまだ残っているように思います。 そこで、改めて「なぜtailwindcssを使うと効率的にサイトが構築でき、メンテナンス性が上がるのか」反対に「tailwindcssを使う上で、やってはいけないことは何か」についてまとめたいと思います。 tailwindcssとは tailwindcssとは、2020年11月にバージョン2.0がリリースされたばかりの、今注目のCSSフレームワークです。CSSフレームワークといえば
new.css
Write modern websites using only HTML. This site is made from vanilla HTML and the default new.css theme. View Source new.css is a classless CSS framework to write modern websites using only HTML. It's ~4.5kb. It's perfect for- A dead-simple blog Collecting your most used links Making a simple "about me" site Rendering markdown-generated HTML The web was made for semantic HTML—let's start using it
「(HTML) + CSS」のみを使って、今「リアルな電卓」を作ってみた - Qiita
続編を書きました。CSSも大幅改善してるので、一度見てみてください。 【小数点実装】「(HTML +) CSS」のみを使って、今「もっとリアルな電卓」を作ってみた - Qiita 完成品 まずは、CodePenで完成品を紹介します。ボタンを押して計算を試してみてください。 ※ スマホだと反応が悪い場合があります。 See the Pen qiita_calc_last by j5c8k6m8 (@j5c8k6m8) on CodePen. はじめに はじめて、CSS カウンター の存在をはじめて知ったときは驚きました。 テーブルの行番号は (必要であればJavaScriptで動的に) HTMLに記載するしか方法がない と思っていたからです。 Qiitaにも、CSSカウンターのサンプルを載せた良記事があります。 CSS でテーブルに行番号を振る - Qiita CSSで見出しタグに連番をつけ
改行削除するくらいなら gzip したらいいじゃない
CSS や JavaScript ファイルなどを gzip 圧縮して転送量の削減や Web サイト表示速度の向上を実現する方法を解説。既存 Web サイトのソースには一切手を加えない方法でまとめています。おまけでキャッシュ関連の記述もあり。 いや、1バイトの無駄もゆるせねぇんだよとか、難読化したいとかなら別にやればいいんですけど、CSS や JavaScript ファイルの改行やスペースを削除しただけでファイル容量圧縮、読み込み速ーい的なこという人がいるので今さらですが書いてみます。すでに色々なところで書かれてるのでかぶるのは承知の上で。 改行や無駄なスペースなどを削除すること自体が悪いと言ってるわけではありませんのでその辺は誤解ないようにお願いします。ただ、gzip 使って圧縮するのに比べたら、改行削除して削れるファイルサイズなんて微々たるものです。もちろん、両方やれば最大限ファイルサイ
:hover疑似クラスは宣言順序に注意が必要です - Web標準普及プロジェクト
:hover疑似クラスは宣言順序に注意が必要です ユーザの操作によって動的に状態が変わり、その状態を指し示すのがCSSの動的疑似クラスです。 この動的疑似クラスを用いるとJavascript等を用いなくても見た目に動的っぽいページを作ることができるので、 近年多くの人が採用しているように思えます。 しかし、この動的疑似クラスは宣言の順序に注意が必要です 実際に発見された間違い 以下のように宣言したとしましょう。 おそらくこのシートを記述した人はアンカーの上にマウスカーソルがある場合は赤、未訪問なら黒、訪問済なら緑のテキストで表示されることを期待したと思います。 a:hover{ color:red; } a:link{ color:black; } a:visited{ color:green; } 未訪問 訪問済 さて、どのように動作したでしょうか?IE6、Mozilla、Operaと
Pagination Gallery: Examples And Good Practices | Design Showcase | Smashing Magazine
Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it is for users to follow your arguments and get the message you are trying to deliver. On the Web this can be done in a variety of ways. Structure and hierarchy reduce complexity and improve readability. The more organized your articles or web-sites are, the easier it i
インライン要素にwidthとheightを指定して、無視されるとき／されないとき - 以下斜め読んだ内容
update:2008.3.12 ノートにあとで調べるとしておきながら半年以上放置 調べたら「非置換インライン要素」がわかった。以下まとめ。 インライン要素は二種類に分類できる。 「置換要素」 「非置換インライン要素」 この二つの違いはcssでwidth、heightを指定したときに適用される／されないで確認できる。 仕様では・・・、widthとheightが指定できるインライン要素 ５つある。このタイプのインライン要素を「置換要素」と呼ぶ img要素 input要素 object要素 select要素 textarea要素 button要素 仕様では・・・、widthとheightが指定「できない」インライン要素 これらを総称して「非置換インライン要素」と呼ぶ。 「置換要素」以外の全てのインライン要素 span要素とか。 じゃあ実装では置換要素と非置換インライン要素はどうなる？ 仕様通り
CSSだけで画像を上下中央に配置する « SRC Blog -samurai-rok.com-
久しぶりすぎて若干死に掛けたブログですが たまにはWEB屋らしい情報を 「CSSのみで画像を上下中央に配置する方法」 イメージ的にはこんな感じ HTML5やCSS3の話題で盛り上がってる中今更なネタですが 調べてみると中々バッチリとした答えが見つからないので 書いときます 一応仕様としては 1.HTMLを汚さない、余計なタグは書かない 2.ハックを使わない 3.IE6、IE7、IE8、その他モダンブラウザ対応 4.imgはどんなサイズでも囲うdivの上下中央に配置する こんなとこですかね で早速答えは 【HTML】 <div><img src=”images/src.jpg” alt=”img” width=”100″ height=”50″ /></div> 【CSS】 div { width:300px; height:200px; display:
Foundation for Sites | The most advanced responsive front-end frameworks in the world.
Responsive design gets a whole lot faster A Framework for any device, medium, and accessibility. Foundation is a family of responsive front-end frameworks that make it easy to design beautiful responsive websites, apps and emails that look amazing on any device. Foundation is semantic, readable, flexible, and completely customizable. We’re constantly adding new resources and code snippets, includi
Applerの備忘録（仮）: CSS Spriteの流派をまとめる
Yahoo!ニュースがリニューアルしてレスポンスが速くなったそうですが、高速化手法の中に「CSS Sprite」というものがありました。 いくつかある画像を1つの画像に連結し、CSSにて連結画像の中にある目的部位を切り出して表示しようという技術です。サーバに対するリクエストの数を減らす効果があります。 （今日の大嘘 - by edvakf in hatenaもそうですが、Yahoo!ニュースの一部のCSS Sprite画像も余白が多く、「速くする技術使ったよ」というのは説得力に欠けるのですが） 最近よく見るこのヘンテコな技術について調べ、転送の速さだけでなく、利便性を損なわないような形でこの技術を使えないものだろうかと考えました。 ではその成果を生かしてあれこれしようと思いましても当備忘録程度ではサーバにリクエストする画像の数など高が知れています。 そういうわけで、使わない技術は
印刷にも対応！imgタグでCSSスプライトを使う方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの王です(●´⌓`●) 今回は「imgタグでCSSスプライトを使う方法」について説明します。 そもそもCSSスプライトって何ぞや？という方は、下記ページに詳しく説明されているので、見てみてください。 CSSスプライトで画像を円滑に表示させる – Webクリエイターボックス： https://www.webcreatorbox.com/tech/css-sprite/ どうしてわざわざimgでCSSスプライト？ 一番の理由は、imgタグなら印刷したとき印刷物に反映されるからです。 対比画像の、フォーム下部のボタンに注目してください。通常のスプライトでは印刷に反映されないんです。 ユーザ側で印刷の設定をいじればbackground-imageでも印刷できるんですが、やはりデフォルトでできた方が親切ですよね。(●´⌓`●) 便利なテクニックなので、覚えておきましょう！ CS
レスポンシブWebデザインのウェブサイトを半年運営してみて思ったこと
昨年2011年10月に仕事で運営に携わっている大学ウェブサイトでレスポンシブWebデザイン (しかもフル可変グリッドレイアウト) を導入して、はや半年。約6ヶ月間、レスポンシブWebデザイン（RWD）で制作したウェブサイトを運営してみて思ったことをまとめてみました。これからレスポンシブWebデザインを導入したいと考えている方の参考になれば幸いです。 プロジェクトの概要 大学のウェブサイトをリニューアルするにあたり、さまざまな状況や制限などを考慮、また、今後3〜5年を見据えて、レスポンシブWebデザインを取り入れた制作を行いました。大学公式ブログでもリニューアルについて紹介しているので、ぜひそちらもご覧ください。そこで書いたように、以下のような思いもあり、このリニューアルを行いました： 今回、新しい試みを行った背景には、このウェブサイトが「大学のウェブサイト」であることが大きな要因の一つとし
html のコーディングについての質問です。 あることについて、要素（決定された）が複数あり それをhtmlでリスト（ul li）を用い作成しようとしています。…
html のコーディングについての質問です。 あることについて、要素（決定された）が複数あり それをhtmlでリスト（ul li）を用い作成しようとしています。 デザインレイアウトの要件として、縦幅が決まっており、 要素は縦にならび横に折り返していくようにしたいと思っています。 こんな感じ http://gyazo.com/fad2e629917429808a23d27e1ed1b37b 上記URLにあるような見た目をそのまま実現するだけなら、 ３つのulにわけ、floatさせればできるのですが、 htmlのマークアップ上の話では、リストが３つに別れてしまい関連が弱待ってしまいます。 どうか適切な方法をおしえてください。 検証対象ブラウザは、IE7以上、他主要ブラウザ 最新バージョン
Page Inspector — Firefox Source Docs documentation
Overview A Glossary of Common Terms A Quick Guide to Mozilla Applications Getting Started Getting Set Up To Work On The Firefox Codebase Working On Firefox Working on Firefox Bug Handling Firefox User Guide Firefox DevTools User Docs Source Code Documentation Governance Firefox Front-end DOM Editor Style system (CSS) & Layout Graphics Processes, Threads and IPC Firefox DevTools Contributor Docs To
A personal exploration of design, technology, & rebellion.
A personal exploration of design, technology, & rebellion. Design by undesign. Simplicity is polarizing. Simple is hard. Resisting the urge to add more. How to stand out online. The cost of overwhelming uniformity in web design. Back to basics. Going “build–step free” for a handcrafted experience. Portfolio Most recent work. Thanks for visiting, – joshua
罫線(hr要素)の色を変える方法 - Web標準普及プロジェクト
罫線(hr要素)の色を変える方法 hr要素は非常に古くからある要素ですから、誰もが知っているものでしょう。 しかし、この罫線の表示制御は意外と困難なものです。 その原因はhr要素が正体不明のモノである、ということに起因しています。 それでは、各ブラウザのhrの実装状況を検証しながらhr要素の色を変える手法を標準仕様に添ってみていきましょう。 まずHTML4.01の仕様書には視覚系ユーザエージェントは罫線をレンダリングするとだけ書かれていますので、 ブラウザがレンダリングする罫線はそういった専用のオブジェクトである、と言えるかもしれません。 元々HTMLの仕様書には見た目に関する記述は一部の例外を除いてあまり詳しくは記述されていません。 これはHTMLが見た目を制御するためのものではなく、意味を記述するものであるという思想に基づいているためです。 というわけで、このhr要素に対してレンダリン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
今までああ書いてたアレ、これからはこう書けそう 2022 - DevFest Tokyo 2022
flexboxを使ってwebページをレイアウトするざっくりメモ - Qiita
HTML Reference
Components · Twitter Bootstrap